diff --git a/www/docs/js/main.js b/www/docs/js/main.js
index 6dd194a9f0..a543ddd684 100644
--- a/www/docs/js/main.js
+++ b/www/docs/js/main.js
@@ -423,6 +423,47 @@ 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-trigger', '.accordion-content');
+});
+
 $(function() {
 
   $('#how-often-annually').click(function() {
diff --git a/www/docs/style/sass/accordion.scss b/www/docs/style/sass/accordion.scss
new file mode 100644
index 0000000000..4dce08ee58
--- /dev/null
+++ b/www/docs/style/sass/accordion.scss
@@ -0,0 +1,22 @@
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+  
+.accordion-button[aria-expanded="true"] + .accordion-content {
+    max-height: 1000px;
+    transition: max-height 0.3s ease;
+}
+  
+.accordion-button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 10px;
+    font-size: 1.2em;
+    cursor: pointer;
+    border: none;
+    background: #f0f0f0;
+}
+  
\ No newline at end of file
diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index d356a39cd9..2c66610093 100644
--- a/www/docs/style/sass/app.scss
+++ b/www/docs/style/sass/app.scss
@@ -57,6 +57,7 @@
 @import "compass/css3";
 @import "_twfy-mixins.scss";
 @import "accessible-autocomplete";
+@import "accordion";
 
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic&display=swap);
 @import url(https://fonts.googleapis.com/css2?family=Manrope:wght@700&family=Merriweather:wght@400;700&display=swap);
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..a7e59dfc5d
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/alert-mockup.php
@@ -0,0 +1,26 @@
+<div class="accordion">
+  <button class="accordion-trigger" href="#accordion-content-1" aria-expanded="false">
+    Accordion Title 1
+  </button>
+  <div id="accordion-content-1" class="accordion-content" aria-hidden="true">
+    <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">
+  <button class="accordion-trigger" href="#accordion-content-2" aria-expanded="false">
+    Accordion Title 2
+  </button>
+  <div id="accordion-content-2" class="accordion-content" aria-hidden="true">
+    <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">
+  <button class="accordion-trigger" href="#accordion-content-3" aria-expanded="false">
+    Accordion Title 3
+  </button>
+  <div id="accordion-content-3" class="accordion-content" aria-hidden="true">
+    <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>
diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php
index 11b567561c..a4a2c6d944 100644
--- a/www/includes/easyparliament/templates/html/alert/index.php
+++ b/www/includes/easyparliament/templates/html/alert/index.php
@@ -1,30 +1,31 @@
 <div class="full-page">
     <div class="full-page__row">
 
+      
       <?php if ( $message ) { ?>
         <div class="alert-section alert-section--feedback">
-            <div class="alert-section__primary">
-                <h3><?= $message['title'] ?></h3>
-                <p class="alert-results">
-                    <?= $message['text'] ?>
-                </p>
-            </div>
+          <div class="alert-section__primary">
+            <h3><?= $message['title'] ?></h3>
+            <p class="alert-results">
+              <?= $message['text'] ?>
+            </p>
+          </div>
         </div>
-      <?php } ?>
-
-      <?php if ( $results ) { ?>
-        <div class="alert-section alert-section--feedback">
+        <?php } ?>
+        
+        <?php if ( $results ) { ?>
+          <div class="alert-section alert-section--feedback">
             <div class="alert-section__primary">
               <?php if ( $results == 'alert-confirmed' ) { ?>
                 <h3><?= gettext('Your alert has been confirmed') ?></h3>
                 <p>
-                    <?= gettext('You will now receive email alerts for the following criteria:') ?>
+                  <?= gettext('You will now receive email alerts for the following criteria:') ?>
                 </p>
                 <ul><?= _htmlspecialchars($criteria) ?></ul>
                 <p>
-                    <?= gettext('This is normally the day after, but could conceivably be later due to issues at our or the parliament’s end.') ?>
+                  <?= gettext('This is normally the day after, but could conceivably be later due to issues at our or the parliament’s end.') ?>
                 </p>
-
+                
                 <!-- Google Code for TWFY Alert Signup Conversion Page -->
                 <script type="text/javascript">
                 /* <![CDATA[ */
@@ -39,153 +40,153 @@
                 <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
                 </script>
                 <noscript>
-                <div style="display:inline;">
-                <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1067468161/?label=HEeDCOvPjmQQgYuB_QM&amp;guid=ON&amp;script=0"/>
-                </div>
+                  <div style="display:inline;">
+                    <img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1067468161/?label=HEeDCOvPjmQQgYuB_QM&amp;guid=ON&amp;script=0"/>
+                  </div>
                 </noscript>
-
-              <?php } elseif ( $results == 'alert-suspended' ) { ?>
-                <h3><?= gettext('Alert suspended') ?></h3>
-                <p>
+                
+                <?php } elseif ( $results == 'alert-suspended' ) { ?>
+                  <h3><?= gettext('Alert suspended') ?></h3>
+                  <p>
                     <?= gettext('You can reactivate the alert at any time, from the sidebar below.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-resumed' ) { ?>
-                <h3><?= gettext('Alert resumed') ?></h3>
-                <p>
-                    <?= gettext('You will now receive email alerts on any day when there are entries in Hansard that match your criteria.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-deleted' ) { ?>
-                <h3><?= gettext('Alert deleted') ?></h3>
-                <p>
-                    <?= gettext('You will no longer receive this alert.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'all-alerts-deleted' ) { ?>
-                <h3><?= gettext('All alerts deleted') ?></h3>
-                <p>
-                    <?= gettext('You will no longer receive any alerts.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-fail' ) { ?>
-                <h3><?= gettext('Hmmm, something’s not right') ?></h3>
-                <p>
-                    <?= gettext('The link you followed to reach this page appears to be incomplete.') ?>
-                </p>
-                <p>
-                    <?= gettext('If you clicked a link in your alert email you may need to manually copy and paste the entire link to the ‘Location’ bar of the web browser and try again.') ?>
-                </p>
-                <p>
-                    <?= sprintf(gettext('If you still get this message, please do <a href="mailto:%s">email us</a> and let us know, and we’ll help out!'), str_replace('@', '&#64;', CONTACTEMAIL)) ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-added' ) { ?>
-                <h3><?= gettext('Your alert has been added') ?></h3>
-                <p>
-                    <?= sprintf(gettext('You will now receive email alerts on any day when %s in parliament.'), _htmlspecialchars($criteria)) ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-confirmation' ) { ?>
-                <h3><?= gettext('We’re nearly done…') ?></h3>
-                <p>
-                    <?= gettext('You should receive an email shortly which will contain a link. You will need to follow that link to confirm your email address and receive future alerts. Thanks.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-exists' ) { ?>
-                <h3><?= gettext('You’re already subscribed to that!') ?></h3>
-                <p>
-                    <?= gettext('It’s good to know you’re keen though.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-already-signed' ) { ?>
-                <h3><?= gettext('We’re nearly done') ?></h3>
-                <p>
-                    <?= gettext('You should receive an email shortly which will contain a link. You will need to follow that link to confirm your email address and receive future alerts. Thanks.') ?>
-                </p>
-
-              <?php } elseif ( $results == 'alert-fail' ) { ?>
-                <h3><?= gettext('Alert could not be created') ?></h3>
-                <p>
-                    <?= sprintf(gettext('Sorry, we were unable to create that alert. Please <a href="mailto:%s">let us know</a>. Thanks.'), str_replace('@', '&#64;', CONTACTEMAIL)) ?>
-                </p>
-
-              <?php } ?>
-            </div>
-        </div>
-      <?php } ?>
-
-      <?php
+                  </p>
+                  
+                  <?php } elseif ( $results == 'alert-resumed' ) { ?>
+                    <h3><?= gettext('Alert resumed') ?></h3>
+                    <p>
+                      <?= gettext('You will now receive email alerts on any day when there are entries in Hansard that match your criteria.') ?>
+                    </p>
+                    
+                    <?php } elseif ( $results == 'alert-deleted' ) { ?>
+                      <h3><?= gettext('Alert deleted') ?></h3>
+                      <p>
+                        <?= gettext('You will no longer receive this alert.') ?>
+                      </p>
+                      
+                      <?php } elseif ( $results == 'all-alerts-deleted' ) { ?>
+                        <h3><?= gettext('All alerts deleted') ?></h3>
+                        <p>
+                          <?= gettext('You will no longer receive any alerts.') ?>
+                        </p>
+                        
+                        <?php } elseif ( $results == 'alert-fail' ) { ?>
+                          <h3><?= gettext('Hmmm, something’s not right') ?></h3>
+                          <p>
+                            <?= gettext('The link you followed to reach this page appears to be incomplete.') ?>
+                          </p>
+                          <p>
+                            <?= gettext('If you clicked a link in your alert email you may need to manually copy and paste the entire link to the ‘Location’ bar of the web browser and try again.') ?>
+                          </p>
+                          <p>
+                            <?= sprintf(gettext('If you still get this message, please do <a href="mailto:%s">email us</a> and let us know, and we’ll help out!'), str_replace('@', '&#64;', CONTACTEMAIL)) ?>
+                          </p>
+                          
+                          <?php } elseif ( $results == 'alert-added' ) { ?>
+                            <h3><?= gettext('Your alert has been added') ?></h3>
+                            <p>
+                              <?= sprintf(gettext('You will now receive email alerts on any day when %s in parliament.'), _htmlspecialchars($criteria)) ?>
+                            </p>
+                            
+                            <?php } elseif ( $results == 'alert-confirmation' ) { ?>
+                              <h3><?= gettext('We’re nearly done…') ?></h3>
+                              <p>
+                                <?= gettext('You should receive an email shortly which will contain a link. You will need to follow that link to confirm your email address and receive future alerts. Thanks.') ?>
+                              </p>
+                              
+                              <?php } elseif ( $results == 'alert-exists' ) { ?>
+                                <h3><?= gettext('You’re already subscribed to that!') ?></h3>
+                                <p>
+                                  <?= gettext('It’s good to know you’re keen though.') ?>
+                                </p>
+                                
+                                <?php } elseif ( $results == 'alert-already-signed' ) { ?>
+                                  <h3><?= gettext('We’re nearly done') ?></h3>
+                                  <p>
+                                    <?= gettext('You should receive an email shortly which will contain a link. You will need to follow that link to confirm your email address and receive future alerts. Thanks.') ?>
+                                  </p>
+                                  
+                                  <?php } elseif ( $results == 'alert-fail' ) { ?>
+                                    <h3><?= gettext('Alert could not be created') ?></h3>
+                                    <p>
+                                      <?= sprintf(gettext('Sorry, we were unable to create that alert. Please <a href="mailto:%s">let us know</a>. Thanks.'), str_replace('@', '&#64;', CONTACTEMAIL)) ?>
+                                    </p>
+                                    
+                                    <?php } ?>
+                                  </div>
+                                </div>
+                                <?php } ?>
+                                
+                                <?php
           if(
-              $members ||
-              (isset($constituencies) && count($constituencies) > 0) ||
-              ($alertsearch)
-          ) {
+            $members ||
+            (isset($constituencies) && count($constituencies) > 0) ||
+            ($alertsearch)
+            ) {
               /* We need to disambiguate the user's instructions */
               $member_options = false;
-      ?>
+              ?>
         <div class="alert-section alert-section--disambiguation">
-            <div class="alert-section__primary">
-
-              <?php if ($members) {
-                  $member_options = true; ?>
+          <div class="alert-section__primary">
+            
+            <?php if ($members) {
+              $member_options = true; ?>
                 <h3><?= sprintf(gettext('Sign up for alerts when people matching <i>%s</i> speaks'), _htmlspecialchars($alertsearch)) ?></h3>
                 <ul>
                   <?php
                     foreach ($members as $row) {
-                  ?>
+                      ?>
                     <li>
-                        <form action="<?= $actionurl ?>" method="post">
-                            <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
-                            <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
-                            <input type="hidden" name="pid" value="<?= $row['person_id'] ?>">
-                            <?php
+                      <form action="<?= $actionurl ?>" method="post">
+                        <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
+                        <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
+                        <input type="hidden" name="pid" value="<?= $row['person_id'] ?>">
+                        <?php
                             $name = member_full_name($row['house'], $row['title'], $row['given_name'], $row['family_name'], $row['lordofname']);
                             if ($row['constituency']) {
-                                $name .= ' (' . gettext($row['constituency']) . ')';
+                              $name .= ' (' . gettext($row['constituency']) . ')';
                             }
                             printf(gettext('When %s speaks.'), $name);
                             ?>
                             <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>"></form>
-                        </form>
-                    </li>
-                  <?php } ?>
-                </ul>
-              <?php } ?>
-
-              <?php if (isset($constituencies) && count($constituencies) > 0) {
-                  $member_options = true; ?>
+                          </form>
+                        </li>
+                        <?php } ?>
+                      </ul>
+                      <?php } ?>
+                      
+                      <?php if (isset($constituencies) && count($constituencies) > 0) {
+                        $member_options = true; ?>
                 <h3><?= sprintf(gettext('Sign up for alerts when MPs for constituencies matching <i>%s</i> speaks'), _htmlspecialchars($alertsearch)) ?></h3>
                 <ul>
-                <?php foreach ($constituencies as $constituency => $member) { ?>
+                  <?php foreach ($constituencies as $constituency => $member) { ?>
                     <li>
-                        <form action="<?= $actionurl ?>" method="post">
-                            <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
-                            <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
-                            <input type="hidden" name="pid" value="<?= $member->person_id() ?>">
-                            <?= $member->full_name() ?>
-                            (<?= _htmlspecialchars($constituency) ?>)
-                            <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>"></form>
-                        </li>
-                <?php } ?>
-                </ul>
-              <?php } ?>
-
-              <?php if ($alertsearch) {
-                if ( $member_options ) { ?>
+                      <form action="<?= $actionurl ?>" method="post">
+                        <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
+                        <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
+                        <input type="hidden" name="pid" value="<?= $member->person_id() ?>">
+                        <?= $member->full_name() ?>
+                        (<?= _htmlspecialchars($constituency) ?>)
+                        <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>"></form>
+                      </li>
+                      <?php } ?>
+                    </ul>
+                    <?php } ?>
+                    
+                    <?php if ($alertsearch) {
+                      if ( $member_options ) { ?>
                 <h3><?= gettext('Sign up for alerts for topics') ?></h3>
                 <?php } else { ?>
-                <h3><?= gettext('Great! Can you just confirm what you mean?') ?></h3>
-                <?php } ?>
-                <ul>
+                  <h3><?= gettext('Great! Can you just confirm what you mean?') ?></h3>
+                  <?php } ?>
+                  <ul>
                     <li>
-                        <form action="<?= $actionurl ?>" method="post">
-                            <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
-                            <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
-                            <input type="hidden" name="keyword" value="<?= _htmlspecialchars($alertsearch) ?>">
-                            <?= sprintf(gettext('Receive alerts when %s'), _htmlspecialchars($alertsearch_pretty)) ?>
-                            <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
-                        </form>
+                      <form action="<?= $actionurl ?>" method="post">
+                        <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
+                        <input type="hidden" name="email" value="<?= _htmlspecialchars($email) ?>">
+                        <input type="hidden" name="keyword" value="<?= _htmlspecialchars($alertsearch) ?>">
+                        <?= sprintf(gettext('Receive alerts when %s'), _htmlspecialchars($alertsearch_pretty)) ?>
+                        <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
+                      </form>
                       <?php if ( isset($mistakes['multiple']) ) { ?>
                         <em class="error"><?= gettext('
                             You have used a comma in your search term –
@@ -194,20 +195,21 @@
                             – either use OR, or create a separate alert
                             for each individual term.') ?>
                         </em>
-                      <?php } ?>
-                      <?php if ( isset($mistakes['postcode_and']) ) { ?>
-                        <em class="error"><?= gettext('
+                        <?php } ?>
+                        <?php if ( isset($mistakes['postcode_and']) ) { ?>
+                          <em class="error"><?= gettext('
                             You have used a postcode and something else in your
                             search term – are you sure this is what you
                             want? You will only get an alert if all of these
                             are mentioned in the same debate.') ?>
                           <?php if (isset($member_alertsearch)) {
-                                printf(gettext('Did you mean to get alerts for when your representative mentions something instead? If so maybe you want to subscribe to…'));
+                            printf(gettext('Did you mean to get alerts for when your representative mentions something instead? If so maybe you want to subscribe to…'));
                           } ?>
                         </em>
-                      <?php } ?>
-                    </li>
-
+                        <?php } ?>
+                      </li>
+                      
+                      
                   <?php if (isset($member_alertsearch)) { ?>
                     <li>
                         <form action="<?= $actionurl ?>" method="post">
@@ -282,6 +284,7 @@
             </div>
 
             <div class="alert-section__primary">
+              <?php include 'alert-mockup.php'; ?>
 
               <?php if ($pid) { ?>
                 <h3>
@@ -302,6 +305,7 @@
                 <h3><?= gettext('Request a new TheyWorkForYou email alert') ?></h3>
               <?php } ?>
 
+
                 <form action="<?= $actionurl ?>" method="post" class="alert-page-main-inputs">
                   <?php if (!$email_verified) { ?>
                     <p>