From 8fe7b4eaf105b9a198681b8293163dc39be7d45c Mon Sep 17 00:00:00 2001
From: Struan Donald <struan@exo.org.uk>
Date: Tue, 10 Dec 2024 11:49:13 +0000
Subject: [PATCH] new alert display and create ui

Alert list splits alerts into keyword and representative alerts.

New alert creation wizard which makes complicated alerts easier to
create and also suggests related terms if we have any. Also allows
editing alerts.

Retains existing form for adding MP/postcode alerts.
---
 classes/AlertView/Standard.php                | 369 +++++++++++++++++-
 tests/AlertsPageTest.php                      |  83 +++-
 tests/SearchTest.php                          |   6 +-
 tests/_fixtures/alertspage.xml                |   8 +
 www/docs/js/main.js                           |  64 +++
 www/docs/style/sass/_twfy-mixins.scss         |  23 +-
 www/docs/style/sass/app.scss                  |  59 +--
 www/docs/style/sass/pages/_alert.scss         |   5 +
 www/docs/style/sass/parts/_accordion.scss     | 280 +++++++++++++
 www/includes/easyparliament/alert.php         |  37 ++
 .../templates/html/alert/_alert_form.php      | 339 ++++++++++++++++
 .../templates/html/alert/_list_accordian.php  | 226 +++++++++++
 .../templates/html/alert/_mp_alert_form.php   |  76 ++++
 .../templates/html/alert/_own_mp_alerts.php   |  49 +++
 .../templates/html/alert/index.php            | 259 ++++++------
 15 files changed, 1686 insertions(+), 197 deletions(-)
 create mode 100644 www/docs/style/sass/parts/_accordion.scss
 create mode 100644 www/includes/easyparliament/templates/html/alert/_alert_form.php
 create mode 100644 www/includes/easyparliament/templates/html/alert/_list_accordian.php
 create mode 100644 www/includes/easyparliament/templates/html/alert/_mp_alert_form.php
 create mode 100644 www/includes/easyparliament/templates/html/alert/_own_mp_alerts.php

