diff --git a/libraries/classes/Server/UserGroups.php b/libraries/classes/Server/UserGroups.php
index 834bfb949b..1df70dcd8c 100644
--- a/libraries/classes/Server/UserGroups.php
+++ b/libraries/classes/Server/UserGroups.php
@@ -10,6 +10,7 @@ namespace PhpMyAdmin\Server;
 
 use PhpMyAdmin\Html\Generator;
 use PhpMyAdmin\Relation;
+use PhpMyAdmin\Template;
 use PhpMyAdmin\Url;
 use PhpMyAdmin\Util;
 
@@ -29,11 +30,11 @@ class UserGroups
      */
     public static function getHtmlForListingUsersofAGroup($userGroup)
     {
+        $users = [];
+        $numRows = 0;
         $relation = new Relation($GLOBALS['dbi']);
-        $html_output  = '<h2>'
-            . sprintf(__('Users of \'%s\' user group'), htmlspecialchars($userGroup))
-            . '</h2>';
 
+        $userGroupSpecialChars = htmlspecialchars($userGroup);
         $cfgRelation = $relation->getRelationsParam();
         $usersTable = Util::backquote($cfgRelation['db'])
             . '.' . Util::backquote($cfgRelation['users']);
@@ -42,28 +43,25 @@ class UserGroups
             . "'";
         $result = $relation->queryAsControlUser($sql_query, false);
         if ($result) {
-            if ($GLOBALS['dbi']->numRows($result) == 0) {
-                $html_output .= '<p>'
-                    . __('No users were found belonging to this user group.')
-                    . '</p>';
-            } else {
-                $html_output .= '<table>'
-                    . '<thead><tr><th>#</th><th>' . __('User') . '</th></tr></thead>'
-                    . '<tbody>';
+            $numRows = $GLOBALS['dbi']->numRows($result);
+            if ($numRows != 0) {
                 $i = 0;
                 while ($row = $GLOBALS['dbi']->fetchRow($result)) {
                     $i++;
-                    $html_output .= '<tr>'
-                        . '<td>' . $i . ' </td>'
-                        . '<td>' . htmlspecialchars($row[0]) . '</td>'
-                        . '</tr>';
+                    $user = [];
+                    $user['count'] = $i;
+                    $user['user'] = $row[0];
+                    $users[] = $user;
                 }
-                $html_output .= '</tbody>'
-                    . '</table>';
             }
         }
         $GLOBALS['dbi']->freeResult($result);
-        return $html_output;
+        $template = new Template();
+        return $template->render('/server/user_groups/user_listings', [
+            'user_group_special_chars' => $userGroupSpecialChars,
+            'num_rows' => $numRows,
+            'users' => $users,
+        ]);
     }
 
     /**
@@ -74,29 +72,18 @@ class UserGroups
     public static function getHtmlForUserGroupsTable()
     {
         $relation = new Relation($GLOBALS['dbi']);
-        $html_output  = '<div class="row"><h2>' . __('User groups') . '</h2></div>';
         $cfgRelation = $relation->getRelationsParam();
         $groupTable = Util::backquote($cfgRelation['db'])
             . '.' . Util::backquote($cfgRelation['usergroups']);
         $sql_query = 'SELECT * FROM ' . $groupTable . ' ORDER BY `usergroup` ASC';
         $result = $relation->queryAsControlUser($sql_query, false);
-
-        if ($result && $GLOBALS['dbi']->numRows($result)) {
-            $html_output .= '<form name="userGroupsForm" id="userGroupsForm"'
-                . ' action="' . Url::getFromRoute('/server/privileges') . '" method="post">';
-            $html_output .= Url::getHiddenInputs();
-            $html_output .= '<table id="userGroupsTable">';
-            $html_output .= '<thead><tr>';
-            $html_output .= '<th style="white-space: nowrap">'
-                . __('User group') . '</th>';
-            $html_output .= '<th>' . __('Server level tabs') . '</th>';
-            $html_output .= '<th>' . __('Database level tabs') . '</th>';
-            $html_output .= '<th>' . __('Table level tabs') . '</th>';
-            $html_output .= '<th>' . __('Action') . '</th>';
-            $html_output .= '</tr></thead>';
-            $html_output .= '<tbody>';
-
-            $userGroups = [];
+        $numRows = $GLOBALS['dbi']->numRows($result);
+        $userGroups = [];
+        $userGroupsValues = [];
+        $action = Url::getFromRoute('/server/privileges');
+        $hidden_inputs = null;
+        if ($result && $numRows) {
+            $hidden_inputs = Url::getHiddenInputs();
             while ($row = $GLOBALS['dbi']->fetchAssoc($result)) {
                 $groupName = $row['usergroup'];
                 if (! isset($userGroups[$groupName])) {
@@ -104,66 +91,56 @@ class UserGroups
                 }
                 $userGroups[$groupName][$row['tab']] = $row['allowed'];
             }
+
             foreach ($userGroups as $groupName => $tabs) {
-                $html_output .= '<tr>';
-                $html_output .= '<td>' . htmlspecialchars($groupName) . '</td>';
-                $html_output .= '<td>' . self::getAllowedTabNames($tabs, 'server') . '</td>';
-                $html_output .= '<td>' . self::getAllowedTabNames($tabs, 'db') . '</td>';
-                $html_output .= '<td>' . self::getAllowedTabNames($tabs, 'table') . '</td>';
+                $userGroupVal = [];
+                $userGroupVal['name'] = htmlspecialchars($groupName);
+                $userGroupVal['serverTab'] = self::getAllowedTabNames($tabs, 'server');
+                $userGroupVal['dbTab'] = self::getAllowedTabNames($tabs, 'db');
+                $userGroupVal['tableTab'] = self::getAllowedTabNames($tabs, 'table');
+                $userGroupVal['userGroupUrl'] = Url::getFromRoute('/server/user-groups');
+                $userGroupVal['viewUsersUrl'] = Url::getCommon(
+                    [
+                        'viewUsers' => 1,
+                        'userGroup' => $groupName,
+                    ],
+                    ''
+                );
+                $userGroupVal['viewUsersIcon'] = Generator::getIcon('b_usrlist', __('View users'));
 
-                $html_output .= '<td>';
-                $html_output .= '<a class="" href="' . Url::getFromRoute('/server/user-groups') . '" data-post="'
-                    . Url::getCommon(
-                        [
-                            'viewUsers' => 1,
-                            'userGroup' => $groupName,
-                        ],
-                        ''
-                    )
-                    . '">'
-                    . Generator::getIcon('b_usrlist', __('View users'))
-                    . '</a>';
-                $html_output .= '&nbsp;&nbsp;';
-                $html_output .= '<a class="" href="' . Url::getFromRoute('/server/user-groups') . '" data-post="'
-                    . Url::getCommon(
-                        [
-                            'editUserGroup' => 1,
-                            'userGroup' => $groupName,
-                        ],
-                        ''
-                    )
-                    . '">'
-                    . Generator::getIcon('b_edit', __('Edit')) . '</a>';
-                $html_output .= '&nbsp;&nbsp;';
-                $html_output .= '<a class="deleteUserGroup ajax"'
-                    . ' href="' . Url::getFromRoute('/server/user-groups') . '" data-post="'
-                    . Url::getCommon(
-                        [
-                            'deleteUserGroup' => 1,
-                            'userGroup' => $groupName,
-                        ],
-                        ''
-                    )
-                    . '">'
-                    . Generator::getIcon('b_drop', __('Delete')) . '</a>';
-                $html_output .= '</td>';
+                $userGroupVal['editUsersUrl'] = Url::getCommon(
+                    [
+                        'editUserGroup' => 1,
+                        'userGroup' => $groupName,
+                    ],
+                    ''
+                );
+                $userGroupVal['editUsersIcon'] = Generator::getIcon('b_edit', __('Edit'));
 
-                $html_output .= '</tr>';
+                $userGroupVal['deleteUsersUrl'] = Url::getCommon(
+                    [
+                        'deleteUserGroup' => 1,
+                        'userGroup' => $groupName,
+                    ],
+                    ''
+                );
+                $userGroupVal['deleteUsersIcon'] = Generator::getIcon('b_drop', __('Delete'));
+                $userGroupsValues[] = $userGroupVal;
             }
-
-            $html_output .= '</tbody>';
-            $html_output .= '</table>';
-            $html_output .= '</form>';
         }
+        $addUserUrl = Url::getFromRoute('/server/user-groups', ['addUserGroup' => 1]);
+        $addUserIcon = Generator::getIcon('b_usradd');
         $GLOBALS['dbi']->freeResult($result);
-
-        $html_output .= '<div class="row"><fieldset id="fieldset_add_user_group">';
-        $html_output .= '<a href="' . Url::getFromRoute('/server/user-groups', ['addUserGroup' => 1]) . '">'
-            . Generator::getIcon('b_usradd')
-            . __('Add user group') . '</a>';
-        $html_output .= '</fieldset></div>';
-
-        return $html_output;
+        $template = new Template();
+        return  $template->render('server/user_groups/user_groups', [
+            'action' => $action,
+            'hidden_inputs' => isset($hidden_inputs) ? $hidden_inputs : '',
+            'result' => $result,
+            'has_rows' => $numRows,
+            'user_groups_values' => $userGroupsValues,
+            'add_user_url' => $addUserUrl,
+            'add_user_icon' => $addUserIcon,
+        ]);
     }
 
     /**
@@ -224,44 +201,22 @@ class UserGroups
     public static function getHtmlToEditUserGroup($userGroup = null)
     {
         $relation = new Relation($GLOBALS['dbi']);
-        $html_output = '';
-        if ($userGroup == null) {
-            $html_output .= '<h2>' . __('Add user group') . '</h2>';
-        } else {
-            $html_output .= '<h2>'
-                . sprintf(__('Edit user group: \'%s\''), htmlspecialchars($userGroup))
-                . '</h2>';
-        }
-
-        $html_output .= '<form name="userGroupForm" id="userGroupForm"'
-            . ' action="' . Url::getFromRoute('/server/user-groups') . '" method="post">';
         $urlParams = [];
+
+        $editUserGroupSpecialChars = '';
+        if ($userGroup != null) {
+            $editUserGroupSpecialChars = htmlspecialchars($userGroup);
+        }
         if ($userGroup != null) {
             $urlParams['userGroup'] = $userGroup;
             $urlParams['editUserGroupSubmit'] = '1';
         } else {
             $urlParams['addUserGroupSubmit'] = '1';
         }
-        $html_output .= Url::getHiddenInputs($urlParams);
-
-        $html_output .= '<fieldset id="fieldset_user_group_rights">';
-        $html_output .= '<legend>' . __('User group menu assignments')
-            . '&nbsp;&nbsp;&nbsp;'
-            . '<input type="checkbox" id="addUsersForm_checkall" '
-            . 'class="checkall_box" title="Check all">'
-            . '<label for="addUsersForm_checkall">' . __('Check all') . '</label>'
-            . '</legend>';
-
-        if ($userGroup == null) {
-            $html_output .= '<label for="userGroup">' . __('Group name:') . '</label>';
-            $html_output .= '<input type="text" name="userGroup" maxlength="64" autocomplete="off" required="required">';
-            $html_output .= '<div class="clearfloat"></div>';
-        }
-
         $allowedTabs = [
             'server' => [],
-            'db'     => [],
-            'table'  => [],
+            'db' => [],
+            'table' => [],
         ];
         if ($userGroup != null) {
             $cfgRelation = $relation->getRelationsParam();
@@ -288,31 +243,30 @@ class UserGroups
             }
             $GLOBALS['dbi']->freeResult($result);
         }
-
-        $html_output .= self::getTabList(
+        $tabList = self::getTabList(
             __('Server-level tabs'),
             'server',
             $allowedTabs['server']
         );
-        $html_output .= self::getTabList(
+        $tabList .= self::getTabList(
             __('Database-level tabs'),
             'db',
             $allowedTabs['db']
         );
-        $html_output .= self::getTabList(
+        $tabList .= self::getTabList(
             __('Table-level tabs'),
             'table',
             $allowedTabs['table']
         );
 
-        $html_output .= '</fieldset>';
-
-        $html_output .= '<fieldset id="fieldset_user_group_rights_footer"'
-            . ' class="tblFooters">';
-        $html_output .= '<input class="btn btn-primary" type="submit" value="' . __('Go') . '">';
-        $html_output .= '</fieldset>';
-
-        return $html_output;
+        $template = new Template();
+        return $template->render('/server/user_groups/edit_user_groups', [
+            'user_group' => $userGroup,
+            'edit_user_group_special_chars' => $editUserGroupSpecialChars,
+            'user_group_url' => Url::getFromRoute('/server/user-groups'),
+            'hidden_inputs' => Url::getHiddenInputs($urlParams),
+            'tab_list' => $tabList,
+        ]);
     }
 
     /**
@@ -328,20 +282,20 @@ class UserGroups
     public static function getTabList($title, $level, array $selected)
     {
         $tabs = Util::getMenuTabList($level);
-        $html_output = '<fieldset>';
-        $html_output .= '<legend>' . $title . '</legend>';
+        $tabDetails = [];
         foreach ($tabs as $tab => $tabName) {
-            $html_output .= '<div class="item">';
-            $html_output .= '<input type="checkbox" class="checkall"'
-                . (in_array($tab, $selected) ? ' checked="checked"' : '')
-                . ' name="' . $level . '_' . $tab . '" value="Y">';
-            $html_output .= '<label for="' . $level . '_' . $tab . '">'
-                . '<code>' . $tabName . '</code>'
-                . '</label>';
-            $html_output .= '</div>';
+            $tabDetail = [];
+            $tabDetail['in_array'] = (in_array($tab, $selected) ? ' checked="checked"' : '');
+            $tabDetail['tab'] = $tab;
+            $tabDetail['tab_name'] = $tabName;
+            $tabDetails[] =$tabDetail;
         }
-        $html_output .= '</fieldset>';
-        return $html_output;
+        $template = new Template();
+        return $template->render('/server/user_groups/tab_list', [
+            'title' => $title,
+            'level' => $level,
+            'tab_details' => $tabDetails,
+        ]);
     }
 
     /**
diff --git a/templates/server/user_groups/edit_user_groups.twig b/templates/server/user_groups/edit_user_groups.twig
new file mode 100644
index 0000000000..6215c2bc5f
--- /dev/null
+++ b/templates/server/user_groups/edit_user_groups.twig
@@ -0,0 +1,23 @@
+{% if user_group == null %}
+    <h2>{% trans 'Add user group' %}</h2>
+{% else %}
+    <h2>{{ 'Edit user group: \'%s\''|trans|format(edit_user_group_special_chars) }}</h2>
+{% endif %}
+<form name="userGroupForm" id="userGroupForm" action="{{ user_group_url|raw }}" method="post">
+    {{ hidden_inputs|raw }}
+    <fieldset id="fieldset_user_group_rights">
+        <legend>{% trans 'User group menu assignments' %} &nbsp;&nbsp;&nbsp;
+            <input type="checkbox" id="addUsersForm_checkall" class="checkall_box" title="Check all">
+            <label for="addUsersForm_checkall">{% trans 'Check all' %}</label>
+        </legend>
+        {% if user_group == null %}
+            <label for="userGroup">{% trans 'Group name:' %}</label>
+            <input type="text" name="userGroup" maxlength="64" autocomplete="off" required="required">
+            <div class="clearfloat"></div>
+        {% endif %}
+        {{ tab_list|raw }}
+    </fieldset>
+    <fieldset id="fieldset_user_group_rights_footer" class="tblFooters">
+        <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
+    </fieldset>
+</form>
diff --git a/templates/server/user_groups/tab_list.twig b/templates/server/user_groups/tab_list.twig
new file mode 100644
index 0000000000..5b8a140278
--- /dev/null
+++ b/templates/server/user_groups/tab_list.twig
@@ -0,0 +1,13 @@
+<fieldset>
+    <legend>
+        {{ title }}
+    </legend>
+    {% for tab_detail in tab_details %}
+        <div class="item">
+            <input type="checkbox" class="checkall"{{ tab_detail.in_array|raw }} name="{{ level }}_{{ tab_detail.tab }}" value="Y">
+            <label for="{{ level }}_{{ tab_detail.tab }}">
+                <code>{{ tab_detail.tab_name }}</code>
+            </label>
+        </div>
+    {% endfor %}
+</fieldset>
diff --git a/templates/server/user_groups/user_groups.twig b/templates/server/user_groups/user_groups.twig
new file mode 100644
index 0000000000..4f8b9466c8
--- /dev/null
+++ b/templates/server/user_groups/user_groups.twig
@@ -0,0 +1,49 @@
+<div class="row"><h2>{% trans 'User groups' %}</h2></div>
+{% if  has_rows > 0 %}
+    <form name="userGroupsForm" id="userGroupsForm" action="{{ action|raw }}" method="post">
+        {{ hidden_inputs|raw  }}
+        <table id="userGroupsTable">
+            <thead>
+                <tr>
+                    <th style="white-space: nowrap">
+                        {% trans 'User groups' %}
+                    </th>
+                    <th>
+                        {% trans 'Server level tabs' %}
+                    </th>
+                    <th>
+                        {% trans 'Database level tabs' %}
+                    </th>
+                    <th>
+                        {% trans 'Table level tabs' %}
+                    </th>
+                    <th>
+                        {% trans 'Action' %}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for groupName in user_groups_values %}
+                    <tr>
+                        <td>{{ groupName.name }}</td>
+                        <td>{{ groupName.serverTab }}</td>
+                        <td>{{ groupName.dbTab }}</td>
+                        <td>{{ groupName.tableTab }}</td>
+                        <td>
+                            <a class="" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.viewUsersUrl|raw }}">{{ groupName.viewUsersIcon|raw }}</a>
+                            &nbsp;&nbsp;
+                            <a class="" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.editUsersUrl|raw }}">{{ groupName.editUsersIcon|raw }}</a>
+                            &nbsp;&nbsp;
+                            <a class="deleteUserGroup ajax" href="{{ groupName.userGroupUrl|raw }}" data-post="{{ groupName.deleteUsersUrl|raw }}">{{ groupName.deleteUsersIcon|raw }}</a>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </form>
+{% endif %}
+<div class="row">
+    <fieldset id="fieldset_add_user_group">
+        <a href="{{ add_user_url|raw }}">{{ add_user_icon|raw }}{% trans 'Add user group' %}</a>
+    </fieldset>
+</div>
diff --git a/templates/server/user_groups/user_listings.twig b/templates/server/user_groups/user_listings.twig
new file mode 100644
index 0000000000..54fcef6d2d
--- /dev/null
+++ b/templates/server/user_groups/user_listings.twig
@@ -0,0 +1,22 @@
+<h2>{{ 'Users of \'%s\' user group'|trans|format(user_group_special_chars) }}</h2>
+{% if num_rows == 0 %}
+    <p>{% trans 'No users were found belonging to this user group.' %}</p>
+{% else %}
+<table>
+    <thead>
+        <tr>
+            <th>#</th>
+            <th>{% trans 'User' %}</th>
+        </tr>
+    </thead>
+    <tbody>
+    {% for obj in users %}
+        <tr>
+            <td>{{ obj.count }}</td>
+            <td>{{ obj.user }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+
+{% endif %}