diff --git a/components/footer.js b/components/footer.js
index 7b283510..a41572b8 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -20,6 +20,18 @@ export default function Footer(props) {
 
     return (
         <footer className="govuk-footer " role="contentinfo">
+            <div class="sharebar" id="sharebar">
+                <div class="sharebar__components container-fluid">
+                    <div class="main__sharebar">
+                        <div
+                            id="sharebar__backtotop"
+                            class="btn--outlined btn--arrow-up"
+                        >
+                            <a href="#page_wrapper">Back to top</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div className="govuk-width-container ">
                 <div className="govuk-footer__meta">
                     <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
diff --git a/components/header.js b/components/header.js
index d4019c35..f1b251fa 100644
--- a/components/header.js
+++ b/components/header.js
@@ -15,7 +15,7 @@ export default function Header({ courseName }) {
             data-module="govuk-header"
         >
             <div className="govuk-header__container govuk-width-container">
-                <div className="govuk-header__logo">
+                <div className="govuk-header__logo govuk-!-width-one-quarter">
                     <a
                         href="/"
                         className="govuk-header__link govuk-header__link--homepage"
@@ -61,7 +61,7 @@ export default function Header({ courseName }) {
                     </a>
                 </div>
 
-                <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
+                <div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
                     <a
                         href="/"
                         onClick={() => {
diff --git a/pages/advancedsearch.js b/pages/advancedsearch.js
index fac8875c..d5db3c90 100644
--- a/pages/advancedsearch.js
+++ b/pages/advancedsearch.js
@@ -28,7 +28,7 @@ const Home = (props) => {
                     {t("search:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
diff --git a/pages/case.js b/pages/case.js
index e4993759..267cd483 100644
--- a/pages/case.js
+++ b/pages/case.js
@@ -29,7 +29,7 @@ const Home = (props) => {
                     {t("case:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
diff --git a/pages/index.js b/pages/index.js
index ae0421f3..b479770b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,3 @@
-
 import _ from "lodash";
 import Head from "next/head";
 import Header from "../components/header";
@@ -16,28 +15,28 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
 const Home = (props) => {
-  const { footerLinks, pages } = props;
-  let { t,lang } = useTranslation();
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
 
-  const router = useRouter();
-  const { locale } = router;
+    const router = useRouter();
+    const { locale } = router;
 
-  return (
-    <div>
-      <Head>
-        <title>{t("common:service-name")}</title>
-      </Head>
-      <div className="">
-        <CookieBanner />
-        <Header courseName="Appeals Casework Portal" />
-        <div className="govuk-width-container">
-          <Banner />
-          <Main pages={pages} />
+    return (
+        <div>
+            <Head>
+                <title>{t("common:service-name")}</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName="Appeals Casework Portal" />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Main pages={pages} />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
         </div>
-        <Footer footerLinks={footerLinks} />
-      </div>
-    </div>
-  );
+    );
 };
 
 // export const getServerSideProps = wrapper.getServerSideProps(
@@ -74,4 +73,4 @@ const Home = (props) => {
 //   };
 // };
 
-export default Home//connect(mapStateToProps)(Home);
+export default Home; //connect(mapStateToProps)(Home);
diff --git a/pages/myportal.js b/pages/myportal.js
index d8109578..d03aa31e 100644
--- a/pages/myportal.js
+++ b/pages/myportal.js
@@ -15,28 +15,30 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
 const Home = (props) => {
-  const { footerLinks, pages } = props;
-  let { t,lang } = useTranslation();
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
 
-  const router = useRouter();
-  const { locale } = router;
+    const router = useRouter();
+    const { locale } = router;
 
-  return (
-    <div>
-      <Head>
-        <title>{t("myportal:page-title")} - {t("common:service-name")}</title>
-      </Head>
-      <div className="">
-        <CookieBanner />
-        <Header courseName={t("common:service-name")} />
-        <div className="govuk-width-container">
-          <Banner />
-          <MyPortal/>
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("myportal: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 />
+                    <MyPortal />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
         </div>
-        <Footer footerLinks={footerLinks} />
-      </div>
-    </div>
-  );
+    );
 };
 
 // export const getServerSideProps = wrapper.getServerSideProps(
@@ -73,5 +75,4 @@ const Home = (props) => {
 //   };
 // };
 
-export default Home//connect(mapStateToProps)(Home);
-
+export default Home; //connect(mapStateToProps)(Home);
diff --git a/pages/searchresults.js b/pages/searchresults.js
index cf5cb147..e71c7fcb 100644
--- a/pages/searchresults.js
+++ b/pages/searchresults.js
@@ -28,7 +28,7 @@ const Home = (props) => {
                     {t("search:page-title")} - {t("common:service-name")}
                 </title>
             </Head>
-            <div className="">
+            <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
diff --git a/styles/sass/patterns/_card.scss b/styles/sass/patterns/_card.scss
index f35650c6..da87b423 100644
--- a/styles/sass/patterns/_card.scss
+++ b/styles/sass/patterns/_card.scss
@@ -1,210 +1,210 @@
 .flex-container {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .card {
-  flex-grow: 0;
-  flex-basis: 100%;
-  margin-bottom: 2em;
+    flex-grow: 0;
+    flex-basis: 100%;
+    margin-bottom: 2em;
 }
 
 @media screen and (min-width: 600px) and (max-width: 900px) {
-  .card {
-    flex-basis: 45.99%;
-    // Every card in the first row needs horizontal margin
-    &:nth-child(2n-1) {
-      margin-right: 3%;
-    }
-    // Every card in the second row needs horizontal margin
-    &:nth-child(2n-2) {
-      margin-left: 3%;
-    }
+    .card {
+        flex-basis: 45.99%;
+        // Every card in the first row needs horizontal margin
+        &:nth-child(2n-1) {
+            margin-right: 3%;
+        }
+        // Every card in the second row needs horizontal margin
+        &:nth-child(2n-2) {
+            margin-left: 3%;
+        }
 
-    &.card-3 {
-      flex-basis: 44%;
-      min-height: 300px;
+        &.card-3 {
+            flex-basis: 44%;
+            min-height: 300px;
 
-      // &:nth-child(3n-1) {
-      //   margin-left: 3%;
-      //   margin-right: 3%;
-      // }
+            // &:nth-child(3n-1) {
+            //   margin-left: 3%;
+            //   margin-right: 3%;
+            // }
+        }
     }
-  }
 }
 
 @media screen and (min-width: 900px) {
-  .card {
-    flex-basis: 46%;
+    .card {
+        flex-basis: 48.2%;
 
-    &:nth-child(2n-2) {
-      margin-left: 3%;
+        &:nth-child(2n-2) {
+            margin-left: 3%;
+        }
+        &.card-3 {
+            flex-basis: 31%;
+            min-height: 300px;
+
+            &:nth-child(2n-2) {
+                margin-left: 0%;
+            }
+
+            &:nth-child(3n-1) {
+                margin-left: 3%;
+                margin-right: 3%;
+            }
+        }
     }
-    &.card-3 {
-      flex-basis: 31%;
-      min-height: 300px;
-
-      &:nth-child(2n-2) {
-        margin-left: 0%;
-      }
-
-      &:nth-child(3n-1) {
-        margin-left: 3%;
-        margin-right: 3%;
-      }
-    }
-  }
 }
 
 html[data-useragent*="MSIE 10.0"] .flex-container {
-  .card {
-    flex-basis: 46%;
-    margin: 3%;
+    .card {
+        flex-basis: 46%;
+        margin: 3%;
 
-    &.card-3 {
-      flex-basis: 31%;
+        &.card-3 {
+            flex-basis: 31%;
+        }
     }
-  }
 }
 
 .card {
-  border: 1px solid $govuk-border-colour; //$panel-colour;
-  font-size: 16px;
-  background-color: govuk-colour("light-grey", $legacy: "grey-4");
+    border: 1px solid $govuk-border-colour; //$panel-colour;
+    font-size: 16px;
+    background-color: govuk-colour("light-grey", $legacy: "grey-4");
 
-  &.inactive {
-    color: $govuk-secondary-text-colour;
-  }
-
-  .card-heading {
-    margin-top: 0;
-  }
-
-  .card-body {
-    //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
-    padding: 12px;
-
-    *:last-child {
-      margin-bottom: 0;
+    &.inactive {
+        color: $govuk-secondary-text-colour;
     }
 
-    &.active {
-      background-color: govuk-colour("light-grey", $legacy: "grey-4");
-      transition: 0.1s ease-in-out;
-
-      .card-heading a {
-        color: $govuk-link-colour;
+    .card-heading {
         margin-top: 0;
-        &:focus {
-          color: govuk-colour("black", $legacy: "black");
-          outline: 3px solid transparent;
-          box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+    }
+
+    .card-body {
+        //border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
+        padding: 12px;
+
+        *:last-child {
+            margin-bottom: 0;
         }
-      }
-    }
 
-    .detail-large {
-      color: $govuk-secondary-text-colour;
-      font-size: 32px;
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
+        &.active {
+            background-color: govuk-colour("light-grey", $legacy: "grey-4");
+            transition: 0.1s ease-in-out;
 
-    .detail {
-      font-weight: 600;
-      margin-bottom: 8px;
-    }
-  }
-
-  .card-action {
-    border-top: 0;
-    padding: 12px;
-
-    a {
-      display: inline;
-      border-bottom: 1px solid #c7dceb;
-      color: $govuk-link-colour;
-      line-height: 1.5em;
-
-      &:link,
-      &:visited {
-        color: $govuk-link-colour;
-      }
-
-      &:hover {
-        text-decoration: none;
-        border-bottom: 1px solid $govuk-link-colour;
-        color: #2e8aca;
-      }
-
-      &:focus {
-        color: govuk-colour("black", $legacy: "black");
-        outline: 3px solid transparent;
-        box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
-      }
-    }
-
-    ul {
-      margin: 0;
-
-      li {
-        margin: 0 0 1em;
-
-        &:last-child {
-          margin-bottom: 0;
+            .card-heading a {
+                color: $govuk-link-colour;
+                margin-top: 0;
+                &:focus {
+                    color: govuk-colour("black", $legacy: "black");
+                    outline: 3px solid transparent;
+                    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+                }
+            }
+        }
+
+        .detail-large {
+            color: $govuk-secondary-text-colour;
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .detail {
+            font-weight: 600;
+            margin-bottom: 8px;
         }
-      }
     }
-  }
-  &.clear {
-    background-color: govuk-colour("white", $legacy: "white");
-    border: none;
-  }
+
+    .card-action {
+        border-top: 0;
+        padding: 12px;
+
+        a {
+            display: inline;
+            border-bottom: 1px solid #c7dceb;
+            color: $govuk-link-colour;
+            line-height: 1.5em;
+
+            &:link,
+            &:visited {
+                color: $govuk-link-colour;
+            }
+
+            &:hover {
+                text-decoration: none;
+                border-bottom: 1px solid $govuk-link-colour;
+                color: #2e8aca;
+            }
+
+            &:focus {
+                color: govuk-colour("black", $legacy: "black");
+                outline: 3px solid transparent;
+                box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
+            }
+        }
+
+        ul {
+            margin: 0;
+
+            li {
+                margin: 0 0 1em;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+    &.clear {
+        background-color: govuk-colour("white", $legacy: "white");
+        border: none;
+    }
 }
 
 .js {
-  .card-body.active {
-    &:hover {
-      //background-color: $govuk-link-colour;
-      color: $govuk-link-colour;
-      cursor: pointer;
-      transition: 0.1s ease-in-out;
-      transition-delay: 0.25s;
+    .card-body.active {
+        &:hover {
+            //background-color: $govuk-link-colour;
+            color: $govuk-link-colour;
+            cursor: pointer;
+            transition: 0.1s ease-in-out;
+            transition-delay: 0.25s;
 
-      .card-heading,
-      p {
-        color: $govuk-link-colour;
-        transition: 0.1s ease-in-out;
-        transition-delay: 0.25s;
-      }
+            .card-heading,
+            p {
+                color: $govuk-link-colour;
+                transition: 0.1s ease-in-out;
+                transition-delay: 0.25s;
+            }
 
-      .card-heading a {
-        color: $govuk-link-colour;
-        transition-delay: 0.25s;
-      }
+            .card-heading a {
+                color: $govuk-link-colour;
+                transition-delay: 0.25s;
+            }
 
-      .detail-large {
-        color: $govuk-link-colour;
-        transition-delay: 0.25s;
-      }
+            .detail-large {
+                color: $govuk-link-colour;
+                transition-delay: 0.25s;
+            }
+        }
+
+        a {
+            text-decoration: none;
+        }
     }
-
-    a {
-      text-decoration: none;
-    }
-  }
 }
 
 #inspectorate-card .card-body {
-  padding-top: 20%;
+    padding-top: 20%;
 }
 
 .card-3 .card-body {
-  display: inline-flex;
-  flex-direction: column;
-  min-height: 30vh;
+    display: inline-flex;
+    flex-direction: column;
+    min-height: 30vh;
 
-  .cardVieAll {
-    margin-top: auto;
-  }
+    .cardVieAll {
+        margin-top: auto;
+    }
 }
diff --git a/styles/sass/styles.scss b/styles/sass/styles.scss
index 9e110cda..ca42222c 100644
--- a/styles/sass/styles.scss
+++ b/styles/sass/styles.scss
@@ -1,6 +1,9 @@
 @import "node_modules/govuk-frontend/govuk/all";
-//@import "prevent-training/_application";
+
+// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
+@import "welshgov/_variables";
 @import "welshgov/_application";
+@import "welshgov/application_old";
 
 // global styles for <a> and <p> tags
 $govuk-global-styles: true;
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
 
 // Components that aren't in Frontend
 @import "components/cookie-banner";
-
-// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
-@import "prevent-training/application";
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 3ea06711..2699f0d7 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -1,11 +1,89 @@
+html {
+    scroll-behavior: smooth;
+}
+
 *,
-.govuk-body-s {
+.govuk-body,
+.govuk-body-s,
+.govuk-body-m,
+.govuk-heading-xl,
+.govuk-heading-l,
+.govuk-heading-m,
+.govuk-header-l,
+.govuk-header-m,
+.govuk-header__link,
+.govuk-button,
+.govuk-label,
+.govuk-select,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+a {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 }
 .govuk-header {
     background-color: #323232;
 }
 
+.govuk-button {
+    background-color: $red;
+
+    &.govuk-button--secondary {
+        background-color: $white;
+        color: $red;
+        border: 1px solid red;
+
+        &:hover {
+            background-color: $red;
+            color: $white;
+        }
+    }
+}
+
+.govuk-button:hover {
+    background-color: $lightred;
+}
+
+.sharebar {
+    background: #e5e5e5;
+    margin: 0;
+    padding: 15px;
+    clear: both;
+}
+
+.sharebar__components.container-fluid {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 60px;
+    padding-right: 20px;
+}
+
+.btn--arrow-up a {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
+    background-size: 18px 13px;
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    padding-left: 36px;
+    margin-top: 1px;
+}
+
+.btn--outlined a {
+    text-decoration: none;
+    color: #323232;
+    background: none;
+    padding: 12px;
+    font-size: 1em;
+    font-weight: bold;
+    display: inline-block;
+    border: 1px solid #999999;
+    line-height: 17px;
+    line-height: 1.0625rem;
+}
+
 .languageSwitch {
     margin-top: 15px;
     text-align: right;
@@ -16,7 +94,18 @@
         top: 10px;
         right: -10px;
     }
+    a.govuk-header__link {
+        background-color: black;
+        padding: 10px;
+    }
+    a.govuk-header__link:focus {
+        background-color: black;
+        padding: 10px;
+        color: #fff;
+        box-shadow: none;
+    }
 }
+
 .header__logo {
     float: left;
     margin: 0;
@@ -31,11 +120,19 @@
     border: none;
 }
 
+.govuk-header__logo {
+    width: 22% !important;
+}
+
 nav {
     margin-top: 60px;
     margin-bottom: 40px;
 }
 
+.govuk-footer {
+    padding-top: 0px;
+}
+
 #footer_logo {
     margin-top: 60px;
     margin-bottom: 40px;
diff --git a/styles/sass/prevent-training/_application.scss b/styles/sass/welshgov/_application_old.scss
similarity index 100%
rename from styles/sass/prevent-training/_application.scss
rename to styles/sass/welshgov/_application_old.scss
diff --git a/styles/sass/welshgov/_variables.scss b/styles/sass/welshgov/_variables.scss
new file mode 100644
index 00000000..34cdd1d6
--- /dev/null
+++ b/styles/sass/welshgov/_variables.scss
@@ -0,0 +1,11 @@
+//gov.wales pallete variables
+
+$white: #ffffff;
+$red: #aa1111;
+$lightred: #d81f1f;
+
+$lightgrey_dark: #cccccc;
+$lightgrey_mid: #dddddd;
+$lightgrey_semi: #e5e5e5;
+$lightgrey_light: #eeeeee;
+$lightgrey_offwhite: #f1f1f1;
