diff --git a/components/header.js b/components/header.js
index f44a131c..a355acc5 100644
--- a/components/header.js
+++ b/components/header.js
@@ -60,7 +60,7 @@ export default function Header({ courseName }) {
                     </Link>
                 </div>
 
-                <div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
+                <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
                     <Link href="/">
                         <a
                             onClick={() => {
@@ -74,32 +74,128 @@ export default function Header({ courseName }) {
                     </Link>
                 </div>
                 <div className="languageSwitch">
-                    {router.path}
-                    <Link
-                        href={
-                            locale == "en" ? router.pathname : router.pathname
-                        }
-                        locale={locale == "en" ? "cy" : "en"}
-                    >
-                        <a
-                            className="govuk-header__link "
-                            lang={locale == "en" ? "cy" : "en"}
-                            hrefLang={locale == "en" ? "cy" : "en"}
-                            data-journey-click={
+                    <div className="mobileNav">
+                        <div className="mobileMenu">
+                            <input
+                                type="radio"
+                                id="mobileMenu-1"
+                                name="mobileMenu-group-1"
+                            />
+                            <label htmlFor="mobileMenu-1">
+                                {t("common:mobile-nav-label")} <i>▼</i>
+                            </label>
+                            <div className="mobileMenu close-mobileMenu">
+                                <input
+                                    type="radio"
+                                    id="mobileMenu-close"
+                                    name="mobileMenu-group-1"
+                                />
+                                <label htmlFor="mobileMenu-close">
+                                    {t("common:mobile-nav-label")} <i>▲</i>
+                                </label>
+                            </div>
+                            <div className="content">
+                                <ul>
+                                    {router.pathname != "/" ? (
+                                        <li>
+                                            <Link href="/">
+                                                <a
+                                                    onClick={() => {
+                                                        window.localStorage.clear();
+                                                    }}
+                                                    className="govuk-header__link "
+                                                >
+                                                    {t("common:signout-label")}
+                                                </a>
+                                            </Link>
+                                        </li>
+                                    ) : (
+                                        ""
+                                    )}
+
+                                    <li>
+                                        <Link
+                                            href={
+                                                locale == "en"
+                                                    ? router.pathname
+                                                    : router.pathname
+                                            }
+                                            locale={
+                                                locale == "en" ? "cy" : "en"
+                                            }
+                                        >
+                                            <a
+                                                className="govuk-header__link "
+                                                lang={
+                                                    locale == "en" ? "cy" : "en"
+                                                }
+                                                hrefLang={
+                                                    locale == "en" ? "cy" : "en"
+                                                }
+                                                data-journey-click={
+                                                    locale == "en"
+                                                        ? "link - click:lang-select:Cymraeg"
+                                                        : "link - click:lang-select:English"
+                                                }
+                                                aria-label={
+                                                    locale == "en"
+                                                        ? "Dewiswch Cymraeg"
+                                                        : "Select English"
+                                                }
+                                            >
+                                                {" "}
+                                                {t("common:available-in")}
+                                            </a>
+                                        </Link>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="fullNav">
+                        {router.pathname != "/" ? (
+                            <Link href="/">
+                                <a
+                                    onClick={() => {
+                                        window.localStorage.clear();
+                                    }}
+                                    className="govuk-header__link govuk-!-margin-right-3"
+                                >
+                                    {t("common:signout-label")}
+                                </a>
+                            </Link>
+                        ) : (
+                            ""
+                        )}
+
+                        <Link
+                            href={
                                 locale == "en"
-                                    ? "link - click:lang-select:Cymraeg"
-                                    : "link - click:lang-select:English"
-                            }
-                            aria-label={
-                                locale == "en"
-                                    ? "Dewiswch Cymraeg"
-                                    : "Select English"
+                                    ? router.pathname
+                                    : router.pathname
                             }
+                            locale={locale == "en" ? "cy" : "en"}
                         >
-                            {" "}
-                            {t("common:available-in")}
-                        </a>
-                    </Link>
+                            <a
+                                className="govuk-header__link "
+                                lang={locale == "en" ? "cy" : "en"}
+                                hrefLang={locale == "en" ? "cy" : "en"}
+                                data-journey-click={
+                                    locale == "en"
+                                        ? "link - click:lang-select:Cymraeg"
+                                        : "link - click:lang-select:English"
+                                }
+                                aria-label={
+                                    locale == "en"
+                                        ? "Dewiswch Cymraeg"
+                                        : "Select English"
+                                }
+                            >
+                                {" "}
+                                {t("common:available-in")}
+                            </a>
+                        </Link>
+                    </div>
                 </div>
             </div>
         </header>
diff --git a/locales/cy/common.json b/locales/cy/common.json
index 34319560..426633bf 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -11,5 +11,7 @@
   "footer-privacy-link": "Rhybudd Preifatrwydd",
   "footer-cookies-link": "Chwcis",
   "footer-accessibility-link": "Hygyrchedd",
-  "footer-feedback-link": "Adborth"
+  "footer-feedback-link": "Adborth",
+  "mobile-nav-label": "Dewislen",
+  "signout-label": "Cofrestrwch allan"
 }
\ No newline at end of file
diff --git a/locales/en/common.json b/locales/en/common.json
index 80b95101..46fa8d35 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -11,5 +11,7 @@
   "footer-privacy-link": "Privacy Notice",
   "footer-cookies-link": "Cookies",
   "footer-accessibility-link": "Accessibility",
-  "footer-feedback-link": "Feedback"
+  "footer-feedback-link": "Feedback",
+  "mobile-nav-label": "Menu",
+  "signout-label": "Sign out"
 }
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index b0211858..9f52ce25 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -106,6 +106,109 @@ a {
         color: #fff;
         box-shadow: none;
     }
+
+    //nav drop down
+
+    .mobileNav {
+        display: none;
+
+        @media screen and (max-width: 900px) {
+            display: block;
+            position: relative;
+            clear: both;
+            margin-top: 40px;
+            margin-right: -10px;
+
+            .mobileMenu {
+                float: left;
+                position: relative;
+            }
+            .mobileMenu label {
+                background-color: black;
+                padding: 10px 30px;
+                cursor: pointer;
+                text-align: center;
+                display: block;
+                position: relative;
+            }
+            .mobileMenu label i {
+                font-style: normal;
+                font-size: 10px;
+                color: white;
+                position: absolute;
+                right: 18px;
+                top: 13px;
+            }
+            .mobileMenu [type="radio"] {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+                margin: 0;
+                z-index: 1;
+            }
+
+            .content {
+                position: absolute;
+                top: 100%;
+                opacity: 0;
+                background: #333;
+                color: white;
+                padding: 20px 10px;
+                width: 140px;
+                right: 0px;
+            }
+            .content ul {
+                margin: 0;
+                padding: 0;
+                list-style: none;
+            }
+            .content a {
+                color: white;
+                display: block;
+                white-space: nowrap;
+                text-decoration: none;
+                border-bottom: 1px solid #999;
+                padding: 5px;
+                padding: 20px 10px;
+
+                &.govuk-header__link {
+                    background-color: inherit;
+                }
+            }
+            [type="radio"]:checked ~ label {
+                z-index: 2;
+            }
+            [type="radio"]:checked ~ label ~ .content {
+                z-index: 1;
+                opacity: 1;
+            }
+
+            .close-mobileMenu {
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+            .close-mobileMenu label {
+                background: #333;
+                color: white;
+            }
+            [type="radio"]:checked ~ label ~ .close-mobileMenu {
+                z-index: 3;
+            }
+        }
+    }
+    .fullNav {
+        display: block;
+        @media screen and (max-width: 900px) {
+            display: none;
+        }
+    }
 }
 
 .header__logo {
@@ -126,10 +229,10 @@ a {
     width: 22% !important;
 }
 
-nav {
-    // margin-top: 60px;
-    // margin-bottom: 40px;
-}
+// nav {
+//     // margin-top: 60px;
+//     // margin-bottom: 40px;
+// }
 
 .govuk-footer {
     padding-top: 0px;