diff --git a/www/docs/js/main.js b/www/docs/js/main.js
index 6dd194a9f0..467482ce81 100644
--- a/www/docs/js/main.js
+++ b/www/docs/js/main.js
@@ -423,6 +423,77 @@ function wrap_error($message){
   return '<div class="donate-form__error-wrapper"><p class="donate-form__error">' + $message + '</p></div>';
 }
 
+function createAccordion(triggerSelector, contentSelector) {
+  var triggers = document.querySelectorAll(triggerSelector);
+  
+  triggers.forEach(function(trigger) {
+    var content = document.querySelector(trigger.getAttribute('href'));
+
+    var openAccordion = function() {
+      content.style.maxHeight = content.scrollHeight + "px"; // Dynamically calculate height
+      content.setAttribute('aria-hidden', 'false');
+      trigger.setAttribute('aria-expanded', 'true');
+    };
+
+    var closeAccordion = function() {
+      content.style.maxHeight = null; // Collapse
+      content.setAttribute('aria-hidden', 'true');
+      trigger.setAttribute('aria-expanded', 'false');
+    };
+
+    trigger.addEventListener('click', function(e) {
+      e.preventDefault();
+      
+      if (content.style.maxHeight) {
+        closeAccordion();
+      } else {
+        openAccordion();
+      }
+    });
+    
+    // Accessibility
+    trigger.setAttribute('aria-controls', content.getAttribute('id'));
+    trigger.setAttribute('aria-expanded', 'false');
+    content.setAttribute('aria-hidden', 'true');
+    content.style.maxHeight = null;
+  });
+}
+
+// Initialize accordion when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+  createAccordion('.accordion-button', '.accordion-content');
+});
+
+// Create alert form
+$(document).ready(function() {
+  let currentStep = 0;
+  let steps = $(".alert-step");
+
+  // Show the first step
+  $(steps[currentStep]).show();
+
+  // Focus management: Set focus to the first input on each step change
+  function focusFirstInput(stepIndex) {
+    $(steps[stepIndex]).find('input, button').first().focus();
+  }
+
+  // Next button click
+  $(".next").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep++;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+
+  // Previous button click
+  $(".prev").click(function() {
+    $(steps[currentStep]).hide();
+    currentStep--;
+    $(steps[currentStep]).show();
+    focusFirstInput(currentStep); // Set focus to the first input of the new step
+  });
+});
+
 $(function() {
 
   $('#how-often-annually').click(function() {
diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index d356a39cd9..5fe8d4a056 100644
--- a/www/docs/style/sass/app.scss
+++ b/www/docs/style/sass/app.scss
@@ -62,10 +62,10 @@
 @import url(https://fonts.googleapis.com/css2?family=Manrope:wght@700&family=Merriweather:wght@400;700&display=swap);
 /* Foundation Icons v 3.0 MIT License */
 @font-face {
-  font-family: "foundation-icons";
-  src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
-  font-weight: normal;
-  font-style: normal;
+    font-family: "foundation-icons";
+    src: url("/style/foundation-icons/foundation-icons.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
 }
 
 .fi-social-facebook:before,
@@ -75,17 +75,23 @@
 .fi-megaphone:before,
 .fi-pound:before,
 .fi-magnifying-glass:before,
-.fi-heart:before
+.fi-heart:before,
+.fi-plus:before,
+.fi-pause:before,
+.fi-trash:before,
+.fi-page-edit:before,
+.fi-x:before,
+.fi-save:before
 {
-  font-family: "foundation-icons";
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  text-decoration: inherit;
+    font-family: "foundation-icons";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    text-decoration: inherit;
 }
 
 // https://github.com/zurb/foundation-icon-fonts/blob/master/_foundation-icons.scss
@@ -97,6 +103,12 @@
 .fi-pound:before {content: "\f19a"}
 .fi-magnifying-glass:before {content: "\f16c"}
 .fi-heart:before { content: "\f159"; }
+.fi-plus:before { content: "\f199"; }
+.fi-pause:before { content: "\f191"; }
+.fi-trash:before { content: "\f204"; }
+.fi-page-edit:before { content: "\f184"; }
+.fi-x:before { content: "\f217"; }
+.fi-save:before { content: "\f1ac"; }
 
 html,
 body {
@@ -129,13 +141,13 @@ h3 {
 }
 
 .pull-right {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: right;
         margin-left: 1em;
     }
 }
 .pull-left {
-     @media (min-width: $medium-screen) {
+    @media (min-width: $medium-screen) {
         float: left;
         margin-left: 1em;
     }
@@ -166,12 +178,12 @@ ul {
 a {
     overflow-wrap: break-word;
     word-wrap: break-word;
-
+    
     -webkit-hyphens: auto;
-       -moz-hyphens: auto;
-        -ms-hyphens: auto;
-            hyphens: auto;
-
+    -moz-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    
     color: $links;
 }
 
@@ -198,7 +210,7 @@ a:focus {
         // for .button elements!!
         vertical-align: -0.4em;
     }
-
+    
     &.tertiary {
         @include button-style($bg: $links);
     }
@@ -231,6 +243,7 @@ form {
 
 @import "parts/panels";
 @import "parts/promo-banner";
+@import "parts/accordion";
 
 @import "pages/mp";
 @import "pages/topics";
diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss
new file mode 100644
index 0000000000..8499959cc9
--- /dev/null
+++ b/www/docs/style/sass/parts/_accordion.scss
@@ -0,0 +1,236 @@
+.label {
+    background-color: #fff;
+    color: $primary-color;
+    padding: 0.25rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+
+    &--primary-light {
+        background-color: $primary-color-200;
+        color: $body-font-color;
+    }
+
+    &--red {
+        background-color: lighten($color-red, 40%);
+        color: $body-font-color;
+    }
+}
+
+.alert-page-header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: end;
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+}
+
+.accordion {
+    margin-top: 2rem;
+}
+
+.accordion-button {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+    padding: 10px;
+    font-size: 1.2em;
+    cursor: pointer;
+    border: none;
+
+    &[aria-expanded="true"] {
+        background-color: $primary-color-200;
+        color: $body-font-color;
+        & + .accordion-content{
+            max-height: 1000px;
+            transition: max-height 0.3s ease;
+        }
+
+        i {
+            transform: rotate(45deg);
+        }
+    }
+
+}
+
+.accordion-button--content {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    gap: 0.75rem;
+
+    .content-subtitle {
+        @extend .label;
+    }
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+
+    .alert-controller-wrapper {
+        margin-bottom: 2rem;
+        button {
+            margin-bottom: 0;
+            span {
+                margin-right: 0.2rem;
+            }
+        }
+
+        button.alert {
+            background-color: $color-red;
+            color: #fff;
+        }
+    }
+
+    .add-remove-tool {
+        display: flex;
+        flex-direction: row;
+
+        input {
+            margin: 0;
+            height: 40px;
+        }
+
+        button {
+            max-width: 100px;
+            height: 40px;
+        }
+    }
+
+    label {
+        font-size: inherit;
+        color: inherit;
+    }
+
+    select {
+        max-width: 350px;
+    }
+}
+
+.keyword-list {
+    ul {
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-left: 0;
+
+        li {
+            font-weight: bold;
+            i {
+                margin-left: 0.25rem;
+            }
+        }
+
+    }
+}
+
+.heading-with-bold-word {
+    font-weight: 400;
+
+    span {
+        font-weight: bold;
+    }
+}
+
+.alert-meta-info {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 4rem;
+    row-gap: 1rem;
+    align-items: center;
+
+    dt { 
+        color: $light-text;
+        font-size: 0.9rem;
+    }
+}
+
+button {
+    i {
+        margin-left: 0.25rem;
+    }
+}
+
+.alert-page-section {
+    margin-bottom: 3rem;
+}
+
+.alert-page-subsection {
+    margin-bottom: 2rem;
+
+    .alert-page-subsection--subtitle {
+        margin-bottom: 0.5rem;
+    }
+
+}
+
+.button.red {
+    background-color: $color-red;
+    color: #fff;
+
+    &:hover {
+        background-color: darken($color-red, 15%);
+    }
+}
+
+// FORM
+.alert-step {
+    display: none;
+}
+
+.alert-step.active {
+    display: block;
+}
+
+#create-alert-form {
+    label {
+        color: $body-font-color;
+        font-size: 1rem;
+        margin-bottom: 1rem;
+    }
+    input[type="text"], select {
+        max-width: 400px;
+        height: 40px;
+        border-color: $body-font-color;
+    }
+
+    fieldset {
+        column-count: 2;
+    }
+}
+  
+
+.mockup-internal-comment {
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    font-size: 0.8rem;
+    color: rgb(114, 8, 8);
+    background-color: rgb(230, 170, 170);
+    padding: 1rem;
+    border-radius: 1rem;
+    h4 {
+        color: inherit;
+    }
+    margin-bottom: 3rem;
+}
+
+.mockup-divider {
+    margin-top: 30rem;
+}
+
+.fi-x {
+    display: none;
+}
+
+.display-none {
+    display:none !important;
+}
diff --git a/www/includes/easyparliament/templates/html/alert/alert-mockup.php b/www/includes/easyparliament/templates/html/alert/alert-mockup.php
new file mode 100644
index 0000000000..3585825cbf
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/alert-mockup.php
@@ -0,0 +1,531 @@
+<!-- TODO for me: For this mockup I'm not worrying to much for the hierarchy of the headings -->
+<div class="mockup-internal-comment">
+  <h4>/alert</h4>
+  Initial view for alert page. This assumes the user has already created some group alerts
+</div>
+
+<div class="alert-page-header">
+  <h2>Keywords alerts</h2>
+  <!-- Go to Create alert page -->
+  <a class="button" href="/create-alert-page">
+    Create new alert
+    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+  </a>
+</div>
+
+<!-- The groups alerts should be sorted by default from most recent mention to oldest one -->
+<!-- Future functionality: The groups alerts can be sorted alphabetically-->
+
+<div class="accordion">
+  <div class="accordion-item">
+    <button class="accordion-button" href="#accordion-content-1" aria-expanded="false">
+      <div class="accordion-button--content">
+        <!-- This is the name of the alert group name -->
+        <span class="content-title">Mental Health</span>
+        <!-- display mentions for the whole group this week. If there are no mention then it doesn't get display -->
+        <span class="content-subtitle">30 mentions this week</span>
+      </div>
+      <i aria-hidden="true" role="img" class="fi-plus"></i>
+    </button>
+    <div id="accordion-content-1" class="accordion-content" aria-hidden="true" role="img">
+      <div class="accordion-content-header">
+        <div class="alert-controller-wrapper">
+          <button class="button small alert-edit-button">
+            <span>Edit alert</span>
+            <i aria-hidden="true" class="fi-page-edit"></i>
+          </button>
+          <button class="button small display-none">Discard changes</button>
+          <button class="button small">
+            <span>Suspend alert</span>
+            <i aria-hidden="true" class="fi-pause"></i>
+          </button>
+          <button class="button small red">
+            <span>Delete alert</span>
+            <i aria-hidden="true" class="fi-trash"></i>
+          </button>
+        </div>
+        <dl class="alert-meta-info">
+            <!-- display mentions for the whole group this week. If there are no mention then it doesn't get display -->
+             <div class="content-header-item">
+               <dt>This week</dt>
+               <dd>30 mentions</dd>
+             </div>
+            <!-- Endif -->
+  
+            <div class="content-header-item">
+              <dt>Date of last mention</dt>
+              <dd>30 May 2024</dd>
+            </div>
+  
+            <!-- Takes you to the result page of this query -->
+            <a href="" class="button small">See results for this alert</a>
+          </dl>
+      </div>
+  
+      <hr>
+  
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="heading-with-bold-word">Keywords <span class="bold">included</span> in this alert:</h3>
+        <ul>
+          <li class="label label--primary-light">Keyword 1 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 2 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 3 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+  
+      <div class="keyword-list excluded-keywords alert-page-subsection">
+        <h3 class="heading-with-bold-word">Keywords <span class="bold">excluded</span> in this alert:</h3>
+        <ul>
+          <li class="label label--red">Keyword 1 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 2 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 3 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+  
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="display-none"><label for="sections">Which section should this alert apply to?</label></h3>
+        <select name="sections" id="sections" class="display-none">
+          <option value="uk-parliament">All sections</option>
+          <option value="uk-parliament">UK Parliament</option>
+          <option value="scottish-parliament">Scottish Parliament</option>
+        </select>
+        <h3 class="heading-with-bold-word">Which <span class="bold">section</span> should this alert apply to:</h3>
+        <ul>
+          <li class="label label--red">All sections
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+      </div>
+  
+      <!-- Only to be displayed if there is a person in this query -->
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="heading-with-bold-word">This alert applies to the following <span class="bold">representative</span></h3>
+        <ul>
+          <li class="label label--primary-light">Keir Starmer 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+  
+      <button class="display-none" style="margin: -1rem 0rem 3rem;">Save changes</button>
+      <button class="display-none" style="margin: -1rem 0rem 3rem;">Discard changes</button>
+  
+    </div>
+  </div>
+  
+  <div class="accordion-item">
+    <button class="accordion-button" href="#accordion-content-2" aria-expanded="false">
+      <span>Group name 2</span>
+      <i aria-hidden="true" role="img" class="fi-plus"></i>
+    </button>
+    <div id="accordion-content-2" class="accordion-content" aria-hidden="true" role="img">
+      <p>ero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque n</p>
+    </div>
+  </div>
+  
+  <div class="accordion-item" style="margin-bottom: 7rem;">
+    <button class="accordion-button" href="#accordion-content-3" aria-expanded="false">
+      <span>Group name 3</span>
+      <i aria-hidden="true" role="img" class="fi-plus"></i>
+    </button>
+    <div id="accordion-content-3" class="accordion-content" aria-hidden="true" role="img">
+      <p>ero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque n</p>
+    </div>
+  </div>
+</div>
+
+<div class="mockup-divider"></div>
+
+<div class="mockup-internal-comment">
+  <h4>/alert</h4>
+  <ul>
+    <li>View if the user doesn't have any keyword alert created.</li>
+    <li>It has an alert for Keir Starmer</li>
+    <li>When pressing the "Create alert" button for an MP it will just take us EG. https://www.theyworkforyou.com/alert/?alertsearch=Keir+Starmer</li>
+  </ul>
+</div>
+
+<div class="alert-page-header alert-page-section">
+  <div>
+    <h2>Keywords alerts</h2>
+    <p>You haven't created any keyword alert.</p>
+  </div>
+  <button class="button">
+    Create new alert
+    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+  </button>
+</div>
+
+<hr>
+
+<div class="alert-page-section">
+  <div class="alert-page-header">
+    <?php if ($current_mp) { ?>
+      <h2><?= gettext('MP alerts') ?></h2>
+      <ul class="alerts-manage__list">
+          <li>
+              <?= sprintf(gettext('You are not subscribed to an alert for your current MP, %s'), $current_mp->full_name()) ?>.
+              <form action="<?= $actionurl ?>" method="post">
+                  <input type="hidden" name="t" value="<?=_htmlspecialchars($token)?>">
+                  <input type="hidden" name="pid" value="<?= $current_mp->person_id() ?>">
+                  <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
+              </form>
+          </li>
+      </ul>
+    <?php } ?>
+  </div>
+
+  <div class="alert-page-subsection">
+    <h3 class="alert-page-subsection--heading">Keir Starmer</h3>
+
+    <p class="alert-page-subsection--subtitle">Alert when Keir Starmer <strong>speaks</strong></p>
+    <div>
+      <button class="button small">
+        <span>Suspend alert</span>
+        <i aria-hidden="true" class="fi-pause"></i>
+      </button>
+      <button class="button small red">
+        <span>Delete alert</span>
+        <i aria-hidden="true" class="fi-trash"></i>
+      </button>
+    </div>
+
+    <p class="alert-page-subsection--subtitle">Alert when Keir Starmer is <strong>mentioned</strong></p>
+    <button class="button small">
+      Create new alert
+      <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+    </button>
+  </div>
+
+</div>
+
+<div class="mockup-divider"></div>
+
+<div class="mockup-internal-comment">
+  <h4>/alert</h4>
+  <p>The previous block assumes the user doesn't have an alert for his own MP. The next block assumes the user has already an alert for his own MP</p>
+</div>
+
+<div class="alert-page-header alert-page-section">
+  <div>
+    <h2>Keywords alerts</h2>
+    <p>You haven't created any keyword alert.</p>
+  </div>
+  <button class="button">
+    Create new alert
+    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+  </button>
+</div>
+
+<hr>
+
+<div class="alert-page-section">
+  <div class="alert-page-header">
+    <h2>MP Alerts</h2>
+  </div>
+
+  <!-- Replace Janne Doe with users' MP -->
+  <div class="alert-page-subsection">
+    <h3 class="alert-page-subsection--heading">Your MP ﹒ Janne Doe</h3>
+
+    <p class="alert-page-subsection--subtitle">Alert when Janne Doe <strong>speaks</strong></p>
+    <div>
+      <button class="button small">
+        <span>Suspend alert</span>
+        <i aria-hidden="true" class="fi-pause"></i>
+      </button>
+      <button class="button small red">
+        <span>Delete alert</span>
+        <i aria-hidden="true" class="fi-trash"></i>
+      </button>
+    </div>
+
+    <p class="alert-page-subsection--subtitle">Alert when Janne Doe is <strong>mentioned</strong></p>
+    <button class="button small">
+      Create new alert
+      <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+    </button>
+  </div>
+
+  <div class="alert-page-subsection">
+    <h3 class="alert-page-subsection--heading">Keir Starmer</h3>
+
+    <p class="alert-page-subsection--subtitle">Alert when Keir Starmer <strong>speaks</strong></p>
+    <div>
+      <button class="button small">
+        <span>Suspend alert</span>
+        <i aria-hidden="true" class="fi-pause"></i>
+      </button>
+      <button class="button small red">
+        <span>Delete alert</span>
+        <i aria-hidden="true" class="fi-trash"></i>
+      </button>
+    </div>
+
+    <p class="alert-page-subsection--subtitle">Alert when Keir Starmer is <strong>mentioned</strong></p>
+    <button class="button small">
+      Create new alert
+      <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+    </button>
+  </div>
+
+</div>
+
+<div class="mockup-divider"></div>
+
+<div class="mockup-internal-comment">
+  <h4>/create-alert</h4>
+  <p>The edit and create alert for keywords has the same workflow.</p>
+  <p>I'm assuming we will move to a new page, I just called "/create-alert"</p>
+</div>
+
+<div class="alert-page-section">
+  <!-- If the the user is editing then -> Edit alert -->
+   <!-- When the editing process is different to the Create process, where the Editing Process will skip the step 1, so the result will be the mergeing of step 1 and step 2 and then continue as normal -->
+  <div class="alert-creation-steps">
+  
+  </div>
+  
+  <h1>Create Alert</h1>
+
+  <form id="create-alert-form">
+    <!-- Step 1 -->
+    <div class="alert-step" id="step1" role="region" aria-labelledby="step1-header">
+      <h2 id="step1-header">Create alert name</h2>
+      <label for="name">Name this alert</label>
+      <input type="text" id="name" name="name" placeholder="Eg. Freedom of Information" aria-required="true">
+      <button type="button" class="next" aria-label="Go to Step 2">Next</button>
+    </div>
+
+    <!-- Step 2 -->
+    <div class="alert-step" id="step2" role="region" aria-labelledby="step2-header" style="display: none;">
+      <h2 id="step2-header">Define alert</h2>
+
+      <div class="alert-page-subsection">
+        <label for="keyword">What <strong>keyword</strong> do you want to <strong>include</strong> in this alert:</label>
+        <input type="text" id="keyword" name="keyword" aria-required="true" placeholder="Eg. 'Freedom of Information', 'FOI'">
+      </div>
+
+      <div class="alert-page-subsection">
+        <label for="keyword">What <strong>keyword</strong> do you want to <strong>exclude</strong> in this alert:</label>
+        <input type="text" id="keyword" name="keyword" aria-required="true" placeholder="Eg. 'Freedom of Information', 'FOI'">
+      </div>
+
+      <div class="alert-page-subsection">
+        <label for="select-section">Which <strong>section</strong> should this alert apply to?</label>
+        <select name="pets" id="select-section">
+          <option value="">All sections</option>
+          <option value="uk-parliament">UK Parliament</option>
+        </select>
+      </div>
+
+      <div class="alert-page-subsection">
+        <label for="representative">Do you want this alert to apply to a certain <strong>representative</strong>?</label>
+        <input type="text" id="representative" name="representative" aria-required="true">
+      </div>
+
+      <button type="button" class="prev" aria-label="Go back to Step 1">Previous</button>
+      <button type="button" class="next" aria-label="Go to Step 3">Next</button>
+    </div>
+
+    <!-- Step 3 -->
+    <div class="alert-step" id="step3" role="region" aria-labelledby="step3-header" style="display: none;">
+      <h2 id="step3-header">Adding some extras</h2>
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="heading-with-bold-word">Current keywords in this alert:</h3>
+        <ul>
+          <li class="label label--primary-light">Keyword 1 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 2 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 3 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+
+      <p>We have also found the following related terms. Pick the ones you'd like to include alert?</p>
+      
+      <fieldset>
+        <legend>Related Terms</legend>
+        <div>
+          <label><input type="checkbox" name="related_terms" value="term1"> Term 1</label><br>
+          <label><input type="checkbox" name="related_terms" value="term2"> Term 2</label><br>
+          <label><input type="checkbox" name="related_terms" value="term3"> Term 3</label><br>
+          <label><input type="checkbox" name="related_terms" value="term4"> Term 4</label><br>
+          <label><input type="checkbox" name="related_terms" value="term5"> Term 5</label><br>
+          <label><input type="checkbox" id="add-all"> Add all related terms</label>
+        </div>
+      </fieldset>
+
+      <div class="mockup-internal-comment">
+        <p>The section below will display the numbers for the previous step query</p>
+      </div>
+
+      <dl class="alert-meta-info">
+        <!-- display mentions for the whole group this week. If there are no mention then it doesn't get display -->
+          <div class="content-header-item">
+            <dt>This week</dt>
+            <dd>30 mentions</dd>
+          </div>
+        <!-- Endif -->
+
+        <div class="content-header-item">
+          <dt>Date of last mention</dt>
+          <dd>30 May 2024</dd>
+        </div>
+
+        <!-- Takes you to the result page of this query -->
+        <a href="" class="button small">See results for this alert</a>
+      </dl>
+
+      <button type="button" class="prev" aria-label="Go back to Step 2">Previous</button>
+      <button type="button" class="next" aria-label="Go to Step 4">Next</button>
+    </div>
+
+    <!-- Step 4 (Review) -->
+    <div class="alert-step" id="step4" role="region" aria-labelledby="step4-header" style="display: none;">
+      <h2 id="step4-header">Review Your Alert</h2>
+
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="heading-with-bold-word">Keywords <span class="bold">included</span> in this alert:</h3>
+        <ul>
+          <li class="label label--primary-light">Keyword 1 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 2 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 3 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--primary-light">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+  
+      <div class="keyword-list excluded-keywords alert-page-subsection">
+        <h3 class="heading-with-bold-word">Keywords <span class="bold">excluded</span> in this alert:</h3>
+        <ul>
+          <li class="label label--red">Keyword 1 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 2 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 3 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+          <li class="label label--red">Keyword 4 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+  
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="display-none"><label for="sections">Which section should this alert apply to?</label></h3>
+        <select name="sections" id="sections" class="display-none">
+          <option value="uk-parliament">All sections</option>
+          <option value="uk-parliament">UK Parliament</option>
+          <option value="scottish-parliament">Scottish Parliament</option>
+        </select>
+        <h3 class="heading-with-bold-word">Which <span class="bold">section</span> should this alert apply to:</h3>
+        <ul>
+          <li class="label label--red">All sections
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+      </div>
+  
+      <!-- Only to be displayed if there is a person in this query -->
+      <div class="keyword-list alert-page-subsection">
+        <h3 class="heading-with-bold-word">This alert applies to the following <span class="bold">representative</span></h3>
+        <ul>
+          <li class="label label--primary-light">Keir Starmer 
+            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+        </ul>
+        <div class="add-remove-tool display-none">
+          <input type="text" placeholder="e.g.'freedom of information'">
+          <button type="submit" class="prefix">add</button>
+        </div>
+      </div>
+
+      <div class="mockup-internal-comment">
+        <p>The section below will display the numbers for the previous step query</p>
+      </div>
+
+      <dl class="alert-meta-info">
+        <!-- display mentions for the whole group this week. If there are no mention then it doesn't get display -->
+          <div class="content-header-item">
+            <dt>This week</dt>
+            <dd>30 mentions</dd>
+          </div>
+        <!-- Endif -->
+
+        <div class="content-header-item">
+          <dt>Date of last mention</dt>
+          <dd>30 May 2024</dd>
+        </div>
+
+        <!-- Takes you to the result page of this query -->
+        <a href="" class="button small">See results for this alert</a>
+      </dl>
+
+      <button type="button" class="prev" aria-label="Go back to Step 3">Go Back</button>
+      <button class="button">
+        <span>Save alert</span>
+        <i aria-hidden="true" class="fi-save"></i>
+      </button>
+      <button class="button red">
+        <span>Delete alert</span>
+        <i aria-hidden="true" class="fi-trash"></i>
+      </button>
+    </div>
+  </form>
+
+</div>
+
+<div class="mockup-divider"></div>
diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php
index 8f4deef191..2dedb6159a 100644
--- a/www/includes/easyparliament/templates/html/alert/index.php
+++ b/www/includes/easyparliament/templates/html/alert/index.php
@@ -282,7 +282,7 @@
             </div>
 
             <div class="alert-section__primary">
-
+            <?php include 'alert-mockup.php'; ?>
               <?php if ($pid) { ?>
                 <h3>
                     <?php