diff --git a/libraries/classes/Database/Designer.php b/libraries/classes/Database/Designer.php
index c6a35c4cf4..6594a727b9 100644
--- a/libraries/classes/Database/Designer.php
+++ b/libraries/classes/Database/Designer.php
@@ -32,13 +32,13 @@ class Designer
      */
     public static function getHtmlForEditOrDeletePages($db, $operation)
     {
-        return Template::get('database/designer/edit_delete_pages')
-            ->render(
-                array(
-                    'db' => $db,
-                    'operation' => $operation
-                )
-            );
+        $cfgRelation = Relation::getRelationsParam();
+        return Template::get('database/designer/edit_delete_pages')->render([
+            'db' => $db,
+            'operation' => $operation,
+            'pdfwork' => $cfgRelation['pdfwork'],
+            'pages' => self::getPageIdsAndNames($db),
+        ]);
     }
 
     /**
@@ -50,12 +50,12 @@ class Designer
      */
     public static function getHtmlForPageSaveAs($db)
     {
-        return Template::get('database/designer/page_save_as')
-            ->render(
-                array(
-                    'db' => $db
-                )
-            );
+        $cfgRelation = Relation::getRelationsParam();
+        return Template::get('database/designer/page_save_as')->render([
+            'db' => $db,
+            'pdfwork' => $cfgRelation['pdfwork'],
+            'pages' => self::getPageIdsAndNames($db),
+        ]);
     }
 
     /**
@@ -148,22 +148,20 @@ class Designer
      * Returns HTML for the menu bar of the designer page
      *
      * @param boolean $visualBuilder whether this is visual query builder
-     * @param string  $selected_page name of the selected page
-     * @param array   $params_array  array with class name for various buttons on side
-     *                               menu
+     * @param string  $selectedPage  name of the selected page
+     * @param array   $paramsArray   array with class name for various buttons
+     *                               on side menu
      *
      * @return string html
      */
