diff --git a/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss b/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss
index a096eead23..55bd47c7cc 100644
--- a/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss
+++ b/DigitalLearningSolutions.Web/Styles/myAccount/notificationPreferences.scss
@@ -28,6 +28,10 @@
     text-align: right;
     padding-left: nhsuk-spacing(3);
   }
+
+  @include govuk-media-query($until: desktop) {
+    margin-bottom: nhsuk-spacing(3);
+  }
 }
 
 .preference-tag {
diff --git a/DigitalLearningSolutions.Web/Views/MyAccount/Index.cshtml b/DigitalLearningSolutions.Web/Views/MyAccount/Index.cshtml
index edb636ebd0..8aef7b6fcf 100644
--- a/DigitalLearningSolutions.Web/Views/MyAccount/Index.cshtml
+++ b/DigitalLearningSolutions.Web/Views/MyAccount/Index.cshtml
@@ -13,138 +13,26 @@
 
 @if (User.IsDelegateOnlyAccount()) {
   ViewData["Application"] = "Learning Portal";
-  @section NavMenuItems {
-    <partial name="../LearningPortal/Shared/_NavMenuItems"/>
-  }
-} else {
-  @section NavMenuItems {
-    <partial name="_NavMenuItems" />
-  }
-}
+@section NavMenuItems {
+  <partial name="../LearningPortal/Shared/_NavMenuItems" />
+}} else {
+@section NavMenuItems {
+  <partial name="_NavMenuItems" />
+}}
 
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
     <h1 class="nhsuk-heading-xl" id="app-page-heading">My account</h1>
 
-    <div class="nhsuk-card">
-      <div class="nhsuk-card__content basic-card-content">
-        <dl class="nhsuk-summary-list">
-          <div class="nhsuk-summary-list__row basic-summary-list__row">
-            <dt class="nhsuk-summary-list__key">
-              Centre:
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              @Model.Centre
-            </dd>
-          </div>
-
-          @if (Model.User?.Length > 0) {
-            <div class="nhsuk-summary-list__row basic-summary-list__row">
-              <dt class="nhsuk-summary-list__key">
-                User:
-              </dt>
-              <dd class="nhsuk-summary-list__value">
-                @Model.User
-              </dd>
-            </div>
-          }
-
-          @if (Model.DelegateNumber?.Length > 0) {
-            <div class="nhsuk-summary-list__row basic-summary-list__row">
-              <dt class="nhsuk-summary-list__key">
-                Delegate id:
-              </dt>
-              <dd class="nhsuk-summary-list__value">
-                @Model.DelegateNumber
-              </dd>
-            </div>
-          }
-        </dl>
-      </div>
-    </div>
-  </div>
-</div>
-<div class="nhsuk-grid-row">
-  <div class="nhsuk-grid-column-full">
-    <details class="nhsuk-details nhsuk-expander bottom-margin-nhsuk-card">
-      <summary class="nhsuk-details__summary">
-        <span class="nhsuk-details__summary-text">
-          My Details
-        </span>
-      </summary>
-      <div class="nhsuk-details__text">
-        <dl class="nhsuk-summary-list details-list-with-button">
-          <div class="nhsuk-summary-list__row details-list-with-button__row">
-            <dt class="nhsuk-summary-list__key">
-              First name:
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              @Model.FirstName
-            </dd>
-          </div>
-
-          <div class="nhsuk-summary-list__row details-list-with-button__row">
-            <dt class="nhsuk-summary-list__key">
-              Last name:
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              @Model.Surname
-            </dd>
-          </div>
-
-          <div class="nhsuk-summary-list__row details-list-with-button__row">
-            <dt class="nhsuk-summary-list__key">
-              Email address:
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              @Model.User
-            </dd>
-          </div>
-
-          @if (Model.DelegateNumber != null) {
-            <div class="nhsuk-summary-list__row details-list-with-button__row">
-              <dt class="nhsuk-summary-list__key">
-                Job group:
-              </dt>
-              <dd class="nhsuk-summary-list__value">
-                @Model.JobGroup
-              </dd>
-            </div>
-
-            foreach (var customField in Model.CustomFields) {
-              <partial name="../Shared/_CustomPromptSummaryListRow" model="@customField"/>
-            }
-          }
-
-          <div class="nhsuk-summary-list__row details-list-with-button__row">
-            <dt class="nhsuk-summary-list__key profile-picture__label">
-              Profile picture (optional):
-            </dt>
-            <dd class="nhsuk-summary-list__value">
-              @if (Model.ProfilePicture != null) {
-                <img class="profile-picture__image" src="data:image;base64,@Convert.ToBase64String(Model.ProfilePicture)" alt="Profile Picture"/>
-              } else {
-                <img class="profile-picture__image" src="@Url.Content("~/images/avatar.png")" alt="Default Profile Picture"/>
-              }
-            </dd>
-          </div>
-        </dl>
-
-        <a class="nhsuk-button left-button-mobile-margin-bottom nhsuk-u-margin-right-2" asp-controller="MyAccount" asp-action="EditDetails" role="button">
-          Edit details
-        </a>
-        <a class="nhsuk-button nhsuk-button--secondary" asp-controller="ChangePassword" asp-action="Index" role="button">
-          Change password
-        </a>
+    <partial name="_AccountSummaryCard" model ="Model"/>
 
-      </div>
-    </details>
+    <partial name="_MyDetailsCard" model="Model"/>
   </div>
 </div>
 <div class="nhsuk-grid-row">
   <div class="nhsuk-grid-column-full">
     <a class="nhsuk-button" asp-controller="NotificationPreferences" asp-action="Index" role="button">
