diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index 697f8c7..2f08da7 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -5,6 +5,7 @@
  * Admin page callbacks for the system module.
  */
 
+use Drupal\Core\Template\Attribute;
 use Symfony\Component\HttpFoundation\RedirectResponse;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 
@@ -499,7 +500,9 @@ function theme_system_modules_uninstall($variables) {
 }
 
 /**
- * Returns HTML for the Appearance page.
+ * Prepares variables for the appearance page template.
+ *
+ * Default template: system-themes-page.html.twig.
  *
  * @param $variables
  *   An associative array containing:
@@ -508,10 +511,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])) {
@@ -519,65 +522,68 @@ 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'] = '<div class="no-screenshot"><div class="no-screenshot__text">' . t('no screenshot') . '</div></div>';
       }
 
       // 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) . ')' : '';
       $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'] = count($theme->notes) ? '(' . join(', ', $theme->notes) . ')' : '';
 
       // Make sure to provide feedback on compatibility.
       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['compatibility'] = 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['compatibility'] = 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['compatibility'] = 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>';
+        $current_theme['compatibility'] = t('This theme requires the theme engine @theme_engine to operate correctly.', array('@theme_engine' => $theme->info['engine']));
       }
       else {
-        $links = array(
+        $current_theme['compatibility'] = array(
           '#theme' => 'links',
           '#links' => $theme->operations,
           '#attributes' => array(
             'class' => array('operations', 'clearfix'),
           ),
         );
-        $output .= drupal_render($links);
       }
-      $output .= '</div></div>';
+      $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 fc6f61c..a590690 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -151,10 +151,12 @@ 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(),
+        'admin_theme_options' => 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..185e94e
--- /dev/null
+++ b/core/modules/system/templates/system-themes-page.html.twig
@@ -0,0 +1,58 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the Appearance page.
+ *
+ * Available variables:
+ * - attributes: HTML element attributes.
+ * - theme_groups: A list of theme groups.
+ *
+ * Each theme_groups[group] contains a list of theme groups.
+ *
+ * Each group in theme_groups[group] contains:
+ * - attributes: Element attributes specific to this group.
+ * - title: Title for the theme group.
+ * - state: State of the theme group.
+ * - themes: A list of themes within that group.
+ *
+ * Each group.themes[theme] contains a a list of themes.
+ *
+ * Each theme in group.themes[theme] contains:
+ * - attributes: Element attributes specific to this theme.
+ * - screenshot: Render of theme screenshot.
+ * - description: Description of the theme.
+ * - name: Name of theme.
+ * - version: Verions number of theme.
+ * - notes: Identifies what context this theme is being used.
+ *   eg. (default theme, admin theme)
+ * - compatibility: Description of any incompatibility issues,
+ *   if the theme is compatible, provides a list of links.
+ *
+ * @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 }} {{ theme.notes }}</h3>
+            <div class="theme-description">{{ theme.description }}</div>
+            {{ theme.compatibility }}
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>