diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index 4a6005d..feec92e 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -6,6 +6,7 @@
  */
 
 use Drupal\Core\Cache\Cache;
+use Drupal\Core\Template\Attribute;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 
@@ -476,7 +477,9 @@ function theme_system_modules_uninstall($variables) {
 }
 
 /**
- * Returns HTML for the Appearance page.
+ * Prepares variables for appearance page templates.
+ *
+ * Default template: system-themes-page.html.twig.
  *
  * @param $variables
  *   An associative array containing:
@@ -485,10 +488,10 @@ function theme_system_modules_uninstall($variables) {
  *
  * @ingroup themeable
  */
-function theme_system_themes_page($variables) {
+function template_preprocess_system_themes_page(&$variables) {
+  $groups = array();
   $theme_groups = $variables['theme_groups'];
-
-  $output = '<div id="system-themes-page">';
+  $variables['attributes']['id'] = 'system-themes-page';
 
   foreach ($variables['theme_group_titles'] as $state => $title) {
     if (!count($theme_groups[$state])) {
@@ -496,66 +499,70 @@ function theme_system_themes_page($variables) {
       continue;
     }
     // Start new theme group.
-    $output .= '<div class="system-themes-list system-themes-list-'. $state .' clearfix"><h2>'. $title .'</h2>';
+    $theme_group = array();
+    $theme_group['state'] = $state;
+    $theme_group['title'] = $title;
+    $theme_group['themes'] = array();
+    $theme_group['attributes'] = new Attribute(array('class' => array('system-themes-list', 'system-themes-list-' . $state, 'clearfix')));
 
     foreach ($theme_groups[$state] as $theme) {
+      $current_theme = array();
 
-      // Theme the screenshot.
+      // Screenshot depicting the theme.
       if ($theme->screenshot) {
-        $image = array(
+        $current_theme['screenshot'] = array(
           '#theme' => 'image',
           '#uri' => $theme->screenshot['uri'],
           '#alt' => $theme->screenshot['alt'],
           '#title' => $theme->screenshot['title'],
           '#attributes' => $theme->screenshot['attributes'],
         );
-        $screenshot = drupal_render($image);
       }
       else {
-        $screenshot = '<div class="no-screenshot"><div class="no-screenshot__text">' . t('no screenshot') . '</div></div>';
+        $current_theme['screenshot'] = array();
       }
 
       // Localize the theme description.
-      $description = t($theme->info['description']);
+      $current_theme['description'] = t($theme->info['description']);
 
-      // Style theme info
-      $notes = count($theme->notes) ? ' (' . join(', ', $theme->notes) . ')' : '';
+      // Style theme info.
       $theme->classes[] = 'theme-selector';
       $theme->classes[] = 'clearfix';
-      $output .= '<div class="'. join(' ', $theme->classes) .'">' . $screenshot . '<div class="theme-info"><h3>' . $theme->info['name'] . ' ' . (isset($theme->info['version']) ? $theme->info['version'] : '') . $notes . '</h3><div class="theme-description">' . $description . '</div>';
+      $current_theme['attributes'] = new Attribute(array('class' => $theme->classes));
+      $current_theme['name'] = $theme->info['name'];
+      $current_theme['version'] = isset($theme->info['version']) ? $theme->info['version'] : '';
+      $current_theme['notes'] = $theme->notes;
 
       // Make sure to provide feedback on compatibility.
+      $current_theme['incompatible'] = '';
       if (!empty($theme->incompatible_core)) {
-        $output .= '<div class="incompatible">' . t('This version is not compatible with Drupal !core_version and should be replaced.', array('!core_version' => \Drupal::CORE_COMPATIBILITY)) . '</div>';
+        $current_theme['incompatible'] = t('This version is not compatible with Drupal !core_version and should be replaced.', array('!core_version' => \Drupal::CORE_COMPATIBILITY));
       }
       elseif (!empty($theme->incompatible_php)) {
         if (substr_count($theme->info['php'], '.') < 2) {
           $theme->info['php'] .= '.*';
         }
-        $output .= '<div class="incompatible">' . t('This theme requires PHP version @php_required and is incompatible with PHP version !php_version.', array('@php_required' => $theme->info['php'], '!php_version' => phpversion())) . '</div>';
+        $current_theme['incompatible'] = t('This theme requires PHP version @php_required and is incompatible with PHP version !php_version.', array('@php_required' => $theme->info['php'], '!php_version' => phpversion()));
       }
       elseif (!empty($theme->incompatible_base)) {
-        $output .= '<div class="incompatible">' . t('This theme requires the base theme @base_theme to operate correctly.', array('@base_theme' => $theme->info['base theme'])) . '</div>';
+        $current_theme['incompatible'] = t('This theme requires the base theme @base_theme to operate correctly.', array('@base_theme' => $theme->info['base theme']));
       }
       elseif (!empty($theme->incompatible_engine)) {
-        $output .= '<div class="incompatible">' . t('This theme requires the theme engine @theme_engine to operate correctly.', array('@theme_engine' => $theme->info['engine'])) . '</div>';
-      }
-      else {
-        $links = array(
-          '#theme' => 'links',
-          '#links' => $theme->operations,
-          '#attributes' => array(
-            'class' => array('operations', 'clearfix'),
-          ),
-        );
-        $output .= drupal_render($links);
+        $current_theme['incompatible'] = t('This theme requires the theme engine @theme_engine to operate correctly.', array('@theme_engine' => $theme->info['engine']));
       }
-      $output .= '</div></div>';
+
+      // Build operation links.
+      $current_theme['operations'] = array(
+        '#theme' => 'links',
+        '#links' => $theme->operations,
+        '#attributes' => array(
+          'class' => array('operations', 'clearfix'),
+        ),
+      );
+      $theme_group['themes'][] = $current_theme;
     }
-    $output .= '</div>';
+    $groups[] = $theme_group;
   }
-  $output .= '</div>';
-
-  return $output;
+  $variables['theme_groups'] = $groups;
 }
 
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 1657f9f..5f331fa 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -154,10 +154,11 @@ function system_theme() {
   return array_merge(drupal_common_theme(), array(
     'system_themes_page' => array(
       'variables' => array(
-        'theme_groups' => NULL,
-        'theme_group_titles' => NULL,
+        'theme_groups' => array(),
+        'theme_group_titles' => array(),
       ),
       'file' => 'system.admin.inc',
+      'template' => 'system-themes-page',
     ),
     'system_config_form' => array(
       'render element' => 'form',
diff --git a/core/modules/system/templates/system-themes-page.html.twig b/core/modules/system/templates/system-themes-page.html.twig
new file mode 100644
index 0000000..80089fd
--- /dev/null
+++ b/core/modules/system/templates/system-themes-page.html.twig
@@ -0,0 +1,61 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the Appearance page.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the main container.
+ * - theme_groups: A list of theme groups. Each theme group contains:
+ *   - attributes: HTML attributes specific to this theme group.
+ *   - title: Title for the theme group.
+ *   - state: State of the theme group, e.g. enabled or disabled.
+ *   - themes: A list of themes within the theme group. Each theme contains:
+ *     - attributes: HTML attributes specific to this theme.
+ *     - screenshot: A screenshot representing the theme.
+ *     - description: Description of the theme.
+ *     - name: Theme name.
+ *     - version: The theme's version number.
+ *     - notes: Identifies what context this theme is being used in, e.g.,
+ *       default theme, admin theme.
+ *     - incompatible: Text describing any compatibility issues.
+ *     - operations: A list of operation links, e.g., Settings, Enable, Disable,
+ *       etc. these links should only be displayed if the theme is compatible.
+ *
+ * @see template_preprocess_system_themes_page()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {% for theme_group in theme_groups %}
+    <div{{ theme_group.attributes }}>
+      <h2>{{ theme_group.title }}</h2>
+      {% for theme in theme_group.themes %}
+        <div{{ theme.attributes }}>
+          {% if theme.screenshot %}
+            {{ theme.screenshot }}
+          {% else %}
+            <div class="no-screenshot">
+              <div class="no-screenshot__text">{{ "no screenshot"|t }}</div>
+            </div>
+          {% endif %}
+          <div class="theme-info">
+            <h3>
+              {{- theme.name }} {{ theme.version -}}
+              {% if theme.notes %}
+                ({{ theme.notes|join(', ') }})
+              {%- endif -%}
+            </h3>
+            <div class="theme-description">{{ theme.description }}</div>
+            {# Display operation links if the theme is compatible. #}
+            {% if theme.incompatible %}
+              <div class="incompatible">{{ theme.incompatible }}</div>
+            {% else %}
+              {{ theme.operations }}
+            {% endif %}
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>