diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss
index 5fe8d4a056..511351cd8c 100644
--- a/www/docs/style/sass/app.scss
+++ b/www/docs/style/sass/app.scss
@@ -77,6 +77,7 @@
 .fi-magnifying-glass:before,
 .fi-heart:before,
 .fi-plus:before,
+.fi-play:before,
 .fi-pause:before,
 .fi-trash:before,
 .fi-page-edit:before,
@@ -104,6 +105,7 @@
 .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"; }
diff --git a/www/includes/easyparliament/templates/html/alert/index.php b/www/includes/easyparliament/templates/html/alert/index.php
index 2dedb6159a..392ecce451 100644
--- a/www/includes/easyparliament/templates/html/alert/index.php
+++ b/www/includes/easyparliament/templates/html/alert/index.php
@@ -253,10 +253,6 @@
             <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">
@@ -282,7 +278,269 @@
             </div>
 
             <div class="alert-section__primary">
-            <?php include 'alert-mockup.php'; ?>
+              <div class="clearfix">
+                  <form action="<?= $actionurl ?>" method="POST" class="pull-right">
+                      <input type="hidden" name="t" value="< ?= _htmlspecialchars($alert['token']) ?>">
+                      <input type="submit" class="button button--negative small" name="action" value="<?= gettext('Delete All') ?>">
+                  </form>
+              </div>
+
+              <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>
+                <a class="button" href="/create-alert-page">
+                  <?= gettext('Create new alert') ?>
+                  <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                </a>
+              </div>
+
+              <!-- The groups alerts should be sorted by default from most recent mention to oldest one -->
+              <!-- Future functionality: The groups alerts can be sorted alphabetically-->
+
+              <div class="accordion">
+                <?php foreach ($keyword_alerts as $alert) { ?>
+                <div class="accordion-item">
+                  <button class="accordion-button" href="#accordion-content-1" 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-1" class="accordion-content" aria-hidden="true" role="img">
+                    <div class="accordion-content-header">
+                      <form action="<?= $actionurl ?>" method="POST">
+                        <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                        <div class="alert-controller-wrapper">
+                          <button class="button small alert-edit-button">
+                          <span><?= gettext('Edit alert') ?></span>
+                            <i aria-hidden="true" class="fi-page-edit"></i>
+                          </button>
+                          <button class="button small display-none">Discard changes</button>
+                          <?php if ($alert['status'] == 'unconfirmed') { ?>
+                            <button type="submit" class="button small" name="action" value="Confirm">
+                              <span><?= gettext('Confirm alert') ?></span>
+                              <i aria-hidden="true" class="fi-save"></i>
+                            </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 small" name="action" value="Suspend">
+                              <span><?= gettext('Suspend alert') ?></span>
+                              <i aria-hidden="true" class="fi-pause"></i>
+                            </button>
+                            <button type="submit" class="button small red" name="action" value="Delete">
+                              <span><?= gettext('Delete alert') ?></span>
+                              <i aria-hidden="true" class="fi-trash"></i>
+                            </button>
+                          <?php } ?>
+                        </div>
+                      </form>
+                      <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'] ?>" class="button small"><?= gettext('See results for this alert') ?></a>
+                        </dl>
+                    </div>
+
+                    <hr>
+
+                    <?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"><?= $keyword ?>
+                          <i aria-hidden="true" role="img" class="fi-x"></i></li>
+                        <?php } ?>
+                      </ul>
+                      <div class="add-remove-tool display-none">
+                        <input type="text" placeholder="e.g.'freedom of information'">
+                        <button type="submit" class="prefix">add</button>
+                      </div>
+                    </div>
+                    <?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"><?= $exclusion ?>
+                          <i aria-hidden="true" role="img" class="fi-x"></i></li>
+                        <?php } ?>
+                      </ul>
+                      <div class="add-remove-tool display-none">
+                        <input type="text" placeholder="e.g.'freedom of information'">
+                        <button type="submit" class="prefix">add</button>
+                      </div>
+                    </div>
+                    <?php } ?>
+
+                    <div class="keyword-list alert-page-subsection">
+                      <h3 class="display-none"><label for="sections">Which section should this alert apply to?</label></h3>
+                      <select name="sections" id="sections" class="display-none">
+                        <option value="uk-parliament">All sections</option>
+                        <option value="uk-parliament">UK Parliament</option>
+                        <option value="scottish-parliament">Scottish Parliament</option>
+                      </select>
+                      <h3 class="heading-with-bold-word">Which <span class="bold">section</span> should this alert apply to:</h3>
+                      <ul>
+                        <li class="label label--red">All sections
+                          <i aria-hidden="true" role="img" class="fi-x"></i></li>
+                      </ul>
+                    </div>
+
+                    <!-- Only to be displayed if there is a person in this query -->
+
+                    <?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 ?>
+                            <i aria-hidden="true" role="img" class="fi-x"></i></li>
+                        <?php } ?>
+                        </ul>
+                        <div class="add-remove-tool display-none">
+                          <input type="text" placeholder="e.g.'freedom of information'">
+                          <button type="submit" class="prefix">add</button>
+                        </div>
+                      </div>
+                    <?php } ?>
+
+                    <button class="display-none" style="margin: -1rem 0rem 3rem;">Save changes</button>
+                    <button class="display-none" style="margin: -1rem 0rem 3rem;">Discard changes</button>
+
+                  </div>
+                </div>
+                <?php } ?>
+
+                <hr>
+
+                <div class="alert-page-header alert-page-section">
+                  <div>
+                    <h2>Representative alerts</h2>
+                    <?php if ($current_mp) { ?>
+                      <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" value="<?= gettext('Subscribe') ?>">
+                              </form>
+                          </li>
+                      </ul>
+                    <?php } else { ?>
+                      <?php foreach ($own_member_alerts as $alert) { ?>
+                        <div class="alert-page-subsection">
+                          <h3 class="alert-page-subsection--heading"><?= gettext('Your MP') ?> ﹒ XXX</h3>
+
+                          <p class="alert-page-subsection--subtitle"><?= $alert['criteria'] ?></p>
+                          <form action="<?= $actionurl ?>" method="POST">
+                            <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                            <div>
+                              <?php if ($alert['status'] == 'unconfirmed') { ?>
+                                <button type="submit" class="button small" name="action" value="Confirm">
+                                  <span><?= gettext('Confirm alert') ?></span>
+                                  <i aria-hidden="true" class="fi-save"></i>
+                                </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 typ="submit" class="button small" value="Suspend">
+                                <span><?= gettext('Suspend alert') ?></span>
+                                <i aria-hidden="true" class="fi-pause"></i>
+                              </button>
+                              <button typ="submit" class="button small" value="Delete">
+                                <span><?= gettext('Delete alert') ?></span>
+                                <i aria-hidden="true" class="fi-trash"></i>
+                              </button>
+                              <?php } ?>
+                            </div>
+                          </form>
+
+                          <p class="alert-page-subsection--subtitle">Alert when Janne Doe is <strong>mentioned</strong></p>
+                          <button class="button small">
+                            Create new alert
+                            <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                          </button>
+                        </div>
+                      <?php } ?>
+                    <?php } ?>
+
+                    <?php foreach ($spoken_alerts as $alert) { ?>
+                        <div class="alert-page-subsection">
+                        <h3 class="alert-page-subsection--heading"><?= implode(', ', $alert['spokenby']) ?></h3>
+
+                          <p class="alert-page-subsection--subtitle"><?= $alert['criteria'] ?>
+                          <form action="<?= $actionurl ?>" method="POST">
+                            <input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
+                            <div>
+                              <?php if ($alert['status'] == 'unconfirmed') { ?>
+                                <button type="submit" class="button small" name="action" value="Confirm">
+                                  <span><?= gettext('Confirm alert') ?></span>
+                                  <i aria-hidden="true" class="fi-save"></i>
+                                </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 small" name="action" value="Suspend">
+                                <span><?= gettext('Suspend alert') ?></span>
+                                <i aria-hidden="true" class="fi-pause"></i>
+                              </button>
+                              <button type="submit" class="button small" name="action" value="Delete">
+                                <span><?= gettext('Delete alert') ?></span>
+                                <i aria-hidden="true" class="fi-trash"></i>
+                              </button>
+                              <?php } ?>
+                            </div>
+                          </form>
+
+                          <p class="alert-page-subsection--subtitle">Alert when Keir Starmer is <strong>mentioned</strong></p>
+                          <button class="button small">
+                            Create new alert
+                            <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                          </button>
+                        </div>
+                    <?php } ?>
+                  </div>
+                  <a class="button">
+                    Create new MP alert
+                    <i aria-hidden="true" role="img" class="fi-megaphone"></i>
+                  </a>
+              </div>
+              </div>
+
               <?php if ($pid) { ?>
                 <h3>
                     <?php