diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index 77b5e190..36c914f9 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -50,9 +50,15 @@ const Breadcrumbs = (props) => {
                         </Link>
                     </li>
                     <li className="govuk-breadcrumbs__list-item">
-                        <Link href="/">
+                        <Link
+                            href={
+                                router.pathname.includes("dns") ? "/dns" : "/"
+                            }
+                        >
                             <a className="govuk-breadcrumbs__link">
-                                {t("common:service-name")}
+                                {router.pathname.includes("dns")
+                                    ? "Developments of National Significance"
+                                    : t("common:service-name")}
                             </a>
                         </Link>
                     </li>
@@ -238,6 +244,46 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
+                    {router.pathname == "/dns" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/dns">
+                                    <a className="govuk-breadcrumbs__link">
+                                        Developments of National Significance
+                                    </a>
+                                </Link>
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/dns/application-process" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Guidance
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/dns/help" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Help
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/dns/contact-us" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Contact us
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
                     {!_.isEmpty(slug) ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">
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
index 63e3b895..15f7bd1f 100644
--- a/components/case/representation/index.js
+++ b/components/case/representation/index.js
@@ -1,21 +1,44 @@
 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 {
+    Field,
+    FieldArray,
+    reduxForm,
+    formValueSelector,
+    reset,
+} from "redux-form";
 import { connect } from "react-redux";
 import { useDropzone } from "react-dropzone";
 
-const MakeRepresentation = (props) => {
+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 files = acceptedFiles.map((file) => (
-        <li key={file.path}>
-            {file.path} - {file.size} bytes
-        </li>
-    ));
+    const [clearRepForm, setClearRepForm] = useState(false);
 
     const router = useRouter();
     const { locale } = router;
@@ -27,6 +50,12 @@ const MakeRepresentation = (props) => {
         awaitingSubmission,
         searchResultsObj,
         currentType,
+        currentView,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        setSubmitBack,
+        handleSubmit,
+        setRepresentationSubmitConfirmation,
     } = props;
     const formObj = props.props.form;
     let setCaseQueryObj = props[currentType];
@@ -44,404 +73,186 @@ const MakeRepresentation = (props) => {
 
     casesObj = Object.assign({}, ...casesObj);
 
-    const RenderRepresentationCapacity = ({
-        datafieldname,
-        name,
-        label,
-        id,
-        errorMsg,
-        options,
-        input: { onChange, value },
-        meta: { touched, error },
-        ...custom
-    }) => {
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    <fieldset
-                        className="govuk-fieldset"
-                        aria-describedby={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>
-            </>
-        );
-    };
-
-    const { name, label } = props;
     const capacityOptionsArr = [
         "Appellant",
         "Agent",
-        "Interested Party / Person",
+        "Interested Party/Person",
         "Land Owner",
     ];
-    const required = (value) => (value ? undefined : "Required");
 
-    const RenderPickList = ({
-        datafieldname,
-        name,
-        label,
-        input,
-        meta: { touched, errorStr },
-    }) => {
-        const dropdownObj = ["Final Comments", "Other", "Proof of Evidence"];
+    const appellantApplicantRepresentationArr = [
+        "Other",
+        "Statement",
+        "Statement of common ground",
+        "Written statement of evidence",
+    ];
 
-        return (
-            <div>
-                <select
-                    {...input}
-                    className="govuk-select "
-                    id={name}
-                    name={name}
-                >
-                    <option>Select...</option>
-                    {Object.keys(dropdownObj).map((key, index) => {
-                        return (
-                            <option key={key} value={dropdownObj[key]}>
-                                {dropdownObj[key]}
-                            </option>
-                        );
-                    })}
-                </select>
+    const interestedPersonRepresentationArr = [
+        "Interested Party/Person correspondence",
+    ];
 
-                {touched && errorStr && <span>{errorStr}</span>}
-            </div>
-        );
+    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 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}
-                />
-            </>
-        );
+    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>
-            <div className="govuk-grid-row">
-                <div className="govuk-grid-column-full">
-                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
-                        Make a representation
-                    </h1>
+            {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>
+            )}
 
-                    <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>
-            <div className="vo_hidden">
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <h2 className="govuk-heading-m ">Your details</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"
-                            //validate={[required]}
-                            errorMsg="Select and option"
-                            component={RenderRepresentationCapacity}
-                        />
-                    </div>
-                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <div className="govuk-button-group">
-                            <Link href="/representation">
-                                <a className="govuk-button">Continue</a>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <h2 className="govuk-heading-m ">Representation</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"
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <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">
-                                            <textarea
-                                                className="govuk-input govuk-!-width-two-thirds"
-                                                rows="5"
-                                            />
-                                        </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"
-                                            htmlFfor="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>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <div className="govuk-button-group">
-                            <Link href="/representation">
-                                <a className="govuk-button">Continue</a>
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            {console.log("is submitted", currentView.representationSubmit)}
         </div>
     );
 };
@@ -452,12 +263,27 @@ const mapStateToProps = (state) => {
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
         appealType: state.appealType,
+        currentView: state.currentView,
         //form: state.form,
     };
 };
 
 const mapDispatchToProps = (dispatch) => {
-    return {};
+    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");
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/dns/applications/applicationsIntro.js b/components/dns/applications/applicationsIntro.js
new file mode 100644
index 00000000..e38f235d
--- /dev/null
+++ b/components/dns/applications/applicationsIntro.js
@@ -0,0 +1,44 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+
+const ApplicationIntro = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-one-half">
+                <h1 className="govuk-heading-l">Applications</h1>
+                <p className="govuk-body">The applications listed are those:</p>
+                <ul className="govuk-list govuk-list--bullet">
+                    <li>
+                        Where the developer has advised the Planning
+                        Inspectorate in writing that they intend to submit an
+                        application to us in the future
+                    </li>
+                    <li>
+                        Where an application has already been made to the
+                        Planning Inspectorate and is undergoing the examination
+                        process
+                    </li>
+                    <li>Where a proposal has been decided.</li>
+                </ul>
+                <p>
+                    Use the table below to find applications by stage or type.
+                    Alternatively, use the map by clicking on the markers to go
+                    to the applications page. A list of key events and deadlines
+                    for all applications is available on our calendar page.
+                </p>
+            </div>
+            <div className="govuk-grid-column-one-half">
+                <img src="https://via.placeholder.com/450" />
+            </div>
+        </div>
+    );
+};
+
+export default ApplicationIntro;
diff --git a/components/dns/applications/applicationsList.js b/components/dns/applications/applicationsList.js
new file mode 100644
index 00000000..e830e983
--- /dev/null
+++ b/components/dns/applications/applicationsList.js
@@ -0,0 +1,352 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+
+const ApplicationList = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <>
+            <div className="govuk-grid-row govuk-!-margin-top-9">
+                <div className="govuk-form-group">
+                    <label className="govuk-label-s " htmlFor="sort">
+                        Show{" "}
+                        <select
+                            className="govuk-select"
+                            id="showNo"
+                            name="showNo"
+                        >
+                            <option value="1">10</option>
+                            <option value="1">25</option>
+                            <option value="1">50</option>
+                            <option value="1">100</option>
+                        </select>{" "}
+                        Entries
+                    </label>
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <p className="govuk-body-s">Showing 1 to 10 of 54 entries</p>
+            </div>
+            <div className="govuk-grid-row ">
+                <div className="govuk-grid-column-full govuk-!-padding-left-0 govuk-!-padding-right-0">
+                    <dl className="govuk-summary-list  govuk-!-margin-bottom-0 results">
+                        <div className="govuk-summary-list__row results-headings">
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14 results_wider  govuk-!-padding-left-2">
+                                Reference
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                Application
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                Developer{" "}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                Type
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                Status
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <span className="results-visually-hidden">
+                                    Reference:
+                                </span>
+                                CAS-00009-W8N6W4
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <a href="/application-view">
+                                    <span className="results-visually-hidden">
+                                        Application:{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
+                                </a>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Developer:
+                                </span>
+                                Menter Mon
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Type:
+                                </span>
+                                Energy
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    Status:
+                                </span>
+                                Recommendation
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+            <div className="govuk-grid-row ">
+                <p>
+                    Previous <span>1</span>{" "}
+                    <span>
+                        <Link href="#">2</Link>
+                    </span>{" "}
+                    <span>
+                        <Link href="#">3</Link>
+                    </span>{" "}
+                    <span>
+                        <Link href="#">4</Link>
+                    </span>{" "}
+                    <span>
+                        <Link href="#">5</Link>
+                    </span>{" "}
+                    <Link href="#">Next</Link>
+                </p>
+            </div>
+        </>
+    );
+};
+
+export default ApplicationList;
diff --git a/components/dns/homepage/applicationsForComment.js b/components/dns/homepage/applicationsForComment.js
new file mode 100644
index 00000000..7385adc2
--- /dev/null
+++ b/components/dns/homepage/applicationsForComment.js
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const ApplicationsForComment = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="govuk-panel govuk-grid-column-one-third govuk-panel--open-for-comments">
+            <h2 className="govuk-heading-m">Applications open for comments</h2>
+            <div className="govuk-panel__body">
+                <ul className="govuk-list">
+                    <li>
+                        <a className="govuk-body-s " href="">
+                            Holyhead Harbour Revision Order
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default ApplicationsForComment;
diff --git a/components/dns/homepage/dnsLinks.js b/components/dns/homepage/dnsLinks.js
new file mode 100644
index 00000000..e2712b4e
--- /dev/null
+++ b/components/dns/homepage/dnsLinks.js
@@ -0,0 +1,78 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const DNSLinks = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="govuk-grid-column-two-thirds govuk-panel--dns-links govuk-!-padding-top-5">
+            <div className="govuk-grid-column-one-half">
+                <ul className="govuk-list">
+                    <li>
+                        <h3 className="govuk-heading-l govuk-!-font-size-27">
+                            <Link href="/dns/applications">
+                                <a className="govuk-link govuk-link--no-underline">
+                                    Applications
+                                </a>
+                            </Link>
+                            <p className="govuk-body-s govuk-!-padding-top-2">
+                                A list of all the Developments of National
+                                Significance that have already been submitted
+                                and those we are expecting to be submitted.
+                            </p>
+                        </h3>
+                    </li>
+                    <li>
+                        <h3 className="govuk-heading-l govuk-!-font-size-27">
+                            <Link href="/dns/help">
+                                <a className="govuk-link govuk-link--no-underline">
+                                    Help
+                                </a>
+                            </Link>
+                            <p className="govuk-body-s govuk-!-padding-top-2">
+                                Information about this website.
+                            </p>
+                        </h3>
+                    </li>
+                </ul>
+            </div>
+            <div className="govuk-grid-column-one-half">
+                <ul className="govuk-list">
+                    <li>
+                        <h3 className="govuk-heading-l govuk-!-font-size-27">
+                            <Link href="/dns/application-process">
+                                <a className="govuk-link govuk-link--no-underline ">
+                                    Guidance
+                                </a>
+                            </Link>
+                            <p className="govuk-body-s govuk-!-padding-top-2">
+                                An overview and detailed guidance on the
+                                Developments of National Significance
+                                application process
+                            </p>
+                        </h3>
+                    </li>
+                    <li>
+                        <h3 className="govuk-heading-l govuk-!-font-size-27">
+                            <a
+                                className="govuk-link govuk-link--no-underline"
+                                href="#"
+                            >
+                                Contact us{" "}
+                            </a>
+                            <p className="govuk-body-s govuk-!-padding-top-2">
+                                How to get in touch with The Planning
+                                Inspectorate.
+                            </p>
+                        </h3>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default DNSLinks;
diff --git a/components/dns/homepage/latestApplications.js b/components/dns/homepage/latestApplications.js
new file mode 100644
index 00000000..e17261ec
--- /dev/null
+++ b/components/dns/homepage/latestApplications.js
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const LatestApplications = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="govuk-panel govuk-grid-column-one-third govuk-panel--latest">
+            <h2 className="govuk-heading-m">Latest Applications</h2>
+            <div className="govuk-panel__body">
+                <ul className="govuk-list">
+                    <li className="govuk-body-s ">
+                        <a href="">Brynrhyd Solar Farm</a>
+                    </li>
+                    <li className="govuk-body-s ">
+                        <a href="">Brynrhyd Solar Farm</a>
+                    </li>
+
+                    <li className="govuk-body-s ">
+                        <a href="">Brynrhyd Solar Farm</a>
+                    </li>
+
+                    <li className="govuk-body-s ">
+                        <a href="">Brynrhyd Solar Farm</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default LatestApplications;
diff --git a/components/dns/homepage/titleContent.js b/components/dns/homepage/titleContent.js
new file mode 100644
index 00000000..5950efad
--- /dev/null
+++ b/components/dns/homepage/titleContent.js
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const TitleContent = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="govuk-panel govuk-grid-column-two-thirds govuk-panel--header">
+            <h1 className="govuk-panel__title">
+                Developments of National Significance
+            </h1>
+            <div className="govuk-panel__body">
+                <p className="govuk-body-s">
+                    A Development of National Significance (DNS) is a type of
+                    planning application for a large infrastructure project of
+                    national importance in Wales. Here you can find out about
+                    proposed DNS applications. This site is managed by the
+                    Planning Inspectorate.
+                </p>
+            </div>
+            <div className="govuk-form-group govuk-!-margin-bottom-0">
+                <input
+                    className="govuk-input govuk-!-width-one-half"
+                    id="one-third"
+                    name="one-third"
+                    type="text"
+                    placeholder="Search application name"
+                />
+                <button
+                    className="govuk-button govuk-!-margin-bottom-0"
+                    data-module="govuk-button"
+                >
+                    Search
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default TitleContent;
diff --git a/components/dns/main.js b/components/dns/main.js
new file mode 100644
index 00000000..cc66c90c
--- /dev/null
+++ b/components/dns/main.js
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import TitleContent from "./homepage/titleContent";
+import LatestApplications from "./homepage/latestApplications";
+import DNSLinks from "./homepage/dnsLinks";
+import ApplicationsForComment from "./homepage/applicationsForComment";
+
+export default function Main({ children, pages }) {
+    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 govuk-!-margin-bottom-0">
+                <div className="govuk-grid-column-full govuk-!-padding-bottom-0">
+                    <div className="flex-container grid-row govuk-body govuk-!-margin-bottom-0 ">
+                        <TitleContent />
+                        <LatestApplications />
+                    </div>
+                </div>
+            </div>
+            <div className="govuk-grid-row govuk-!-margin-top-0">
+                <div className="govuk-grid-column-full">
+                    <div className="flex-container grid-row govuk-body ">
+                        <DNSLinks />
+                        <ApplicationsForComment />
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}
diff --git a/components/header.js b/components/header.js
index 182a9fa1..eb9ddf8d 100644
--- a/components/header.js
+++ b/components/header.js
@@ -8,8 +8,23 @@ const Header = (props) => {
 
     const router = useRouter();
     const { locale } = router;
-    const { setLogout } = props;
-    const noSignoutLink = ["/", "/logout"];
+    const { setLogout, serviceName } = props;
+    const noSignoutLink = [
+        "/",
+        "/logout",
+        "/dns",
+        "/dns/application-process",
+        "/dns/help",
+        "/dns/contact-us",
+        "/dns/applications",
+    ];
+    const hasContactLink = [
+        "/dns",
+        "/dns/application-process",
+        "/dns/help",
+        "/dns/contact-us",
+        "/dns/applications",
+    ];
 
     return (
         <header
@@ -72,7 +87,7 @@ const Header = (props) => {
                             className="govuk-header__link
                         govuk-header__link--service-name"
                         >
-                            {t("common:service-name")}
+                            {serviceName || t("common:service-name")}
                         </a>
                     </Link>
                 </div>
@@ -99,6 +114,18 @@ const Header = (props) => {
                             </div>
                             <div className="content">
                                 <ul>
+                                    {hasContactLink.includes(router.pathname) ==
+                                    true ? (
+                                        <li>
+                                            <Link href="/dns/contact-us">
+                                                <a className="govuk-header__link ">
+                                                    Contact
+                                                </a>
+                                            </Link>
+                                        </li>
+                                    ) : (
+                                        ""
+                                    )}
                                     {noSignoutLink.includes(router.pathname) ==
                                     true ? (
                                         ""
@@ -157,6 +184,15 @@ const Header = (props) => {
                         </div>
                     </div>
                     <div className="fullNav">
+                        {hasContactLink.includes(router.pathname) == true ? (
+                            <Link href="/dns/contact-us">
+                                <a className="govuk-header__link govuk-!-margin-right-3">
+                                    Contact
+                                </a>
+                            </Link>
+                        ) : (
+                            ""
+                        )}
                         {noSignoutLink.includes(router.pathname) == true ? (
                             ""
                         ) : (
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/pages/dns/application-process.js b/pages/dns/application-process.js
new file mode 100644
index 00000000..5dc77da4
--- /dev/null
+++ b/pages/dns/application-process.js
@@ -0,0 +1,153 @@
+import _ from "lodash";
+import Link from "next/link";
+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 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 Main from "../../components/dns//main";
+
+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>Developments of National Significance</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header serviceName="Developments of National Significance" />
+
+                <div className="govuk-width-container">
+                    <Banner />
+
+                    <Breadcrumbs slug={appealtypes} />
+                    <main className="govuk-main-wrapper">
+                        <div className="govuk-row">
+                            <h1>Guidance</h1>
+                            <p>
+                                Applications for Developments of National
+                                Significance (DNS) projects are dealt with by
+                                the Planning Inspectorate on behalf of Welsh
+                                Government.
+                            </p>
+
+                            <p>
+                                A DNS is a type of planning application for a
+                                large infrastructure project of national
+                                importance – for example, a wind farm, power
+                                station or reservoir.
+                            </p>
+
+                            <p>
+                                A DNS differs from a normal planning application
+                                in the way that it is decided. Instead of your
+                                Local Planning Authority making the decision, an
+                                Inspector examines the application and makes a
+                                recommendation to the Welsh Minister based on
+                                planning merits and national priorities. The
+                                Minister then decides whether or not to grant
+                                permission.
+                            </p>
+                        </div>
+                        <div className="govuk-row">
+                            <h2>About the process</h2>
+                            <p>
+                                The DNS process is designed to encourage the
+                                applicants on such a scheme to undertake early
+                                engagement with:
+                            </p>
+                            <ul className="govuk-list govuk-list--bullet">
+                                <li>the relevant Local Planning Authority,</li>
+                                <li>local communities,</li>
+                                <li>statutory consultees and</li>
+                                <li>other stakeholders.</li>
+                            </ul>
+                            <p>
+                                Anyone considering a DNS project should contact
+                                the Planning Inspectorate as soon as possible
+                                after a site has been chosen. This will ensure
+                                that as much work can be done to reduce
+                                objections to a scheme as possible before
+                                submission. This in turn allows the formal
+                                application process to be streamlined.
+                            </p>
+                        </div>
+                        <div className="govuk-row">
+                            <h2>Information and guidance</h2>
+                            <p>
+                                There is a{" "}
+                                <a href="https://gov.wales/developments-national-significance-dns-guidance">
+                                    suite of detailed Guidance for the DNS
+                                    process
+                                </a>{" "}
+                                on the Welsh Government site. The{" "}
+                                <a href="https://gov.wales/developments-national-significance-dns-engaging-process">
+                                    DNS Guide for Communities
+                                </a>{" "}
+                                has been written with community groups or
+                                interested parties who are not familiar with the
+                                DNS process in mind.
+                            </p>
+                        </div>
+                        <div className="govuk-row">
+                            <h2>Forms</h2>
+                            <p>
+                                Applicants who wish to submit a request for
+                                Pre-Application Advice, submit formal
+                                notification of intention to submit a DNS
+                                application or submit an application should
+                                contact the Planning Inspectorate:
+                            </p>
+
+                            <p>
+                                e-mail:{" "}
+                                <a href="mailto:dns.wales@planninginspectorate.gov.uk">
+                                    dns.wales@planninginspectorate.gov.uk
+                                </a>
+                            </p>
+
+                            <p>Telephone: 0303 444 5958</p>
+
+                            <p>
+                                Interested parties who wish to make a
+                                Representation on a DNS project that has been
+                                formally accepted by the Planning Inspectorate
+                                can use the Representation form and submit it
+                                via e-mail using the relevant reference number.
+                            </p>
+
+                            <p>
+                                We strongly encourage you to discuss your
+                                application with us in advance of submitting any
+                                of our forms, so that we can ensure that the
+                                resources necessary are in place and
+                                arrangements for the invoicing of fees are in
+                                place. If you do not provide advance notice,
+                                this may delay the handling of your request or
+                                the provision of our advice.
+                            </p>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default Home; //connect(mapStateToProps)(Home);
diff --git a/pages/dns/applications.js b/pages/dns/applications.js
new file mode 100644
index 00000000..6102959a
--- /dev/null
+++ b/pages/dns/applications.js
@@ -0,0 +1,77 @@
+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 SearchResults from "../../components/searchresults";
+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 ApplicationIntro from "../../components/dns/applications/applicationsIntro";
+import ApplicationList from "../../components/dns/applications/applicationsList";
+
+const Applications = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {" "}
+                    Applications - Developments of National Significance
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header serviceName="Developments of National Significance" />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    <main className="govuk-main-wrapper">
+                        <ApplicationIntro />
+                        <ApplicationList />
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            console.log("query-", query);
+            // const searchResultsObj = (await getBasicSearch(query.q)) || null;
+            // store.dispatch(setSearchResults(searchResultsObj));
+            //store.dispatch(setSearch(query.q));
+        }
+);
+
+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,
+    };
+};
+
+export default connect(mapStateToProps)(Applications);
diff --git a/pages/dns/contact-us.js b/pages/dns/contact-us.js
new file mode 100644
index 00000000..574f4779
--- /dev/null
+++ b/pages/dns/contact-us.js
@@ -0,0 +1,130 @@
+import _ from "lodash";
+import Link from "next/link";
+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 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 Main from "../../components/dns/main";
+
+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>
+                    Contact us - Developments of National Significance
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header serviceName="Developments of National Significance" />
+
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    <main className="govuk-main-wrapper">
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds">
+                                <h1 className="govuk-heading-l">Contact us</h1>
+                                <p className="govuk-body">
+                                    We are located in The Welsh Government
+                                    Building, Cathays Park in Cardiff
+                                </p>
+                                <p>
+                                    {" "}
+                                    The Planning Inspectorate
+                                    <br />
+                                    Crown Buildings <br />
+                                    Welsh Government <br />
+                                    Cathays Park
+                                    <br /> Cardiff <br />
+                                    CF10 3NQ
+                                </p>
+                            </div>
+                        </div>
+                        <div className="govuk-row">
+                            <p>
+                                {" "}
+                                If you are contacting us regarding a Development
+                                of National Significance, please use the
+                                following details:
+                            </p>
+                            <p>
+                                Tel: 03034 445 940
+                                <br />
+                                E-mail: dns.wales@planninginspectorate.gov.uk
+                                <br />
+                                Follow us on Twitter @PINSgov
+                            </p>
+                            <p>
+                                Further information about contacting the
+                                Planning Inspectorate customer services can be
+                                viewed on GOV.Wales.
+                            </p>
+                            <p>
+                                The Planning Inspectorate gives advice about
+                                applying for a Development of National
+                                Significance or making representations about an
+                                application (or a proposed application) although
+                                you should note that any advice given does not
+                                constitute legal advice upon which you can rely
+                                and you should obtain your own legal advice and
+                                professional advice as required. We will protect
+                                the privacy of any personal information which
+                                you choose to share with us and we will not hold
+                                the information any longer than is necessary.
+                                See our Privacy notice on GOV.UK.
+                            </p>
+                            <p>
+                                You should note that we have a policy commitment
+                                to openness and transparency and you should not
+                                provide us with confidential or commercial
+                                information which you do not wish to be put in
+                                the public domain.
+                            </p>
+                            <h3>Feedback and complaints</h3>
+                            <p>
+                                The Planning Inspectorate aims to provide the
+                                best possible service for its customers. We try
+                                hard to ensure that everyone is satisfied with
+                                the service they receive. It is inevitable that
+                                there will sometimes be concerns about the
+                                Examination process or the appointed inspector’s
+                                final report. We will carefully consider and
+                                respond to any matters that you wish to raise:
+                                contact details are on GOV.Wales.
+                            </p>
+                            <h3>Press and media</h3>
+                            <p>
+                                If you are a journalist please contact our press
+                                office directly:{" "}
+                            </p>
+                            <p>
+                                Telephone: 0303 444 5004 or 0303 444 5005 <br />
+                                Email: press.office@planninginspectorate.gov.uk
+                            </p>
+                        </div>
+                    </main>
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default Home; //connect(mapStateToProps)(Home);
diff --git a/pages/dns/help.js b/pages/dns/help.js
new file mode 100644
index 00000000..ac3103c9
--- /dev/null
+++ b/pages/dns/help.js
@@ -0,0 +1,125 @@
+import _ from "lodash";
+import Link from "next/link";
+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 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 Main from "../../components/dns/main";
+
+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>Developments of National Significance</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header serviceName="Developments of National Significance" />
+
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    <main className="govuk-main-wrapper">
+                        <div className="govuk-row">
+                            <h1>Help</h1>
+                            <p>
+                                Welcome to the website help page. This section
+                                contains the following:
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Accessibility</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                For information about accessing the website and
+                                help using the site.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">
+                                        Terms and conditions
+                                    </a>
+                                </Link>
+                            </h2>
+                            <p>
+                                Outlines the terms and conditions of using the
+                                site.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Cookies</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                Provides information on cookies and how the
+                                website uses them.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Privacy</a>
+                                </Link>
+                            </h2>
+                            <p>View our Privacy Notice on GOV.UK.</p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Welsh language</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                Our commitment to providing information in Welsh
+                                under the Planning Inspectorate Welsh Language
+                                Scheme.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Sitemap</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                A view of all the pages within the site and the
+                                heirarchy of the site.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Useful links</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                Links to other related websites and documents.
+                            </p>
+                            <h2 className="govuk-heading-s">
+                                <Link href="#">
+                                    <a className="govuk-link">Contact</a>
+                                </Link>
+                            </h2>
+                            <p>
+                                Find out contact details for the Planning
+                                Inspectorate.
+                            </p>
+                        </div>
+                    </main>{" "}
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default Home; //connect(mapStateToProps)(Home);
diff --git a/pages/dns/index.js b/pages/dns/index.js
new file mode 100644
index 00000000..86e8ce54
--- /dev/null
+++ b/pages/dns/index.js
@@ -0,0 +1,42 @@
+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 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 Main from "../../components/dns//main";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <div>
+            <Head>
+                <title>Developments of National Significance</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header serviceName="Developments of National Significance" />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Main />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default Home; //connect(mapStateToProps)(Home);
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 ba9e4252..0dfa5637 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -19,6 +19,8 @@ html {
 .govuk-breadcrumbs__link,
 .govuk-fieldset__legend--s,
 .govuk-input,
+.govuk-panel,
+.govuk-panel__title,
 h1,
 h2,
 h3,
@@ -676,3 +678,69 @@ ul#sharePageLinks.active {
     outline: none;
     transition: border 0.24s ease-in-out;
 }
+
+// dns
+
+.govuk-panel--header {
+    background-color: #8b272d;
+    padding: 15px;
+    color: #fff;
+    text-align: left;
+    margin-bottom: 0px;
+
+    .govuk-panel__title {
+        font-size: 36px;
+    }
+    p {
+        color: #fff;
+    }
+}
+
+.govuk-panel--latest {
+    background-color: #000;
+    color: #fff;
+    padding: 15px;
+    text-align: left;
+    margin-bottom: 0px;
+
+    .govuk-panel__title {
+        font-size: 24px;
+    }
+    .govuk-heading-m {
+        color: #fff;
+    }
+
+    .govuk-panel__body {
+        font-size: initial;
+    }
+
+    .govuk-list li a {
+        color: #fff;
+    }
+}
+
+.govuk-panel--dns-links {
+    background-color: #fff;
+}
+
+.govuk-panel--open-for-comments {
+    background-color: #8b272d;
+    color: #fff;
+    padding: 15px;
+    text-align: left;
+    margin-bottom: 0px;
+    .govuk-panel__title {
+        font-size: 24px;
+    }
+    .govuk-heading-m {
+        color: #fff;
+    }
+
+    .govuk-panel__body {
+        font-size: initial;
+    }
+
+    .govuk-list li a {
+        color: #fff;
+    }
+}