-      Manage notifications
+      View notification preferences
     </a>
   </div>
 </div>
diff --git a/DigitalLearningSolutions.Web/Views/MyAccount/_AccountSummaryCard.cshtml b/DigitalLearningSolutions.Web/Views/MyAccount/_AccountSummaryCard.cshtml
new file mode 100644
index 0000000000..ea89760b80
--- /dev/null
+++ b/DigitalLearningSolutions.Web/Views/MyAccount/_AccountSummaryCard.cshtml
@@ -0,0 +1,39 @@
+@using DigitalLearningSolutions.Web.ViewModels.MyAccount
+@model MyAccountViewModel
+
+<div class="nhsuk-card">
+  <div class="nhsuk-card__content basic-card-content">
+    <dl class="nhsuk-summary-list">
+      <div class="nhsuk-summary-list__row basic-summary-list__row">
+        <dt class="nhsuk-summary-list__key">
+          Centre
+        </dt>
+        <dd class="nhsuk-summary-list__value">
+          @Model.Centre
+        </dd>
+      </div>
+
+      @if (Model.User?.Length > 0) {
+        <div class="nhsuk-summary-list__row basic-summary-list__row">
+          <dt class="nhsuk-summary-list__key">
+            User
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @Model.User
+          </dd>
+        </div>
+      }
+
+      @if (Model.DelegateNumber?.Length > 0) {
+        <div class="nhsuk-summary-list__row basic-summary-list__row">
+          <dt class="nhsuk-summary-list__key">
+            Delegate id
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @Model.DelegateNumber
+          </dd>
+        </div>
+      }
+    </dl>
+  </div>
+</div>
diff --git a/DigitalLearningSolutions.Web/Views/MyAccount/_MyDetailsCard.cshtml b/DigitalLearningSolutions.Web/Views/MyAccount/_MyDetailsCard.cshtml
new file mode 100644
index 0000000000..0a4f73aed8
--- /dev/null
+++ b/DigitalLearningSolutions.Web/Views/MyAccount/_MyDetailsCard.cshtml
@@ -0,0 +1,75 @@
+@using DigitalLearningSolutions.Web.ViewModels.MyAccount
+@model MyAccountViewModel
+
+<div class="nhsuk-card">
+  <div class="nhsuk-card__content nhsuk-u-padding-bottom-0">
+    <h2 class="nhsuk-card__heading">
+      My Details
+    </h2>
+    <div class="nhsuk-card__description">
+      <dl class="nhsuk-summary-list details-list-with-button">
+        <div class="nhsuk-summary-list__row details-list-with-button__row">
+          <dt class="nhsuk-summary-list__key">
+            First name
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @Model.FirstName
+          </dd>
+        </div>
+
+        <div class="nhsuk-summary-list__row details-list-with-button__row">
+          <dt class="nhsuk-summary-list__key">
+            Last name
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @Model.Surname
+          </dd>
+        </div>
+
+        <div class="nhsuk-summary-list__row details-list-with-button__row">
+          <dt class="nhsuk-summary-list__key">
+            Email address
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @Model.User
+          </dd>
+        </div>
+
+        @if (Model.DelegateNumber != null) {
+          <div class="nhsuk-summary-list__row details-list-with-button__row">
+            <dt class="nhsuk-summary-list__key">
+              Job group
+            </dt>
+            <dd class="nhsuk-summary-list__value">
+              @Model.JobGroup
+            </dd>
+          </div>
+
+          foreach (var customField in Model.CustomFields) {
+            <partial name="../Shared/_CustomPromptSummaryListRow" model="@customField" />
+          }
+        }
+
+        <div class="nhsuk-summary-list__row details-list-with-button__row">
+          <dt class="nhsuk-summary-list__key profile-picture__label">
+            Profile picture (optional)
+          </dt>
+          <dd class="nhsuk-summary-list__value">
+            @if (Model.ProfilePicture != null) {
+              <img class="profile-picture__image" src="data:image;base64,@Convert.ToBase64String(Model.ProfilePicture)" alt="Profile Picture" />
+            } else {
+              <img class="profile-picture__image" src="@Url.Content("~/images/avatar.png")" alt="Default Profile Picture" />
+            }
+          </dd>
+        </div>
+      </dl>
+
+      <a class="nhsuk-button left-button-mobile-margin-bottom nhsuk-u-margin-right-2" asp-controller="MyAccount" asp-action="EditDetails" role="button">
+        Edit details
+      </a>
+      <a class="nhsuk-button nhsuk-button--secondary" asp-controller="ChangePassword" asp-action="Index" role="button">
+        Change password
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/DigitalLearningSolutions.Web/Views/NotificationPreferences/_NotificationPreferenceList.cshtml b/DigitalLearningSolutions.Web/Views/NotificationPreferences/_NotificationPreferenceList.cshtml
index 70cda6e48a..f2647b8527 100644
--- a/DigitalLearningSolutions.Web/Views/NotificationPreferences/_NotificationPreferenceList.cshtml
+++ b/DigitalLearningSolutions.Web/Views/NotificationPreferences/_NotificationPreferenceList.cshtml
@@ -11,7 +11,7 @@
         <span class="nhsuk-body-m">@Html.Raw(notification.Description)</span>
       </dt>
       <dd class="nhsuk-grid-column-one-quarter nhsuk-u-margin-left-0 preference-tag-column">
-        <strong class="nhsuk-u-font-size-19 preference-tag nhsuk-tag @(notification.Accepted ? "" : "nhsuk-tag--grey")">
+        <strong class="nhsuk-u-font-size-19 preference-tag">
           @(notification.Accepted ? "Subscribed" : "Unsubscribed")
         </strong>
       </dd>