diff --git a/core/modules/user/user.admin.inc b/core/modules/user/user.admin.inc
index fac9723..26deecd 100644
--- a/core/modules/user/user.admin.inc
+++ b/core/modules/user/user.admin.inc
@@ -1,5 +1,7 @@
 <?php
 
+use Drupal\Core\Template\Attribute;
+
 /**
  * @file
  * Admin page callback file for the user module.
@@ -942,6 +944,44 @@ function theme_user_admin_roles($variables) {
 }
 
 /**
+ * Implements hook_preprocess_HOOK().
+ * @todo: update this once merged with head, and table.twig.html updated.
+ * @see user-admin-roles.html.twig
+ */
+function user_preprocess_user_admin_roles(&$variables) {
+  $form = $variables['form'];
+
+  $header = array(t('Name'), t('Weight'), array('data' => t('Operations'), 'colspan' => 2));
+  foreach (element_children($form['roles']) as $rid) {
+    $row = array();
+    foreach (element_children($form['roles'][$rid]) as $column) {
+      $row[] = drupal_render($form['roles'][$rid][$column]);
+    }
+    $rows[] = array('data' => $row, 'attributes' => new Attribute(array('class' => array('draggable'))));
+  }
+
+  // Distribute the role add form into table columns.
+  $form['role']['name']['#title_display'] = 'invisible';
+  unset($form['role']['name']['#description']);
+  unset($form['role']['rid']['#description']);
+
+  $actions = $form['role']['actions'];
+  unset($form['role']['actions']);
+  unset($form['role']['weight']);
+  $row = array();
+  $row[] = drupal_render($form['role']);
+  // Empty placeholder for the weight column.
+  $row[] = '';
+  $row[] = array('data' => drupal_render($actions), 'colspan' => 2);
+  $rows[] = array('data' => $row);
+
+  drupal_add_tabledrag('user-roles', 'order', 'sibling', 'role-weight');
+
+  $variables['table'] = theme('table', array('header' => $header, 'rows' => $rows, 'attributes' => array('id' => 'user-roles')));
+  $variables['form'] = drupal_render_children($form);
+}
+
+/**
  * Form to configure a single role.
  *
  * @ingroup forms
diff --git a/core/modules/user/user.module b/core/modules/user/user.module
index e2f51bf..5f073e0 100644
--- a/core/modules/user/user.module
+++ b/core/modules/user/user.module
@@ -126,6 +126,7 @@ function user_theme() {
     ),
     'user_admin_roles' => array(
       'render element' => 'form',
+      'template' => 'user-admin-roles',
       'file' => 'user.admin.inc',
     ),
     'user_permission_description' => array(
diff --git a/core/themes/stark/templates/user/user-admin-roles.html.twig b/core/themes/stark/templates/user/user-admin-roles.html.twig
new file mode 100644
index 0000000..381e427
--- /dev/null
+++ b/core/themes/stark/templates/user/user-admin-roles.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the role order and new role form.
+ *
+ * Available variables
+ * - table: A table with user roles and operations.
+ * - form: Remaining form elements for user roles table.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_user_admin_roles()
+ *
+ * @ingroup themeable
+ */
+ @todo: update this once merged with head, and table.twig.html updated.
+#}
+{{ table }}
+{{ form }}