diff --git a/helper.py b/helper.py
index 472762fd9..95b2a54a0 100644
--- a/helper.py
+++ b/helper.py
@@ -7,6 +7,8 @@
 import json
 import markdown
 import re
+
+import product_details
 import settings
 import sys
 import translate
@@ -470,6 +472,33 @@ def get_form_assembly_localization_url(ctx):
     return "https://mozillafoundation.tfaforms.net/wForms/3.11/js/localization-{locale}.js?v=75513df1680ccc55e2c889a1b1dff356256982a6".format(locale=fa_locale)
 
 
+@jinja2.pass_context
+def get_outdated_versions(ctx):
+    """ Get a JSON str of versions and dates of the last released minor version for outdated versions. """
+    versions = product_details.thunderbird_desktop.list_releases()
+    last_stable_release = {}
+    last_safe_release = float(settings.LAST_SAFE_VERSION)
+
+    for version in versions:
+        # major is a float, minor is a string
+        major_version = version[0]
+        minor_versions = version[1]['minor']
+
+        if len(minor_versions) > 0:
+            last_version = minor_versions[-1]
+        else:
+            last_version = str(major_version)
+
+        # Don't include safe versions
+        if major_version >= last_safe_release:
+            continue
+
+        release_date = product_details.thunderbird_desktop.get_release_date(last_version)
+        last_stable_release[major_version] = release_date
+
+    return json.dumps(last_stable_release)
+
+
 def is_calendarific_free_tier():
     """Returns if we're expecting to use the Calendarific free tier"""
     try:
diff --git a/settings.py b/settings.py
index e3afda17d..adeb38637 100644
--- a/settings.py
+++ b/settings.py
@@ -170,6 +170,7 @@
     'privacy.notices.websites': 'https://www.mozilla.org/privacy/websites/#data-tools',
     'privacy.notices.thunderbird': 'https://www.mozilla.org/privacy/thunderbird/',
     'support': 'https://support.mozilla.org/products/thunderbird/',
+    'support.old-version-upgrade': 'https://support.mozilla.org/kb/upgrading-older-version-thunderbird',
     'thunderbird.about': '/about',
     'thunderbird.about.our-mission-statement': '/about#our-mission-statement',
     'thunderbird.careers': '/careers',
@@ -387,3 +388,5 @@
     'US': ('United States', 'en'),
     'VN': ('Vietnam', 'vi'),
 }
+
+LAST_SAFE_VERSION = 102
\ No newline at end of file
diff --git a/start-page/_base-resp.html b/start-page/_base-resp.html
index f7d280b91..fbb4c525e 100644
--- a/start-page/_base-resp.html
+++ b/start-page/_base-resp.html
@@ -10,6 +10,7 @@
     <title>{% filter striptags|e %}{% block title %}{% endblock %}{% endfilter %}</title>
     {{ l10n_css() }}
     <link href="/media/css/start-style.css" rel="stylesheet" type="text/css" />
+    {% block additional_head %}{% endblock %}
   </head>
   <body class="start-bg">
     <main>