-    public static function getPageMenu($visualBuilder, $selected_page, array $params_array)
+    public static function getPageMenu($visualBuilder, $selectedPage, array $paramsArray)
     {
-        return Template::get('database/designer/side_menu')
-            ->render(
-                array(
-                    'visualBuilder' => $visualBuilder,
-                    'selected_page' => $selected_page,
-                    'params_array' => $params_array
-                )
-            );
+        return Template::get('database/designer/side_menu')->render([
+            'visual_builder' => $visualBuilder,
+            'selected_page' => $selectedPage,
+            'params_array' => $paramsArray,
+            'theme' => $GLOBALS['PMA_Theme'],
+        ]);
     }
 
     /**
@@ -274,13 +272,15 @@ class Designer
      */
     public static function getHtmlTableList(array $tab_pos, $display_page)
     {
-        return Template::get('database/designer/table_list')
-            ->render(
-                array(
-                    'tab_pos' => $tab_pos,
-                    'display_page' => $display_page
-                )
-            );
+        return Template::get('database/designer/table_list')->render([
+            'tab_pos' => $tab_pos,
+            'display_page' => $display_page,
+            'theme' => $GLOBALS['PMA_Theme'],
+            'table_names' => $GLOBALS['PMD']['TABLE_NAME'],
+            'table_names_url' => $GLOBALS['PMD_URL']['TABLE_NAME'],
+            'table_names_small_url' => $GLOBALS['PMD_URL']['TABLE_NAME_SMALL'],
+            'table_names_out' => $GLOBALS['PMD_OUT']['TABLE_NAME'],
+        ]);
     }
 
     /**
@@ -295,18 +295,30 @@ class Designer
      * @return string html
      */
     public static function getDatabaseTables(
-        array $tab_pos, $display_page, array $tab_column, array $tables_all_keys, array $tables_pk_or_unique_keys
+        array $tab_pos,
+        $display_page,
+        array $tab_column,
+        array $tables_all_keys,
+        array $tables_pk_or_unique_keys
     ) {
-        return Template::get('database/designer/database_tables')
-            ->render(
-                array(
-                    'tab_pos' => $tab_pos,
-                    'display_page' => $display_page,
-                    'tab_column' => $tab_column,
-                    'tables_all_keys' => $tables_all_keys,
-                    'tables_pk_or_unique_keys' => $tables_pk_or_unique_keys
-                )
-            );
+        return Template::get('database/designer/database_tables')->render([
+            'db' => $GLOBALS['db'],
+            'get_db' => $_GET['db'],
+            'query' => $_REQUEST['query'],
+            'tab_pos' => $tab_pos,
+            'display_page' => $display_page,
+            'tab_column' => $tab_column,
+            'tables_all_keys' => $tables_all_keys,
+            'tables_pk_or_unique_keys' => $tables_pk_or_unique_keys,
+            'table_names' => $GLOBALS['PMD']['TABLE_NAME'],
+            'table_names_url' => $GLOBALS['PMD_URL']['TABLE_NAME'],
+            'table_names_small' => $GLOBALS['PMD']['TABLE_NAME_SMALL'],
+            'table_names_small_url' => $GLOBALS['PMD_URL']['TABLE_NAME_SMALL'],
+            'table_names_small_out' => $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'],
+            'table_types' => $GLOBALS['PMD']['TABLE_TYPE'],
+            'owner_out' => $GLOBALS['PMD_OUT']['OWNER'],
+            'theme' => $GLOBALS['PMA_Theme'],
+        ]);
     }
 
     /**
diff --git a/libraries/classes/Twig/PhpFunctionsExtension.php b/libraries/classes/Twig/PhpFunctionsExtension.php
index 78c77ecd25..0fc41329d3 100644
--- a/libraries/classes/Twig/PhpFunctionsExtension.php
+++ b/libraries/classes/Twig/PhpFunctionsExtension.php
@@ -28,6 +28,7 @@ class PhpFunctionsExtension extends Twig_Extension
             new Twig_SimpleFunction('array_search', 'array_search'),
             new Twig_SimpleFunction('md5', 'md5'),
             new Twig_SimpleFunction('preg_replace', 'preg_replace'),
+            new Twig_SimpleFunction('strstr', 'strstr'),
         );
     }
 }
diff --git a/libraries/classes/Twig/RelationExtension.php b/libraries/classes/Twig/RelationExtension.php
index fd4c78acdc..38861ac8bf 100644
--- a/libraries/classes/Twig/RelationExtension.php
+++ b/libraries/classes/Twig/RelationExtension.php
@@ -30,6 +30,11 @@ class RelationExtension extends Twig_Extension
                 'PhpMyAdmin\Relation::foreignDropdown',
                 array('is_safe' => array('html'))
             ),
+            new Twig_SimpleFunction(
+                'Relation_getDisplayField',
+                'PhpMyAdmin\Relation::getDisplayField',
+                array('is_safe' => array('html'))
+            ),
             new Twig_SimpleFunction(
                 'Relation_getForeignData',
                 'PhpMyAdmin\Relation::getForeignData'
diff --git a/libraries/classes/Twig/UtilExtension.php b/libraries/classes/Twig/UtilExtension.php
index 843971d2b6..000cc703ce 100644
--- a/libraries/classes/Twig/UtilExtension.php
+++ b/libraries/classes/Twig/UtilExtension.php
@@ -60,6 +60,11 @@ class UtilExtension extends Twig_Extension
                 'PhpMyAdmin\Util::getDivForSliderEffect',
                 array('is_safe' => array('html'))
             ),
+            new Twig_SimpleFunction(
+                'Util_getDocuLink',
+                'PhpMyAdmin\Util::getDocuLink',
+                array('is_safe' => array('html'))
+            ),
             new Twig_SimpleFunction(
                 'Util_getDropdown',
                 'PhpMyAdmin\Util::getDropdown',
@@ -103,6 +108,10 @@ class UtilExtension extends Twig_Extension
                 'PhpMyAdmin\Util::getSupportedDatatypes',
                 array('is_safe' => array('html'))
             ),
+            new Twig_SimpleFunction(
+                'Util_isForeignKeySupported',
+                'PhpMyAdmin\Util::isForeignKeySupported'
+            ),
             new Twig_SimpleFunction(
                 'Util_linkOrButton',
                 'PhpMyAdmin\Util::linkOrButton',
diff --git a/templates/database/designer/database_tables.phtml b/templates/database/designer/database_tables.phtml
deleted file mode 100644
index f7ff9f0d56..0000000000
--- a/templates/database/designer/database_tables.phtml
+++ /dev/null
@@ -1,132 +0,0 @@
-<?php for ($i = 0, $l = count($GLOBALS['PMD']["TABLE_NAME"]); $i < $l; $i++) :
-    $t_n = $GLOBALS['PMD']["TABLE_NAME"][$i];
-    $t_n_url = htmlspecialchars($GLOBALS['PMD_URL']["TABLE_NAME"][$i]); ?>
-    <input name="t_x[<?= $t_n_url; ?>]" type="hidden" id="t_x_<?= $t_n_url; ?>_" />
-    <input name="t_y[<?= $t_n_url; ?>]" type="hidden" id="t_y_<?= $t_n_url; ?>_" />
-    <input name="t_v[<?= $t_n_url; ?>]" type="hidden" id="t_v_<?= $t_n_url; ?>_" />
-    <input name="t_h[<?= $t_n_url; ?>]" type="hidden" id="t_h_<?= $t_n_url; ?>_" />
-    <!-- Why should we put styles here?! -->
-    <table id="<?= $t_n_url; ?>"
-           cellpadding="0"
-           cellspacing="0"
-           class="pmd_tab"
-           style="position:absolute; left:<?= (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["X"] : rand(20, 700)); ?>px; top:<?= (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["Y"] : rand(20, 550)); ?>px; display:<?= (isset($tab_pos[$t_n]) || $display_page == -1) ? 'block;' : 'none';?>; z-index: 1;">
-        <thead>
-            <tr class="header">
-                <?php if (isset($_REQUEST['query'])) : ?>
-                    <td class="select_all">
-                        <input class="select_all_1"
-                               type="checkbox"
-                               style="margin: 0;"
-                               value="select_all_<?= htmlspecialchars($t_n_url); ?>"
-                               id="select_all_<?= htmlspecialchars($t_n_url); ?>"
-                               title="select all"
-                               pmd_url_table_name="<?= htmlspecialchars($t_n_url); ?>"
-                               pmd_out_owner="<?= htmlspecialchars($GLOBALS['PMD_OUT']['OWNER'][$i]); ?>">
-                    </td>
-                <?php endif; ?>
-                <td class="small_tab"
-                    title="<?= __('Show/hide columns'); ?>"
-                    id="id_hide_tbody_<?= htmlspecialchars($t_n_url) ?>"
-                    table_name="<?= htmlspecialchars($t_n_url); ?>">
-                    <?= (! isset($tab_pos[$t_n]) || ! empty($tab_pos[$t_n]["V"])) ? 'v' : '&gt;'; ?>
-                </td>
-                <td class="small_tab_pref small_tab_pref_1"
-                    table_name_small="<?= htmlspecialchars($GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i]); ?>">
-                    <img src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/exec_small.png'); ?>"
-                         title="<?= __('See table structure'); ?>" />
-                </td>
-                <td id="id_zag_<?= htmlspecialchars($t_n_url); ?>"
-                    class="tab_zag nowrap tab_zag_noquery"
-                    table_name="<?= htmlspecialchars($t_n_url); ?>"
-                    query_set="<?= isset($_REQUEST['query']) ? 1 : 0 ; ?>" >
-                    <span class="owner">
-                        <?= $GLOBALS['PMD_OUT']["OWNER"][$i]; ?>
-                    </span>
-                    <?= $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i]; ?>
-                </td>
-                <?php if (isset($_REQUEST['query'])) : ?>
-                    <td class="tab_zag tab_zag_query"
-                        id="id_zag_<?= htmlspecialchars($t_n_url); ?>_2"
-                        table_name="<?= htmlspecialchars($t_n_url); ?>">
-                    </td>
-               <?php endif; ?>
-            </tr>
-        </thead>
-        <tbody id="id_tbody_<?= $t_n_url; ?>" style="<?= (isset($tab_pos[$t_n]) && empty($tab_pos[$t_n]["V"])) ? 'display: none' : ''; ?>">
-            <?php $display_field = PhpMyAdmin\Relation::getDisplayField(
-                $_GET['db'],
-                $GLOBALS['PMD']["TABLE_NAME_SMALL"][$i]
-            );
-            for ($j = 0, $id_cnt = count($tab_column[$t_n]["COLUMN_ID"]); $j < $id_cnt; $j++) :
-                $tmpColumn = $t_n . "." . $tab_column[$t_n]["COLUMN_NAME"][$j];
-                $click_field_param = array(
-                    $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i],
-                    urlencode($tab_column[$t_n]["COLUMN_NAME"][$j])
-                );
-                if (!PhpMyAdmin\Util::isForeignKeySupported($GLOBALS['PMD']['TABLE_TYPE'][$i])) {
-                    $click_field_param[] = isset($tables_pk_or_unique_keys[$tmpColumn]) ? 1 : 0;
-                } else {
-                    // if foreign keys are supported, it's not necessary that the
-                    // index is a primary key
-                    $click_field_param[] = isset($tables_all_keys[$tmpColumn]) ? 1 : 0;
-                }
-                $click_field_param[] = $GLOBALS['db']
-                ?>
-                <tr id="id_tr_<?= htmlspecialchars($GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i]); ?>.<?= htmlspecialchars($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
-                    <?= ($display_field == $tab_column[$t_n]["COLUMN_NAME"][$j]) ? 'class="tab_field_3"' : 'class="tab_field"'; ?>
-                    click_field_param="<?= htmlspecialchars(implode($click_field_param, ',')); ?>">
-                    <?php if (isset($_REQUEST['query'])) : ?>
-                        <td class="select_all">
-                            <input class="select_all_store_col"
-                                   value="<?= htmlspecialchars($t_n_url) , urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
-                                   type="checkbox"
-                                   id="select_<?= htmlspecialchars($t_n_url); ?>._<?= urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
-                                   style="margin: 0;"
-                                   title="select_<?= urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
-                                   store_column_param="<?= urlencode($GLOBALS['PMD_OUT']["TABLE_NAME_SMALL"][$i]); ?>,<?= htmlspecialchars($GLOBALS['PMD_OUT']["OWNER"][$i]); ?>,<?= urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>">
-                        </td>
-                    <?php endif; ?>
-                    <td width="10px" colspan="3" id="<?= $t_n_url; ?>.<?= urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>">
-                        <div class="nowrap">
-                            <?php if (isset($tables_pk_or_unique_keys[$t_n . "." . $tab_column[$t_n]["COLUMN_NAME"][$j]])) : ?>
-                                <img src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/FieldKey_small.png'); ?>" alt="*" />
-                            <?php else :
-                                $type = 'pmd/Field_small';
-                                if (strstr($tab_column[$t_n]["TYPE"][$j], 'char')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'text')
-                                ) {
-                                    $type .= '_char';
-                                } elseif (strstr($tab_column[$t_n]["TYPE"][$j], 'int')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'float')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'double')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'decimal')
-                                ) {
-                                    $type .= '_int';
-                                } elseif (strstr($tab_column[$t_n]["TYPE"][$j], 'date')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'time')
-                                    || strstr($tab_column[$t_n]["TYPE"][$j], 'year')
-                                ) {
-                                    $type .= '_date';
-                                }
-                                ?>
-                                <img src="<?= $GLOBALS['PMA_Theme']->getImgPath($type); ?>.png" alt="*" />
-                            <?php endif; ?>
-                            <?= htmlspecialchars(
-                                $tab_column[$t_n]["COLUMN_NAME"][$j] . " : "
-                                . $tab_column[$t_n]["TYPE"][$j],
-                                ENT_QUOTES
-                            ); ?>
-                        </div>
-                    </td>
-                    <?php if (isset($_REQUEST['query'])) : ?>
-                        <td class="small_tab_pref small_tab_pref_click_opt"
-                            Click_option_param="pmd_optionse,<?= urlencode($tab_column[$t_n]['COLUMN_NAME'][$j]); ?>,<?= $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i]; ?>" >
-                            <img src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/exec_small.png'); ?>" title="options" />
-                        </td>
-                    <?php endif; ?>
-                </tr>
-            <?php endfor; ?>
-        </tbody>
-    </table>
-<?php endfor; ?>
diff --git a/templates/database/designer/database_tables.twig b/templates/database/designer/database_tables.twig
new file mode 100644
index 0000000000..e29522abaa
--- /dev/null
+++ b/templates/database/designer/database_tables.twig
@@ -0,0 +1,128 @@
+{% for i in 0..table_names|length - 1 %}
+    {% set t_n = table_names[i] %}
+    {% set t_n_url = table_names_url[i] %}
+    <input name="t_x[{{ t_n_url }}]" type="hidden" id="t_x_{{ t_n_url }}_" />
+    <input name="t_y[{{ t_n_url }}]" type="hidden" id="t_y_{{ t_n_url }}_" />
+    <input name="t_v[{{ t_n_url }}]" type="hidden" id="t_v_{{ t_n_url }}_" />
+    <input name="t_h[{{ t_n_url }}]" type="hidden" id="t_h_{{ t_n_url }}_" />
+    <table id="{{ t_n_url }}"
+        cellpadding="0"
+        cellspacing="0"
+        class="pmd_tab"
+        style="position:absolute; left:
+            {{- tab_pos[t_n] is defined ? tab_pos[t_n]['X'] : random(range(20, 700)) }}px; top:
+            {{- tab_pos[t_n] is defined ? tab_pos[t_n]['Y'] : random(range(20, 550)) }}px; display:
+            {{- tab_pos[t_n] is defined or display_page == -1 ? 'block' : 'none' }}; z-index: 1;">
+        <thead>
+            <tr class="header">
+                {% if query is defined %}
+                    <td class="select_all">
+                        <input class="select_all_1"
+                            type="checkbox"
+                            style="margin: 0;"
+                            value="select_all_{{ t_n_url }}"
+                            id="select_all_{{ t_n_url }}"
+                            title="select all"
+                            pmd_url_table_name="{{ t_n_url }}"
+                            pmd_out_owner="{{ owner_out[i]|raw }}">
+                    </td>
+                {% endif %}
+                <td class="small_tab"
+                    title="{% trans 'Show/hide columns' %}"
+                    id="id_hide_tbody_{{ t_n_url }}"
+                    table_name="{{ t_n_url }}">
+                    {{ tab_pos[t_n] is not defined or tab_pos[t_n]['V'] is not empty ? 'v' : '&gt;' }}
+                </td>
+                <td class="small_tab_pref small_tab_pref_1"
+                    table_name_small="{{ table_names_small_url[i] }}">
+                    <img src="{{ theme.getImgPath('pmd/exec_small.png') }}"
+                        title="{% trans 'See table structure' %}" />
+                </td>
+                <td id="id_zag_{{ t_n_url }}"
+                    class="tab_zag nowrap tab_zag_noquery"
+                    table_name="{{ t_n_url }}"
+                    query_set="{{ query is defined ? 1 : 0 }}">
+                    <span class="owner">
+                        {{ owner_out[i]|raw }}
+                    </span>
+                    {{ table_names_small_out[i]|raw }}
+                </td>
+                {% if query is defined %}
+                    <td class="tab_zag tab_zag_query"
+                        id="id_zag_{{ t_n_url }}_2"
+                        table_name="{{ t_n_url }}">
+                    </td>
+               {% endif %}
+            </tr>
+        </thead>
+        <tbody id="id_tbody_{{ t_n_url }}"
+            {{- tab_pos[t_n] is defined and tab_pos[t_n]['V'] is empty ? ' style="display: none"' }}>
+            {% set display_field = Relation_getDisplayField(get_db, table_names_small[i]) %}
+            {% for j in 0..tab_column[t_n]['COLUMN_ID']|length - 1 %}
+                {% set tmp_column = t_n ~ '.' ~ tab_column[t_n]['COLUMN_NAME'][j] %}
+                {% set click_field_param = [
+                    table_names_small_url[i],
+                    tab_column[t_n]['COLUMN_NAME'][j]|url_encode
+                ] %}
+                {% if not Util_isForeignKeySupported(table_types[i]) %}
+                    {% set click_field_param = click_field_param|merge([tables_pk_or_unique_keys[tmp_column] is defined ? 1 : 0]) %}
+                {% else %}
+                    {# if foreign keys are supported, it's not necessary that the
+                    index is a primary key #}
+                    {% set click_field_param = click_field_param|merge([tables_all_keys[tmp_column] is defined ? 1 : 0]) %}
+                {% endif %}
+                {% set click_field_param = click_field_param|merge([db]) %}
+                <tr id="id_tr_{{ table_names_small_url[i] }}.{{ tab_column[t_n]['COLUMN_NAME'][j] }}" class="tab_field
+                    {{- display_field == tab_column[t_n]['COLUMN_NAME'][j] ? '_3' }}" click_field_param="
+                    {{- click_field_param|join(',') }}">
+                    {% if query is defined %}
+                        <td class="select_all">
+                            <input class="select_all_store_col"
+                                value="{{ t_n_url }}{{ tab_column[t_n]['COLUMN_NAME'][j]|url_encode }}"
+                                type="checkbox"
+                                id="select_{{ t_n_url }}._{{ tab_column[t_n]['COLUMN_NAME'][j]|url_encode }}"
+                                style="margin: 0;"
+                                title="select_{{ tab_column[t_n]['COLUMN_NAME'][j]|url_encode }}"
+                                store_column_param="{{ table_names_small_out[i]|url_encode }},
+                                    {{- owner_out[i] }},
+                                    {{- tab_column[t_n]['COLUMN_NAME'][j]|url_encode }}">
+                        </td>
+                    {% endif %}
+                    <td width="10px" colspan="3" id="{{ t_n_url }}.
+                        {{- tab_column[t_n]['COLUMN_NAME'][j]|url_encode }}">
+                        <div class="nowrap">
+                            {% if tables_pk_or_unique_keys[t_n ~ '.' ~ tab_column[t_n]['COLUMN_NAME'][j]] is defined %}
+                                <img src="{{ theme.getImgPath('pmd/FieldKey_small.png') }}" alt="*" />
+                            {% else %}
+                                {% set type = 'pmd/Field_small' %}
+                                {% if strstr(tab_column[t_n]['TYPE'][j], 'char')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'text') %}
+                                    {% set type = type ~ '_char' %}
+                                {% elseif strstr(tab_column[t_n]['TYPE'][j], 'int')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'float')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'double')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'decimal') %}
+                                    {% set type = type ~ '_int' %}
+                                {% elseif strstr(tab_column[t_n]['TYPE'][j], 'date')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'time')
+                                    or strstr(tab_column[t_n]['TYPE'][j], 'year') %}
+                                    {% set type = type ~ '_date' %}
+                                {% endif %}
+                                <img src="{{ theme.getImgPath(type) }}.png" alt="*" />
+                            {% endif %}
+                            {{ tab_column[t_n]['COLUMN_NAME'][j] }} : {{ tab_column[t_n]['TYPE'][j] }}
+                        </div>
+                    </td>
+                    {% if query is defined %}
+                        <td class="small_tab_pref small_tab_pref_click_opt"
+                            click_option_param="pmd_optionse,
+                                {{- tab_column[t_n]['COLUMN_NAME'][j]|url_encode }},
+                                {{- table_names_small_out[i] }}">
+                            <img src="{{ theme.getImgPath('pmd/exec_small.png') }}" title="options" />
+                        </td>
+                    {% endif %}
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+{% endfor %}
diff --git a/templates/database/designer/edit_delete_pages.phtml b/templates/database/designer/edit_delete_pages.phtml
deleted file mode 100644
index a8f8efd25a..0000000000
--- a/templates/database/designer/edit_delete_pages.phtml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?php $cfgRelation = PhpMyAdmin\Relation::getRelationsParam(); ?>
-<form action="db_designer.php" method="post" name="edit_delete_pages" id="edit_delete_pages" class="ajax">
-    <?= PhpMyAdmin\Url::getHiddenInputs($db); ?>
-    <fieldset id="page_edit_delete_options">
-        <input type="hidden" name="operation" value="<?= $operation; ?>" />
-        <label for="selected_page">
-            <?= $operation == 'editPage' ? __("Page to open") : __("Page to delete"); ?>:
-        </label>
-        <?= PhpMyAdmin\Template::get('database/designer/page_selector')->render([
-            'pdfwork' => $cfgRelation['pdfwork'],
-            'pages' => PhpMyAdmin\Database\Designer::getPageIdsAndNames($db),
-        ]); ?>
-    </fieldset>
-</form>
diff --git a/templates/database/designer/edit_delete_pages.twig b/templates/database/designer/edit_delete_pages.twig
new file mode 100644
index 0000000000..5efe362484
--- /dev/null
+++ b/templates/database/designer/edit_delete_pages.twig
@@ -0,0 +1,13 @@
+<form action="db_designer.php" method="post" name="edit_delete_pages" id="edit_delete_pages" class="ajax">
+    {{ Url_getHiddenInputs(db) }}
+    <fieldset id="page_edit_delete_options">
+        <input type="hidden" name="operation" value="{{ operation }}" />
+        <label for="selected_page">
+            {{ operation == 'editPage' ? 'Page to open'|trans : 'Page to delete'|trans }}:
+        </label>
+        {% include 'database/designer/page_selector.twig' with {
+            'pdfwork': pdfwork,
+            'pages': pages
+        } only %}
+    </fieldset>
+</form>
diff --git a/templates/database/designer/page_save_as.phtml b/templates/database/designer/page_save_as.phtml
deleted file mode 100644
index b26be3a6d5..0000000000
--- a/templates/database/designer/page_save_as.phtml
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-$cfgRelation = PhpMyAdmin\Relation::getRelationsParam();
-$choices = array(
-    'same' => __('Save to selected page'),
-    'new' => __('Create a page and save to it')
-);
-?>
-<form action="db_designer.php" method="post" name="save_as_pages" id="save_as_pages" class="ajax">
-    <?= PhpMyAdmin\Url::getHiddenInputs($db); ?>
-    <fieldset id="page_save_as_options">
-        <table>
-            <tbody>
-                <tr>
-                    <td>
-                        <input type="hidden" name="operation" value="savePage" />
-                        <?= PhpMyAdmin\Template::get('database/designer/page_selector')->render([
-                            'pdfwork' => $cfgRelation['pdfwork'],
-                            'pages' => PhpMyAdmin\Database\Designer::getPageIdsAndNames($db),
-                        ]); ?>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <?= PhpMyAdmin\Util::getRadioFields('save_page', $choices, 'same', true); ?>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <label for="selected_value"><?= __('New page name'); ?></label>
-                        <input type="text" name="selected_value" id="selected_value" />
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </fieldset>
-</form>
diff --git a/templates/database/designer/page_save_as.twig b/templates/database/designer/page_save_as.twig
new file mode 100644
index 0000000000..a3b6d63943
--- /dev/null
+++ b/templates/database/designer/page_save_as.twig
@@ -0,0 +1,37 @@
+<form action="db_designer.php" method="post" name="save_as_pages" id="save_as_pages" class="ajax">
+    {{ Url_getHiddenInputs(db) }}
+    <fieldset id="page_save_as_options">
+        <table>
+            <tbody>
+                <tr>
+                    <td>
+                        <input type="hidden" name="operation" value="savePage" />
+                        {% include 'database/designer/page_selector.twig' with {
+                            'pdfwork': pdfwork,
+                            'pages': pages
+                        } only %}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        {{ Util_getRadioFields(
+                            'save_page',
+                            {
+                                'same': 'Save to selected page'|trans,
+                                'new': 'Create a page and save to it'|trans
+                            },
+                            'same',
+                            true
+                        ) }}
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="selected_value">{% trans 'New page name' %}</label>
+                        <input type="text" name="selected_value" id="selected_value" />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </fieldset>
+</form>
diff --git a/templates/database/designer/side_menu.phtml b/templates/database/designer/side_menu.phtml
deleted file mode 100644
index d32d4b6f19..0000000000
--- a/templates/database/designer/side_menu.phtml
+++ /dev/null
@@ -1,195 +0,0 @@
-<?php
-function getImg($path)
-{
-    return $GLOBALS['PMA_Theme']->getImgPath($path);
-}
-?>
-<?php if (!$visualBuilder) : ?>
-    <div id="name-panel" style="overflow:hidden">
-        <span id="page_name" style="border:none">
-            <?= $selected_page == null ? __("Untitled") : htmlspecialchars($selected_page); ?>
-        </span>
-        <span id="saved_state" style="border:none">
-            <?= $selected_page == null ? '*' : ''; ?>
-        </span>
-    </div>
-<?php endif; ?>
-<div class="pmd_header side-menu" id="side_menu">
-    <a class="M_butt" id="key_Show_left_menu" href="#">
-        <img title="<?= __('Show/Hide tables list'); ?>"
-             alt="v"
-             src="<?= getImg('pmd/downarrow2_m.png'); ?>"
-             data-down="<?= getImg('pmd/downarrow2_m.png'); ?>"
-             data-up="<?= getImg('pmd/uparrow2_m.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Show/Hide tables list'); ?>
-        </span>
-    </a>
-    <a href="#" id="toggleFullscreen" class="M_butt">
-        <img title="<?= __('View in fullscreen'); ?>"
-             src="<?= getImg('pmd/viewInFullscreen.png'); ?>"
-             data-enter="<?= getImg('pmd/viewInFullscreen.png'); ?>"
-             data-exit="<?= getImg('pmd/exitFullscreen.png'); ?>" />
-        <span class="hide hidable"
-              data-exit="<?= __('Exit fullscreen'); ?>"
-              data-enter="<?= __('View in fullscreen'); ?>">
-            <?= __('View in fullscreen'); ?>
-        </span>
-    </a>
-    <a href="#" id="addOtherDbTables" class="M_butt">
-        <img title="<?= __('Add tables from other databases'); ?>"
-             src="<?= getImg('pmd/other_table.png'); ?>"/>
-        <span class="hide hidable">
-            <?= __('Add tables from other databases'); ?>
-        </span>
-    </a>
-    <?php if (! $visualBuilder) : ?>
-        <a id="newPage" href="#" class="M_butt">
-            <img title="<?= __('New page'); ?>"
-                 alt=""
-                 src="<?= getImg('pmd/page_add.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('New page'); ?>
-            </span>
-        </a>
-        <a href="#" id="editPage" class="M_butt ajax">
-            <img title="<?= __('Open page'); ?>"
-                 src="<?= getImg('pmd/page_edit.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Open page'); ?>
-            </span>
-        </a>
-        <a href="#" id="savePos" class="M_butt">
-            <img title="<?= __('Save page'); ?>"
-                 src="<?= getImg('pmd/save.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Save page'); ?>
-            </span>
-        </a>
-        <a href="#" id="SaveAs" class="M_butt ajax">
-            <img title="<?= __('Save page as'); ?>"
-                 src="<?= getImg('pmd/save_as.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Save page as'); ?>
-            </span>
-        </a>
-        <a href="#" id="delPages" class="M_butt ajax">
-            <img title="<?= __('Delete pages'); ?>"
-                 src="<?= getImg('pmd/page_delete.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Delete pages'); ?>
-            </span>
-        </a>
-        <a href="#" id="StartTableNew" class="M_butt">
-            <img title="<?= __('Create table'); ?>"
-                 src="<?= getImg('pmd/table.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Create table'); ?>
-            </span>
-        </a>
-        <a href="#" class="M_butt" id="rel_button">
-            <img title="<?= __('Create relationship'); ?>"
-                 src="<?= getImg('pmd/relation.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Create relationship'); ?>
-            </span>
-        </a>
-        <a href="#" class="M_butt" id="display_field_button">
-            <img title="<?= __('Choose column to display'); ?>"
-                 src="<?= getImg('pmd/display_field.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Choose column to display'); ?>
-            </span>
-        </a>
-        <a href="#" id="reloadPage" class="M_butt">
-            <img title="<?= __('Reload'); ?>"
-                 src="<?= getImg('pmd/reload.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Reload'); ?>
-            </span>
-        </a>
-        <a href="<?= PhpMyAdmin\Util::getDocuLink('faq', 'faq6-31'); ?>"
-           target="documentation"
-           class="M_butt">
-            <img title="<?= __('Help'); ?>"
-                 src="<?= getImg('pmd/help.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Help'); ?>
-            </span>
-        </a>
-    <?php endif; ?>
-    <a href="#" class="<?= $params_array['angular_direct']; ?>" id="angular_direct_button">
-        <img title="<?= __('Angular links'); ?> / <?= __('Direct links'); ?>"
-             src="<?= getImg('pmd/ang_direct.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Angular links'); ?> / <?= __('Direct links'); ?>
-        </span>
-    </a>
-    <a href="#" class="<?= $params_array['snap_to_grid']; ?>" id="grid_button">
-        <img title="<?= __('Snap to grid'); ?>" src="<?= getImg('pmd/grid.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Snap to grid'); ?>
-        </span>
-    </a>
-    <a href="#" class="<?= $params_array['small_big_all']; ?>" id="key_SB_all">
-        <img title="<?= __('Small/Big All'); ?>"
-             alt="v"
-             src="<?= getImg('pmd/downarrow1.png'); ?>"
-             data-down="<?= getImg('pmd/downarrow1.png'); ?>"
-             data-right="<?= getImg('pmd/rightarrow1.png') ?>" />
-        <span class="hide hidable">
-            <?= __('Small/Big All'); ?>
-        </span>
-    </a>
-    <a href="#" id="SmallTabInvert" class="M_butt" >
-        <img title="<?= __('Toggle small/big'); ?>"
-             src="<?= getImg('pmd/bottom.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Toggle small/big'); ?>
-        </span>
-    </a>
-    <a href="#" id="relLineInvert" class="<?= $params_array['relation_lines']; ?>" >
-        <img title="<?= __('Toggle relationship lines'); ?>"
-             src="<?= getImg('pmd/toggle_lines.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Toggle relationship lines'); ?>
-        </span>
-    </a>
-    <?php if (! $visualBuilder) : ?>
-        <a href="#" id="exportPages" class="M_butt" >
-            <img title="<?= __('Export schema'); ?>"
-                 src="<?= getImg('pmd/export.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Export schema'); ?>
-            </span>
-        </a>
-    <?php else: ?>
-        <a id="build_query_button"
-           class="M_butt"
-           href="#"
-           class="M_butt">
-            <img title="<?= __('Build Query'); ?>"
-                 src="<?= getImg('pmd/query_builder.png'); ?>" />
-            <span class="hide hidable">
-                <?= __('Build Query'); ?>
-            </span>
-        </a>
-    <?php endif; ?>
-    <a href="#" class="<?= $params_array['side_menu']; ?>" id="key_Left_Right">
-        <img title="<?= __('Move Menu'); ?>" alt=">"
-             data-right="<?= getImg('pmd/2leftarrow_m.png'); ?>"
-             src="<?= getImg('pmd/2rightarrow_m.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Move Menu'); ?>
-        </span>
-    </a>
-    <a href="#" class="<?= $params_array['pin_text']; ?>" id="pin_Text">
-        <img title="<?= __('Pin text'); ?>"
-             alt=">"
-             data-right="<?= getImg('pmd/anchor.png'); ?>"
-             src="<?= getImg('pmd/anchor.png'); ?>" />
-        <span class="hide hidable">
-            <?= __('Pin text'); ?>
-        </span>
-    </a>
-</div>
diff --git a/templates/database/designer/side_menu.twig b/templates/database/designer/side_menu.twig
new file mode 100644
index 0000000000..ddcc158e47
--- /dev/null
+++ b/templates/database/designer/side_menu.twig
@@ -0,0 +1,189 @@
+{% if not visual_builder %}
+    <div id="name-panel" style="overflow:hidden">
+        <span id="page_name" style="border:none">
+            {{ selected_page == null ? 'Untitled'|trans : selected_page }}
+        </span>
+        <span id="saved_state" style="border:none">
+            {{ selected_page == null ? '*' : '' }}
+        </span>
+    </div>
+{% endif %}
+<div class="pmd_header side-menu" id="side_menu">
+    <a class="M_butt" id="key_Show_left_menu" href="#">
+        <img title="{% trans 'Show/Hide tables list' %}"
+             alt="v"
+             src="{{ theme.getImgPath('pmd/downarrow2_m.png') }}"
+             data-down="{{ theme.getImgPath('pmd/downarrow2_m.png') }}"
+             data-up="{{ theme.getImgPath('pmd/uparrow2_m.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Show/Hide tables list' %}
+        </span>
+    </a>
+    <a href="#" id="toggleFullscreen" class="M_butt">
+        <img title="{% trans 'View in fullscreen' %}"
+             src="{{ theme.getImgPath('pmd/viewInFullscreen.png') }}"
+             data-enter="{{ theme.getImgPath('pmd/viewInFullscreen.png') }}"
+             data-exit="{{ theme.getImgPath('pmd/exitFullscreen.png') }}" />
+        <span class="hide hidable"
+              data-exit="{% trans 'Exit fullscreen' %}"
+              data-enter="{% trans 'View in fullscreen' %}">
+            {% trans 'View in fullscreen' %}
+        </span>
+    </a>
+    <a href="#" id="addOtherDbTables" class="M_butt">
+        <img title="{% trans 'Add tables from other databases' %}"
+             src="{{ theme.getImgPath('pmd/other_table.png') }}"/>
+        <span class="hide hidable">
+            {% trans 'Add tables from other databases' %}
+        </span>
+    </a>
+    {% if not visual_builder %}
+        <a id="newPage" href="#" class="M_butt">
+            <img title="{% trans 'New page' %}"
+                 alt=""
+                 src="{{ theme.getImgPath('pmd/page_add.png') }}" />
+            <span class="hide hidable">
+                {% trans 'New page' %}
+            </span>
+        </a>
+        <a href="#" id="editPage" class="M_butt ajax">
+            <img title="{% trans 'Open page' %}"
+                 src="{{ theme.getImgPath('pmd/page_edit.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Open page' %}
+            </span>
+        </a>
+        <a href="#" id="savePos" class="M_butt">
+            <img title="{% trans 'Save page' %}"
+                 src="{{ theme.getImgPath('pmd/save.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Save page' %}
+            </span>
+        </a>
+        <a href="#" id="SaveAs" class="M_butt ajax">
+            <img title="{% trans 'Save page as' %}"
+                 src="{{ theme.getImgPath('pmd/save_as.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Save page as' %}
+            </span>
+        </a>
+        <a href="#" id="delPages" class="M_butt ajax">
+            <img title="{% trans 'Delete pages' %}"
+                 src="{{ theme.getImgPath('pmd/page_delete.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Delete pages' %}
+            </span>
+        </a>
+        <a href="#" id="StartTableNew" class="M_butt">
+            <img title="{% trans 'Create table' %}"
+                 src="{{ theme.getImgPath('pmd/table.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Create table' %}
+            </span>
+        </a>
+        <a href="#" class="M_butt" id="rel_button">
+            <img title="{% trans 'Create relationship' %}"
+                 src="{{ theme.getImgPath('pmd/relation.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Create relationship' %}
+            </span>
+        </a>
+        <a href="#" class="M_butt" id="display_field_button">
+            <img title="{% trans 'Choose column to display' %}"
+                 src="{{ theme.getImgPath('pmd/display_field.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Choose column to display' %}
+            </span>
+        </a>
+        <a href="#" id="reloadPage" class="M_butt">
+            <img title="{% trans 'Reload' %}"
+                 src="{{ theme.getImgPath('pmd/reload.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Reload' %}
+            </span>
+        </a>
+        <a href="{{ Util_getDocuLink('faq', 'faq6-31') }}"
+           target="documentation"
+           class="M_butt">
+            <img title="{% trans 'Help' %}"
+                 src="{{ theme.getImgPath('pmd/help.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Help' %}
+            </span>
+        </a>
+    {% endif %}
+    <a href="#" class="{{ params_array['angular_direct'] }}" id="angular_direct_button">
+        <img title="{% trans 'Angular links' %} / {% trans 'Direct links' %}"
+             src="{{ theme.getImgPath('pmd/ang_direct.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Angular links' %} / {% trans 'Direct links' %}
+        </span>
+    </a>
+    <a href="#" class="{{ params_array['snap_to_grid'] }}" id="grid_button">
+        <img title="{% trans 'Snap to grid' %}" src="{{ theme.getImgPath('pmd/grid.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Snap to grid' %}
+        </span>
+    </a>
+    <a href="#" class="{{ params_array['small_big_all'] }}" id="key_SB_all">
+        <img title="{% trans 'Small/Big All' %}"
+             alt="v"
+             src="{{ theme.getImgPath('pmd/downarrow1.png') }}"
+             data-down="{{ theme.getImgPath('pmd/downarrow1.png') }}"
+             data-right="{{ theme.getImgPath('pmd/rightarrow1.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Small/Big All' %}
+        </span>
+    </a>
+    <a href="#" id="SmallTabInvert" class="M_butt">
+        <img title="{% trans 'Toggle small/big' %}"
+             src="{{ theme.getImgPath('pmd/bottom.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Toggle small/big' %}
+        </span>
+    </a>
+    <a href="#" id="relLineInvert" class="{{ params_array['relation_lines'] }}" >
+        <img title="{% trans 'Toggle relationship lines' %}"
+             src="{{ theme.getImgPath('pmd/toggle_lines.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Toggle relationship lines' %}
+        </span>
+    </a>
+    {% if not visual_builder %}
+        <a href="#" id="exportPages" class="M_butt" >
+            <img title="{% trans 'Export schema' %}"
+                 src="{{ theme.getImgPath('pmd/export.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Export schema' %}
+            </span>
+        </a>
+    {% else %}
+        <a id="build_query_button"
+           class="M_butt"
+           href="#"
+           class="M_butt">
+            <img title="{% trans 'Build Query' %}"
+                 src="{{ theme.getImgPath('pmd/query_builder.png') }}" />
+            <span class="hide hidable">
+                {% trans 'Build Query' %}
+            </span>
+        </a>
+    {% endif %}
+    <a href="#" class="{{ params_array['side_menu'] }}" id="key_Left_Right">
+        <img title="{% trans 'Move Menu' %}" alt=">"
+             data-right="{{ theme.getImgPath('pmd/2leftarrow_m.png') }}"
+             src="{{ theme.getImgPath('pmd/2rightarrow_m.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Move Menu' %}
+        </span>
+    </a>
+    <a href="#" class="{{ params_array['pin_text'] }}" id="pin_Text">
+        <img title="{% trans 'Pin text' %}"
+             alt=">"
+             data-right="{{ theme.getImgPath('pmd/anchor.png') }}"
+             src="{{ theme.getImgPath('pmd/anchor.png') }}" />
+        <span class="hide hidable">
+            {% trans 'Pin text' %}
+        </span>
+    </a>
+</div>
diff --git a/templates/database/designer/table_list.phtml b/templates/database/designer/table_list.phtml
deleted file mode 100644
index 2592ba2dd0..0000000000
--- a/templates/database/designer/table_list.phtml
+++ /dev/null
@@ -1,65 +0,0 @@
-<div id="layer_menu" class="hide">
-    <div class="center">
-        <a href="#" class="M_butt" target="_self" >
-            <img title="<?= __('Hide/Show all'); ?>"
-                 alt="v"
-                 id="key_HS_all"
-                 src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/downarrow1.png'); ?>"
-                 data-down="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/downarrow1.png'); ?>"
-                 data-right="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/rightarrow1.png'); ?>" />
-        </a>
-        <a href="#" class="M_butt" target="_self" >
-            <img alt="v"
-                 id="key_HS"
-                 title="<?= __('Hide/Show Tables with no relationship'); ?>"
-                 src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/downarrow2.png'); ?>"
-                 data-down="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/downarrow2.png'); ?>"
-                 data-right="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/rightarrow2.png'); ?>" />
-        </a>
-    </div>
-    <div id="id_scroll_tab" class="scroll_tab">
-        <table width="100%" style="padding-left: 3px;">
-            <?php $name_cnt = count($GLOBALS['PMD']['TABLE_NAME']);
-            for ($i = 0; $i < $name_cnt; $i++) :
-                $checked = (isset($tab_pos[$GLOBALS['PMD']["TABLE_NAME"][$i]])
-                    && $tab_pos[$GLOBALS['PMD']["TABLE_NAME"][$i]]["H"])
-                    || $display_page == -1; ?>
-                <tr>
-                    <td title="<?= __('Structure'); ?>"
-                        width="1px"
-                        class="L_butt2_1">
-                        <img alt=""
-                             table_name="<?= htmlspecialchars($GLOBALS['PMD_URL']['TABLE_NAME_SMALL'][$i]); ?>"
-                             class="scroll_tab_struct"
-                             src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/exec.png'); ?>"/>
-                    </td>
-                    <td width="1px">
-                        <input class="scroll_tab_checkbox"
-                               title="<?= __('Hide'); ?>"
-                               id="check_vis_<?= htmlspecialchars($GLOBALS['PMD_URL']["TABLE_NAME"][$i]); ?>"
-                               style="margin:0;"
-                               type="checkbox"
-                               value="<?= htmlspecialchars($GLOBALS['PMD_URL']["TABLE_NAME"][$i]); ?>"
-                               <?php if ($checked) : ?>checked="checked"<?php endif; ?> />
-                    </td>
-                    <td class="pmd_Tabs"
-                        pmd_url_table_name="<?= htmlspecialchars($GLOBALS['PMD_URL']['TABLE_NAME'][$i]); ?>">
-                        <?= $GLOBALS['PMD_OUT']["TABLE_NAME"][$i]; ?>
-                    </td>
-                </tr>
-            <?php endfor; ?>
-        </table>
-    </div>
-    <!-- end id_scroll_tab -->
-    <div class="center">
-        <?= __('Number of tables:'); ?> <?= $name_cnt; ?>
-    </div>
-    <div id="layer_menu_sizer">
-        <div class="floatleft">
-            <img class="icon"
-                 data-right="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/resizeright.png'); ?>"
-                 src="<?= $GLOBALS['PMA_Theme']->getImgPath('pmd/resize.png'); ?>"/>
-        </div>
-    </div>
-</div>
-<!-- end layer_menu -->
diff --git a/templates/database/designer/table_list.twig b/templates/database/designer/table_list.twig
new file mode 100644
index 0000000000..17221a7fb0
--- /dev/null
+++ b/templates/database/designer/table_list.twig
@@ -0,0 +1,65 @@
+<div id="layer_menu" class="hide">
+    <div class="center">
+        <a href="#" class="M_butt" target="_self" >
+            <img title="{% trans 'Hide/Show all' %}"
+                alt="v"
+                id="key_HS_all"
+                src="{{ theme.getImgPath('pmd/downarrow1.png') }}"
+                data-down="{{ theme.getImgPath('pmd/downarrow1.png') }}"
+                data-right="{{ theme.getImgPath('pmd/rightarrow1.png') }}" />
+        </a>
+        <a href="#" class="M_butt" target="_self" >
+            <img alt="v"
+                id="key_HS"
+                title="{% trans 'Hide/Show tables with no relationship' %}"
+                src="{{ theme.getImgPath('pmd/downarrow2.png') }}"
+                data-down="{{ theme.getImgPath('pmd/downarrow2.png') }}"
+                data-right="{{ theme.getImgPath('pmd/rightarrow2.png') }}" />
+        </a>
+    </div>
+    <div id="id_scroll_tab" class="scroll_tab">
+        <table width="100%" style="padding-left: 3px;">
+            {% for i in 0..table_names|length - 1 %}
+                <tr>
+                    <td title="{% trans 'Structure' %}"
+                        width="1px"
+                        class="L_butt2_1">
+                        <img alt=""
+                            table_name="{{ table_names_small_url[i] }}"
+                            class="scroll_tab_struct"
+                            src="{{ theme.getImgPath('pmd/exec.png') }}"/>
+                    </td>
+                    <td width="1px">
+                        <input class="scroll_tab_checkbox"
+                            title="{% trans 'Hide' %}"
+                            id="check_vis_{{ table_names_url[i] }}"
+                            style="margin:0;"
+                            type="checkbox"
+                            value="{{ table_names_url[i] }}"
+                            {% if (tab_pos[table_names[i]] is defined
+                                and tab_pos[table_names[i]]['H'])
+                                or display_page == -1 -%}
+                                checked="checked"
+                            {%- endif %} />
+                    </td>
+                    <td class="pmd_Tabs"
+                        pmd_url_table_name="{{ table_names_url[i] }}">
+                        {{ table_names_out[i]|raw }}
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+    </div>
+    {# end id_scroll_tab #}
+    <div class="center">
+        {% trans 'Number of tables:' %} {{ table_names|length }}
+    </div>
+    <div id="layer_menu_sizer">
+        <div class="floatleft">
+            <img class="icon"
+                data-right="{{ theme.getImgPath('pmd/resizeright.png') }}"
+                src="{{ theme.getImgPath('pmd/resize.png') }}"/>
+        </div>
+    </div>
+</div>
+{# end layer_menu #}