diff --git a/core/modules/update/css/update.admin.css b/core/modules/update/css/update.admin.css
deleted file mode 100644
index 56bf4af..0000000
--- a/core/modules/update/css/update.admin.css
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * @file
- * Styles used by the Update Manager module.
- */
-
-.update .project {
-  font-weight: bold;
-  font-size: 110%;
-  padding-left: .25em; /* LTR */
-  height: 22px;
-}
-[dir="rtl"] .update .project {
-  padding-right: .25em;
-}
-
-.update .version-status {
-  float: right; /* LTR */
-  padding-right: 10px; /* LTR */
-  font-size: 110%;
-  height: 20px;
-}
-[dir="rtl"] .update .version-status {
-  float: left;
-  padding-left: 10px;
-}
-
-.update .not-supported {
-  float: left; /* LTR */
-}
-[dir="rtl"] .update .not-supported {
-  float: right;
-}
-
-.update .version-status .icon {
-  padding-left: .5em; /* LTR */
-}
-[dir="rtl"] .update .version-status .icon {
-  padding-right: .5em;
-}
-
-.update .version-date {
-  white-space: nowrap;
-}
-
-.update .info {
-  margin: 0;
-  padding: 1em 1em .25em 1em;
-}
-
-.update tr.even,
-.update tr.odd {
-  border: none;
-}
-
-.update tr td {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-}
-
-.update tr.error {
-  background: #fcc;
-}
-
-.update tr.error .version-recommended {
-  background: #fdd;
-}
-
-.update tr.ok {
-  background: #dfd;
-}
-
-.update tr.warning {
-  background: #ffd;
-}
-
-.update tr.warning .version-recommended {
-  background: #ffe;
-}
-
-.current-version,
-.new-version {
-  direction: ltr; /* Note: version numbers should always be LTR. */
-}
-
-.update tr.unknown {
-  background: #ddd;
-}
-
-table.update,
-.update table.version {
-  width: 100%;
-  margin-top: .5em;
-  border: none;
-}
-
-.update table.version tbody {
-  border: none;
-}
-
-.update table.version tr,
-.update table.version td {
-  line-height: .9em;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: none;
-}
-
-.update table.version .version-title {
-  padding-left: 1em; /* LTR */
-  width: 14em;
-}
-[dir="rtl"] .update table.version .version-title {
-  padding-left: 1em;
-}
-
-.update table.version .version-details {
-  padding-right: .5em; /* LTR */
-}
-[dir="rtl"] .update table.version .version-details {
-  padding-left: .5em;
-  direction: ltr;
-}
-
-.update table.version .version-links {
-  text-align: right; /* LTR */
-  padding-right: 1em; /* LTR */
-}
-[dir="rtl"] .update table.version .version-links {
-  text-align: left;
-  padding-left: 1em;
-}
-
-.update table.version-security .version-title {
-  color: #970f00;
-}
-
-.update table.version-recommended-strong .version-title {
-  font-weight: bold;
-}
-
-.update .security-error {
-  font-weight: bold;
-  color: #970f00;
-}
-
-.update .check-manually {
-  padding-left: 1em; /* LTR */
-}
-[dir="rtl"] .update .check-manually {
-  padding-right: 1em;
-}
-
-.update-major-version-warning {
-  color: #ff0000;
-}
-
-table tbody tr.update-security,
-table tbody tr.update-unsupported {
-  background: #fcc;
-}
-
-th.update-project-name {
-  width: 50%;
-}
-
-.versions table ul.links {
-  list-style-type: none;
-}
diff --git a/core/modules/update/css/update.admin.theme.css b/core/modules/update/css/update.admin.theme.css
index 7f1b9e3..abf0a88 100644
--- a/core/modules/update/css/update.admin.theme.css
+++ b/core/modules/update/css/update.admin.theme.css
@@ -3,149 +3,61 @@
  * Styles used by the Update Manager module.
  */
 