diff --git a/start-page/outdated/index.html b/start-page/outdated/index.html
index 93aec03f9..94d35cf5b 100644
--- a/start-page/outdated/index.html
+++ b/start-page/outdated/index.html
@@ -1,81 +1,122 @@
 {# This Source Code Form is subject to the terms of the Mozilla Public
- # License, v. 2.0. If a copy of the MPL was not distributed with this
- # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
-
-<!DOCTYPE html>
-<html lang="{{ LANG|replace('en-US', 'en') }}" dir="{{ DIR }}">
-  <head>
-    <meta charset="utf-8">
-    <meta name="robots" content="noindex">
-    <title>{% block title %}{{ _('Your Thunderbird is Not Up-to-Date!') }}{% endblock %}</title>
-    {{ l10n_css() }}
-    <!-- Fontawesome added below -->
-    <link href="/media/css/fontawesome-all.css" rel="stylesheet">
-    <!--<script defer src="/media/js/fontawesome-all.js"></script>-->
-    <style>
-      body {
-        background-color: #D46A6A;
-        text-align: center;
-      }
-    </style>
-  </head>
-  <body>
-    <main>
-    <h1><b><i class="fas fa-exclamation-triangle fa-3x" style="color:#0060df"></i> {{ self.title() }}</b></h1>
-    <h2 id="duration">{{ _('Your version, $vers, is no longer a supported Thunderbird release and hasn’t received updates in at least $mon months.') }}</h2>
-    <p class="fa-lg">{{ _('We <b>strongly recommend</b> downloading the <a href="%(download_url)s">latest stable version of Thunderbird</a>.')|format(download_url='https://thunderbird.net') }}</p>
-    <p class="fa-lg">{{ _('For more information, please check this <a href="%(support_url)s">support article</a> on upgrading old versions.')|format(support_url='https://support.mozilla.org/en-US/products/thunderbird') }}</p>
-    </main>
-  </body>
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
+
+{% extends "_base-resp.html" %}
+
+{% block channel %}release{% endblock %}
+{% block title %}{{ _('Your Thunderbird is Not Up-to-Date!') }}{% endblock %}
+
+{% block additional_head %}
+<style>
+  body {
+    background-image: none;
+    background-color: #991b1b;
+    color: #f1f3fa;
+    text-shadow: 1px 1px 0 black;;
+    text-align: center;
+  }
+
+  .main-content {
+    display: block;
+  }
+
+  #outdated-message {
+    text-align: center;
+  }
+  .outdated-warning-icon {
+    display: inline-block;
+    position: relative;
+    top: 8px;
+    width: 32px;
+    height: 32px;
+    color: #88ccfc;
+  }
+  a {
+    text-decoration: underline !important;
+    color: #88ccfc;
+  }
+  a:visited {
+    color: #88ccfc;
+    text-decoration: underline !important;
+  }
+  #duration {
+    text-align: center;
+    margin: auto;
+    width: 75%;
+  }
+</style>
+{% endblock %}
+
+{% block main %}
+<div class="main-content">
+  <section id="outdated-message">
+    <h1><b><span class="outdated-warning-icon">{{ svg('warning') }}</span> {{ self.title() }}</b></h1>
+    <h2 id="duration">{{ _('Thunderbird $vers is no longer supported and hasn’t received security updates in at least $time.') }}</h2>
+    <p>{{ _('We <b>strongly recommend</b> downloading the
+      <a href="%(download_url)s">latest stable version of Thunderbird</a>.')|format(download_url='https://thunderbird.net') }}
+    </p>
+    <p>{{ _('For more information, please check this
+      <a href="%(support_url)s">support article</a> on upgrading old versions.')|format(support_url=url('support.old-version-upgrade')) }}
+    </p>
+  </section>
+</div>
 <script>
+  // Date of last security release for each major version.
+  version_dates = {{ get_outdated_versions() }}
+
+  function getVersionDate(version) {
+    return new Date(version_dates[version]);
+  }
 
-// Date of last security release for each major version.
-version_dates = {
-  24: new Date(2014, 8, 2),
-  31: new Date(2015, 6, 17),
-  38: new Date(2016, 4, 4),
-  45: new Date(2017, 2, 7),
-  52: new Date(2018, 6, 10),
-  60: new Date(2019, 10, 5)
-}
-
-function monthDiff(dateFrom, dateTo) {
- return dateTo.getMonth() - dateFrom.getMonth() +
-   (12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
-}
-
-function get_browser() {
-    var ua=navigator.userAgent,tem,M=ua.match(/(firefox|thunderbird(?=\/))\/?\s*(\d+)/i) || [];
-    M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
-    if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
+  function monthDiff(dateFrom, dateTo) {
+    return dateTo.getMonth() - dateFrom.getMonth() +
+      (12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
+  }
+
+  function get_browser() {
+    var ua = navigator.userAgent, tem, M = ua.match(/(firefox|thunderbird(?=\/))\/?\s*(\d+)/i) || [];
+    M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+    if ((tem = ua.match(/version\/(\d+)/i)) != null) {
+      M.splice(1, 1, tem[1]);
+    }
     return {
       name: M[0],
       version: M[1]
     };
- }
+  }
+
+  // Clamp the version number to the closest among version_dates.
+  function get_version(vers) {
+    // This instead of Object.keys() for compatibility with old versions.
+    var versions = [], i = 0;
+    for (versions[i++] in version_dates) {
+    }
 
-// Clamp the version number to the closest among version_dates.
-function get_version(vers) {
-  // This instead of Object.keys() for compatibility with old versions.
-  var versions = [], i = 0;
-  for (versions[i++] in version_dates) {}
+    var closest = versions.reduce(function (prev, curr) {
+      return (Math.abs(curr - vers) < Math.abs(prev - vers) ? curr : prev);
+    });
 
-  var closest = versions.reduce(function(prev, curr) {
-    return (Math.abs(curr - vers) < Math.abs(prev - vers) ? curr : prev);
-  });
+    return closest;
+  }
 
-  return closest;
-}
+  // browser.name = 'Thunderbird', browser.version = '60'
+  var browser = get_browser();
+  clamped_version = get_version(browser.version);
 
-// browser.name = 'Thunderbird', browser.version = '60'
-var browser=get_browser();
-clamped_version = get_version(browser.version);
+  var rel_date = getVersionDate(clamped_version) || new Date();
+  var num_time = monthDiff(rel_date, new Date()) || 12;
+  var time_unit = 'months';
 
-var rel_date = version_dates[clamped_version] || new Date();
-var num_months = monthDiff(rel_date, new Date()) || 12;
+  if (num_time > 12) {
+    num_time = Math.round(num_time / 12);
+    time_unit = num_time > 1 ? 'years' : 'year';
+  }
 
-duration = document.getElementById('duration').innerHTML;
-document.getElementById('duration').innerHTML = duration.replace('$mon', num_months).replace('$vers', browser.version);
+  // Can't use template literal :(
+  var time_string = num_time + " " + time_unit;
 
+  duration = document.getElementById('duration').innerHTML;
+  document.getElementById('duration').innerHTML = duration.replace('$time', time_string).replace('$vers', browser.version);
 </script>
-</html>
+{% endblock %}