diff --git a/classes/AlertView/Standard.php b/classes/AlertView/Standard.php
index d55170d073..dcc4f7729c 100644
--- a/classes/AlertView/Standard.php
+++ b/classes/AlertView/Standard.php
@@ -25,7 +25,9 @@ public function display() {
         $this->checkInput();
         $this->searchForConstituenciesAndMembers();
 
-        if (!sizeof($this->data['errors']) && ($this->data['keyword'] || $this->data['pid'])) {
+        if ($this->data['step'] || $this->data['addword']) {
+            $this->processStep();
+        } elseif (!$this->data['results'] == 'changes-abandoned' && !sizeof($this->data['errors']) && $this->data['submitted'] && ($this->data['keyword'] || $this->data['pid'])) {
             $this->addAlert();
         }
 
@@ -37,6 +39,7 @@ public function display() {
         return $this->data;
     }
 
+    # This only happens if we have an alert and want to do something to it.
     private function processAction() {
         $token = get_http_var('t');
         $alert = $this->alert->check_token($token);
@@ -48,7 +51,8 @@ private function processAction() {
                 $success = $this->confirmAlert($token);
                 if ($success) {
                     $this->data['results'] = 'alert-confirmed';
-                    $this->data['criteria'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($this->alert->criteria);
+                    $this->data['criteria'] = $this->alert->criteria;
+                    $this->data['display_criteria'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($this->alert->criteria);
                 }
             } elseif ($action == 'Suspend') {
                 $success = $this->suspendAlert($token);
@@ -70,6 +74,8 @@ private function processAction() {
                 if ($success) {
                     $this->data['results'] = 'all-alerts-deleted';
                 }
+            } elseif ($action == 'Abandon') {
+                $this->data['results'] = 'changes-abandoned';
             }
             if (!$success) {
                 $this->data['results'] = 'alert-fail';
@@ -79,6 +85,50 @@ private function processAction() {
         $this->data['alert'] = $alert;
     }
 
+    # Process a screen in the alert creation wizard
+    private function processStep() {
+        # fetch a list of suggested terms. Need this for the define screen so we can filter out the suggested terms
+        # and not show them if the user goes back
+        if (($this->data['step'] == 'review' || $this->data['step'] == 'define') && !$this->data['shown_related']) {
+            $suggestions = [];
+            foreach ($this->data['keywords'] as $word) {
+                $terms = $this->alert->get_related_terms($word);
+                $terms = array_diff($terms, $this->data['keywords']);
+                if ($terms && count($terms)) {
+                    $suggestions = array_merge($suggestions, $terms);
+                }
+            }
+
+            if (count($suggestions) > 0) {
+                $this->data['step'] = 'add_vector_related';
+                $this->data['suggestions'] = $suggestions;
+            }
+        # confirm the alert. Handles both creating and editing alerts
+        } elseif ($this->data['step'] == 'confirm') {
+            $success = true;
+            # if there's already an alert assume we are editing it and user must be logged in
+            if ($this->data['alert']) {
+                $success = $this->updateAlert($this->data['alert']['id'], $this->data);
+                if ($success) {
+                    # reset all the data to stop anything getting confused
+                    $this->data['results'] = 'alert-confirmed';
+                    $this->data['step'] = '';
+                    $this->data['pid'] = '';
+                    $this->data['alertsearch'] = '';
+                    $this->data['pc'] = '';
+                    $this->data['members'] = false;
+                    $this->data['constituencies'] = [];
+                } else {
+                    $this->data['results'] = 'alert-fail';
+                    $this->data['step'] = 'review';
+                }
+            } else {
+                $success = $this->addAlert();
+                $this->data['step'] = '';
+            }
+        }
+    }
+
 
     private function getBasicData() {
         global $this_page;
@@ -93,12 +143,102 @@ private function getBasicData() {
             $this->data["email"] = trim(get_http_var("email"));
             $this->data['email_verified'] = false;
         }
+
+        $this->data['token'] = get_http_var('t');
+        $this->data['step'] = trim(get_http_var("step"));
+        $this->data['mp_step'] = trim(get_http_var("mp_step"));
+        $this->data['addword'] = trim(get_http_var("addword"));
+        $this->data['this_step'] = trim(get_http_var("this_step"));
+        $this->data['shown_related'] = get_http_var('shown_related');
+        $this->data['match_all'] = get_http_var('match_all') == 'on';
         $this->data['keyword'] = trim(get_http_var("keyword"));
-        $this->data['pid'] = trim(get_http_var("pid"));
+        $this->data['search_section'] = '';
         $this->data['alertsearch'] = trim(get_http_var("alertsearch"));
+        $this->data['mp_search'] = trim(get_http_var("mp_search"));
+        $this->data['pid'] = trim(get_http_var("pid"));
         $this->data['pc'] = get_http_var('pc');
-        $this->data['submitted'] = get_http_var('submitted') || $this->data['pid'] || $this->data['keyword'];
-        $this->data['token'] = get_http_var('t');
+        $this->data['submitted'] = get_http_var('submitted') || $this->data['pid'] || $this->data['keyword'] || $this->data['step'];
+
+        if ($this->data['addword'] || $this->data['step']) {
+            $alert = $this->alert->check_token($this->data['token']);
+
+            $criteria = '';
+            if ($alert) {
+                $criteria = $alert['criteria'];
+            }
+
+            $this->data['alert'] = $alert;
+
+            $this->data['alert_parts'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($criteria, true);
+
+            $existing_rep = '';
+            if (isset($this->data['alert_parts']['spokenby'])) {
+                $existing_rep = $this->data['alert_parts']['spokenby'][0];
+            }
+
+            $existing_section = '';
+            if (count($this->data['alert_parts']['sections'])) {
+                $existing_section = $this->data['alert_parts']['sections'][0];
+            }
+
+            if ($this->data['alert_parts']['match_all']) {
+                $this->data['match_all'] = true;
+            }
+
+            $words = get_http_var('words', $this->data['alert_parts']['words'], true);
+
+            $this->data['words'] = [];
+            $this->data['keywords'] = [];
+            foreach ($words as $word) {
+                if (trim($word) != '') {
+                    $this->data['keywords'][] = $word;
+                    $this->data['words'][] = $this->wrap_phrase_in_quotes($word);
+                }
+            }
+
+            $add_all_related = get_http_var('add_all_related');
+            $this->data['add_all_related'] = $add_all_related;
+            $this->data['skip_keyword_terms'] = [];
+
+            $selected_related_terms = get_http_var('selected_related_terms', [], true);
+            $this->data['selected_related_terms'] = $selected_related_terms;
+
+            if ($this->data['step'] !== 'define') {
+                if ($add_all_related) {
+                    $this->data['selected_related_terms'] = [];
+                    $related_terms = get_http_var('related_terms', [], true);
+                    foreach ($related_terms as $term) {
+                        $this->data['skip_keyword_terms'][] = $term;
+                        $this->data['keywords'][] = $term;
+                        $this->data['words'][] = $this->wrap_phrase_in_quotes($term);
+                    }
+                } else {
+                    $this->data['skip_keyword_terms'] = $selected_related_terms;
+                    foreach ($selected_related_terms as $term) {
+                        $this->data['keywords'][] = $term;
+                        $this->data['words'][] = $this->wrap_phrase_in_quotes($term);
+                    }
+                }
+            }
+            $this->data['exclusions'] = trim(get_http_var("exclusions", implode('', $this->data['alert_parts']['exclusions'])));
+            $this->data['representative'] = trim(get_http_var("representative", $existing_rep));
+
+            $this->data['search_section'] = trim(get_http_var("search_section", $existing_section));
+
+            $separator = ' OR ';
+            if ($this->data['match_all']) {
+                $separator = ' ';
+            }
+            $this->data['keyword'] = implode($separator, $this->data['words']);
+            if ($this->data['exclusions']) {
+                $this->data['keyword'] = '(' . $this->data['keyword'] . ') -' . $this->data["exclusions"];
+            }
+
+            $this->data['results'] = '';
+
+            $this->getSearchSections();
+        } # XXX probably should do something here if $alertsearch is set
+
         $this->data['sign'] = get_http_var('sign');
         $this->data['site'] = get_http_var('site');
         $this->data['message'] = '';
@@ -106,6 +246,36 @@ private function getBasicData() {
         $ACTIONURL = new \MySociety\TheyWorkForYou\Url($this_page);
         $ACTIONURL->reset();
         $this->data['actionurl'] = $ACTIONURL->generate();
+
+    }
+
+    private function wrap_phrase_in_quotes($phrase) {
+        if (strpos($phrase, ' ') > 0) {
+            $phrase = '"' . trim($phrase, '"') . '"';
+        }
+
+        return $phrase;
+    }
+
+    private function getRecentResults($text) {
+        global $SEARCHENGINE;
+        $se = new \SEARCHENGINE($text);
+        $this->data['search_result_count'] = $se->run_count(0, 10);
+        $se->run_search(0, 1, 'date');
+    }
+
+    private function getSearchSections() {
+        $this->data['sections'] = [];
+        if ($this->data['search_section']) {
+            foreach (explode(' ', $this->data['search_section']) as $section) {
+                $this->data['sections'][] = \MySociety\TheyWorkForYou\Utility\Alert::sectionToTitle($section);
+            }
+        }
+    }
+
+    private function updateAlert($token) {
+        $success = $this->alert->update($token, $this->data);
+        return $success;
     }
 
     private function checkInput() {
@@ -113,6 +283,12 @@ private function checkInput() {
 
         $errors = [];
 
+        # these are the initial screens and so cannot have any errors as we've not submitted
+        if (!$this->data['submitted'] || $this->data['step'] == 'define' || $this->data['mp_step'] == 'mp_alert') {
+            $this->data['errors'] = $errors;
+            return;
+        }
+
         // Check each of the things the user has input.
         // If there is a problem with any of them, set an entry in the $errors array.
         // This will then be used to (a) indicate there were errors and (b) display
@@ -131,6 +307,9 @@ private function checkInput() {
         }
 
         $text = $this->data['alertsearch'];
+        if ($this->data['mp_search']) {
+            $text = $this->data['mp_search'];
+        }
         if (!$text) {
             $text = $this->data['keyword'];
         }
@@ -156,10 +335,48 @@ private function checkInput() {
     }
 
     private function searchForConstituenciesAndMembers() {
-        // Do the search
-        if ($this->data['alertsearch']) {
-            $this->data['members'] = \MySociety\TheyWorkForYou\Utility\Search::searchMemberDbLookupWithNames($this->data['alertsearch'], true);
-            [$this->data['constituencies'], $this->data['valid_postcode']] = \MySociety\TheyWorkForYou\Utility\Search::searchConstituenciesByQuery($this->data['alertsearch']);
+        if ($this->data['results'] == 'changes-abandoned') {
+            $this->data['members'] = false;
+            return;
+        }
+
+        $text = $this->data['alertsearch'];
+        if ($this->data['mp_search']) {
+            $text = $this->data['mp_search'];
+        }
+        $errors = [];
+        if ($text != '') {
+            //$members_from_pids = array_values(\MySociety\TheyWorkForYou\Utility\Search::membersForIDs($this->data['alertsearch']));
+            $members_from_names = [];
+            $names_from_pids = array_values(\MySociety\TheyWorkForYou\Utility\Search::speakerNamesForIDs($text));
+            foreach ($names_from_pids as $name) {
+                $members_from_names = array_merge($members_from_names,\MySociety\TheyWorkForYou\Utility\Search::searchMemberDbLookupWithNames($name));
+            }
+            $members_from_words = \MySociety\TheyWorkForYou\Utility\Search::searchMemberDbLookupWithNames($text, true);
+            $this->data['members'] = array_merge($members_from_words, $members_from_names);
+            [$this->data['constituencies'], $this->data['valid_postcode']] = \MySociety\TheyWorkForYou\Utility\Search::searchConstituenciesByQuery($text, false);
+        } elseif ($this->data['pid']) {
+            $MEMBER = new \MEMBER(['person_id' => $this->data['pid']]);
+            $this->data['members'] = [[
+                "person_id" => $MEMBER->person_id,
+                "given_name" => $MEMBER->given_name,
+                "family_name" => $MEMBER->family_name,
+                "house" => $MEMBER->house_disp,
+                "title" => $MEMBER->title,
+                "lordofname" => $MEMBER->lordofname,
+                "constituency" => $MEMBER->constituency,
+            ]];
+        } elseif (isset($this->data['representative']) && $this->data['representative'] != '') {
+            $this->data['members'] = \MySociety\TheyWorkForYou\Utility\Search::searchMemberDbLookupWithNames($this->data['representative'], true);
+
+            $member_count = count($this->data['members']);
+            if ($member_count == 0) {
+                $errors["representative"] = gettext("No matching representative found");
+            } elseif ($member_count > 1) {
+                $errors["representative"] = gettext("Multiple matching representatives found, please select one.");
+            } else {
+                $this->data['pid'] = $this->data['members'][0]['person_id'];
+            }
         } else {
             $this->data['members'] = [];
         }
@@ -167,24 +384,42 @@ private function searchForConstituenciesAndMembers() {
         # If the above search returned one result for constituency
         # search by postcode, use it immediately
         if (isset($this->data['constituencies']) && count($this->data['constituencies']) == 1 && $this->data['valid_postcode']) {
-            $MEMBER = new \MEMBER(['constituency' => $this->data['constituencies'][0], 'house' => 1]);
+            $MEMBER = new \MEMBER(['constituency' => array_values($this->data['constituencies'])[0], 'house' => 1]);
             $this->data['pid'] = $MEMBER->person_id();
-            $this->data['pc'] = $this->data['alertsearch'];
+            $this->data['pc'] = $text;
             unset($this->data['constituencies']);
-            $this->data['alertsearch'] = '';
         }
 
         if (isset($this->data['constituencies'])) {
             $cons = [];
             foreach ($this->data['constituencies'] as $constituency) {
                 try {
-                    $MEMBER = new \MEMBER(['constituency' => $constituency, 'house' => 1]);
+                    $MEMBER = new \MEMBER(['constituency' => $constituency]);
                     $cons[$constituency] = $MEMBER;
                 } catch (\MySociety\TheyWorkForYou\MemberException $e) {
                     // do nothing
                 }
             }
             $this->data['constituencies'] = $cons;
+            if (count($cons) == 1) {
+                $cons = array_values($cons);
+                $this->data['pid'] = $cons[0]->person_id();
+            }
+        }
+
+        if ($this->data['alertsearch'] && !$this->data['mp_step'] && ($this->data['pid'] || $this->data['members'] || $this->data['constituencies'])) {
+            if (count($this->data['members']) == 1) {
+                $this->data['pid'] = $this->data['members'][0]['person_id'];
+            }
+            $this->data['mp_step'] = 'mp_alert';
+            $this->data['mp_search'] = $this->data['alertsearch'];
+            $this->data['alertsearch'] = '';
+        }
+
+        if (count($this->data["errors"]) > 0) {
+            $this->data["errors"] = array_merge($this->data["errors"], $errors);
+        } else {
+            $this->data["errors"] = $errors;
         }
     }
 
@@ -203,8 +438,12 @@ private function addAlert() {
         $success = $this->alert->add($this->data, $confirm);
 
         if ($success > 0 && !$confirm) {
+            $this->data['step'] = '';
+            $this->data['mp_step'] = '';
             $result = 'alert-added';
         } elseif ($success > 0) {
+            $this->data['step'] = '';
+            $this->data['mp_step'] = '';
             $result = 'alert-confirmation';
         } elseif ($success == -2) {
             // we need to make sure we know that the person attempting to sign up
@@ -230,7 +469,8 @@ private function addAlert() {
         $this->data['pc'] = '';
 
         $this->data['results'] = $result;
-        $this->data['criteria'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($this->alert->criteria);
+        $this->data['criteria'] = $this->alert->criteria;
+        $this->data['display_criteria'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($this->alert->criteria);
     }
 
 
@@ -303,13 +543,55 @@ private function formatSearchMemberData() {
     }
 
     private function setUserData() {
+        if (!isset($this->data['criteria'])) {
+            $criteria = $this->data['keyword'];
+            if (!$this->data['match_all']) {
+                $has_or = strpos($criteria, ' OR ') !== false;
+                $missing_braces = strpos($criteria, '(') === false;
+
+                if ($has_or && $missing_braces) {
+                    $criteria = "($criteria)";
+                }
+            }
+            if ($this->data['search_section']) {
+                $criteria .= " section:" . $this->data['search_section'];
+            }
+            if ($this->data['pid']) {
+                $criteria .= " speaker:" . $this->data['pid'];
+            }
+            $this->getRecentResults($criteria);
+
+            $this->data['criteria'] = $criteria;
+            $this->data['display_criteria'] = \MySociety\TheyWorkForYou\Utility\Alert::prettifyCriteria($criteria);
+        }
+        if ($this->data['results'] == 'changes-abandoned') {
+            $this->data['members'] = false;
+            $this->data['alertsearch'] = '';
+        }
+
+        if ($this->data['alertsearch'] && !(isset($this->data['mistakes']['postcode_and']) || $this->data['members'] || $this->data['pid'])) {
+            $this->data['step'] = 'define';
+            $this->data['words'] = [$this->data['alertsearch']];
+            $this->data['keywords'] = [$this->data['alertsearch']];
+            $this->data['exclusions'] = '';
+            $this->data['representative'] = '';
+        } elseif ($this->data['alertsearch'] && ($this->data['members'] || $this->data['pid'])) {
+            $this->data['mp_step'] = 'mp_alert';
+            $this->data['mp_search'] = [$this->data['alertsearch']];
+        } elseif ($this->data['members'] && $this->data['mp_step'] == 'mp_search') {
+            $this->data['mp_step'] = '';
+        }
+
         $this->data['current_mp'] = false;
         $this->data['alerts'] = [];
         $this->data['keyword_alerts'] = [];
         $this->data['speaker_alerts'] = [];
+        $this->data['spoken_alerts'] = [];
         $this->data['own_member_alerts'] = [];
         $this->data['all_keywords'] = [];
+        $this->data['own_mp_criteria'] = '';
         $own_mp_criteria = '';
+
         if ($this->data['email_verified']) {
             if ($this->user->postcode()) {
                 $current_mp = new \MEMBER(['postcode' => $this->user->postcode()]);
@@ -317,18 +599,65 @@ private function setUserData() {
                     $this->data['current_mp'] = $current_mp;
                     $own_mp_criteria = sprintf('speaker:%s', $current_mp->person_id());
                 }
+                $own_mp_criteria = $current_mp->full_name();
+                $this->data['own_mp_criteria'] = $own_mp_criteria;
             }
             $this->data['alerts'] = \MySociety\TheyWorkForYou\Utility\Alert::forUser($this->data['email']);
             foreach ($this->data['alerts'] as $alert) {
-                if (array_key_exists('words', $alert)) {
-                    $this->data['all_keywords'][] = implode(' ', $alert['words']);
-                    $this->data['keyword_alerts'][] = $alert;
-                } elseif (array_key_exists('spokenby', $alert) and sizeof($alert['spokenby']) == 1 and $alert['spokenby'][0] == $own_mp_criteria) {
+                if (array_key_exists('spokenby', $alert) and sizeof($alert['spokenby']) == 1 and $alert['spokenby'][0] == $own_mp_criteria) {
                     $this->data['own_member_alerts'][] = $alert;
-                } else {
-                    $this->data['spoken_alerts'][] = $alert;
+                } elseif (array_key_exists('spokenby', $alert)) {
+                    if (!array_key_exists($alert['spokenby'][0], $this->data['spoken_alerts'])) {
+                        $this->data['spoken_alerts'][$alert['spokenby'][0]] = [];
+                    }
+                    $this->data['spoken_alerts'][$alert['spokenby'][0]][] = $alert;
                 }
             }
+            foreach ($this->data['alerts'] as $alert) {
+                $term = implode(' ', $alert['words']);
+                $add = true;
+                if (array_key_exists('spokenby', $alert)) {
+                    $add = false;
+                } elseif (array_key_exists($term, $this->data['spoken_alerts'])) {
+                    $add = false;
+                    $this->data['all_keywords'][] = $term;
+                    $this->data['spoken_alerts'][$term][] = $alert;
+                } elseif ($term == $own_mp_criteria) {
+                    $add = false;
+                    $this->data['all_keywords'][] = $term;
+                    $this->data['own_member_alerts'][] = $alert;
+                } elseif (\MySociety\TheyWorkForYou\Utility\Search::searchMemberDbLookupWithNames($term, true)) {
+                    if (!array_key_exists($term, $this->data['spoken_alerts'])) {
+                        $this->data['spoken_alerts'][$term] = [];
+                    }
+                    $add = false;
+                    # need to add this to make it consistent so the front end know where to get the name
+                    $alert['spokenby'] = [$term];
+                    $this->data['all_keywords'][] = $term;
+                    $this->data['spoken_alerts'][$term][] = $alert;
+                }
+                if ($add) {
+                    $this->data['all_keywords'][] = $term;
+                    $this->data['keyword_alerts'][] = $alert;
+                }
+            }
+        } else {
+            if ($this->data['alertsearch'] && $this->data['pc']) {
+                $this->data['mp_step'] = 'mp_alert';
+            }
+        }
+        if (count($this->data['alerts'])) {
+            $this->data['delete_token'] = $this->data['alerts'][0]['token'];
+        }
+        if ($this->data['addword'] != '' || ($this->data['step'] && count($this->data['errors']) > 0)) {
+            $this->data["step"] = get_http_var('this_step');
+        } else {
+            $this->data['this_step'] = '';
+        }
+
+        $this->data["search_term"] = $this->data['alertsearch'];
+        if ($this->data['mp_search']) {
+            $this->data["search_term"] = $this->data['mp_search'];
         }
     }
 }
diff --git a/tests/AlertsPageTest.php b/tests/AlertsPageTest.php
index 6d62a781a7..91a2b15f24 100644
--- a/tests/AlertsPageTest.php
+++ b/tests/AlertsPageTest.php
@@ -15,6 +15,10 @@ private function fetch_page($vars) {
         return $this->base_fetch_page($vars, 'alert');
     }
 
+    private function get_page($vars = []) {
+        return $this->base_fetch_page_user($vars, '1.fbb689a0c092f5534b929d302db2c8a9', 'alert');
+    }
+
     public function testFetchPage() {
         $page = $this->fetch_page([]);
         $this->assertStringContainsString('TheyWorkForYou Email Alerts', $page);
@@ -22,12 +26,18 @@ public function testFetchPage() {
 
     public function testKeywordOnly() {
         $page = $this->fetch_page([ 'alertsearch' => 'elephant']);
-        $this->assertStringContainsString('Receive alerts when [elephant] is mentioned', $page);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value="elephant"', $page);
+    }
+
+    public function testSpeakerId() {
+        $page = $this->fetch_page([ 'alertsearch' => 'speaker:2']);
+        $this->assertStringContainsString('Mrs Test Current-MP', $page);
     }
 
     public function testPostCodeOnly() {
         $page = $this->fetch_page([ 'alertsearch' => 'SE17 3HE']);
-        $this->assertStringContainsString('when Mrs Test Current-MP', $page);
+        $this->assertStringContainsString('Mrs Test Current-MP', $page);
     }
 
     public function testPostCodeWithKeyWord() {
@@ -49,4 +59,73 @@ public function testPostcodeAndKeywordWithNoSittingMP() {
         $this->assertStringContainsString('You have used a postcode and something else', $page);
         $this->assertStringNotContainsString('Did you mean to get alerts for when your MP', $page);
     }
+
+    public function testBasicKeyWordAlertsCreation() {
+        $page = $this->fetch_page([ 'step' => 'define']);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value=""', $page);
+
+        $page = $this->fetch_page([ 'step' => 'review', 'email' => 'test@example.org', 'words[]' => 'fish']);
+        $this->assertStringContainsString('Review Your Alert', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="fish"', $page);
+
+        $page = $this->fetch_page([ 'step' => 'confirm', 'email' => 'test@example.org', 'words[]' => 'fish']);
+        $this->assertStringContainsString('We’re nearly done', $page);
+        $this->assertStringContainsString('You should receive an email shortly', $page);
+    }
+
+    public function testMultipleKeyWordAlertsCreation() {
+        $page = $this->fetch_page([ 'step' => 'define']);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value=""', $page);
+
+        $page = $this->fetch_page([ 'step' => 'review', 'email' => 'test@example.org', 'words[]' => ['fish', 'salmon']]);
+        $this->assertStringContainsString('Review Your Alert', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="fish"', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="salmon"', $page);
+
+        $page = $this->fetch_page([ 'step' => 'confirm', 'email' => 'test@example.org', 'words[]' => ['fish', 'salmon']]);
+        $this->assertStringContainsString('You should receive an email shortly', $page);
+    }
+
+    public function testMultipleKeyWordAlertsCreationLoggedIn() {
+        $page = $this->get_page(['step' => 'define']);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value=""', $page);
+
+        $page = $this->get_page([ 'step' => 'review', 'words[]' => ['fish', 'salmon']]);
+        $this->assertStringContainsString('Review Your Alert', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="fish"', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="salmon"', $page);
+
+        $page = $this->get_page([ 'step' => 'confirm', 'words[]' => ['fish', 'salmon']]);
+        $this->assertStringContainsString('You will now receive email alerts on any day when [fish salmon] is mentioned in parliament', $page);
+    }
+
+    public function testKeyWordAndSectionAlertsCreationLoggedIn() {
+        $page = $this->get_page(['step' => 'define']);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value=""', $page);
+
+        $page = $this->get_page(['step' => 'review', 'words[]' => 'fish', 'search_section' => 'debates']);
+        $this->assertStringContainsString('Review Your Alert', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="fish"', $page);
+
+        $page = $this->get_page(['step' => 'confirm', 'words[]' => 'fish', 'search_section' => 'debates']);
+        $this->assertStringContainsString('You will now receive email alerts on any day when [fish] is mentioned in House of Commons debates', $page);
+    }
+
+    public function testKeyWordAndSpeakerAlertsCreationLoggedIn() {
+        $page = $this->get_page(['step' => 'define']);
+        $this->assertStringContainsString('What word or phrase would you like to recieve alerts about', $page);
+        $this->assertStringContainsString('<input type="text" id="words0" name="words[]" aria-required="true" value=""', $page);
+
+        $page = $this->get_page(['step' => 'review', 'words[]' => 'fish', 'representative' => 'Mrs Test Current-MP']);
+        $this->assertStringContainsString('Review Your Alert', $page);
+        $this->assertStringContainsString('<input type="hidden" name="words[]" value="fish"', $page);
+        $this->assertStringContainsString('<input type="hidden" name="representative" value="Mrs Test Current-MP"', $page);
+
+        $page = $this->get_page([ 'step' => 'confirm', 'words[]' => 'fish', 'representative' => 'Mrs Test Current-MP']);
+        $this->assertStringContainsString('You will now receive email alerts on any day when Mrs Test Current-MP mentions [fish] in parliament', $page);
+    }
 }
diff --git a/tests/SearchTest.php b/tests/SearchTest.php
index a99e0a6db3..0bd2e38fa7 100644
--- a/tests/SearchTest.php
+++ b/tests/SearchTest.php
@@ -121,7 +121,7 @@ public function testSearchPage() {
     public function testSearchPageMP() {
         $page = $this->fetch_page([ 'q' => 'Mary Smith' ]);
         $this->assertStringContainsString('Mary Smith', $page);
-        $this->assertStringContainsString('MP, Amber Valley', $page);
+        $this->assertMatchesRegularExpression('/MP *for Amber Valley/', $page);
     }
 
     /**
@@ -169,9 +169,9 @@ public function testSearchPageMultipleCons() {
         $page = $this->fetch_page([ 'q' => 'Liverpool' ]);
         $this->assertStringContainsString('MPs in constituencies matching <em class="current-search-term">Liverpool</em>', $page);
         $this->assertStringContainsString('Susan Brown', $page);
-        $this->assertStringContainsString('MP, Liverpool, Riverside', $page);
+        $this->assertMatchesRegularExpression('/MP *for Liverpool, Riverside/', $page);
         $this->assertStringContainsString('Andrew Jones', $page);
-        $this->assertStringContainsString('MP, Liverpool, Walton', $page);
+        $this->assertMatchesRegularExpression('/MP *for Liverpool, Walton/', $page);
     }
 
     /**
diff --git a/tests/_fixtures/alertspage.xml b/tests/_fixtures/alertspage.xml
index e237dec30d..b1c65e678c 100644
--- a/tests/_fixtures/alertspage.xml
+++ b/tests/_fixtures/alertspage.xml
@@ -150,6 +150,14 @@
 	<table_data name="titles_ignored">
 	</table_data>
 	<table_data name="users">
+      <row>
+        <field name="user_id">1</field>
+        <field name="firstname">Test</field>
+        <field name="lastname">User</field>
+        <field name="email">user@example.org</field>
+        <field name="password">$2y$10$UNelQZqpPpO1jT.f7DLgeOdp.WBT81c5ECvOeTMFeQTBTyq3aCh8q</field>
+        <field name="confirmed">1</field>
+      </row>
 	</table_data>
 	<table_data name="uservotes">
 	</table_data>
diff --git a/www/docs/js/main.js b/www/docs/js/main.js
index 6dd194a9f0..9f319d38f9 100644
--- a/www/docs/js/main.js
+++ b/www/docs/js/main.js
@@ -343,6 +343,28 @@ $(function(){
   if (!$('#options').data('advanced')) {
     $("#options").find(":input").attr("disabled", "disabled");
   }
+
+  $('#add-all').on('click', function(e) {
+    var $add_all = e.currentTarget;
+    var $selected_related = document.querySelectorAll('input[name="selected_related_terms[]"]');
+    if ($add_all.checked) {
+      $selected_related.forEach(function(input) {
+        if (input.checked) {
+          input.setAttribute('data:was_checked', true);
+        }
+        input.checked = true;
+        input.setAttribute('disabled', true);
+      });
+    } else {
+      $selected_related.forEach(function(input) {
+        if (!input.getAttribute('data:was_checked')) {
+          input.checked = false;
+        }
+        input.removeAttribute('data:was_checked');
+        input.removeAttribute('disabled');
+      });
+    }
+  });
 });
 
 // Backwards-compatible functions for the click/submit trackers on MP pages
@@ -423,6 +445,48 @@ 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');
+});
+
+
 $(function() {
 
   $('#how-often-annually').click(function() {
diff --git a/www/docs/style/sass/_twfy-mixins.scss b/www/docs/style/sass/_twfy-mixins.scss
index 05e5f4169c..5c7a50ce45 100644
--- a/www/docs/style/sass/_twfy-mixins.scss
+++ b/www/docs/style/sass/_twfy-mixins.scss
@@ -246,22 +246,29 @@ $weight_bold: 700;
 .button {
     background-color: $colour_primary;
     font-weight: $weight_semibold;
-    border: 0;
+    border: 1px solid $colour_primary;
     @include border-radius(3px);
     &:hover {
         background-color: $primary-color-700;
     }
 
-    &:focus {
+    &:focus-visible {
         background-color: $color-yellow;
         color: $body-font-color;
     }
 }
 
+
 button {
     @extend .button;
 }
 
+.button--outline {
+    border: 1px solid $colour_primary;
+    background-color: $white-text;
+    color: $colour_primary;
+}
+
 .secondary-button,
 .button--secondary {
     background-color: $colour_off_white;
@@ -276,11 +283,23 @@ button {
 
 .button--red, .button--negative {
     background-color: $color_red;
+    border: 1px solid $color_red;
     &:hover {
         background-color: darken($color_red, 10%);
     }
 }
 
+.button--outline-red {
+    color: $color_red;
+    border: 1px solid $color_red;
+    background-color: $white-text;
+
+    &:hover {
+        color: $white-text;
+        background-color: $color_red;
+    }
+}
+
 .button--disabled,
 .button--disabled:hover {
     background-color: lighten($colour_off_white, 3%);
diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index d356a39cd9..511351cd8c 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,24 @@
 .fi-megaphone:before,
 .fi-pound:before,
 .fi-magnifying-glass:before,
-.fi-heart:before
+.fi-heart:before,
+.fi-plus:before,
+.fi-play: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 +104,13 @@
 .fi-pound:before {content: "\f19a"}
 .fi-magnifying-glass:before {content: "\f16c"}
 .fi-heart:before { content: "\f159"; }
+.fi-plus:before { content: "\f199"; }
+.fi-play:before { content: "\f198"; }
+.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 +143,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 +180,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 +212,7 @@ a:focus {
         // for .button elements!!
         vertical-align: -0.4em;
     }
-
+    
     &.tertiary {
         @include button-style($bg: $links);
     }
@@ -231,6 +245,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/pages/_alert.scss b/www/docs/style/sass/pages/_alert.scss
index 23aeab8d98..ff0e5b90ea 100644
--- a/www/docs/style/sass/pages/_alert.scss
+++ b/www/docs/style/sass/pages/_alert.scss
@@ -283,6 +283,11 @@
     }
 }
 
+.alert-section--message {
+  background-color: #FFFCD9; // very light yellow
+  padding: 1rem;
+}
+
 .alert-section--disambiguation {
     li {
         margin: 1em 0;
diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss
new file mode 100644
index 0000000000..4c44111154
--- /dev/null
+++ b/www/docs/style/sass/parts/_accordion.scss
@@ -0,0 +1,280 @@
+.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: center;
+    margin-bottom: 0.5rem;
+
+    button, h2 {
+        margin-bottom: 0;
+        margin-top: 0;
+    }
+
+    .alert-page-header__button-group {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        input {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.accordion {
+    margin-top: 2rem;
+}
+
+.accordion-button {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+    padding: 0.5rem;
+    font-size: 1rem;
+    font-weight: 400;
+    cursor: pointer;
+    border: none;
+    color: $body-font-color;
+    background-color: $primary-color-200;
+
+    &[aria-expanded="true"] {
+        background-color: lighten($primary-color-100, 6%);
+        color: $body-font-color;
+        border: 1px solid $primary-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;
+    padding-left: 1rem;
+
+    .alert-controller-wrapper {
+        margin-bottom: 2rem;
+        form {
+            display: inline;
+        }
+
+        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;
+    }
+}
+
+.alert-page-alert-controls {
+    form {
+        display: inline;
+    }
+}
+
+.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 {
+
+    .alert-meta-info-results {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: 1rem;
+        row-gap: 1rem;
+        align-items: center;
+        margin-bottom: 1rem;
+
+        .content-header-item {
+            border-radius: 0.5rem;
+            background-color: $primary-color-200;
+            padding: 1rem;
+
+            dt { 
+                font-size: 0.7rem;
+                text-transform: uppercase;
+                margin-bottom: 0;
+            }
+        
+            dd {
+                margin-bottom: 0;
+                font-size: 1.1rem;
+            }
+        }
+    }
+
+}
+
+button {
+    i {
+        margin-right: 0.15rem;
+    }
+}
+
+.alert-page-section {
+    margin-bottom: 3rem;
+}
+
+.alert-page-subsection {
+    margin-bottom: 2.5rem;
+
+    .alert-page-subsection--subtitle {
+        margin-bottom: 0.5rem;
+    }
+
+    :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.alert-page-option-label {
+    display: inline;
+    margin-left: 0.5em;
+}
+
+.button.red {
+    background-color: $color-red;
+    color: #fff;
+
+    &:hover {
+        background-color: darken($color-red, 15%);
+    }
+}
+
+#create-alert-form {
+    label {
+        color: $body-font-color;
+        font-size: 1.1rem;
+        line-height: 1.2;
+        margin-bottom: 0.75rem;
+    }
+
+    input[type="checkbox"], input[type="radio"] {
+        display: inline-block;
+        height: 1.5rem;
+        width: 1.5rem;
+        margin: 0 0.25rem 0 0;
+        vertical-align: middle;
+
+         + label {
+             display: inline-block;
+             margin-bottom: 0;
+             line-height: 1.5rem;
+             vertical-align: middle;
+         }
+    }
+
+    input[type="text"], select {
+        max-width: 400px;
+        height: 40px;
+        border-color: $body-font-color;
+    }
+
+    .checkbox-wrapper {
+        display: flex;
+        flex-direction: row;
+        
+        input[type="checkbox"], input[type="radio"] {
+            flex-shrink: 0;
+        }
+    }
+
+    .checkbox-group  {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+    }
+}
diff --git a/www/includes/easyparliament/alert.php b/www/includes/easyparliament/alert.php
index 66493d36e8..226b6991e6 100644
--- a/www/includes/easyparliament/alert.php
+++ b/www/includes/easyparliament/alert.php
@@ -104,6 +104,43 @@ public function fetch($confirmed, $deleted) {
         return $data;
     }
 
+    public function get_related_terms($term) {
+        $q = $this->db->query("SELECT
+            search_suggestion
+            FROM vector_search_suggestions
+            WHERE search_term = :term", [
+            ':term' => $term,
+        ]);
+
+        $data = $q->fetchAll();
+        $related = [];
+        foreach ($data as $d) {
+            $related[] = $d['search_suggestion'];
+        }
+        return $related;
+    }
+
+    public function update($id, $details) {
+        $criteria = \MySociety\TheyWorkForYou\Utility\Alert::detailsToCriteria($details);
+
+        $q = $this->db->query("SELECT * FROM alerts
+            WHERE alert_id = :id", [
+            ':id' => $id,
+        ])->first();
+        if ($q) {
+            $q = $this->db->query("UPDATE alerts SET deleted = 0, criteria = :criteria, confirmed = 1
+                WHERE alert_id = :id", [
+                ":criteria" => $criteria,
+                ":id" => $id,
+            ]);
+
+            if ($q->success()) {
+                return 1;
+            }
+        }
+        return -1;
+    }
+
     public function add($details, $confirmation_email = false, $instantly_confirm = true) {
 
         // Adds a new alert's info into the database.
diff --git a/www/includes/easyparliament/templates/html/alert/_alert_form.php b/www/includes/easyparliament/templates/html/alert/_alert_form.php
new file mode 100644
index 0000000000..91a39f82a6
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/_alert_form.php
@@ -0,0 +1,339 @@
+          <div class="alert-section">
+            <div class="alert-section__primary">
+              <div class="alert-page-section">
+                <div class="alert-creation-steps">
+                  <h1><?php if ($token) { ?>
+                    <?= gettext('Edit Alert') ?>
+                  <?php } else { ?>
+                    <?= gettext('Create Alert') ?>
+                  <?php } ?>
+                  </h1>
+
+                  <form action="<?= $actionurl ?>" method="POST" id="create-alert-form">
+                    <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
+                  <?php if (!$step or $step == "define") { ?>
+
+                    <input type="hidden" name="this_step" value="define">
+                    <div class="alert-step" id="step1" role="region" aria-labelledby="step1-header">
+                    <h2 id="step1-header"><?= gettext('Define alert') ?></h2>
+
+                      <?php if (!$email_verified) { ?>
+                      <div class="alert-page-subsection">
+                        <?php if (isset($errors['email'])) { ?>
+                          <span class="alert-page-error"><?= $errors['email'] ?></span>
+                        <?php } ?>
+                        <label for="email"><?= gettext('Your email address') ?></label>
+                        <input type="email" class="form-control" placeholder="<?= gettext('Your email address') ?>" name="email" id="email" value="<?= _htmlentities($email) ?>">
+                      </div>
+                      <?php } ?>
+
+                      <div class="alert-page-subsection">
+                      <label for="words[]"><?= gettext('What word or phrase would you like to receive alerts about?') ?></label>
+                        <?php if (isset($errors['alertsearch']) && $submitted) { ?>
+                          <span class="alert-page-error"><?= $errors['alertsearch'] ?></span>
+                        <?php } ?>
+                        <input type="text" id="words0" name="words[]" aria-required="true" value="<?= count($keywords) > 0 ? _htmlspecialchars($keywords[0]) : '' ?>" placeholder="Eg. 'Freedom of Information', 'FOI'">
+                        <?php foreach (array_slice($keywords, 1) as $index => $word) { ?>
+                          <input type="text" id="words<?= $index + 1 ?>" name="words[]" value="<?= _htmlspecialchars($word) ?>" placeholder="Eg. 'Freedom of Information', 'FOI'">
+                        <?php } ?>
+                        <?php if ($addword) { ?>
+                        <input type="text" id="words<?= count($words) ?>" name="words[]" value="" placeholder="Eg. 'Freedom of Information', 'FOI'">
+                        <?php } ?>
+                        <button class="button" type="submit" name="addword" value="add">
+                          <i aria-hidden="true" class="fi-save"></i>
+                          <span><?= gettext('Add word') ?></span>
+                        </button>
+                      </div>
+
+                      <div class="alert-page-subsection">
+                        <div class="checkbox-wrapper">
+                          <input type="checkbox" id="match_all" name="match_all"<?= $match_all ? ' checked' : ''?>>
+                          <label for="match_all"><?= gettext('Only alert if all words present, default is if any word is present') ?></label>
+                        </div>
+                      </div>
+
+                      <div class="alert-page-subsection">
+                        <label for="exclusions"><?= gettext('Is there anything you would not like to receive alerts about? (optional)') ?></label>
+                        <input type="text" id="exclusions" name="exclusions" aria-required="true" value="<?= _htmlspecialchars($exclusions) ?>" placeholder="Eg. 'Freedom of Information', 'FOI'">
+                      </div>
+
+                      <div class="alert-page-subsection">
+                      <label for="select-section"><?= gettext('Would you like to limit which Parliaments and Assemblies we alert about?') ?></label>
+                        <select name="search_section" id="select-section">
+                        <option value=""><?= gettext('Send alerts for everywhere.') ?></option>
+                          <optgroup label="<?= gettext('UK Parliament') ?>">
+                              <option value="uk"<?= $search_section == 'uk' ? ' selected' : '' ?>><?= gettext('All UK') ?></option>
+                              <option value="debates"<?= $search_section == 'debates' ? ' selected' : '' ?>><?= gettext('House of Commons debates') ?></option>
+                              <option value="whalls"<?= $search_section == 'whalls' ? ' selected' : '' ?>><?= gettext('Westminster Hall debates') ?></option>
+                              <option value="lords"<?= $search_section == 'lords' ? ' selected' : '' ?>><?= gettext('House of Lords debates') ?></option>
+                              <option value="wrans"<?= $search_section == 'wrans' ? ' selected' : '' ?>><?= gettext('Written answers') ?></option>
+                              <option value="wms"<?= $search_section == 'wms' ? ' selected' : '' ?>><?= gettext('Written ministerial statements') ?></option>
+                              <option value="standing"<?= $search_section == 'standing' ? ' selected' : '' ?>><?= gettext('Bill Committees') ?></option>
+                              <option value="future"<?= $search_section == 'future' ? ' selected' : '' ?>><?= gettext('Future Business') ?></option>
+                          </optgroup>
+                          <optgroup label="<?= gettext('Northern Ireland Assembly') ?>">
+                              <option value="ni"<?= $search_section == 'ni' ? ' selected' : '' ?>><?= gettext('Debates') ?></option>
+                          </optgroup>
+                          <optgroup label="<?= gettext('Scottish Parliament') ?>">
+                              <option value="scotland"<?= $search_section == 'scotland' ? ' selected' : '' ?>><?= gettext('All Scotland') ?></option>
+                              <option value="sp"<?= $search_section == 'sp' ? ' selected' : '' ?>><?= gettext('Debates') ?></option>
+                              <option value="spwrans"<?= $search_section == 'spwrans' ? ' selected' : '' ?>><?= gettext('Written answers') ?></option>
+                          </optgroup>
+                          <optgroup label="<?= gettext('Senedd / Welsh Parliament') ?>">
+                              <option value="wales"<?= $search_section == 'wales' ? ' selected' : '' ?>><?= gettext('Debates') ?></option>
+                          </optgroup>
+                          <optgroup label="<?= gettext('London Assembly') ?>">
+                              <option value="lmqs"<?= $search_section == 'lmqs' ? ' selected' : '' ?>><?= gettext('Questions to the Mayor') ?></option>
+                          </optgroup>
+                        </select>
+                      </div>
+
+                        <div class="alert-page-subsection">
+                        <label for="representative"><?= gettext('Would you like to only alert when a particular person speaks? (optional)') ?></label>
+                          <?php if (isset($errors["representative"])) { ?>
+                            <?php if (count($members) > 0) { ?>
+                              <span class="alert-page-error"><?= $errors["representative"] ?></span>
+                            <?php foreach ($members as $index => $member) {
+                                $name = member_full_name($member['house'], $member['title'], $member['given_name'], $member['family_name'], $member['lordofname']);
+                                if ($member['constituency']) {
+                                    $name .= ' (' . gettext($member['constituency']) . ')';
+                                } ?>
+                              <input type="radio" name="pid" id="representative_<?= $index ?>" value="<?= $member['person_id'] ?>">
+                              <label class="alert-page-option-label" for="representative_<?= $index ?>"><?= $name ?></label><br>
+                            <?php } ?>
+                          <?php } ?>
+                          <p><?= gettext("Or edit the name") ?></p>
+                        <?php } ?>
+                          <input type="text" id="representative" name="representative" value="<?= _htmlspecialchars($representative) ?>" aria-required="true">
+                      </div>
+
+
+                      <button type="submit" name="step" value="review" class="next" aria-label="Go to Step 2">Next</button>
+                      <button type="submit" class="button button--red" name="action" value="Abandon">
+                        <i aria-hidden="true" class="fi-trash"></i>
+                        <span><?= gettext('Abandon changes') ?></span>
+                      </button>
+                    </div>
+                  <?php } elseif ($step == "add_vector_related") { ?>
+
+                    <input type="hidden" name="shown_related" value="1">
+                    <?php foreach ($keywords as $word) {
+                        if (!in_array($word, $skip_keyword_terms)) { ?>
+                      <input type="hidden" name="words[]" value="<?= _htmlspecialchars($word) ?>">
+                    <?php }
+                        } ?>
+                    <input type="hidden" name="this_step" value="add_vector_related">
+                    <input type="hidden" name="keyword" value="<?= _htmlspecialchars($keyword) ?>">
+                    <input type="hidden" name="exclusions" value="<?= _htmlspecialchars($exclusions) ?>">
+                    <input type="hidden" name="representative" value="<?= _htmlspecialchars($representative) ?>">
+                    <input type="hidden" name="search_section" value="<?= _htmlspecialchars($search_section) ?>">
+                    <input type="hidden" name="email" id="email" value="<?= _htmlentities($email) ?>">
+                    <input type="hidden" name="match_all" value="<?= $match_all ? 'on' : ''?>">
+                    <div class="alert-step" id="step2" role="region" aria-labelledby="step2-header">
+                    <h2 id="step2-header"><?= gettext('Adding some extras') ?></h2>
+                      <div class="keyword-list alert-page-subsection">
+                      <h3 class="heading-with-bold-word"><?= gettext('Current keywords in this alert:') ?></h3>
+                        <ul>
+                          <?php foreach ($keywords as $word) {
+                              if (!in_array($word, $skip_keyword_terms)) { ?>
+                              <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                          <?php }
+                              } ?>
+                        </ul>
+                      </div>
+
+                      <p><?= gettext('We have also found the following related terms. Pick the ones you’d like to include alert?') ?></p>
+
+                      <fieldset>
+                        <legend><?= gettext('Related Terms') ?></legend>
+                        <div class="checkbox-group">
+                          <label><input type="checkbox" name="add_all_related" id="add-all"<?= $add_all_related == 'on' ? ' checked' : '' ?>><?= gettext('Add all related terms') ?></label>
+                          <?php foreach ($suggestions as $suggestion) { ?>
+                            <input type="hidden" name="related_terms[]" value="<?= _htmlspecialchars($suggestion) ?>">
+                            <label>
+                              <?php if ($add_all_related == 'on') { ?>
+                              <input type="checkbox" name="selected_related_terms[]" value="<?= _htmlspecialchars($suggestion) ?>" checked disabled>
+                              <?php } else { ?>
+                              <input type="checkbox" name="selected_related_terms[]" value="<?= _htmlspecialchars($suggestion) ?>"<?= in_array($suggestion, $selected_related_terms) ? ' checked' : '' ?>>
+                              <?php } ?>
+                              <?= _htmlspecialchars($suggestion) ?>
+                            </label>
+                          <?php } ?>
+                        </div>
+                      </fieldset>
+
+                      <dl class="alert-meta-info">
+                        <?php if ($search_result_count > 0) { ?>
+                          <div class="content-header-item">
+                            <dt><?= gettext('This week') ?></dt>
+                            <dd><?= sprintf(gettext('%d mentions'), $search_result_count) ?></dd>
+                          </div>
+                        <?php } ?>
+
+                        <?php if (isset($lastmention)) { ?>
+                          <div class="content-header-item">
+                          <dt><?= gettext('Date of last mention') ?></dt>
+                            <dd>30 May 2024</dd>
+                          </div>
+                        <?php } ?>
+
+                        <a href="/search/?q=<?= _htmlspecialchars($criteria) ?>" target="_blank" aria-label="See results for this alert - Opens in a new tab"><?= gettext('See results for this alert 	&rarr;') ?></a>
+                      </dl>
+
+                      <button type="submit" name="step" value="define" class="prev" aria-label="Go back to Step 2">Previous</button>
+                      <button type="submit" name="step" value="review" class="next" aria-label="Go to Step 3">Next</button>
+                      <button type="submit" class="button button--red" name="action" value="Abandon">
+                        <i aria-hidden="true" class="fi-trash"></i>
+                        <span><?= gettext('Abandon changes') ?></span>
+                      </button>
+                    </div>
+                  <?php } elseif ($step == "review") { ?>
+
+                    <?php foreach ($keywords as $word) {
+                        if (!in_array($word, $skip_keyword_terms)) { ?>
+                      <input type="hidden" name="words[]" value="<?= _htmlspecialchars($word) ?>">
+                    <?php }
+                        } ?>
+                    <?php foreach ($selected_related_terms as $word) { ?>
+                      <input type="hidden" name="selected_related_terms[]" value="<?= _htmlspecialchars($word) ?>">
+                    <?php } ?>
+                    <input type="hidden" name="add_all_related" value="<?= $add_all_related ?>">
+                    <input type="hidden" name="this_step" value="review">
+                    <input type="hidden" name="keyword" value="<?= _htmlspecialchars($keyword) ?>">
+                    <input type="hidden" name="exclusions" value="<?= _htmlspecialchars($exclusions) ?>">
+                    <input type="hidden" name="representative" value="<?= _htmlspecialchars($representative) ?>">
+                    <input type="hidden" name="search_section" value="<?= _htmlspecialchars($search_section) ?>">
+                    <input type="hidden" name="email" id="email" value="<?= _htmlentities($email) ?>">
+                    <input type="hidden" name="match_all" value="<?= $match_all ? 'on' : ''?>">
+                    <!-- Step 4 (Review) -->
+                    <div class="alert-step" id="step3" role="region" aria-labelledby="step3-header">
+                      <h2 id="step3-header"><?= gettext('Review Your Alert') ?></h2>
+
+                      <div class="keyword-list alert-page-subsection">
+                        <?php if ($match_all) { ?>
+                          <h3 class="heading-with-bold-word"><?= gettext('You will get an alert if all of these words are in a speech') ?>:</h3>
+                        <?php } else { ?>
+                          <h3 class="heading-with-bold-word"><?= gettext('You will get an alert if any of these words are in a speech') ?>:</h3>
+                        <?php } ?>
+                        <ul>
+                          <?php foreach ($keywords as $word) { ?>
+                          <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                          <?php } ?>
+                        </ul>
+                      </div>
+
+                      <?php if ($exclusions) { ?>
+                      <div class="keyword-list excluded-keywords alert-page-subsection">
+                      <h3 class="heading-with-bold-word"><?= gettext('Unless the speech also includes these words') ?>:</h3>
+                        <ul>
+                          <?php foreach (explode(" ", $exclusions) as $word) { ?>
+                          <li class="label label--red"><?= _htmlspecialchars($word) ?>
+                          <?php } ?>
+                        </ul>
+                      </div>
+                      <?php } ?>
+
+                      <div class="keyword-list alert-page-subsection">
+                      <?php if (count($sections) > 0) { ?>
+                        <h3 class="heading-with-bold-word"><?= gettext('And only if the speech is in') ?>:</h3>
+                          <ul>
+                          <?php foreach ($sections as $word) { ?>
+                            <li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
+                          <?php } ?>
+                          </ul>
+                      <?php } else { ?>
+                        <h3 class="heading-with-bold-word"><?= gettext('in the UK, Scottish or Welsh Parliaments or Northern Ireland Assembly') ?></h3>
+                      <?php } ?>
+                      </div>
+
+                      <?php if (count($members) > 0) { ?>
+                      <div class="keyword-list alert-page-subsection">
+                      <h3 class="heading-with-bold-word"><?= gettext('And only when spoken by') ?></h3>
+                        <ul>
+                          <?php foreach ($members as $member) { ?>
+                          <li class="label label--primary-light"><?= $member['given_name'] ?> <?= $member['family_name'] ?>
+                          <?php } ?>
+                        </ul>
+                      </div>
+                      <?php } ?>
+
+                      <?php if ($search_result_count > 0 || isset($lastmention)) { ?>
+                        <hr>
+                        <dl class="alert-meta-info">
+                          <h3>See mentions for this alert</h3>
+
+                          <div class="alert-meta-info-results">
+                            <?php if ($search_result_count > 0) { ?>
+                              <div class="content-header-item">
+                                <dt><?= gettext('This week') ?></dt>
+                                <dd><?= sprintf(gettext('%d mentions'), $search_result_count) ?></dd>
+                              </div>
+                            <?php } ?>
+  
+                            <?php // if (isset($lastmention)) { ?>
+                              <div class="content-header-item">
+                                <dt><?= gettext('Date of last mention') ?></dt>
+                                <dd>30 May 2024</dd>
+                              </div>
+                            <?php // } ?>
+                          </div>
+
+                          <a href="/search/?q=<?= _htmlspecialchars($criteria) ?>" target="_blank" aria-label="See results for this alert - Opens in a new tab"><?= gettext('See results for this alert 	&rarr;') ?></a>
+                        </dl>
+                      <?php } ?>
+
+                      <hr>
+                      <button type="submit" name="step" value="define" class="prev" aria-label="Go back to Step 2">Go Back</button>
+                      <button class="button" type="submit" name="step" value="confirm">
+                        <i aria-hidden="true" class="fi-save"></i>
+                        <span><?= gettext('Save alert') ?></span>
+                      </button>
+                      <button type="submit" class="button button--red" name="action" value="Abandon">
+                        <i aria-hidden="true" class="fi-trash"></i>
+                        <span><?= gettext('Abandon changes') ?></span>
+                      </button>
+                      <?php if ($token) { ?>
+                      <button type="submit" class="button button--red" name="action" value="Delete">
+                        <i aria-hidden="true" class="fi-trash"></i>
+                        <span><?= gettext('Delete alert') ?></span>
+                      </button>
+                      <?php } ?>
+                    </div>
+                    <?php } ?>
+                  </form>
+
+                </div>
+              </div>
+            </div>
+
+            <div class="alert-section__secondary">
+              <?php if (!$pid && !$keyword) { ?>
+                <div class="alert-page-search-tips">
+                    <h3><?= gettext('Search tips') ?></h3>
+                    <p>
+                        <?= gettext('To be alerted on an exact <strong>phrase</strong>, be sure to put it in quotes. Also use quotes around a word to avoid stemming (where ‘horse’ would also match ‘horses’).') ?>
+                    </p>
+                    <p>
+                        <?= gettext('You should only enter <strong>one term per alert</strong> – if you wish to receive alerts on more than one thing, or for more than one person, simply fill in this form as many times as you need, or use boolean OR.') ?>
+                    </p>
+                    <p>
+                        <?= gettext('For example, if you wish to receive alerts whenever the words <i>horse</i> or <i>pony</i> are mentioned in Parliament, please fill in this form once with the word <i>horse</i> and then again with the word <i>pony</i> (or you can put <i>horse OR pony</i> with the OR in capitals). Do not put <i>horse, pony</i> as that will only sign you up for alerts where <strong>both</strong> horse and pony are mentioned.') ?>
+                    </p>
+                </div>
+
+                <div class="alert-page-search-tips">
+
+                    <h3><?= gettext('Step by step guides') ?></h3>
+                    <p>
+                        <?= gettext('The mySociety blog has a number of posts on signing up for and managing alerts:') ?>
+                    </p>
+
+                    <ul>
+                        <li><a href="https://www.mysociety.org/2014/07/23/want-to-know-what-your-mp-is-saying-subscribe-to-a-theyworkforyou-alert/"><?= gettext('How to sign up for alerts on what your MP is saying') ?></a>.</li>
+                        <li><a href="https://www.mysociety.org/2014/09/01/well-send-you-an-email-every-time-your-chosen-word-is-mentioned-in-parliament/"><?= gettext('How to sign up for alerts when your chosen word is mentioned') ?></a>.</li>
+                        <li><?= sprintf(gettext('<a href="%s">Managing email alerts</a>, including how to stop or suspend them.'), 'https://www.mysociety.org/2014/09/04/how-to-manage-your-theyworkforyou-alerts/') ?></li>
+                    <ul>
+                </div>
+              <?php } ?>
+            </div>
+          </div>
diff --git a/www/includes/easyparliament/templates/html/alert/_list_accordian.php b/www/includes/easyparliament/templates/html/alert/_list_accordian.php
new file mode 100644
index 0000000000..fb1065f292
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/_list_accordian.php
@@ -0,0 +1,226 @@
+              <div class="accordion">
+                <?php foreach ($keyword_alerts as $index => $alert) { ?>
+                <div class="accordion-item">
+                <button class="accordion-button" href="#accordion-content-<?= $index ?>" aria-expanded="false">
+                    <div class="accordion-button--content">
+                      <span class="content-title"><?= _htmlspecialchars($alert['criteria']) ?></span>
+                      <?php if (array_key_exists("mentions", $alert)) { ?>
+                      <span class="content-subtitle"><?= sprintf(gettext('%d mentions this week'), $alert['mentions']) ?></span>
+                      <?php } ?>
+                    </div>
+                    <i aria-hidden="true" role="img" class="fi-plus"></i>
+                  </button>
+                  <div id="accordion-content-<?= $index ?>" class="accordion-content" aria-hidden="true" role="img">
+                    <div class="accordion-content-header">
+                      <div class="alert-controller-wrapper">
+                        <form action="<?= $actionurl ?>" method="POST">
+                          <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                          <?php if ($alert['status'] == 'unconfirmed') { ?>
+                            <button type="submit" class="button small" name="action" value="Confirm">
+                              <i aria-hidden="true" class="fi-save"></i>
+                              <span><?= gettext('Confirm alert') ?></span>
+                            </button>
+                          <?php } elseif ($alert['status'] == 'suspended') { ?>
+                            <button type="submit" class="button small" name="action" value="Resume">
+                            <span><?= gettext('Resume alert') ?></span>
+                              <i aria-hidden="true" class="fi-play"></i>
+                            </button>
+                          <?php } else { ?>
+                            <button type="submit" class="button button--outline small" name="action" value="Suspend">
+                              <i aria-hidden="true" class="fi-pause"></i>
+                              <span><?= gettext('Suspend alert') ?></span>
+                            </button>
+                            <button type="submit" class="button small button--outline-red" name="action" value="Delete">
+                              <i aria-hidden="true" class="fi-trash"></i>
+                              <span><?= gettext('Delete alert') ?></span>
+                            </button>
+                          </form>
+                          <form action="<?= $actionurl ?>" method="POST">
+                            <input type="hidden" name="step" value="define">
+                            <input type="hidden" name="shown_related" value="1">
+                            <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                            <button type="submit" class="button button--outline small" value="Edit">
+                              <i aria-hidden="true" class="fi-page-edit"></i>
+                              <span><?= gettext('Edit alert') ?></span>
+                            </button>
+                          <?php } ?>
+                          </form>
+                      </div>
+                      <dl class="alert-meta-info">
+                          <?php if (array_key_exists("mentions", $alert)) { ?>
+                           <div class="content-header-item">
+                             <dt><?= gettext('This week') ?></dt>
+                             <dd><?= sprintf(gettext('%d mentions'), $alert['mentions']) ?></dd>
+                           </div>
+                          <?php } ?>
+
+                          <?php if (array_key_exists("last_mention", $alert)) { ?>
+                          <div class="content-header-item">
+                          <dt><?= gettext('Date of last mention') ?></dt>
+                          <dd><?= $alert['last_mention'] ?></dd>
+                          </div>
+                          <?php } ?>
+
+                          <a href="/search/?q=<?= $alert['raw'] ?>"><?= gettext('See results for this alert &rarr;') ?></a>
+                        </dl>
+                    </div>
+
+                    <?php if ($alert["keywords"] or $alert["exclusions"] or $alert["sections"] or array_key_exists('spokenby', $alert)) { ?>
+                    <hr>
+                    <?php } ?>
+
+                    <?php if ($alert["keywords"]) { ?>
+                    <div class="keyword-list alert-page-subsection">
+                      <h3 class="heading-with-bold-word">Keywords <span class="bold">included</span> in this alert:</h3>
+                      <ul>
+                        <?php foreach ($alert["keywords"] as $keyword) { ?>
+                        <li class="label label--primary-light"><?= _htmlspecialchars($keyword) ?>
+                        <?php } ?>
+                      </ul>
+                    </div>
+                    <?php } ?>
+
+                    <?php if ($alert["exclusions"]) { ?>
+                    <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>
+                        <?php foreach ($alert["exclusions"] as $exclusion) { ?>
+                        <li class="label label--red"><?= _htmlspecialchars($exclusion) ?>
+                        <?php } ?>
+                      </ul>
+                    </div>
+                    <?php } ?>
+
+                    <?php if ($alert['sections']) { ?>
+                    <div class="keyword-list alert-page-subsection">
+                      <h3 class="heading-with-bold-word">Which <span class="bold">section</span> should this alert apply to:</h3>
+                      <ul>
+                        <?php foreach ($alert["sections_verbose"] as $section) { ?>
+                        <li class="label label--primary-light"><?= _htmlspecialchars($section) ?>
+                        <?php } ?>
+                      </ul>
+                    </div>
+                    <?php } ?>
+
+                    <!-- Only to be displayed if there is a person in this query -->
+
+                    <?php if (array_key_exists('spokenby', $alert)) { ?>
+                      <div class="keyword-list alert-page-subsection">
+                        <h3 class="heading-with-bold-word"><?= gettext('This alert applies to the following <span class="bold">representative</span>') ?></h3>
+                        <ul>
+                        <?php foreach ($alert['spokenby'] as $speaker) { ?>
+                        <li class="label label--primary-light"><?= $speaker ?>
+
+                        <?php } ?>
+                        </ul>
+                      </div>
+                    <?php } ?>
+                  </div>
+                </div>
+                <?php } ?>
+
+                <hr>
+
+                    <div class="alert-page-header">
+                      <div>
+                        <h2>Representative alerts</h2>
+                      </div>
+                      <form action="<?= $actionurl ?>" method="post">
+                        <input type="hidden" name="mp_step" value="mp_alert">
+                        <button type="submit" class="button small">
+                          <?= gettext('Create new MP alert') ?>
+                          <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                        </button>
+                      </form>
+                      </div>
+                    <?php if ($current_mp) { ?>
+                      <h3 class="alert-page-subsection--heading"><?= gettext('Your MP') ?></h3>
+                      <ul class="alerts-manage__list">
+                          <li class="alert-section--message">
+                              <?= sprintf(gettext('You are not subscribed to an alert for your current MP, %s'), '<strong>' . htmlspecialchars($current_mp->full_name()) . '</strong>') ?>, speaks.
+                              <form action="<?= $actionurl ?>" method="post">
+                                  <input type="hidden" name="pid" value="<?= $current_mp->person_id() ?>">
+                                  <input type="submit" class="button" value="<?= gettext('Subscribe') ?>">
+                              </form>
+                          </li>
+                      </ul>
+                      <?php if (count($own_member_alerts) > 0) { ?>
+                        <hr>
+                          <p>
+                            <?= gettext('You are subscribed to the following alerts about your MP.') ?>
+                          </p>
+                          <?php include '_own_mp_alerts.php' ?>
+                      <?php } else { ?>
+                        <?php if (!in_array($own_mp_criteria, $all_keywords)) { ?>
+                        <p class="alert-page-subsection--subtitle">Alert when <?= _htmlspecialchars($own_mp_criteria) ?> is <strong>mentioned</strong></p>
+                        <form action="<?= $actionurl ?>" method="post">
+                          <input type="hidden" name="keyword" value="<?= _htmlentities($own_mp_criteria) ?>">
+                          <button type="submit" class="button small" name="action" value="Subscribe">
+                            <?= gettext('Create new alert') ?>
+                            <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                          </button>
+                        </form>
+                        <?php } ?>
+                      <?php } ?>
+                    <?php } elseif (count($own_member_alerts) > 0) { ?>
+                        <div class="alert-page-subsection">
+                          <h3 class="alert-page-subsection--heading"><?= gettext('Your MP') ?> ﹒ <?= $own_member_alerts[0]['spokenby'][0] ?></h3>
+
+                          <?php include '_own_mp_alerts.php' ?>
+                      </div>
+                    <?php } ?>
+
+                    <?php foreach ($spoken_alerts as $person_alerts) { ?>
+                      <hr>
+                      <div class="alert-page-subsection">
+                        <h3 class="alert-page-subsection--heading"><?= _htmlspecialchars(implode(', ', $person_alerts[0]['spokenby'])) ?></h3>
+
+                          <?php foreach ($person_alerts as $alert) { ?>
+                          <p class="alert-page-subsection--subtitle"><?= _htmlspecialchars($alert['criteria']) ?>
+                          <div class="alert-page-alert-controls">
+                            <form action="<?= $actionurl ?>" method="POST">
+                              <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                              <?php if ($alert['status'] == 'unconfirmed') { ?>
+                                <button type="submit" class="button small" name="action" value="Confirm">
+                                  <i aria-hidden="true" class="fi-save"></i>
+                                  <span><?= gettext('Confirm alert') ?></span>
+                                </button>
+                              <?php } elseif ($alert['status'] == 'suspended') { ?>
+                              <button type="submit" class="button button-outline small" name="action" value="Resume">
+                                <span><?= gettext('Resume alert') ?></span>
+                                <i aria-hidden="true" class="fi-play"></i>
+                              </button>
+                              <?php } else { ?>
+                              <button type="submit" class="button button--outline small" name="action" value="Suspend">
+                                <i aria-hidden="true" class="fi-pause"></i>
+                                <span><?= gettext('Suspend alert') ?></span>
+                              </button>
+                              <button type="submit" class="button small button--outline-red" name="action" value="Delete">
+                                <i aria-hidden="true" class="fi-trash"></i>
+                                <span><?= gettext('Delete alert') ?></span>
+                              </button>
+                            </form>
+                            <form action="<?= $actionurl ?>" method="POST">
+                              <input type="hidden" name="step" value="define">
+                              <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                              <button type="submit" class="button button--outline small" value="Edit">
+                                <i aria-hidden="true" class="fi-page-edit"></i>
+                                <span><?= gettext('Edit alert') ?></span>
+                              </button>
+                              <?php } ?>
+                            </form>
+                          </div>
+                          <?php } ?>
+                        <?php if (!in_array(implode('', $person_alerts[0]['spokenby']), $all_keywords)) { ?>
+                        <p class="alert-page-subsection--subtitle">Alert when <?= _htmlspecialchars(implode(', ', $person_alerts[0]['spokenby'])) ?> is <strong>mentioned</strong></p>
+                        <form action="<?= $actionurl ?>" method="post">
+                          <input type="hidden" name="keyword" value="<?= _htmlentities(implode('', $person_alerts[0]['spokenby'])) ?>">
+                          <button type="submit" class="button small" name="action" value="Subscribe">
+                            <?= gettext('Create new alert') ?>
+                            <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                          </button>
+                        </form>
+                        <?php } ?>
+                      </div>
+                    <?php } ?>
+                </div>
diff --git a/www/includes/easyparliament/templates/html/alert/_mp_alert_form.php b/www/includes/easyparliament/templates/html/alert/_mp_alert_form.php
new file mode 100644
index 0000000000..5746c14aed
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/_mp_alert_form.php
@@ -0,0 +1,76 @@
+<?php if (isset($constituencies) && count($constituencies) > 0) {
+  $member_options = true; ?>
+  <h3><?= sprintf(gettext('Sign up for alerts when Representatives for constituencies matching <i>%s</i> speaks'), _htmlspecialchars($search_term)) ?></h3>
+  <ul>
+    <?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) ?>) in <?= _htmlspecialchars($member->house_text($member->house_disp)) ?>
+              <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>"></form>
+          </li>
+    <?php } ?>
+  </ul>
+<?php } else { ?>
+  <form action="<?= $actionurl ?>" method="post" class="" id="create-alert-form">
+    <?php if (!$email_verified) { ?>
+      <p>
+        <?php if (isset($errors["email"]) && $submitted) { ?>
+          <span class="alert-page-error"><?= $errors["email"] ?></span>
+        <?php } ?>
+          <input type="email" class="form-control" placeholder="<?= gettext('Your email address') ?>" name="email" id="email" value="<?= _htmlentities($email) ?>">
+      </p>
+    <?php } ?>
+
+      <p>
+        <?php if ($pid) { ?>
+          <input type="text" class="form-control" name="mp_search" id="mp_search" disabled="disabled"
+              value="<?= $pid_member->full_name() ?><?php if ($pid_member->constituency()) { ?> (<?= _htmlspecialchars($pid_member->constituency()) ?>)<?php } ?>">
+        <?php } elseif ($keyword) { ?>
+          <input type="text" class="form-control" name="mp_search" id="mp_search" disabled="disabled" value="<?= _htmlspecialchars($display_keyword) ?>">
+        <?php } else { ?>
+          <label for="mp-postcode">Search postcode, or MP name</label>
+          <input id="mp-postcode" type="text" class="form-control" placeholder="<?= gettext('e.g. ‘B2 4QA’ or ‘John Doe’') ?>" name="mp_search" id="mp_search" value="<?= _htmlentities($search_text) ?>" style="min-width:300px;">
+        <?php } ?>
+      </p>
+
+      <p>
+          <?php if ($pid || $keyword) { ?>
+          <button type="submit" class="button" name="mp_step" value="mp_confirm">
+            <span><?= gettext('Subscribe') ?></span>
+            <i aria-hidden="true" class="fi-megaphone"></i>
+          </button>
+          <?php } else { ?>
+          <button type="submit" class="button" name="mp_step" value="mp_search">
+            <span><?= gettext('Search') ?></span>
+            <i aria-hidden="true" class="fi-magnifying-glass"></i>
+          </button>
+          <?php } ?>
+          <button type="submit" class="button button--red" name="action" value="Abandon">
+            <i aria-hidden="true" class="fi-trash"></i>
+            <span><?= gettext('Abandon changes') ?></span>
+          </button>
+      </p>
+
+      <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
+      <input type="hidden" name="submitted" value="1">
+
+    <?php if ($pid) { ?>
+      <input type="hidden" name="pid" value="<?= _htmlspecialchars($pid) ?>">
+    <?php } ?>
+    <?php if ($keyword) { ?>
+      <input type="hidden" name="keyword" value="<?= _htmlspecialchars($keyword) ?>">
+    <?php } ?>
+
+    <?php if ($sign) { ?>
+      <input type="hidden" name="sign" value="<?= _htmlspecialchars($sign) ?>">
+    <?php } ?>
+
+    <?php if ($site) { ?>
+      <input type="hidden" name="site" value="<?= _htmlspecialchars($site) ?>">
+    <?php } ?>
+  </form>
+<?php } ?>
diff --git a/www/includes/easyparliament/templates/html/alert/_own_mp_alerts.php b/www/includes/easyparliament/templates/html/alert/_own_mp_alerts.php
new file mode 100644
index 0000000000..d8d51e2fdb
--- /dev/null
+++ b/www/includes/easyparliament/templates/html/alert/_own_mp_alerts.php
@@ -0,0 +1,49 @@
+
+<?php foreach ($own_member_alerts as $alert) { ?>
+<p class="alert-page-subsection--subtitle"><?= _htmlspecialchars($alert['criteria']) ?></p>
+<div class="alert-page-alert-controls">
+  <form action="<?= $actionurl ?>" method="POST">
+    <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+    <?php if ($alert['status'] == 'unconfirmed') { ?>
+      <button type="submit" class="button button--outline small" name="action" value="Confirm">
+        <i aria-hidden="true" class="fi-save"></i>
+        <span><?= gettext('Confirm alert') ?></span>
+      </button>
+    <?php } elseif ($alert['status'] == 'suspended') { ?>
+    <button type="submit" class="button button--outline small" name="action" value="Resume">
+      <span><?= gettext('Resume alert') ?></span>
+      <i aria-hidden="true" class="fi-play"></i>
+    </button>
+    <?php } else { ?>
+    <button type="submit" class="button button--outline small" name="action" value="Suspend">
+      <i aria-hidden="true" class="fi-pause"></i>
+      <span><?= gettext('Suspend alert') ?></span>
+    </button>
+    <button type="submit" class="button button--outline-red small" name="action" value="Delete">
+      <i aria-hidden="true" class="fi-trash"></i>
+      <span><?= gettext('Delete alert') ?></span>
+    </button>
+  </form>
+  <form action="<?= $actionurl ?>" method="POST">
+    <input type="hidden" name="step" value="define">
+    <input type="hidden" name="shown_related" value="1">
+    <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+    <button type="submit" class="button button--outline small" value="Edit">
+      <i aria-hidden="true" class="fi-page-edit"></i>
+      <span><?= gettext('Edit alert') ?></span>
+    </button>
+  </form>
+    <?php } ?>
+</div>
+<?php } ?>
+
+<?php if (!in_array($own_mp_criteria, $all_keywords)) { ?>
+<p class="alert-page-subsection--subtitle">Alert when <?= _htmlspecialchars($own_mp_criteria) ?> is <strong>mentioned</strong></p>
+<form action="<?= $actionurl ?>" method="post">
+  <input type="hidden" name="keyword" value="<?= _htmlentities($own_mp_criteria) ?>">
+  <button type="submit" class="button button--outline small" name="action" value="Subscribe">
+    <?= gettext('Create new alert') ?>
+    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+  </button>
+</form>
+<?php } ?>
diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php
index 8f4deef191..12af929ee3 100644
--- a/www/includes/easyparliament/templates/html/alert/index.php
+++ b/www/includes/easyparliament/templates/html/alert/index.php
@@ -20,7 +20,7 @@
                 <p>
                     <?= gettext('You will now receive email alerts for the following criteria:') ?>
                 </p>
-                <ul><?= _htmlspecialchars($criteria) ?></ul>
+                <ul><?= _htmlspecialchars($display_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.') ?>
                 </p>
@@ -83,7 +83,7 @@
               <?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)) ?>
+                    <?= sprintf(gettext('You will now receive email alerts on any day when %s in parliament.'), _htmlspecialchars($display_criteria)) ?>
                 </p>
 
               <?php } elseif ($results == 'alert-confirmation') { ?>
@@ -104,6 +104,11 @@
                     <?= 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 == 'changes-abandoned') { ?>
+                <h3><?= gettext('Changes abandoned') ?></h3>
+                <p>
+                    <?= gettext('Those changes have been abandoned and your alerts are unchanged.') ?>
+                </p>
               <?php } elseif ($results == 'alert-fail') { ?>
                 <h3><?= gettext('Alert could not be created') ?></h3>
                 <p>
@@ -115,11 +120,22 @@
         </div>
       <?php } ?>
 
-      <?php
+      <?php if ($mp_step) { ?>
+        <div class="alert-section">
+            <div class="alert-section__primary">
+              <h1><?= gettext("Create an MP Alert") ?></h1>
+              <?php include '_mp_alert_form.php' ?>
+              </div>
+          </div>
+      <?php } elseif ($step !== '') { ?>
+        <?php include '_alert_form.php';
+      } elseif ($this_step == '') {
           if(
-              $members ||
-              (isset($constituencies) && count($constituencies) > 0) ||
-              ($alertsearch)
+              !$results && (
+                $members ||
+                (isset($constituencies) && count($constituencies) > 0) ||
+                ($alertsearch)
+              )
           ) {
               /* We need to disambiguate the user's instructions */
               $member_options = false;
@@ -129,7 +145,7 @@
 
               <?php if ($members) {
                   $member_options = true; ?>
-                <h3><?= sprintf(gettext('Sign up for alerts when people matching <i>%s</i> speaks'), _htmlspecialchars($alertsearch)) ?></h3>
+                <h3><?= sprintf(gettext('Sign up for alerts when people matching <i>%s</i> speaks'), _htmlspecialchars($search_term)) ?></h3>
                 <ul>
                   <?php
                     foreach ($members as $row) {
@@ -155,7 +171,7 @@
 
               <?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>
+                <h3><?= sprintf(gettext('Sign up for alerts when MPs for constituencies matching <i>%s</i> speaks'), _htmlspecialchars($search_term)) ?></h3>
                 <ul>
                 <?php foreach ($constituencies as $constituency => $member) { ?>
                     <li>
@@ -172,30 +188,11 @@
               <?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 } ?>
+                  if (!$member_options) { ?>
+                <h3><?= gettext('That doesn’t match a person, postcode or constituency. Search again to refine your email alert.') ?></h3>
                 <ul>
+                    <?php if (isset($mistakes['postcode_and'])) { ?>
                     <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>
-                      <?php if (isset($mistakes['multiple'])) { ?>
-                        <em class="error"><?= gettext('
-                            You have used a comma in your search term –
-                            are you sure this is what you want? You cannot
-                            sign up to multiple search terms using a comma
-                            – either use OR, or create a separate alert
-                            for each individual term.') ?>
-                        </em>
-                      <?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
@@ -205,17 +202,18 @@
                               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 } ?>
                   <?php if (isset($member_alertsearch)) { ?>
                     <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($member_alertsearch) ?>">
+                            <input type="hidden" name="step" value="define">
+                            <input type="hidden" name="words[]" value="<?= _htmlspecialchars($member_displaysearch) ?>">
+                            <input type="hidden" name="representative" value="<?= $member->full_name() ?>">
                             <?= sprintf(gettext('Mentions of [%s] by your MP, %s'), _htmlspecialchars($member_displaysearch), $member->full_name()) ?>
-                            <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
+                            <input type="submit" class="button small" value="<?= gettext('Create alert') ?>">
                         </form>
                     </li>
                   <?php } ?>
@@ -224,10 +222,12 @@
                     <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($scottish_alertsearch) ?>">
+                            <input type="hidden" name="email" valu
+                            <input type="hidden" name="step" value="define">
+                            <input type="hidden" name="words[]" value="<?= _htmlspecialchars($member_displaysearch) ?>">
+                            <input type="hidden" name="representative" value="<?= $member->full_name() ?>">
                             <?= sprintf(gettext('Mentions of [%s] by your MSP, %s'), _htmlspecialchars($member_displaysearch), $scottish_member->full_name()) ?>
-                            <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
+                            <input type="submit" class="button small" value="<?= gettext('Create alert') ?>">
                         </form>
                     </li>
                   <?php } ?>
@@ -237,143 +237,106 @@
                         <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($welsh_alertsearch) ?>">
+                            <input type="hidden" name="step" value="define">
+                            <input type="hidden" name="words[]" value="<?= _htmlspecialchars($member_displaysearch) ?>">
+                            <input type="hidden" name="representative" value="<?= $member->full_name() ?>">
                             <?= sprintf(gettext('Mentions of [%s] by your MS, %s'), _htmlspecialchars($member_displaysearch), $welsh_member->full_name()) ?>
-                            <input type="submit" class="button small" value="<?= gettext('Subscribe') ?>">
+                            <input type="submit" class="button small" value="<?= gettext('Create alert') ?>">
                         </form>
                     </li>
                   <?php } ?>
                 </ul>
+                <?php } else { ?>
+                <h3><?= gettext('Do you want alerts for a word or phrase?') ?></h3>
+                <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="step" value="define">
+                            <input type="hidden" name="words[]" value="<?= _htmlspecialchars($alertsearch) ?>">
+                            <?= sprintf(gettext('Receive alerts when %s'), _htmlspecialchars($alertsearch_pretty)) ?>
+                            <input type="submit" class="button small" value="<?= gettext('Create alert') ?>">
+                        </form>
+                    </li>
+                </ul>
+              <h3><?= gettext('Not quite right? Search again to refine your email alert.') ?></h3>
+                <?php } ?>
               <?php } ?>
+              <?php include '_mp_alert_form.php' ?>
             </div>
         </div>
-      <?php } ?>
+        <?php } else { ?>
 
         <div class="alert-section">
-            <div class="alert-section__secondary">
-              <?php if ($email_verified) { ?>
-
-                  <?php if ($alerts) { ?>
-                    <?php include('_list.php'); ?>
-                  <?php } ?>
-
-                  <?php if ($current_mp) { ?>
-                    <h3><?= gettext('Your MP alert') ?></h3>
-                    <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 } ?>
-
-              <?php } else { ?>
+            <div class="alert-section__primary">
+              <?php if (!$email_verified) { ?>
                 <p>
                     <?= sprintf(gettext('If you <a href="%s">join</a> or <a href="%s">sign in</a>, you can suspend, resume and delete your email alerts from your profile page.'), '/user/?pg=join', '/user/login/?ret=%2Falert%2F') ?>
                 </p>
                 <p>
                     <?= gettext('Plus, you won’t need to confirm your email address for every alert you set.') ?>
                 </p>
-              <?php } ?>
-            </div>
-
-            <div class="alert-section__primary">
-
-              <?php if ($pid) { ?>
-                <h3>
-                    <?php
-                        $name = $pid_member->full_name();
-                  if ($pid_member->constituency()) {
-                      $name .= ' (' . _htmlspecialchars($pid_member->constituency()) . ')';
-                  } ?>
-                    <?= sprintf(gettext('Sign up for an alert when %s speaks.'), $name) ?>
-                </h3>
-              <?php } elseif ($keyword) { ?>
-                <h3>
-                    <?= sprintf(gettext('Sign up for an alert when %s.'), _htmlspecialchars($display_keyword)) ?>
-                </h3>
-              <?php } elseif ($alertsearch) { ?>
-                <h3><?= gettext('Not quite right? Search again to refine your email alert.') ?></h3>
-              <?php } else { ?>
-                <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>
-                      <?php if (isset($errors["email"]) && $submitted) { ?>
-                        <span class="alert-page-error"><?= $errors["email"] ?></span>
-                      <?php } ?>
-                        <input type="email" class="form-control" placeholder="<?= gettext('Your email address') ?>" name="email" id="email" value="<?= _htmlentities($email) ?>">
-                    </p>
-                  <?php } ?>
-
-                    <p>
-                      <?php if ($pid) { ?>
-                        <input type="text" class="form-control" name="alertsearch" id="alertsearch" disabled="disabled"
-                            value="<?= $pid_member->full_name() ?><?php if ($pid_member->constituency()) { ?> (<?= _htmlspecialchars($pid_member->constituency()) ?>)<?php } ?>">
-                      <?php } elseif ($keyword) { ?>
-                        <input type="text" class="form-control" name="alertsearch" id="alertsearch" disabled="disabled" value="<?= _htmlspecialchars($display_keyword) ?>">
-                      <?php } else { ?>
-                        <input type="text" class="form-control" placeholder="<?= gettext('Search term, postcode, or MP name') ?>" name="alertsearch" id="alertsearch" value="<?= _htmlentities($search_text) ?>">
-                      <?php } ?>
-                        <input type="submit" class="button" value="<?= ($pid || $keyword) ? gettext('Subscribe') : gettext('Search') ?>">
-                    </p>
+              <div class="alert-page-header">
+                <h3>Create an alert for a phrase or keyword</h3>
+                <form action="<?= $actionurl ?>" method="post">
+                    <input type="hidden" name="step" value="define">
+                    <button type="submit" class="button small" value="<?= gettext('Create new keyword alert') ?>">
+                      <span><?= gettext('Create new keyword alert') ?></span>
+                      <i aria-hidden="true" class="fi-megaphone"></i>
+                    </button>
+                </form>
 
-                    <input type="hidden" name="t" value="<?= _htmlspecialchars($token) ?>">
-                    <input type="hidden" name="submitted" value="1">
+              </div>
 
-                  <?php if ($pid) { ?>
-                    <input type="hidden" name="pid" value="<?= _htmlspecialchars($pid) ?>">
-                  <?php } ?>
-                  <?php if ($keyword) { ?>
-                    <input type="hidden" name="keyword" value="<?= _htmlspecialchars($keyword) ?>">
-                  <?php } ?>
+              <h3>or</h3>
 
-                  <?php if ($sign) { ?>
-                    <input type="hidden" name="sign" value="<?= _htmlspecialchars($sign) ?>">
-                  <?php } ?>
-
-                  <?php if ($site) { ?>
-                    <input type="hidden" name="site" value="<?= _htmlspecialchars($site) ?>">
-                  <?php } ?>
+              <div class="alert-page-header">
+                <h3>Create an alert when an MP speaks</h3>
+                <form action="<?= $actionurl ?>" method="post">
+                  <input type="hidden" name="mp_step" value="mp_alert">
+                  <button type="submit" class="button small">
+                    <?= gettext('Create new MP alert') ?>
+                    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                  </button>
                 </form>
+              </div>
+              <?php } else { ?>
 
-              <?php if (!$pid && !$keyword) { ?>
-                <div class="alert-page-search-tips">
-                    <h3><?= gettext('Search tips') ?></h3>
-                    <p>
-                        <?= gettext('To be alerted on an exact <strong>phrase</strong>, be sure to put it in quotes. Also use quotes around a word to avoid stemming (where ‘horse’ would also match ‘horses’).') ?>
-                    </p>
-                    <p>
-                        <?= gettext('You should only enter <strong>one term per alert</strong> – if you wish to receive alerts on more than one thing, or for more than one person, simply fill in this form as many times as you need, or use boolean OR.') ?>
-                    </p>
-                    <p>
-                        <?= gettext('For example, if you wish to receive alerts whenever the words <i>horse</i> or <i>pony</i> are mentioned in Parliament, please fill in this form once with the word <i>horse</i> and then again with the word <i>pony</i> (or you can put <i>horse OR pony</i> with the OR in capitals). Do not put <i>horse, pony</i> as that will only sign you up for alerts where <strong>both</strong> horse and pony are mentioned.') ?>
-                    </p>
+              <div class="alert-page-header">
+                <div>
+                  <h2><?= gettext('Keywords alerts') ?></h2>
+                  <!-- Go to Create alert page -->
+                  <?php if (!$alerts) { ?>
+                    <p><?= gettext('You haven´t created any keyword alerts.') ?></p>
+                  <?php } ?>
                 </div>
+                <div class="alert-page-header__button-group">
+                <?php if ($keyword_alerts || $spoken_alerts || $own_member_alerts) { ?>
+                  <form action="<?= $actionurl ?>" method="POST" class="pull-right">
+                      <input type="hidden" name="t" value="<?= _htmlspecialchars($delete_token) ?>">
+                      <input type="submit" class="button button--negative small" name="action" value="<?= gettext('Delete All') ?>">
+                  </form>
+                <?php } ?>
+                  <form action="<?= $actionurl ?>" method="post">
+                      <input type="hidden" name="step" value="define">
+                      <button type="submit" class="button small" value="<?= gettext('Create new keyword alert') ?>">
+                        <span><?= gettext('Create new keyword alert') ?></span>
+                        <i aria-hidden="true" class="fi-megaphone"></i>
+                      </button>
+                  </form>
+                </div>
+              </div>
 
-                <div class="alert-page-search-tips">
-
-                    <h3><?= gettext('Step by step guides') ?></h3>
-                    <p>
-                        <?= gettext('The mySociety blog has a number of posts on signing up for and managing alerts:') ?>
-                    </p>
+                <!-- The groups alerts should be sorted by default from most recent mention to oldest one -->
+                <!-- Future functionality: The groups alerts can be sorted alphabetically-->
 
-                    <ul>
-                        <li><a href="https://www.mysociety.org/2014/07/23/want-to-know-what-your-mp-is-saying-subscribe-to-a-theyworkforyou-alert/"><?= gettext('How to sign up for alerts on what your MP is saying') ?></a>.</li>
-                        <li><a href="https://www.mysociety.org/2014/09/01/well-send-you-an-email-every-time-your-chosen-word-is-mentioned-in-parliament/"><?= gettext('How to sign up for alerts when your chosen word is mentioned') ?></a>.</li>
-                        <li><?= sprintf(gettext('<a href="%s">Managing email alerts</a>, including how to stop or suspend them.'), 'https://www.mysociety.org/2014/09/04/how-to-manage-your-theyworkforyou-alerts/') ?></li>
-                    <ul>
-                </div>
+                <?php include '_list_accordian.php'; ?>
               <?php } ?>
-            </div>
 
+          </div>
         </div>
-
+        <?php } ?>
+        <?php } ?>
     </div>
 </div>