-.update .project {
+.project-update__title {
   font-weight: bold;
   font-size: 110%;
-  padding-left: .25em; /* LTR */
 }
-[dir="rtl"] .update .project {
-  padding-right: .25em;
-}
-
-.update .version-status {
+.project-update__status {
   float: right; /* LTR */
   font-size: 110%;
 }
-[dir="rtl"] .update .version-status {
+[dir="rtl"] .project-update__status {
   float: left;
 }
-
-.update .not-supported {
+.project-update__status--not-supported {
   float: left; /* LTR */
 }
-[dir="rtl"] .update .not-supported {
+[dir="rtl"] .project-update__status--not-supported {
   float: right;
 }
-
-.update .version-status .icon {
-  padding-left: .5em; /* LTR */
-}
-[dir="rtl"] .update .version-status .icon {
-  padding-right: .5em;
-}
-
-.update .version-date {
-  white-space: nowrap;
-}
-
-.update .info {
-  padding: 1em 1em .25em 1em;
-}
-
-.update tr td {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
-}
-
-.update tr.error {
-  background: #fcc;
-}
-
-.update tr.error .version-recommended {
-  background: #fdd;
-}
-
-.update .ok {
-  background: #dfd;
-}
-
-.update tr.warning {
-  background: #ffd;
-}
-
-.update tr.warning .version-recommended {
-  background: #ffe;
+.project-update__status--security-error {
+  font-weight: bold;
+  color: #970f00;
 }
 
-.current-version,
-.new-version {
-  direction: ltr; /* Note: version numbers should always be LTR. */
+.project-update__status-icon {
+  padding-left: 0.5em; /* LTR */
 }
-
-.update .unknown {
-  background: #ddd;
+[dir="rtl"] .project-update__status-icon {
+  padding-left: 0;
+  padding-right: 0.5em;
 }
-
-.update,
-.update .version {
-  margin-top: .5em;
+.project-update__details {
+  padding: 1em 1em 0.25em 1em;
 }
 
-.update table.version tr,
-.update table.version td {
-  padding: 0;
-  margin: 0;
-  border: none;
+.project-update__version {
+  padding: 1em 0;
 }
-
-.update .version .version-title {
-  padding-left: 1em; /* LTR */
-  width: 14em;
-}
-[dir="rtl"] .update .version .version-title {
-  padding-left: 1em;
+.project-update__version-date {
+  white-space: nowrap;
 }
-
-.update .version .version-details {
-  padding-right: .5em; /* LTR */
+.project-update__version-details {
+  padding-right: 0.5em; /* LTR */
 }
-[dir="rtl"] .update .version .version-details {
-  padding-left: .5em;
-  direction: ltr;
+[dir="rtl"] .project-update__version-details {
+  padding-left: 0.5em;
+  direction: ltr; /* Version numbers should always be LTR. */
 }
-
-.update .version .version-links {
+.project-update__version-links {
   text-align: right; /* LTR */
   padding-right: 1em; /* LTR */
+  list-style-type: none;
 }
-[dir="rtl"] .update .version .version-links {
+[dir="rtl"] .project-update__version-links {
   text-align: left;
   padding-left: 1em;
 }
-
-.update .version-security .version-title {
-  color: #970f00;
-}
-
-.update .version-recommended-strong .version-title {
-  font-weight: bold;
-}
-
-.update .security-error {
+.project-update__version--recommended-strong .project-update__version-title {
   font-weight: bold;
-  color: #970f00;
-}
-
-.update .check-manually {
-  padding-left: 1em; /* LTR */
-}
-[dir="rtl"] .update .check-manually {
-  padding-right: 1em;
-}
-
-.update-major-version-warning {
-  color: #ff0000;
-}
-
-table tbody .update-security,
-table tbody .update-unsupported {
-  background: #fcc;
-}
-
-.update-project-name {
-  width: 50%;
-}
-
-.versions table .links {
-  list-style-type: none;
 }
diff --git a/core/modules/update/templates/update-last-check.html.twig b/core/modules/update/templates/update-last-check.html.twig
index ea6a2f2..213f724 100644
--- a/core/modules/update/templates/update-last-check.html.twig
+++ b/core/modules/update/templates/update-last-check.html.twig
@@ -13,11 +13,11 @@
  * @ingroup themeable
  */
 #}
-<div class="update checked">
+<p>
   {% if last %}
     {{ 'Last checked: @time ago'|t({'@time': time}) }}
   {% else %}
     {{ 'Last checked: never'|t }}
   {% endif %}
-  <span class="check-manually">({{ link }})</span>
-</div>
+  ({{ link }})
+</p>
diff --git a/core/modules/update/templates/update-project-status.html.twig b/core/modules/update/templates/update-project-status.html.twig
index 0db548d..b00e0b2 100644
--- a/core/modules/update/templates/update-project-status.html.twig
+++ b/core/modules/update/templates/update-project-status.html.twig
@@ -31,23 +31,25 @@
 #}
 {%
   set status_classes = [
-    project.status == constant('UPDATE_NOT_SECURE') ? 'security-error',
-    project.status == constant('UPDATE_REVOKED') ? 'revoked',
-    project.status == constant('UPDATE_NOT_SUPPORTED') ? 'not-supported',
-    project.status == constant('UPDATE_NOT_CURRENT') ? 'not-current',
-    project.status == constant('UPDATE_CURRENT') ? 'current',
+    project.status == constant('UPDATE_NOT_SECURE') ? 'project-update__status--security-error',
+    project.status == constant('UPDATE_REVOKED') ? 'project-update__status--revoked',
+    project.status == constant('UPDATE_NOT_SUPPORTED') ? 'project-update__status--not-supported',
+    project.status == constant('UPDATE_NOT_CURRENT') ? 'project-update__status--not-current',
+    project.status == constant('UPDATE_CURRENT') ? 'project-update__status--current',
   ]
 %}
-<div class="version-status">
+<div{{ status.attributes.addClass('project-update__status', status_classes) }}>
   {%- if status.label -%}
-    <span{{ status.attributes.addClass(status_classes) }}>{{ status.label }}</span>
+    <span>{{ status.label }}</span>
   {%- else -%}
     {{ status.reason }}
   {%- endif %}
-  <span class="icon">{{ status.icon }}</span>
+  <span class="project-update__status-icon">
+    {{ status.icon }}
+  </span>
 </div>
 
-<div class="project">
+<div class="project-update__title">
   {%- if url -%}
     <a href="{{ url }}">{{ title }}</a>
   {%- else -%}
@@ -55,16 +57,14 @@
   {%- endif %}
   {{ existing_version }}
   {% if install_type == 'dev' and datestamp %}
-    <span class="version-date">({{ datestamp }})</span>
+    <span class="project-update__version-date">({{ datestamp }})</span>
   {% endif %}
 </div>
 
 {% if versions %}
-  <div class="versions">
-    {% for version in versions %}
-      {{ version }}
-    {% endfor %}
-  </div>
+  {% for version in versions %}
+    {{ version }}
+  {% endfor %}
 {% endif %}
 
 {%
@@ -74,7 +74,7 @@
     project.status == constant('UPDATE_NOT_SUPPORTED') ? 'project-not-supported',
   ]
 %}
-<div class="info">
+<div class="project-updates__details">
   {% if extras %}
     <div class="extra">
       {% for extra in extras %}
@@ -84,45 +84,39 @@
       {% endfor %}
     </div>
   {% endif %}
-  <div class="includes">
-    {% set includes = includes|join(', ') %}
-    {% if disabled %}
-      {{ 'Includes:'|t }}
-      <ul>
-        <li class="first odd">
-          {% trans %}
-            Enabled: {{ includes|placeholder }}
-          {% endtrans %}
-        </li>
-        <li class="last even">
-          {% set disabled = disabled|join(', ') %}
-          {% trans %}
-            Disabled: {{ disabled|placeholder }}
-          {% endtrans %}
-        </li>
-      </ul>
-    {% else %}
-      {% trans %}
-        Includes: {{ includes|placeholder }}
-      {% endtrans %}
-    {% endif %}
-  </div>
+  {% set includes = includes|join(', ') %}
+  {% if disabled %}
+    {{ 'Includes:'|t }}
+    <ul>
+      <li>
+        {% trans %}
+          Enabled: {{ includes|placeholder }}
+        {% endtrans %}
+      </li>
+      <li>
+        {% set disabled = disabled|join(', ') %}
+        {% trans %}
+          Disabled: {{ disabled|placeholder }}
+        {% endtrans %}
+      </li>
+    </ul>
+  {% else %}
+    {% trans %}
+      Includes: {{ includes|placeholder }}
+    {% endtrans %}
+  {% endif %}
 
   {% if base_themes %}
     {% set basethemes = base_themes|join(', ') %}
-    <div class="basethemes">
-      {% trans %}
-        Depends on: {{ basethemes }}
-      {% endtrans %}
-    </div>
+    {% trans %}
+      Depends on: {{ basethemes }}
+    {% endtrans %}
   {% endif %}
 
   {% if sub_themes %}
     {% set subthemes = sub_themes|join(', ') %}
-    <div class="subthemes">
-      {% trans %}
-        Required by: {{ subthemes|placeholder }}
-      {% endtrans %}
-    </div>
+    {% trans %}
+      Required by: {{ subthemes|placeholder }}
+    {% endtrans %}
   {% endif %}
 </div>
diff --git a/core/modules/update/templates/update-version.html.twig b/core/modules/update/templates/update-version.html.twig
index d1a8063..612f5d4 100644
--- a/core/modules/update/templates/update-version.html.twig
+++ b/core/modules/update/templates/update-version.html.twig
@@ -17,22 +17,22 @@
  * @ingroup themeable
  */
 #}
-<table class="{{ attributes.class }} version"{{ attributes|without('class') }}>
-  <tr>
-    <td class="version-title">{{ title }}</td>
-    <td class="version-details">
+<div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
+  <div class="clearfix">
+    <div class="project-update__version-title layout-column quarter">{{ title }}</div>
+    <div class="project-update__version-details layout-column quarter">
       <a href="{{ version.release_link }}">{{ version.version }}</a>
-      <span class="version-date">({{ version.date|date('Y-M-d') }})</span>
-    </td>
-    <td class="version-links">
-      <ul class="links">
-        <li class="download">
+      <span class="project-update__version-date">({{ version.date|date('Y-M-d') }})</span>
+    </div>
+    <div class="layout-column half">
+      <ul class="project-update__version-links">
+        <li class="project-update__download-link">
           <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
         </li>
-        <li class="release-notes">
+        <li class="project-update__release-notes-link">
           <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
         </li>
       </ul>
-    </td>
-  </tr>
-</table>
+    </div>
+  </div>
+</div>
diff --git a/core/modules/update/update.report.inc b/core/modules/update/update.report.inc
index 61146b4..4561199 100644
--- a/core/modules/update/update.report.inc
+++ b/core/modules/update/update.report.inc
@@ -76,22 +76,18 @@ function template_preprocess_update_report(&$variables) {
     // Add project status class attribute to the table row.
     switch ($project['status']) {
       case UPDATE_CURRENT:
-        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('ok'));
-        break;
       case UPDATE_UNKNOWN:
       case UPDATE_FETCH_PENDING:
       case UPDATE_NOT_FETCHED:
-        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('unknown'));
-        break;
       case UPDATE_NOT_SECURE:
       case UPDATE_REVOKED:
       case UPDATE_NOT_SUPPORTED:
-        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('error'));
+        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('color-error'));
         break;
       case UPDATE_NOT_CHECKED:
       case UPDATE_NOT_CURRENT:
       default:
-        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('warning'));
+        $rows[$project['project_type']][$row_key]['#attributes'] = array('class' => array('color-warning'));
         break;
     }
   }
@@ -160,11 +156,11 @@ function template_preprocess_update_project_status(&$variables) {
         && count($project['security updates']) == 1
         && $project['security updates'][0]['version'] === $project['recommended']
       ) {
-        $security_class[] = 'version-recommended';
-        $security_class[] = 'version-recommended-strong';
+        $security_class[] = 'project-update__version--recommended';
+        $security_class[] = 'project-update__version---strong';
       }
       else {
-        $version_class[] = 'version-recommended';
+        $version_class[] = 'project-update__version--recommended';
         // Apply an extra class if we're displaying both a recommended
         // version and anything else for an extra visual hint.
         if ($project['recommended'] !== $project['latest_version']
@@ -176,7 +172,7 @@ function template_preprocess_update_project_status(&$variables) {
           || (isset($project['security updates'][0])
             && $project['recommended'] !== $project['security updates'][0])
         ) {
-          $version_class[] = 'version-recommended-strong';
+          $version_class[] = 'project-update__version--recommended-strong';
         }
         $versions_inner[] = array(
           '#theme' => 'update_version',
diff --git a/core/themes/seven/css/components/update-status.css b/core/themes/seven/css/components/update-status.css
deleted file mode 100644
index e02012a..0000000
--- a/core/themes/seven/css/components/update-status.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/* Update status */
-.versions table.version {
-  border: none;
-}
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index 4533e93..b029aee 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -28,7 +28,6 @@ global-styling:
       css/components/tables.css: {}
       css/components/tabs.css: {}
       css/components/tour.theme.css: {}
-      css/components/update-status.css: {}
       css/components/views-ui.css: {}
     layout:
       css/layout/layout.css: {}