diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index 3dd9a0b3..7b51b60a 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -69,17 +69,26 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
-                    {router.pathname == "/searchresults" ? (
+                    {router.pathname == "/myportal/searchresults" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
                             <li className="govuk-breadcrumbs__list-item">
-                                Search results
+                                {t("common:breadcrumb-search-results")}
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/searchresults" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                {t("common:breadcrumb-search-results")}
                             </li>
                         </>
                     ) : (
@@ -129,7 +138,7 @@ const Breadcrumbs = (props) => {
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -145,7 +154,7 @@ const Breadcrumbs = (props) => {
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -156,12 +165,12 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
-                    {router.pathname == "/case" ? (
+                    {router.pathname == "/myportal/case" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -173,7 +182,7 @@ const Breadcrumbs = (props) => {
                                 </Link>
                             </li>
                             <li className="govuk-breadcrumbs__list-item">
-                                Case Reference:{" "}
+                                {t("common:breadcrumb-case-reference")}:{" "}
                                 {
                                     props.props.currentView.caseReference
                                         .currentReference
@@ -183,12 +192,40 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
-                    {router.pathname == "/representation" ? (
+                    {router.pathname == "/case" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link
+                                    href={
+                                        "/searchresults?q=" +
+                                        props.props.search.searchString
+                                    }
+                                >
+                                    <a
+                                        onClick={() => router.back()}
+                                        className="govuk-breadcrumbs__link"
+                                    >
+                                        {t("common:breadcrumb-search-results")}
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                {t("common:breadcrumb-case-reference")}:{" "}
+                                {
+                                    props.props.currentView.caseReference
+                                        .currentReference
+                                }
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/myportal/representation" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -208,7 +245,7 @@ const Breadcrumbs = (props) => {
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -233,7 +270,7 @@ const Breadcrumbs = (props) => {
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
@@ -316,7 +353,7 @@ const Breadcrumbs = (props) => {
                             <li className="govuk-breadcrumbs__list-item">
                                 <Link href="/myportal">
                                     <a className="govuk-breadcrumbs__link">
-                                        My Portal
+                                        {t("common:breadcrumb-my-portal")}
                                     </a>
                                 </Link>
                             </li>
diff --git a/components/case/summary.js b/components/case/summary.js
index 4d4f9a22..87e7f3e0 100644
--- a/components/case/summary.js
+++ b/components/case/summary.js
@@ -114,11 +114,19 @@ const CaseSummary = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="govuk-button-group">
-                        <Link href="/representation">
-                            <a className="govuk-button">
-                                {t("case:summary-make-representation-label")}
-                            </a>
-                        </Link>
+                        {router.pathname != "/case" ? (
+                            <>
+                                <Link href="/representation">
+                                    <a className="govuk-button">
+                                        {t(
+                                            "case:summary-make-representation-label"
+                                        )}
+                                    </a>
+                                </Link>
+                            </>
+                        ) : (
+                            ""
+                        )}
                         <a
                             onClick={() => router.back()}
                             className="govuk-button govuk-button--secondary"
diff --git a/components/header.js b/components/header.js
index d45e79c5..032ac1b1 100644
--- a/components/header.js
+++ b/components/header.js
@@ -18,6 +18,8 @@ const Header = (props) => {
         "/dns/contact-us",
         "/dns/applications",
         "/dns/application-view",
+        "/searchresults",
+        "/case",
     ];
     const hasContactLink = [
         "/dns",
@@ -150,7 +152,15 @@ const Header = (props) => {
                                         <Link
                                             href={
                                                 locale == "en"
-                                                    ? router.pathname
+                                                    ? router.query.q != null
+                                                        ? router.pathname +
+                                                          "?q=" +
+                                                          router.query.q
+                                                        : router.pathname
+                                                    : router.query.q != null
+                                                    ? router.pathname +
+                                                      "?q=" +
+                                                      router.query.q
                                                     : router.pathname
                                             }
                                             locale={
@@ -213,7 +223,13 @@ const Header = (props) => {
                         <Link
                             href={
                                 locale == "en"
-                                    ? router.pathname
+                                    ? router.query.q != null
+                                        ? router.pathname +
+                                          "?q=" +
+                                          router.query.q
+                                        : router.pathname
+                                    : router.query.q != null
+                                    ? router.pathname + "?q=" + router.query.q
                                     : router.pathname
                             }
                             locale={locale == "en" ? "cy" : "en"}
diff --git a/components/homepage/casesearch.js b/components/homepage/casesearch.js
index 720918f8..9c58d970 100644
--- a/components/homepage/casesearch.js
+++ b/components/homepage/casesearch.js
@@ -2,81 +2,106 @@ import Link from "next/link";
 import { useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { connect } from "react-redux";
+import { Field, reduxForm } from "redux-form";
 
-export default function CaseSearch() {
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    hint1,
+    hint2,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    {hint1}
+                    <br />
+                    <span className="govuk-body-s">
+                        <span className="govuk-!-font-weight-bold">
+                            {hint2}
+                        </span>{" "}
+                        CAS-00009-W8N6W4
+                    </span>
+                </div>
+                <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>{" "}
+                        {error}
+                    </span>
+                )}
+                <input {...input} className={className} name={name} id={id} />
+            </div>
+        </>
+    );
+};
+
+let CaseSearch = (props) => {
     let { t } = useTranslation();
+    const { handleSubmit, pristine, reset, submitting } = props;
 
     const router = useRouter();
     const { locale } = router;
-    const [query, setQuery] = useState("");
-    const [validationError, setValidationError] = useState("");
-    const handleParam = (setValue) => (e) => setValue(e.target.value);
 
-    const basicSearch = (event) => {
-        event.preventDefault();
-
-        if (query == "" || query == null) {
-            setValidationError(true);
-        } else {
-            setValidationError(false);
-            console.log(query);
-            // /searchresults
-
-            router.push({
-                pathname: "/searchresults",
-                query: { q: query },
-            });
-        }
+    const onHandleSubmit = (values) => {
+        router.replace({
+            pathname: "/searchresults",
+            query: { q: values.basicSearch },
+            shallow: true,
+        });
     };
 
     return (
         <div className="card" id="casesearch-card">
-            <form onSubmit={basicSearch}>
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
                 <div className="card-body">
                     <h3 className="heading-small card-heading">
                         {t("home:casesearch-card-title")}
                     </h3>
-                    <div
-                        className={
-                            validationError
-                                ? "govuk-form-group govuk-form-group--error"
-                                : "govuk-form-group "
-                        }
-                    >
-                        <div id="basicSearch-hint" className="govuk-hint ">
-                            {t("home:casesearch-card-search-hint")}:
-                            <br />
-                            <span className="govuk-body-s">
-                                {" "}
-                                <span className="govuk-!-font-weight-bold">
-                                    {t(
-                                        "home:casesearch-card-search-example-label"
-                                    )}
-                                    :
-                                </span>{" "}
-                                CAS-00009-W8N6W4
-                            </span>
-                        </div>
-                        {validationError && (
-                            <span
-                                id="basicSearch-error"
-                                className="govuk-error-message"
-                            >
-                                <span className="govuk-visually-hidden">
-                                    Error:
-                                </span>{" "}
-                                Case reference is required
-                            </span>
-                        )}
-                        <input
-                            className="govuk-input"
-                            id="basicSearch"
-                            name="basicSearch"
-                            type="text"
-                            aria-describedby="basicSearch-hint"
-                            onChange={handleParam(setQuery)}
-                        />
-                    </div>
+
+                    <Field
+                        validate={[
+                            required(
+                                t("home:casesearch-search-validation-required")
+                            ),
+                            minLength(
+                                t("home:casesearch-search-validation-minlength")
+                            ),
+                        ]}
+                        className="govuk-input"
+                        component={RenderTextfield}
+                        id="basicSearch"
+                        name="basicSearch"
+                        type="text"
+                        aria-describedby="basicSearch-hint"
+                        hint1={t("home:casesearch-card-search-hint")}
+                        hint2={t("home:casesearch-card-search-example-label")}
+                    />
+
                     <div className="govuk-form-group">
                         <button type="submit" className="govuk-button">
                             {t("home:casesearch-card-button")}
@@ -89,4 +114,24 @@ export default function CaseSearch() {
             </form>
         </div>
     );
-}
+};
+
+const mapStateToProps = (state) => {
+    return {
+        ...state,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "basicSearchForm",
+        destroyOnUnmount: false,
+    })(CaseSearch)
+);
diff --git a/components/homepage/dns.js b/components/homepage/dns.js
index 3247c710..6d74dbfd 100644
--- a/components/homepage/dns.js
+++ b/components/homepage/dns.js
@@ -9,19 +9,16 @@ export default function Dns() {
         <div className="card" id="casesearch-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
-                    Developments of National Significance
+                    {t("home:dns-card-title")}
                 </h3>
                 <div className="govuk-form-group">
                     <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.
+                        {t("home:dns-card-paragraph")}
                     </p>
                 </div>
                 <div className="govuk-form-group">
                     <button type="submit" className="govuk-button">
-                        View all Applications
+                        {t("home:dns-card-button")}
                     </button>
                 </div>
             </div>
diff --git a/components/homepage/loginSoon.js b/components/homepage/loginSoon.js
new file mode 100644
index 00000000..4cea87e0
--- /dev/null
+++ b/components/homepage/loginSoon.js
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function LoginSoon() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="login-card">
+            <div className="card-body active">
+                <h3 className="heading-small card-heading">
+                    {t("home:login-card-title-temp")}
+                </h3>
+
+                <div className="govuk-form-group govuk-!-margin-top-4">
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-temp-1")}
+                    </p>
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-temp-2")}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/main.js b/components/main.js
index 03cda53b..bf5b2b85 100644
--- a/components/main.js
+++ b/components/main.js
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
 import Login from "./homepage/login";
+import LoginSoon from "./homepage/loginSoon";
 import CaseSearch from "./homepage/casesearch";
 import Inspectorate from "./homepage/inspectorate";
 import CaseComment from "./homepage/casecomment";
@@ -23,10 +24,11 @@ export default function Home({ children, pages }) {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="flex-container grid-row govuk-body ">
-                        <Login />
+                        <LoginSoon />
                         <CaseSearch />
                         <CaseComment />
                         <Dns />
+                        {/* <Login /> */}
                         <Inspectorate />
                     </div>
                 </div>
diff --git a/components/myportal/searchcases.js b/components/myportal/searchcases.js
index 955dbafe..17e53c36 100644
--- a/components/myportal/searchcases.js
+++ b/components/myportal/searchcases.js
@@ -23,7 +23,7 @@ export default function SearchCases() {
             // /searchresults
 
             router.push({
-                pathname: "/searchresults",
+                pathname: "/myportal/searchresults",
                 query: { q: query },
             });
         }
diff --git a/i18n.json b/i18n.json
index c8b814d2..515366f7 100644
--- a/i18n.json
+++ b/i18n.json
@@ -17,6 +17,15 @@
       "/myportal/viewall": [
          "search"
       ],
+      "/myportal/advancedsearch": [
+         "search"
+      ],
+      "/myportal/searchresults": [
+         "search"
+      ],
+      "/myportal/case": [
+         "case"
+      ],
       "/advancedsearch": [
          "search"
       ],
diff --git a/locales/cy/case.json b/locales/cy/case.json
index 3797ca04..d68e1689 100644
--- a/locales/cy/case.json
+++ b/locales/cy/case.json
@@ -1,4 +1,5 @@
 {
+    "page-title": "Cyfeirnod",
     "case-card-title": "Reference: APP/B1415/W/20/3271702",
     "summary-applicant-label": "Apelydd/Ymgeisydd",
     "summary-agent-label": "Asiant",
diff --git a/locales/cy/common.json b/locales/cy/common.json
index 80655000..0ea810b4 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -16,5 +16,8 @@
   "signout-label": "Cofrestrwch allan",
   "back-to-top-link": "Nôl i dop y dudalen",
   "social-bar-share-link": "Rhannu’r dudalen hon",
-  "social-bar-share-via-link": "Rhannu’r dudalen hon ar"
+  "social-bar-share-via-link": "Rhannu’r dudalen hon ar",
+  "breadcrumb-search-results" : "Canlyniadau chwilio",
+  "breadcrumb-my-portal": "Fy mhorth",
+  "breadcrumb-case-reference": "Cyfeirnod Achos"
 }
\ No newline at end of file
diff --git a/locales/cy/home.json b/locales/cy/home.json
index 90d207e4..82425f4e 100644
--- a/locales/cy/home.json
+++ b/locales/cy/home.json
@@ -1,4 +1,7 @@
 {
+    "login-card-title-temp": "W-Log in or Register soon",
+    "login-comingsoon-temp-1": "W-First paragraph says something about being able to create accounts",
+    "login-comingsoon-temp-2": "W-Second paragraph content to go here to explaine something else.",
     "login-card-title": "Mewngofnodi neu cofrestru",
     "login-card-id-label": "Dynodydd Defnyddiwr (ID) Porth y Llywodraeth",
     "login-card-id-hint": "Gallai hyn fod hyd at 12 o gymeriadau.",
@@ -13,9 +16,14 @@
     "casesearch-card-search-example-label": "Enghraifft",
     "casesearch-card-button": "Cyflwyno Chwiliad",
     "casesearch-card-advanced-link": "Fel arall, gallwch chwilio gan ddefnyddio ein meini prawf eraill gyda'n chwiliad uwch",
+    "casesearch-search-validation-required": "Angenrheidiol",
+    "casesearch-search-validation-minlength": "Rhaid bod yn 4 nod neu fwy",
     "casescomment-card-title": "Gwneud sylw ar achos",
     "casescomment-card-paragraph-one": "Chwiliwch am eich achos a chliciwch y botwm 'Gwneud Sylw'. Y ffordd orau o roi sylwadau ar achos cyfredol yw trwy gofrestru gyda ni'n gyntaf gan fod hynny'n gwneud olrhain achosion a chyflwyno sylwadau yn haws.",
     "casescomment-card-paragraph-two": "Yn achos apeliadau deiliaid tai ac apeliadau masnachol, nid yw partïon â buddiant yn gallu gwneud sylwadau yn y cam apelio. Caiff unrhyw sylwadau a wneir yn y cam ymgeisio eu darparu gan yr awdurdod cynllunio lleol ac fe'u hystyrir gan yr Arolygydd.",
     "inspectorate-card-visit-label" : "Ymweld Yr Arolygiaeth Gynllunio",
-    "inspectorate-card-visit-link": "Hafan"
+    "inspectorate-card-visit-link": "Hafan",
+    "dns-card-title":"Datblygiadau o Arwyddocâd Cenedlaethol",
+    "dns-card-paragraph":"Mae Datblygiad o Arwyddocâd Cenedlaethol (DAC) yn fath o gais cynllunio ar gyfer prosiect seilwaith mawr sydd o bwysigrwydd cenedlaethol yng Nghymru. Yn y fan hon, gallwch gael gwybod am geisiadau DAC arfaethedig. Rheolir y safle hwn gan yr Arolygiaeth Gynllunio.",
+    "dns-card-button":"Gweld pob cais"
 }
\ No newline at end of file
diff --git a/locales/en/case.json b/locales/en/case.json
index 93cccc5e..c9f6196c 100644
--- a/locales/en/case.json
+++ b/locales/en/case.json
@@ -1,4 +1,5 @@
 {
+    "page-title": "Reference",
     "case-card-title": "Reference: APP/B1415/W/20/3271702",
     "summary-applicant-label": "Appellant/Applicant",
     "summary-agent-label": "Agent",
diff --git a/locales/en/common.json b/locales/en/common.json
index 26798d7f..0988a675 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -16,5 +16,8 @@
   "signout-label": "Sign out",
   "back-to-top-link": "Back to top",
   "social-bar-share-link": "Share this page",
-  "social-bar-share-via-link": "Share this page via"
+  "social-bar-share-via-link": "Share this page via",
+  "breadcrumb-search-results" : "Search results",
+  "breadcrumb-my-portal": "My portal",
+  "breadcrumb-case-reference": "Case Reference"
 }
\ No newline at end of file
diff --git a/locales/en/home.json b/locales/en/home.json
index 70f60604..fad55c88 100644
--- a/locales/en/home.json
+++ b/locales/en/home.json
@@ -1,4 +1,7 @@
 {
+    "login-card-title-temp": "Log in or Register soon",
+    "login-comingsoon-temp-1": "First paragraph says something about being able to create accounts",
+    "login-comingsoon-temp-2": "Second paragraph content to go here to explaine something else.",
     "login-card-title": "Log in or Register",
     "login-card-id-label": "Government Gateway user ID",
     "login-card-id-hint": "This could be up to 12 characters.",
@@ -9,13 +12,18 @@
     "login-card-forgotten-label": "Forgotten your password or username?",
     "login-card-forgotten-link": "Click here",
     "casesearch-card-title": "Search for a case",
-    "casesearch-card-search-hint": "Search by entering the 7 digit case reference number:",
+    "casesearch-card-search-hint": "Search by entering the 7 digit case reference number",
     "casesearch-card-search-example-label": "Example",
     "casesearch-card-button": "Submit Search",
     "casesearch-card-advanced-link": "Advanced Search",
+    "casesearch-search-validation-required": "Required",
+    "casesearch-search-validation-minlength": "Must be 4 characters or more",
     "casescomment-card-title": "Comment on a case",
     "casescomment-card-paragraph-one": "Simply search for your case and click on the 'Make Representation' button. The best way to comment on an existing case is to register with us first as that makes it easier to track cases and submit comments.",
     "casescomment-card-paragraph-two": "For Householder and Commercial appeals, interested parties are unable to make representations at appeal stage. Any representations made at application stage will be provided by the local planning authority and considered by the Inspector.",
     "inspectorate-card-visit-label" : "Visit the Planning Inspectorate",
-    "inspectorate-card-visit-link": "Home"
+    "inspectorate-card-visit-link": "Home",
+    "dns-card-title":"Developments of National Significance",
+    "dns-card-paragraph":"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.",
+    "dns-card-button":"View all applications"
 }
\ No newline at end of file
diff --git a/pages/case.js b/pages/case.js
index 0d93b4db..11120215 100644
--- a/pages/case.js
+++ b/pages/case.js
@@ -27,7 +27,9 @@ const Home = (props) => {
         <div>
             <Head>
                 <title>
-                    {t("case:page-title")} - {t("common:service-name")}
+                    {t("case:page-title")}:{" "}
+                    {props.currentView.caseReference.currentReference}{" "}
+                    {t("common:service-name")}
                 </title>
             </Head>
             <div id="page_wrapper">
diff --git a/pages/myportal/case.js b/pages/myportal/case.js
new file mode 100644
index 00000000..a54b69bb
--- /dev/null
+++ b/pages/myportal/case.js
@@ -0,0 +1,85 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import CaseSummary from "../../components/case";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import Case from "../../components/case";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("case:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} props={props} />
+                    <Case
+                        myCases={props.myCases.myCases}
+                        searchResultsObj={
+                            props.searchResultsObj.searchResultsObj
+                        }
+                        searchDetailsObj={
+                            props.searchResultsObj.searchDetailsObj
+                        }
+                        myRepresentations={
+                            props.myRepresentations.myRepresentations
+                        }
+                        watchedCases={props.watchedCases.watchedCases}
+                        awaitingSubmission={
+                            props.awaitingSubmission.awaitingSubmission
+                        }
+                        caseReference={
+                            props.currentView.caseReference.currentReference
+                        }
+                        currentType={
+                            props.currentView.caseReference.currentType
+                        }
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    //console.log(state);
+
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+export default connect(mapStateToProps)(Home);
diff --git a/pages/myportal/searchresults.js b/pages/myportal/searchresults.js
new file mode 100644
index 00000000..5b84c276
--- /dev/null
+++ b/pages/myportal/searchresults.js
@@ -0,0 +1,129 @@
+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 jsonpath from "jsonpath";
+import data from "../../data/collections.json";
+
+import { setSearch, getSearchObj } from "../../store/search/action";
+import {
+    setSearchResults,
+    setSearchDetails,
+    getSearchResultsObj,
+} from "../../store/searchOutput/action";
+import { getBasicSearch, getBasicSearchDetails } from "../../actions";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    <SearchResults
+                        searchString={props.search.searchString}
+                        searchResultsObj={props.searchResultsObj}
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            console.log("query-", query);
+            // const [searchResultsObj, searchDetailsObj] = await Promise.all(
+            //     await getBasicSearch(query.q),
+            //     await getBasicSearchDetails(query.d)
+            // );
+
+            const searchResultsObj = await getBasicSearch(query.q);
+            const searchDetailsObj = await getSearchDetails(searchResultsObj);
+            // console.log(searchDetailsObj);
+            store.dispatch(setSearchResults(searchResultsObj));
+            store.dispatch(setSearchDetails(searchDetailsObj));
+            store.dispatch(setSearch(query.q));
+        }
+);
+
+const getFormCollection = (formtype) => {
+    const collectionName = jsonpath.query(
+        data,
+        "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName"
+    );
+    //console.log(collectionName[0]);
+    return collectionName[0];
+};
+
+const getSearchDetails = (searchResultsObj) => {
+    //console.log(searchResultsObj);
+
+    let detailsArr = [];
+    searchResultsObj = searchResultsObj.value;
+    const detailsObj = searchResultsObj.map((searchDetail, index) => {
+        if (searchDetail.pinswg_appealcasetype == null) {
+            console.log(searchDetail.ticketnumber);
+        } else {
+            detailsArr.push(
+                getBasicSearchDetails(
+                    getFormCollection(
+                        "pinswg_" +
+                            searchDetail[
+                                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                            ]
+                                .replace(/[\s\-\+\(\)\,\&\.]/g, "")
+                                .toLowerCase()
+                    ),
+                    searchDetail.ticketnumber
+                )
+            );
+        }
+    });
+    //console.log(detailsArr);
+    return Promise.all(detailsArr);
+};
+
+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)(Home);