diff --git a/core/includes/form.inc b/core/includes/form.inc
index 1c88201..0a7356f 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -240,7 +240,7 @@ function template_preprocess_fieldset(&$variables) {
  */
 function template_preprocess_details(&$variables) {
   $element = $variables['element'];
-  $variables['attributes'] = $element['#attributes'];
+  $variables['attributes'] = isset($element['#attributes']) ? $element['#attributes'] : new Attribute();
   $variables['summary_attributes'] = new Attribute();
   if (!empty($element['#title'])) {
     $variables['summary_attributes']['role'] = 'button';
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 1dd5da9..23b06f7 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -76,84 +76,87 @@ small .admin-link:after {
 /**
  * Modules page.
  */
-.system-modules thead > tr {
+.system-projects thead > tr {
   border: 0;
 }
-.system-modules div.incompatible {
+.system-projects div.incompatible {
   font-weight: bold;
 }
-.system-modules td.checkbox {
+.system-projects td.checkbox {
   min-width: 25px;
   width: 4%;
 }
-.system-modules td.module {
+.system-projects td.module {
   width: 25%;
 }
-.system-modules td {
+.system-projects td {
   vertical-align: top;
 }
-.system-modules label,
-.system-modules-uninstall label {
+.system-projects label,
+.system-projects-uninstall label {
   color: #1d1d1d;
   font-size: 1.15em;
 }
-.system-modules details {
+.system-projects details {
   color: #5c5c5b;
   line-height: 20px;
-  overflow: hidden; /* truncates descriptions if too long */
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
-.system-modules details[open] {
+.system-projects .description details[open] {
   height: auto;
-  overflow: visible;
-  white-space: normal;
 }
-.system-modules details[open] summary .text {
+.system-projects .description details[open] > summary .text {
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   text-transform: none;
 }
-.system-modules td details a {
-  color: #5C5C5B;
+.system-projects .description details a {
+  color: #5c5c5B;
   border: 0px;
 }
-.system-modules td details {
+.system-projects .description details {
   border: 0;
   margin: 0;
   height: 20px;
 }
-.system-modules td details summary {
+.system-projects .description details > summary {
   padding: 0;
   text-transform: none;
   font-weight: normal;
   cursor: default;
+  overflow: hidden; /* truncates descriptions if too long */
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.system-modules td {
+.system-projects .description details[open] > summary {
+  overflow: visible;
+  white-space: normal;
+}
+
+.system-projects td {
   padding-left: 0;
 }
 
 @media screen and (max-width: 40em) {
-  .system-modules td.name {
+  .system-projects td.name {
     width: 20%;
   }
-  .system-modules td.description {
+  .system-projects td.description {
     width: 40%;
   }
 }
-.system-modules .requirements {
+.system-projects .requirements {
   padding: 5px 0;
   max-width: 490px;
 }
-.system-modules .links {
+.system-projects .links {
   overflow: hidden; /* prevents collapse */
 }
-.system-modules .checkbox {
+.system-projects .checkbox {
   margin: 0 5px;
 }
-.system-modules .checkbox .form-item {
+.system-projects .checkbox .form-item {
   margin-bottom: 0;
 }
 .admin-requirements,
@@ -280,6 +283,12 @@ small .admin-link:after {
   body:not(.toolbar-vertical) .system-themes-list-installed .system-themes-list__header {
     margin-top: 0;
   }
+  body:not(.toolbar-vertical) .system-themes-list-installed .theme-info {
+    margin-left: 314px;
+  }
+  [dir="rtl"] body:not(.toolbar-vertical) .system-themes-list-installed .theme-info {
+    margin-right: 314px;
+  }
   body:not(.toolbar-vertical) .system-themes-list-uninstalled .theme-selector {
     box-sizing: border-box;
     width: 31.25%;
@@ -313,6 +322,12 @@ small .admin-link:after {
   .toolbar-vertical .system-themes-list-installed .theme-info__header {
     margin-top: 0;
   }
+  .toolbar-vertical .system-themes-list-installed .theme-info {
+    margin-left: 314px;
+  }
+  [dir="rtl"] .toolbar-vertical .system-themes-list-installed .theme-info {
+    margin-right: 314px;
+  }
   .toolbar-vertical .system-themes-list-uninstalled .theme-selector {
     box-sizing: border-box;
     width: 31.25%;
@@ -327,9 +342,6 @@ small .admin-link:after {
     min-height: 170px;
   }
 }
-.system-themes-list-installed .theme-info {
-  max-width: 940px;
-}
 
 .theme-selector .incompatible {
   margin-top: 10px;
diff --git a/core/modules/system/src/Form/ModulesListForm.php b/core/modules/system/src/Form/ModulesListForm.php
index 289928f..dcfdded 100644
--- a/core/modules/system/src/Form/ModulesListForm.php
+++ b/core/modules/system/src/Form/ModulesListForm.php
@@ -235,6 +235,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     // Lastly, sort all packages by title.
     uasort($form['modules'], array('\Drupal\Component\Utility\SortArray', 'sortByTitleProperty'));
 
+    $form['#attributes']['class'] = ['system-modules', 'system-projects'];
     $form['#attached']['library'][] = 'system/drupal.system.modules';
     $form['actions'] = array('#type' => 'actions');
     $form['actions']['submit'] = array(
diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index b07605f..e10823d 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -371,6 +371,15 @@ function template_preprocess_system_themes_page(&$variables) {
   $groups = array();
   $theme_groups = $variables['theme_groups'];
   $variables['attributes']['id'] = 'system-themes-page';
+  $variables['attributes']['class'] = ['system-themes', 'system-projects'];
+  $theme_infos = [];
+
+  // Build a list of theme names for all known themes
+  foreach ($variables['theme_group_titles'] as $state => $title) {
+    foreach ($theme_groups[$state] as $theme) {
+      $theme_infos[$theme->getName()] = $theme->info['name'];
+    }
+  }
 
   foreach ($variables['theme_group_titles'] as $state => $title) {
     if (!count($theme_groups[$state])) {
@@ -407,12 +416,36 @@ function template_preprocess_system_themes_page(&$variables) {
         );
       }
 
+      $version = isset($theme->info['version']) ? $theme->info['version'] : '';
+
+      $requires = [];
+      foreach (array_keys($theme->requires) as $key) {
+        $requires[$key] = isset($theme_infos[$key]) ? $theme_infos[$key] : $key;
+      }
+
+      $required_by = [];
+      foreach (array_keys($theme->required_by) as $key) {
+        $required_by[$key] = isset($theme_infos[$key]) ? $theme_infos[$key] : $key;
+      }
+
+      $description = [
+        '#theme' => 'system_project_details__theme',
+        '#machine_name' => $theme->getName(),
+        '#version' => $version,
+        '#requires' => $requires,
+        '#required_by' => $required_by,
+      ];
+
       // Localize the theme description.
-      $current_theme['description'] = t($theme->info['description']);
+      $current_theme['description'] = [
+        '#theme' => 'details',
+        '#title' => t($theme->info['description']),
+        '#description' => $description,
+      ];
 
       $current_theme['attributes'] = new Attribute();
       $current_theme['name'] = $theme->info['name'];
-      $current_theme['version'] = isset($theme->info['version']) ? $theme->info['version'] : '';
+      $current_theme['version'] = $version;
       $current_theme['notes'] = $theme->notes;
       $current_theme['is_default'] = $theme->is_default;
       $current_theme['is_admin'] = $theme->is_admin;
@@ -451,5 +484,4 @@ function template_preprocess_system_themes_page(&$variables) {
     $groups[] = $theme_group;
   }
   $variables['theme_groups'] = $groups;
-}
-
+}
\ No newline at end of file
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 027ba8b..4451af5 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -217,6 +217,14 @@ function system_theme() {
       'variables' => array('menu_items' => NULL),
       'file' => 'system.admin.inc',
     ),
+    'system_project_details' => [
+      'variables' => [
+        'machine_name' => [],
+        'version' => '',
+        'requires' => [],
+        'required_by' => [],
+      ],
+    ],
   ));
 }
 
diff --git a/core/modules/system/templates/system-project-details.html.twig b/core/modules/system/templates/system-project-details.html.twig
new file mode 100644
index 0000000..102780c
--- /dev/null
+++ b/core/modules/system/templates/system-project-details.html.twig
@@ -0,0 +1,31 @@
+
+{#
+/**
+ * @file
+ * Default theme implementation for the Project details.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the main container.
+ * - machine_name: The machine name of the project.
+ * - version: The version of the project.
+ * - requires: The names of projects required by this project.
+ * - required_by: The projects that are requires this project.
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {% if machine_name %}
+    <div>{{ 'Machine name: !machine-name'|t({'!machine-name': machine_name}) }}</div>
+  {% endif %}
+  {% if version %}
+    <div>{{ 'Version: !version'|t({'!version': version}) }}</div>
+  {% endif %}
+  {% if requires %}
+    <div>{{ 'Requires: @extensions'|t({'@extensions': requires|join(', ')}) }}</div>
+  {% endif %}
+  {% if required_by %}
+    <div>{{ 'Required by: @extensions'|t({'@extensions': required_by|join(', ')}) }}</div>
+  {% endif %}
+</div>
+
diff --git a/core/modules/system/templates/system-themes-page.html.twig b/core/modules/system/templates/system-themes-page.html.twig
index 6e65d76..af3b703 100644
--- a/core/modules/system/templates/system-themes-page.html.twig
+++ b/core/modules/system/templates/system-themes-page.html.twig
@@ -56,12 +56,12 @@
           {% endif %}
           <div class="theme-info">
             <h3 class="theme-info__header">
-              {{- theme.name }} {{ theme.version -}}
+              {{- theme.name -}}
               {% if theme.notes %}
                 ({{ theme.notes|safe_join(', ') }})
               {%- endif -%}
             </h3>
-            <div class="theme-info__description">{{ theme.description }}</div>
+            <div class="theme-info__description description">{{ theme.description }}</div>
             {# Display operation links if the theme is compatible. #}
             {% if theme.incompatible %}
               <div class="incompatible">{{ theme.incompatible }}</div>
diff --git a/core/themes/classy/templates/misc/system-project-details.html.twig b/core/themes/classy/templates/misc/system-project-details.html.twig
new file mode 100644
index 0000000..7b16cfc
--- /dev/null
+++ b/core/themes/classy/templates/misc/system-project-details.html.twig
@@ -0,0 +1,31 @@
+
+{#
+/**
+ * @file
+ * Default theme implementation for the Project details.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the main container.
+ * - machine_name: The machine name of the project.
+ * - version: The version of the project.
+ * - requires: The names of projects required by this project.
+ * - required_by: The projects that are requires this project.
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="requirements" {{ attributes }}>
+  {% if machine_name %}
+    <div class="admin-requirements">{{ 'Machine name: !machine-name'|t({'!machine-name': machine_name}) }}</div>
+  {% endif %}
+  {% if version %}
+    <div class="admin-requirements">{{ 'Version: !version'|t({'!version': version}) }}</div>
+  {% endif %}
+  {% if requires %}
+    <div class="admin-requirements">{{ 'Requires: @extensions'|t({'@extensions': requires|join(', ')}) }}</div>
+  {% endif %}
+  {% if required_by %}
+    <div class="admin-requirements">{{ 'Required by: @extensions'|t({'@extensions': required_by|join(', ')}) }}</div>
+  {% endif %}
+</div>
+
diff --git a/core/themes/seven/css/components/modules-page.css b/core/themes/seven/css/components/modules-page.css
index bc9c1e5..57c65bb 100644
--- a/core/themes/seven/css/components/modules-page.css
+++ b/core/themes/seven/css/components/modules-page.css
@@ -1,47 +1,48 @@
 /* Modules page */
-.system-modules fieldset {
+.system-projects fieldset {
   border: 0;
   border-top: 1px solid #ccc;
 }
-.system-modules details {
+.system-projects details {
   border: 0;
   margin: 0;
   padding: 0;
 }
-.system-modules summary {
+.system-projects summary {
   border-bottom: 1px solid #ccc;
 }
-.system-modules [open] summary {
+.system-projects .description summary,
+.system-projects [open] summary {
   border-bottom: none;
 }
-.system-modules .details-wrapper {
+.system-projects .details-wrapper {
   padding: 0 0 0.5em 0;
 }
-.system-modules .fieldset-wrapper {
+.system-projects .fieldset-wrapper {
   padding: 0;
 }
-.system-modules table,
+.system-projects table,
 .locale-translation-status-form table {
   border: 0;
 }
-.system-modules tr.even,
-.system-modules tr.odd,
+.system-projects tr.even,
+.system-projects tr.odd,
 .locale-translation-status-form tr.even,
 .locale-translation-status-form tr.odd {
   background: #f3f4ee;
   border: 0;
   border-bottom: 10px solid #fff;
 }
-.system-modules tr td:last-child,
+.system-projects tr td:last-child,
 .locale-translation-status-form tr td:last-child {
   border: 0;
 }
-.system-modules table th,
+.system-projects table th,
 .locale-translation-status-form table th {
   border: 0;
   border-bottom: 10px solid #fff;
 }
-.system-modules .sticky-header th,
+.system-projects .sticky-header th,
 .locale-translation-status-form .sticky-header th {
   border: 0;
 }