diff --git a/libraries/Template.class.php b/libraries/Template.class.php
index ba4ca61c8d..49c60d48c7 100644
--- a/libraries/Template.class.php
+++ b/libraries/Template.class.php
@@ -8,7 +8,7 @@ if (! defined('PHPMYADMIN')) {
 /**
  * Class Template
  *
- * Handle template using
+ * Handle front end templating
  *
  * @package PMA
  */
@@ -41,6 +41,20 @@ class Template
         return new Template($name);
     }
 
+    /**
+     * Remove whitespaces between tags and innerHTML
+     *
+     * @param string $content HTML to perform the trim method
+     *
+     * @return string
+     */
+    public static function trim($content)
+    {
+        $regexp = '/(<[^\/][^>]+>)\s+|\s+(<\/)/';
+
+        return preg_replace($regexp, "$1$2", $content);
+    }
+
     /**
      * Render template
      *
@@ -48,9 +62,9 @@ class Template
      *
      * @return string
      */
-    public function render($data = array())
+    public function render($data = array(), $trim = true)
     {
-        $template = static::BASE_PATH . $this->name . '.php';
+        $template = static::BASE_PATH . $this->name . '.phtml';
         try {
             extract($data);
             ob_start();
@@ -61,11 +75,16 @@ class Template
                     'The template "' . $template . '" not found.'
                 );
             }
-            $content = ob_get_clean();
+            if ($trim) {
+                $content = Template::trim(ob_get_clean());
+            } else {
+                $content = ob_get_clean();
+            }
+
             return $content;
         } catch (\LogicException $e) {
             ob_end_clean();
             throw new \LogicException($e->getMessage());
         }
     }
-}
\ No newline at end of file
+}
diff --git a/libraries/browse_foreigners.lib.php b/libraries/browse_foreigners.lib.php
index c47ca23bbd..1de6a01f23 100644
--- a/libraries/browse_foreigners.lib.php
+++ b/libraries/browse_foreigners.lib.php
@@ -9,20 +9,108 @@ if (! defined('PHPMYADMIN')) {
     exit;
 }
 
+/**
+ * Function to get html for one relational key 
+ *
+ * @param integer $horizontal_count   the current horizontal count
+ * @param string  $header             table header
+ * @param boolean $odd_row            for the row background color
+ * @param array   $keys               all the keys
+ * @param integer $indexByKeyname     index by keyname
+ * @param array   $descriptions       descriptions
+ * @param integer $indexByDescription index by description
+ * @param string  $current_value      current value on the edit form
+ *
+ * @return string $html the generated html
+ */
+function PMA_getHtmlForOneKey($horizontal_count, $header, $odd_row, $keys,
+    $indexByKeyname, $descriptions, $indexByDescription, $current_value
+) {
+    $horizontal_count++;
+    $output = '';
+
+    // whether the key name corresponds to the selected value in the form
+    $rightKeynameIsSelected = false;
+    $leftKeynameIsSelected = false;
+
+    if ($GLOBALS['cfg']['RepeatCells'] > 0
+        && $horizontal_count > $GLOBALS['cfg']['RepeatCells']
+    ) {
+        $output .= $header;
+        $horizontal_count = 0;
+        $odd_row = true;
+    }
+
+    // key names and descriptions for the left section,
+    // sorted by key names
+    $leftKeyname = $keys[$indexByKeyname];
+    list(
+        $leftDescription,
+        $leftDescriptionTitle
+    ) = PMA_getDescriptionAndTitle($descriptions[$indexByKeyname]);
+
+    // key names and descriptions for the right section,
+    // sorted by descriptions
+    $rightKeyname = $keys[$indexByDescription];
+    list(
+        $rightDescription,
+        $rightDescriptionTitle
+    ) = PMA_getDescriptionAndTitle($descriptions[$indexByDescription]);
+
+    $indexByDescription++;
+
+    if (! empty($current_value)) {
+        $rightKeynameIsSelected = $rightKeyname == $current_value;
+        $leftKeynameIsSelected = $leftKeyname == $current_value;
+    }
+
+    $output .= '<tr class="noclick ' . ($odd_row ? 'odd' : 'even') . '">';
+    $odd_row = ! $odd_row;
+
+    $output .= PMA_getHtmlForColumnElement(
+        'class="nowrap"', $leftKeynameIsSelected,
+        $leftKeyname, $leftDescription,
+        $leftDescriptionTitle
+    );
+
+    $output .= PMA_getHtmlForColumnElement(
+        '', $leftKeynameIsSelected, $leftKeyname,
+        $leftDescription, $leftDescriptionTitle
+    );
+
+    $output .= '<td width="20%">'
+        . '<img src="' . $GLOBALS['pmaThemeImage'] . 'spacer.png" alt=""'
+        . ' width="1" height="1" /></td>';
+
+    $output .= PMA_getHtmlForColumnElement(
+        '', $rightKeynameIsSelected, $rightKeyname,
+        $rightDescription, $rightDescriptionTitle
+    );
+
+    $output .= PMA_getHtmlForColumnElement(
+        'class="nowrap"', $rightKeynameIsSelected,
+        $rightKeyname, $rightDescription,
+        $rightDescriptionTitle
+    );
+    $output .= '</tr>';
+
+    return array($output, $horizontal_count, $odd_row, $indexByDescription);
+}
+
 /**
  * Function to get html for relational field selection
  *
- * @param string $db          current database
- * @param string $table       current table
- * @param string $field       field
- * @param array  $foreignData foreign column data
- * @param string $fieldkey    field key
- * @param array  $data        data
+ * @param string $db            current database
+ * @param string $table         current table
+ * @param string $field         field
+ * @param array  $foreignData   foreign column data
+ * @param string $fieldkey      field key
+ * @param string $current_value current columns's value
  *
  * @return string
  */
 function PMA_getHtmlForRelationalFieldSelection($db, $table, $field, $foreignData,
-    $fieldkey, $data
+    $fieldkey, $current_value
 ) {
     $gotopage = PMA_getHtmlForGotoPage($foreignData);
     $showall = PMA_getHtmlForShowAll($foreignData);
@@ -93,78 +181,23 @@ function PMA_getHtmlForRelationalFieldSelection($db, $table, $field, $foreignDat
 
     asort($keys);
 
-    $hcount = 0;
+    $horizontal_count = 0;
     $odd_row = true;
     $indexByDescription = 0;
 
-    // whether the key name corresponds to the selected value in the form
-    $rightKeynameIsSelected = false;
-    $leftKeynameIsSelected = false;
-
     foreach ($keys as $indexByKeyname => $value) {
-        $hcount++;
-
-        if ($GLOBALS['cfg']['RepeatCells'] > 0
-            && $hcount > $GLOBALS['cfg']['RepeatCells']
-        ) {
-            $output .= $header;
-            $hcount = 0;
-            $odd_row = true;
-        }
-
-        // key names and descriptions for the left section,
-        // sorted by key names
-        $leftKeyname = $keys[$indexByKeyname];
         list(
-            $leftDescription,
-            $leftDescriptionTitle
-        ) = PMA_getDescriptionAndTitle($descriptions[$indexByKeyname]);
-
-        // key names and descriptions for the right section,
-        // sorted by descriptions
-        $rightKeyname = $keys[$indexByDescription];
-        list(
-            $rightDescription,
-            $rightDescriptionTitle
-        ) = PMA_getDescriptionAndTitle($descriptions[$indexByDescription]);
-
-        $indexByDescription++;
-
-        if (! empty($data)) {
-            $rightKeynameIsSelected = $rightKeyname == $data;
-            $leftKeynameIsSelected = $leftKeyname == $data;
-        }
-
-        $output .= '<tr class="noclick ' . ($odd_row ? 'odd' : 'even') . '">';
-        $odd_row = ! $odd_row;
-
-        $output .= PMA_getHtmlForColumnElement(
-            'class="nowrap"', $leftKeynameIsSelected,
-            $leftKeyname, $leftDescription,
-            $leftDescriptionTitle
+            $html,
+            $horizontal_count,
+            $odd_row,
+            $indexByDescription
+        ) = PMA_getHtmlForOneKey(
+            $horizontal_count, $header, $odd_row, $keys, $indexByKeyname,
+            $descriptions, $indexByDescription, $current_value
         );
+        $output .= $html;
+    }
 
-        $output .= PMA_getHtmlForColumnElement(
-            '', $leftKeynameIsSelected, $leftKeyname,
-            $leftDescription, $leftDescriptionTitle
-        );
-
-        $output .= '<td width="20%">'
-            . '<img src="' . $GLOBALS['pmaThemeImage'] . 'spacer.png" alt=""'
-            . ' width="1" height="1" /></td>';
-
-        $output .= PMA_getHtmlForColumnElement(
-            '', $rightKeynameIsSelected, $rightKeyname,
-            $rightDescription, $rightDescriptionTitle
-        );
-
-        $output .= PMA_getHtmlForColumnElement(
-            'class="nowrap"', $rightKeynameIsSelected,
-            $rightKeyname, $rightDescription,
-            $rightDescriptionTitle
-        );
-        $output .= '</tr>';
-    } // end while
     $output .= '</tbody>'
         . '</table>';
 
diff --git a/libraries/db_designer.lib.php b/libraries/db_designer.lib.php
index 7b2fcca10d..2fdee51b61 100644
--- a/libraries/db_designer.lib.php
+++ b/libraries/db_designer.lib.php
@@ -10,6 +10,7 @@ if (! defined('PHPMYADMIN')) {
 }
 
 require_once 'libraries/relation.lib.php';
+require_once 'libraries/Template.class.php';
 
 /**
  * Function to get html to display a page selector
@@ -21,17 +22,10 @@ require_once 'libraries/relation.lib.php';
  */
 function PMA_getHtmlForPageSelector($cfgRelation, $db)
 {
-    $html = '<select name="selected_page" id="selected_page">';
-    $html .= '<option value="0">-- ' . __('Select page') . ' --</option>';
-    if ($cfgRelation['pdfwork']) {
-        $pages = PMA_getPageIdsAndNames($db);
-        foreach ($pages as $nr => $desc) {
-            $html .= '<option value="' . $nr . '">';
-            $html .= htmlspecialchars($desc) . '</option>';
-        }
-    }
-    $html .= '</select>';
-    return $html;
+    return PMA\Template::get('designer/page_selector')->render(array(
+        'db' => $db,
+        'cfgRelation' => $cfgRelation
+    ));
 }
 
 /**
@@ -44,23 +38,10 @@ function PMA_getHtmlForPageSelector($cfgRelation, $db)
  */
 function PMA_getHtmlForEditOrDeletePages($db, $operation)
 {
-    $cfgRelation = PMA_getRelationsParam();
-    $html  = '<form action="db_designer.php" method="post"'
-        . ' name="edit_delete_pages" id="edit_delete_pages" class="ajax">';
-    $html .= PMA_URL_getHiddenInputs($db);
-    $html .= '<fieldset id="page_edit_delete_options">';
-    $html .= '<input type="hidden" name="operation" value="' . $operation . '" />';
-    $html .= '<label for="selected_page">';
-    if ($operation == 'editPage') {
-        $html .= __("Page to open");
-    } else {
-        $html .= __("Page to delete");
-    }
-    $html .= ': </label>';
-    $html .= PMA_getHtmlForPageSelector($cfgRelation, $db);
-    $html .= '</fieldset>';
-    $html .= '</form>';
-    return $html;
+    return PMA\Template::get('designer/edit_delete_pages')->render(array(
+        'db' => $db,
+        'operation' => $operation
+    ));
 }
 
 /**
@@ -72,43 +53,9 @@ function PMA_getHtmlForEditOrDeletePages($db, $operation)
  */
 function PMA_getHtmlForPageSaveAs($db)
 {
-    $cfgRelation = PMA_getRelationsParam();
-    $choices = array(
-        'same' => __('Save to selected page'),
-        'new' => __('Create a page and save to it')
-    );
-
-    $html  = '<form action="db_designer.php" method="post"'
-        . ' name="save_as_pages" id="save_as_pages" class="ajax">';
-    $html .= PMA_URL_getHiddenInputs($db);
-    $html .= '<fieldset id="page_save_as_options">';
-    $html .= '<table><tbody>';
-
-    $html .= '<tr>';
-    $html .= '<td>';
-    $html .= '<input type="hidden" name="operation" value="savePage" />';
-    $html .= PMA_getHtmlForPageSelector($cfgRelation, $db);
-    $html .= '</td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td>';
-    $html .= PMA_Util::getRadioFields('save_page', $choices, 'same', true);
-    $html .= '</td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td>';
-    $html .= '<label for="selected_value">' . __('New page name') . '</label>';
-    $html .= '<input type="text" name="selected_value" id="selected_value" />';
-    $html .= '</td>';
-    $html .= '</tr>';
-
-    $html .= '</tbody></table>';
-    $html .= '</fieldset>';
-    $html .= '</form>';
-
-    return $html;
+    return PMA\Template::get('designer/page_save_as')->render(array(
+        'db' => $db
+    ));
 }
 
 /**
@@ -161,22 +108,11 @@ function PMA_getHtmlForSchemaExport($db, $page)
         )->getDisplay();
     }
 
-    $htmlString  = '<form method="post" action="schema_export.php"'
-        . ' class="disableAjax" id="id_export_pages">';
-    $htmlString .= '<fieldset>';
-    $htmlString .= PMA_URL_getHiddenInputs($db);
-    $htmlString .= '<label>' . __('Select Export Relational Type')
-        . '</label><br />';
-    $htmlString .= PMA_pluginGetChoice(
-        'Schema', 'export_type', $export_list, 'format'
-    );
-    $htmlString .= '<input type="hidden" name="page_number"'
-        . ' value="' . htmlspecialchars($page) . '" />';
-    $htmlString .= PMA_pluginGetOptions('Schema', $export_list);
-    $htmlString .= '</fieldset>';
-    $htmlString .= '</form>';
-
-    return $htmlString;
+    return PMA\Template::get('designer/schema_export')->render(array(
+        'db' => $db,
+        'page' => $page,
+        'export_list' => $export_list
+    ));
 }
 
 /**
@@ -192,34 +128,12 @@ function PMA_getHtmlForSchemaExport($db, $page)
 function PMA_getHtmlForJSFields(
     $script_tables, $script_contr, $script_display_field, $display_page
 ) {
-    $cfgRelation = PMA_getRelationsParam();
-
-    $html  = '<div id="script_server" class="hide">';
-    $html .= htmlspecialchars($GLOBALS['server']);
-    $html .= '</div>';
-    $html .= '<div id="script_db" class="hide">';
-    $html .= htmlspecialchars($_GET['db']);
-    $html .= '</div>';
-    $html .= '<div id="script_token" class="hide">';
-    $html .= htmlspecialchars($_GET['token']);
-    $html .= '</div>';
-    $html .= '<div id="script_tables" class="hide">';
-    $html .= htmlspecialchars(json_encode($script_tables));
-    $html .= '</div>';
-    $html .= '<div id="script_contr" class="hide">';
-    $html .= htmlspecialchars(json_encode($script_contr));
-    $html .= '</div>';
-    $html .= '<div id="script_display_field" class="hide">';
-    $html .= htmlspecialchars(json_encode($script_display_field));
-    $html .= '</div>';
-    $html .= '<div id="script_display_page" class="hide">';
-    $html .= htmlspecialchars($display_page);
-    $html .= '</div>';
-    $html .= '<div id="pmd_tables_enabled" class="hide">';
-    $html .= htmlspecialchars($cfgRelation['pdfwork']);
-    $html .= '</div>';
-
-    return $html;
+    return PMA\Template::get('designer/js_fields')->render(array(
+        'script_tables' => $script_tables,
+        'script_contr' => $script_contr,
+        'script_display_field' => $script_display_field,
+        'display_page' => $display_page
+    ));
 }
 
 /**
@@ -232,207 +146,10 @@ function PMA_getHtmlForJSFields(
  */
 function PMA_getDesignerPageMenu($visualBuilder, $selected_page)
 {
-    $iconClass = '';
-    $textClass = 'hidable hide';
-
-    $html = '';
-
-    if (!$visualBuilder) {
-        $html .= '<div id="name-panel" style="overflow:hidden">';
-        $html .= '<span id="page_name" style="border:none">';
-        $html .= ($selected_page == null
-            ? __("Untitled")
-            : htmlspecialchars($selected_page));
-        $html .= '</span>';
-        $html .= '<span id="saved_state" style="border:none;width:5px">';
-        $html .= ($selected_page == null ? '*' : '') . '</span>';
-        $html .= '</div>';
-    }
-
-    $html .= '<div class="pmd_header side-menu" id="side_menu">';
-
-    $html .= '<a class="M_butt" id="key_Show_left_menu" href="#" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Show/Hide tables list')
-        . '" alt="v" src="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2_m.png') . '" '
-        . 'data-down="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2_m.png') . '" '
-        . 'data-up="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/uparrow2_m.png') . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Show/Hide tables list')
-        . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" id="toggleFullscreen" class="M_butt" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('View in fullscreen')
-        . '" alt="" src="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/viewInFullscreen.png') . '" '
-        . 'data-enter="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/viewInFullscreen.png') . '" '
-        . 'data-exit="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/exitFullscreen.png') . '"  />';
-    $html .= '<span class="' . $textClass . '" data-exit="' . __('Exit fullscreen');
-    $html .= '" data-enter="' . __('View in fullscreen') . '">'
-        . __('View in fullscreen') . '</span>';
-    $html .= '</a>';
-
-    if (! $visualBuilder) {
-
-        $html .= '<a id="newPage" href="#" class="M_butt" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('New page')
-            . '"alt="" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/page_add.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('New page') . '</span>';
-        $html .= '</a>';
-
-        $html .= '<a href="#" id="editPage" class="M_butt ajax" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Open page')
-            . '" alt="" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/page_edit.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Open page') . '</span>';
-        $html .= '</a>';
-
-        $html .= '<a href="#" id="savePos" class="M_butt" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Save page')
-            . '" alt="" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/save.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Save page') . '</span>';
-        $html .= '</a>';
-
-        $html .= '<a href="#" id="SaveAs" class="M_butt ajax" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Save page as')
-            . '" alt="" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/save_as.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Save page as')
-            . '</span>';
-        $html .= '</a>';
-
-        $html .= '<a href="#" id="delPages" class="M_butt ajax" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Delete pages')
-            . '" alt="" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/page_delete.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Delete pages')
-            . '</span>';
-        $html .= '</a>';
-    }
-
-    $html .= '<a href="#" id="StartTableNew" class="M_butt" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Create table')
-        . '" alt="" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/table.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Create table') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" id="rel_button" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Create relation')
-        . '" alt="" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/relation.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Create relation')
-        . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" id="display_field_button" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="'
-        . __('Choose column to display') . '" alt="" '
-        . 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/display_field.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">'
-        . __('Choose column to display') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" id="reloadPage" class="M_butt" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Reload') . '" alt="" '
-        . 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/reload.png') . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Reload') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="' . PMA_Util::getDocuLink('faq', 'faq6-31') . '" '
-        . 'target="documentation" class="M_butt" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Help') . '" alt="" '
-        . 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/help.png') . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Help') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" id="angular_direct_button" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="'
-        . __('Angular links') . ' / ' . __('Direct links') . '" alt="" '
-        . 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/ang_direct.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">'
-        . __('Angular links') . ' / ' . __('Direct links') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" id="grid_button" target="_self">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Snap to grid')
-        . '" alt="" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/grid.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Snap to grid') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" target="_self" id="key_SB_all">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Small/Big All')
-        . '" alt="v" src="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png') . '" '
-        . 'data-right="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/rightarrow1.png') . '" '
-        . 'data-down="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png') . '"" />';
-    $html .= '<span class="' . $textClass . '">' . __('Small/Big All') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" id="SmallTabInvert" class="M_butt" target="_self" >';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Toggle small/big')
-        . '" alt="key" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/bottom.png')
-        . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Toggle small/big') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" id="relLineInvert" class="M_butt" target="_self" >';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Toggle relation lines')
-        . '" alt="key" src="'
-        . $_SESSION['PMA_Theme']->getImgPath('pmd/toggle_lines.png') . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Toggle relation lines')
-        . '</span>';
-    $html .= '</a>';
-
-    if (! $visualBuilder) {
-
-        $html .= '<a href="#" id="exportPages" class="M_butt" target="_self" >';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Export schema')
-            . '" alt="key" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/export.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Export schema') . '</span>';
-        $html .= '</a>';
-
-    } else {
-        $html .= '<a class="M_butt" href="#" '
-            . 'onclick="build_query(\'SQL Query on Database\', 0)" '
-            . 'onmousedown="return false;" class="M_butt" target="_self">';
-        $html .= '<img class="' . $iconClass . '" title="' . __('Build Query')
-            . '" alt="key" width="20" height="20" src="'
-            . $_SESSION['PMA_Theme']->getImgPath('pmd/query_builder.png') . '" />';
-        $html .= '<span class="' . $textClass . '">' . __('Build Query') . '</span>';
-        $html .= '</a>';
-    }
-
-    $html .= '<a href="#" class="M_butt" target="_self" id="key_Left_Right">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Move Menu')
-         . '" alt=">" data-right="'
-         . $_SESSION['PMA_Theme']->getImgPath('pmd/2leftarrow_m.png')
-         . '" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/2rightarrow_m.png')
-         . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Move Menu') . '</span>';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" target="_self" id="pin_Text">';
-    $html .= '<img class="' . $iconClass . '" title="' . __('Pin text') . '" alt=">"'
-         . ' src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/anchor.png') . '" />';
-    $html .= '<span class="' . $textClass . '">' . __('Pin text') . '</span>';
-    $html .= '</a>';
-
-    $html .= '</div>';
-
-    return $html;
+    return PMA\Template::get('designer/side_menu')->render(array(
+        'visualBuilder' => $visualBuilder,
+        'selected_page' => $selected_page
+    ));
 }
 
 /**
@@ -442,12 +159,7 @@ function PMA_getDesignerPageMenu($visualBuilder, $selected_page)
  */
 function PMA_getHTMLCanvas()
 {
-    $html  = '<div id="osn_tab">';
-    $html .= '<canvas class="pmd" id="canvas" width="100" height="100" ';
-    $html .= '></canvas>';
-    $html .= '</div>';
-
-    return $html;
+    return PMA\Template::get('designer/canvas')->render();
 }
 
 /**
@@ -460,88 +172,10 @@ function PMA_getHTMLCanvas()
  */
 function PMA_getHTMLTableList($tab_pos, $display_page)
 {
-    $html  = '<div id="layer_menu" style="display:none;">';
-
-    $html .= '<div class="center">';
-
-    $html .= '<a href="#" class="M_butt" target="_self" ';
-    $html .= '>';
-    $html .= '<img title="' . __('Hide/Show all') . '" alt="v" id="key_HS_all" ';
-    $html .= 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png') . '" '
-        . 'data-down="' . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png') . '" '
-        . 'data-right="' . $_SESSION['PMA_Theme']->getImgPath('pmd/rightarrow1.png') . '" />';
-    $html .= '</a>';
-
-    $html .= '<a href="#" class="M_butt" target="_self" ';
-    $html .= '>';
-    $html .= '<img alt="v" id="key_HS" ';
-    $html .= 'title="' . __('Hide/Show Tables with no relation') . '"';
-    $html .= 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2.png') . '" '
-        . 'data-down="' . $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2.png') . '" '
-        . 'data-right="' . $_SESSION['PMA_Theme']->getImgPath('pmd/rightarrow2.png') . '" />';
-    $html .= '</a>';
-
-    $html .= '</div>';
-
-    $html .= '<div id="id_scroll_tab" class="scroll_tab">';
-
-    $html .= '<table width="100%" style="padding-left: 3px;">';
-
-    $name_cnt = count($GLOBALS['PMD']['TABLE_NAME']);
-    for ($i = 0; $i < $name_cnt; $i++) {
-
-        $html .= '<tr>';
-
-        $html .= '<td title="' . __('Structure') . '" width="1px" ';
-        $html .= 'onmouseover="this.className=\'L_butt2_2\'" ';
-        $html .= 'onmouseout="this.className=\'L_butt2_1\'" class="L_butt2_1">';
-        $html .= '<img alt="" ';
-        $html .= 'table_name="' . $GLOBALS['PMD_URL']['TABLE_NAME_SMALL'][$i] . '"'
-                . ' class="scroll_tab_struct" ';
-        $html .= 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/exec.png')
-            . '"/>';
-        $html .= '</td>';
-
-        $html .= '<td width="1px">';
-        $html .= '<input class="scroll_tab_checkbox" ';
-        $html .= 'title="' . __('Hide') . '" ';
-        $html .= 'id="check_vis_' . $GLOBALS['PMD_URL']["TABLE_NAME"][$i] . '" ';
-        $html .= 'style="margin:0px;" type="checkbox" ';
-        $html .= 'value="' . $GLOBALS['PMD_URL']["TABLE_NAME"][$i] . '"';
-
-        if ((isset($tab_pos[$GLOBALS['PMD']["TABLE_NAME"][$i]])
-            && $tab_pos[$GLOBALS['PMD']["TABLE_NAME"][$i]]["H"])
-            || $display_page == -1
-        ) {
-            $html .= 'checked="checked"';
-        }
-        $html .= '/></td>';
-
-        $html .= '<td class="pmd_Tabs" ';
-        $html .= 'onmouseover="this.className=\'pmd_Tabs2\'" ';
-        $html .= 'onmouseout="this.className=\'pmd_Tabs\'" ';
-        $html .= 'pmd_url_table_name="'
-            . $GLOBALS['PMD_URL']['TABLE_NAME'][$i] . '">';
-        $html .= $GLOBALS['PMD_OUT']["TABLE_NAME"][$i];
-        $html .= '</td>';
-
-        $html .= '</tr>';
-    }
-
-    $html .= '</table>';
-    $html .= '</div>'; // end id_scroll_tab
-
-    $html .= '<div class="center">' . __('Number of tables:')
-        . ' ' . $name_cnt . '</div>';
-    $html .= '<div id="layer_menu_sizer" onmousedown="layer_menu_cur_click=1">';
-    $html .= '<div class="floatleft">';
-    $html .= '<img class="icon" data-right="' . $_SESSION['PMA_Theme']->getImgPath('pmd/resizeright.png');
-    $html .= '" src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/resize.png') . '"/></div>';
-    $html .= '</div>';
-
-    $html .= '</div>'; // end layer_menu
-
-    return $html;
+    return PMA\Template::get('designer/table_list')->render(array(
+        'tab_pos' => $tab_pos,
+        'display_page' => $display_page
+    ));
 }
 
 /**
@@ -558,223 +192,13 @@ function PMA_getHTMLTableList($tab_pos, $display_page)
 function PMA_getDatabaseTables(
     $tab_pos, $display_page, $tab_column, $tables_all_keys, $tables_pk_or_unique_keys
 ) {
-    $html  = '';
-    $number_of_tables = count($GLOBALS['PMD']["TABLE_NAME"]);
-    for ($i = 0; $i < $number_of_tables; $i++) {
-        $t_n = $GLOBALS['PMD']["TABLE_NAME"][$i];
-        $t_n_url = $GLOBALS['PMD_URL']["TABLE_NAME"][$i];
-
-        $html .= '<input name="t_x[' . $t_n_url . ']" type="hidden" id="t_x_'
-            . $t_n_url . '_" />';
-        $html .= '<input name="t_y[' . $t_n_url . ']" type="hidden" id="t_y_'
-            . $t_n_url . '_" />';
-        $html .= '<input name="t_v[' . $t_n_url . ']" type="hidden" id="t_v_'
-            . $t_n_url . '_" />';
-        $html .= '<input name="t_h[' . $t_n_url . ']" type="hidden" id="t_h_'
-            . $t_n_url . '_" />';
-
-        $html .= '<table id="' . $t_n_url . '" cellpadding="0" cellspacing="0" ';
-        $html .= 'class="pmd_tab" style="position:absolute;';
-        $html .= 'left:';
-        $html .= (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["X"] : rand(20, 700))
-            . 'px;';
-        $html .= 'top:';
-        $html .= (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["Y"] : rand(20, 550))
-            . 'px;';
-        $html .= 'display:';
-        $html .= (isset($tab_pos[$t_n]) || $display_page == -1) ? 'block;' : 'none;';
-        $html .= 'z-index: 1;">';
-
-        $html .= '<thead>';
-        $html .= '<tr class="header">';
-
-        if (isset($_REQUEST['query'])) {
-            $html .= '<td class="select_all">';
-            $html .= '<input class="select_all_1" type="checkbox" '
-                . 'style="margin: 0px;" ';
-            $html .= 'value="select_all_' . htmlspecialchars($t_n_url) . '" ';
-            $html .= 'id="select_all_' . htmlspecialchars($t_n_url) . '" ';
-            $html .= 'title="select all" pmd_url_table_name="'
-                . htmlspecialchars($t_n_url) . '" ';
-            $html .= 'pmd_out_owner="'
-                . htmlspecialchars($GLOBALS['PMD_OUT']['OWNER'][$i]) . '">';
-            $html .= '</td>';
-        }
-
-        $html .= '<td class="small_tab" title="' . __('Toggle') . '" ';
-        $html .= 'id="id_hide_tbody_' . $t_n_url . '" ';
-        $html .= 'table_name="' . htmlspecialchars($t_n_url)
-            . '" onmouseover="this.className=\'small_tab2\';" ';
-        $html .= 'onmouseout="this.className=\'small_tab\';" ';
-        $html .= '>';
-
-        // no space allowed here, between tags and content !!!
-        // JavaScript function does require this
-        if (! isset($tab_pos[$t_n]) || ! empty($tab_pos[$t_n]["V"])) {
-            $html .= 'v';
-        } else {
-            $html .= '&gt;';
-        }
-
-        $html .= '</td>';
-
-        $html .= '<td class="small_tab_pref small_tab_pref_1" ';
-        $html .= 'table_name_small="' . $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i]
-            . '" onmouseover="this.className='
-                . '\'small_tab_pref2 small_tab_pref_1\';" ';
-        $html .= 'onmouseout="this.className=\'small_tab_pref small_tab_pref_1\';" ';
-        $html .= '>';
-        $html .= '<img alt="" title="' . __('See table structure') . '" ';
-        $html .= 'src="' . $_SESSION['PMA_Theme']->getImgPath('pmd/exec_small.png')
-            . '" />';
-        $html .= '</td>';
-
-        $html .= '<td id="id_zag_' . htmlspecialchars($t_n_url)
-            . '" class="tab_zag nowrap tab_zag_noquery" ';
-        $html .= 'onmousedown="cur_click=document.getElementById(\''
-            . $t_n_url . '\');" ';
-        $html .= 'table_name="' . htmlspecialchars($t_n_url) . ''
-            . '" query_set="' . (isset($_REQUEST['query']) ? 1 : 0 ) . '" ';
-        $html .= '>';
-        $html .= '<span class="owner">';
-        $html .= $GLOBALS['PMD_OUT']["OWNER"][$i] . '.';
-        $html .= '</span>';
-        $html .= $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i];
-        $html .= '</td>';
-
-        if (isset($_REQUEST['query'])) {
-            $html .= '<td class="tab_zag tab_zag_query" ';
-            $html .= 'id="id_zag_' . htmlspecialchars($t_n_url) . '_2" ';
-            $html .= 'table_name="' . htmlspecialchars($t_n_url) . '" ';
-            $html .= 'onmousedown="cur_click=document.getElementById(\''
-                . htmlspecialchars($t_n_url) . '\');" ';
-            $html .= '>';
-        }
-
-        $html .= '</tr>';
-        $html .= '</thead>';
-
-        $html .= '<tbody id="id_tbody_' . $t_n_url . '" ';
-        if (isset($tab_pos[$t_n]) && empty($tab_pos[$t_n]["V"])) {
-            $html .= 'style="display: none;"';
-        }
-        $html .= '>';
-        $display_field = PMA_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++
-        ) {
-            $html .= '<tr id="id_tr_'
-                . $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i] . '.'
-                . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . '" ';
-
-            if ($display_field == $tab_column[$t_n]["COLUMN_NAME"][$j]) {
-                $html .= 'class="tab_field_3" ';
-            } else {
-                $html .= 'class="tab_field" ';
-            }
-
-            $html .= 'onmouseover="old_class = this.className; ';
-            $html .= 'this.className = \'tab_field_2\';" ';
-            $html .= 'onmouseout="this.className = old_class;" ';
-            $html .= 'click_field_param="';
-            $html .= $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i] . ',';
-            $html .= urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . ',';
-
-            $tmpColumn = $t_n . "." . $tab_column[$t_n]["COLUMN_NAME"][$j];
-
-            if (!PMA_Util::isForeignKeySupported($GLOBALS['PMD']['TABLE_TYPE'][$i])
-            ) {
-                $html .= (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
-                $html .= (isset($tables_all_keys[$tmpColumn]) ? 1 : 0);
-            }
-            $html .= '"';
-            $html .= '>';
-
-            if (isset($_REQUEST['query'])) {
-                $html .= '<td class="select_all">';
-                $html .= '<input class="select_all_store_col" value="'
-                    . htmlspecialchars($t_n_url)
-                    . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . '"';
-                $html .= 'type="checkbox" id="select_' . htmlspecialchars($t_n_url)
-                    . '._' . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . '" ';
-                $html .= 'style="margin: 0px;" title="select_'
-                    . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . '" ';
-                $html .= '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>';
-            }
-
-            $html .= '<td width="10px" colspan="3"';
-            $html .= 'id="' . $t_n_url . '.'
-                . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]) . '">';
-            $html .= '<div class="nowrap">';
-
-            if (isset($tables_pk_or_unique_keys[$t_n . "." . $tab_column[$t_n]["COLUMN_NAME"][$j]])) {
-
-                $html .= '<img src="'
-                    . $_SESSION['PMA_Theme']->getImgPath('pmd/FieldKey_small.png')
-                    . '" alt="*" />';
-            } else {
-
-                $image = 'pmd/Field_small';
-                if (strstr($tab_column[$t_n]["TYPE"][$j], 'char')
-                    || strstr($tab_column[$t_n]["TYPE"][$j], 'text')
-                ) {
-                    $image .= '_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')
-                ) {
-                    $image .= '_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')
-                ) {
-                    $image .= '_date';
-                }
-                $image .= '.png';
-
-                $html .= '<img src="'
-                    . $_SESSION['PMA_Theme']->getImgPath($image) . '" alt="*" />';
-            }
-
-            $html .= htmlspecialchars(
-                $tab_column[$t_n]["COLUMN_NAME"][$j] . " : "
-                . $tab_column[$t_n]["TYPE"][$j],
-                ENT_QUOTES
-            );
-            $html .= "</div>\n</td>\n";
-
-            if (isset($_REQUEST['query'])) {
-                $html .= '<td class="small_tab_pref small_tab_pref_click_opt" ';
-                $html .= 'onmouseover="this.className='
-                    . '\'small_tab_pref2 small_tab_pref_click_opt\';" ';
-                $html .= 'onmouseout="this.className='
-                    . '\'small_tab_pref small_tab_pref_click_opt\';" ';
-                $html .= 'Click_option_param="pmd_optionse,'
-                    . urlencode($tab_column[$t_n]['COLUMN_NAME'][$j]) . ','
-                    . $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i] . '" >';
-                $html .=  '<img src="'
-                    . $_SESSION['PMA_Theme']->getImgPath('pmd/exec_small.png')
-                    . '" title="options" alt="" /></td> ';
-            }
-            $html .= "</tr>";
-        }
-        $html .= "</tbody>";
-        $html .= "</table>";
-    }
-
-    return $html;
+    return PMA\Template::get('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
+    ));
 }
 
 /**
@@ -784,79 +208,7 @@ function PMA_getDatabaseTables(
  */
 function PMA_getNewRelationPanel()
 {
-    $html  = '<table id="layer_new_relation" style="display:none;" ';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<strong>' . __('Create relation') . '</strong>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody id="foreign_relation">';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap"><strong>FOREIGN KEY</strong>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">on delete</td>';
-    $html .= '<td width="102"><select name="on_delete" id="on_delete">';
-    $html .= '<option value="nix" selected="selected">--</option>';
-    $html .= '<option value="CASCADE">CASCADE</option>';
-    $html .= '<option value="SET NULL">SET NULL</option>';
-    $html .= '<option value="NO ACTION">NO ACTION</option>';
-    $html .= '<option value="RESTRICT">RESTRICT</option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="nowrap">on update</td>';
-    $html .= '<td><select name="on_update" id="on_update">';
-    $html .= '<option value="nix" selected="selected">--</option>';
-    $html .= '<option value="CASCADE">CASCADE</option>';
-    $html .= '<option value="SET NULL">SET NULL</option>';
-    $html .= '<option value="NO ACTION">NO ACTION</option>';
-    $html .= '<option value="RESTRICT">RESTRICT</option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_new_rel_panel" class="butt" '
-        . 'name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" id="cancel_new_rel_panel" '
-        . 'class="butt" name="Button" ';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= '/>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/new_relation_panel')->render();
 }
 
 /**
@@ -866,44 +218,7 @@ function PMA_getNewRelationPanel()
  */
 function PMA_getDeleteRelationPanel()
 {
-    $html  = '<table id="layer_upd_relation" style="display:none;" ';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%"></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="100%" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<tr>';
-    $html .= '<td colspan="3" class="center nowrap">';
-    $html .= '<strong>' . __('Delete relation') . '</strong>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td colspan="3" class="center nowrap">';
-    $html .= '<input id="del_button" name="Button" type="button" class="butt" ';
-    $html .= 'value="' . __('Delete') . '" />';
-    $html .= '<input id="cancel_button" type="button" class="butt" name="Button" ';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= '/>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</table></td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/delete_relation_panel')->render();
 }
 
 /**
@@ -913,143 +228,7 @@ function PMA_getDeleteRelationPanel()
  */
 function PMA_getOptionsPanel()
 {
-    $html  = '<table id="pmd_optionse" style="display:none;" ';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" rowspan="2" id="option_col_name" ';
-    $html .= 'class="center nowrap">';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody id="where">';
-    $html .= '<tr><td class="center nowrap"><b>WHERE</b></td></tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Relation operator') . '</td>';
-    $html .= '<td width="102"><select name="rel_opt" id="rel_opt">';
-    $html .= '<option value="--" selected="selected"> -- </option>';
-    $html .= '<option value="="> = </option>';
-    $html .= '<option value="&gt;"> &gt; </option>';
-    $html .= '<option value="&lt;"> &lt; </option>';
-    $html .= '<option value="&gt;="> &gt;= </option>';
-    $html .= '<option value="&lt;="> &lt;= </option>';
-    $html .= '<option value="NOT"> NOT </option>';
-    $html .= '<option value="IN"> IN </option>';
-    $html .= '<option value="EXCEPT">' . __('Except') . '</option>';
-    $html .= '<option value="NOT IN"> NOT IN </option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="nowrap">' . __('Value') . '<br />' . __('subquery');
-    $html .= '</td>';
-    $html .= '<td><textarea id="Query" value="" cols="18"></textarea>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="center nowrap"><b>' . __('Rename to') . '</b></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('New name') . '</td>';
-    $html .= '<td width="102"><input type="text" value="" id="new_name"/></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="center nowrap"><b>' . __('Aggregate') . '</b></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102"><select name="operator" id="operator">';
-    $html .= '<option value="---" selected="selected">---</option>';
-    $html .= '<option value="sum" > SUM </option>';
-    $html .= '<option value="min"> MIN </option>';
-    $html .= '<option value="max"> MAX </option>';
-    $html .= '<option value="avg"> AVG </option>';
-    $html .= '<option value="count"> COUNT </option>';
-    $html .= '</select>';
-    $html .= '</td></tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="center nowrap"><b>GROUP BY</b></td>';
-    $html .= '<td><input type="checkbox" value="groupby" id="groupby"/></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="center nowrap"><b>ORDER BY</b></td>';
-    $html .= '<td><input type="checkbox" value="orderby" id="orderby"/></td>';
-    $html .= '</tr>';
-    $html .= '<tr><td class="center nowrap"><b>HAVING</b></td></tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102"><select name="h_operator" id="h_operator">';
-    $html .= '<option value="---" selected="selected">---</option>';
-    $html .= '<option value="None" >' . __('None') . '</option>';
-    $html .= '<option value="sum" > SUM </option>';
-    $html .= '<option value="min"> MIN </option>';
-    $html .= '<option value="max"> MAX </option>';
-    $html .= '<option value="avg"> AVG </option>';
-    $html .= '<option value="count"> COUNT </option>';
-    $html .= '</select>';
-    $html .= '</td></tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Relation operator') . '</td>';
-    $html .= '<td width="102"><select name="h_rel_opt" id="h_rel_opt">';
-    $html .= '<option value="--" selected="selected"> -- </option>';
-    $html .= '<option value="="> = </option>';
-    $html .= '<option value="&gt;"> &gt; </option>';
-    $html .= '<option value="&lt;"> &lt; </option>';
-    $html .= '<option value="&gt;="> &gt;= </option>';
-    $html .= '<option value="&lt;="> &lt;= </option>';
-    $html .= '<option value="NOT"> NOT </option>';
-    $html .= '<option value="IN"> IN </option>';
-    $html .= '<option value="EXCEPT">' . __('Except') . '</option>';
-    $html .= '<option value="NOT IN"> NOT IN </option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">';
-    $html .=  __('Value') . '<br/>';
-    $html .=  __('subquery');
-    $html .= '</td>';
-    $html .= '<td width="102">';
-    $html .= '<textarea id="having" value="" cols="18"></textarea>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_add_object" class="butt" name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" id="cancel_close_option" class="butt" ';
-    $html .= 'name="Button" value="' . __('Cancel') . '" ';
-    $html .= '/>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/options_panel')->render();
 }
 
 /**
@@ -1059,60 +238,7 @@ function PMA_getOptionsPanel()
  */
 function PMA_getRenameToPanel()
 {
-    $html  = '<table id="query_rename_to" style="display:none;" ';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<strong>' . __('Rename to') . '</strong>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody id="rename_to">';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('New name') . '</td>';
-    $html .= '<td width="102">';
-    $html .= '<input type="text" value="" id="e_rename"/>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_edit_rename" class="butt" name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" class="butt" name="Button" ';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= 'onclick="document.getElementById(\'query_rename_to\').style.display'
-        . ' = \'none\';" />';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/rename_to_panel')->render();
 }
 
 /**
@@ -1122,86 +248,7 @@ function PMA_getRenameToPanel()
  */
 function PMA_getHavingQueryPanel()
 {
-    $html  = '<table id="query_having" style="display:none;" ';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap"><strong>HAVING</strong></td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody id="rename_to">';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102"><select name="hoperator" id="hoperator">';
-    $html .= '<option value="---" selected="selected">---</option>';
-    $html .= '<option value="None" > None </option>';
-    $html .= '<option value="sum" > SUM </option>';
-    $html .= '<option value="min"> MIN </option>';
-    $html .= '<option value="max"> MAX </option>';
-    $html .= '<option value="avg"> AVG </option>';
-    $html .= '<option value="count"> COUNT </option>';
-    $html .= '</select>';
-    $html .= '</td></tr>';
-    $html .= '<tr>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102"><select name="hrel_opt" id="hrel_opt">';
-    $html .= '<option value="--" selected="selected"> -- </option>';
-    $html .= '<option value="="> = </option>';
-    $html .= '<option value="&gt;"> &gt; </option>';
-    $html .= '<option value="&lt;"> &lt; </option>';
-    $html .= '<option value="&gt;="> &gt;= </option>';
-    $html .= '<option value="&lt;="> &lt;= </option>';
-    $html .= '<option value="NOT"> NOT </option>';
-    $html .= '<option value="IN"> IN </option>';
-    $html .= '<option value="EXCEPT">' . __('Except') . '</option>';
-    $html .= '<option value="NOT IN"> NOT IN </option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="nowrap">' . __('Value') . ' <br />' . __('subquery');
-    $html .= '</td>';
-    $html .= '<td><textarea id="hQuery" value="" cols="18"></textarea>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_edit_having" class="butt" name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" class="butt" name="Button" ';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= 'onclick="document.getElementById(\'query_having\').style.display'
-        . ' = \'none\';" />';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/having_query_panel')->render();
 }
 
 /**
@@ -1211,66 +258,7 @@ function PMA_getHavingQueryPanel()
  */
 function PMA_getAggregateQueryPanel()
 {
-    $html  = '<table id="query_Aggregate" style="display:none;"';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<strong>' . __('Aggregate') . '</strong>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102">';
-    $html .= '<select name="operator" id="e_operator">';
-    $html .= '<option value="---" selected="selected">---</option>';
-    $html .= '<option value="sum" > SUM </option>';
-    $html .= '<option value="min"> MIN </option>';
-    $html .= '<option value="max"> MAX </option>';
-    $html .= '<option value="avg"> AVG </option>';
-    $html .= '<option value="avg"> COUNT </option>';
-    $html .= '</select>';
-    $html .= '</td></tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_edit_Aggr" class="butt" name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" class="butt" name="Button"';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= 'onclick="document.getElementById(\'query_Aggregate\').style.display'
-        . ' = \'none\';" />';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/aggregate_query_panel')->render();
 }
 
 /**
@@ -1280,75 +268,7 @@ function PMA_getAggregateQueryPanel()
  */
 function PMA_getWhereQueryPanel()
 {
-    $html  = '<table id="query_where" style="display:none;"';
-    $html .= 'width="5%" cellpadding="0" cellspacing="0">';
-    $html .= '<tbody>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams1" width="10px"></td>';
-    $html .= '<td class="frams5" width="99%" ></td>';
-    $html .= '<td class="frams2" width="10px"><div class="bor"></div></td>';
-    $html .= '</tr>';
-
-    $html .= '<tr>';
-    $html .= '<td class="frams8"></td>';
-    $html .= '<td class="input_tab">';
-    $html .= '<table width="168" class="center" cellpadding="2" cellspacing="0">';
-    $html .= '<thead>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap"><strong>WHERE</strong></td>';
-    $html .= '</tr>';
-    $html .= '</thead>';
-    $html .= '<tbody id="rename_to">';
-    $html .= '<tr>';
-    $html .= '<td width="58" class="nowrap">' . __('Operator') . '</td>';
-    $html .= '<td width="102"><select name="erel_opt" id="erel_opt">';
-    $html .= '<option value="--" selected="selected"> -- </option>';
-    $html .= '<option value="=" > = </option>';
-    $html .= '<option value="&gt;"> &gt; </option>';
-    $html .= '<option value="&lt;"> &lt; </option>';
-    $html .= '<option value="&gt;="> &gt;= </option>';
-    $html .= '<option value="&lt;="> &lt;= </option>';
-    $html .= '<option value="NOT"> NOT </option>';
-    $html .= '<option value="IN"> IN </option>';
-    $html .= '<option value="EXCEPT">' . __('Except') . '</option>';
-    $html .= '<option value="NOT IN"> NOT IN </option>';
-    $html .= '</select>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="nowrap">' . __('Value') . '<br />' . __('subquery');
-    $html .= '</td>';
-    $html .= '<td><textarea id="eQuery" value="" cols="18"></textarea>';
-    $html .= '</td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '<tbody>';
-    $html .= '<tr>';
-    $html .= '<td colspan="2" class="center nowrap">';
-    $html .= '<input type="button" id="ok_edit_where" class="butt" name="Button" ';
-    $html .= 'value="' . __('OK') . '" />';
-    $html .= '<input type="button" class="butt" name="Button" ';
-    $html .= 'value="' . __('Cancel') . '" ';
-    $html .= 'onclick="document.getElementById(\'query_where\').style.display'
-        . ' = \'none\'" />';
-    $html .= '</td>';
-    $html .= '</tr>';
-
-    $html .= '</tbody>';
-    $html .= '</table>';
-    $html .= '</td>';
-    $html .= '<td class="frams6"></td>';
-    $html .= '</tr>';
-    $html .= '<tr>';
-    $html .= '<td class="frams4"><div class="bor"></div></td>';
-    $html .= '<td class="frams7"></td>';
-    $html .= '<td class="frams3"></td>';
-    $html .= '</tr>';
-    $html .= '</tbody>';
-    $html .= '</table>';
-
-    return $html;
+    return PMA\Template::get('designer/where_query_panel')->render();
 }
 
 /**
@@ -1358,26 +278,6 @@ function PMA_getWhereQueryPanel()
  */
 function PMA_getQueryDetails()
 {
-    $html  = '<div class="panel">';
-    $html .= '<div style="clear:both;"></div>';
-    $html .= '<div id="ab"></div>';
-    $html .= '<div style="clear:both;"></div>';
-    $html .= '</div>';
-    $html .= '<a class="trigger" href="#">' . __('Active options') . '</a>';
-    $html .= '<div id="filter"></div>';
-    $html .= '<div id="box">';
-    $html .= '<span id="boxtitle"></span>';
-    $html .= '<form method="post" action="db_qbe.php">';
-    $html .= '<textarea cols="80" name="sql_query" id="textSqlquery"'
-        . ' rows="15"></textarea><div id="tblfooter">';
-    $html .= '  <input type="submit" name="submit_sql" class="btn" />';
-    $html .= '  <input type="button" name="cancel" value="'
-        . __('Cancel') . '" onclick="closebox()" class="btn" />';
-    $html .= PMA_URL_getHiddenInputs($_GET['db']);
-    $html .= '</div></p>';
-    $html .= '</form></div>';
-
-    return $html;
+    return PMA\Template::get('designer/query_details')->render();
 }
-
-?>
+?>
\ No newline at end of file
diff --git a/scripts/update-po b/scripts/update-po
index 7e8d1de077..b2646e301e 100755
--- a/scripts/update-po
+++ b/scripts/update-po
@@ -18,7 +18,7 @@ xgettext \
     --from-code=utf-8 \
     --keyword=__ --keyword=_pgettext:1c,2 --keyword=_ngettext:1,2 \
     --copyright-holder="phpMyAdmin devel team" \
-    `find . -name '*.php' -not -path './test/*' -not -path './po/*' -not -path './release/*' | sort`
+    `find -regex '.*\.\(php\|phtml\)$' -not -path './test/*' -not -path './po/*' -not -path './release/*' | sort`
 
 # Generate PHP code for advisor rules
 php ./scripts/advisor2po >> po/phpmyadmin.pot
diff --git a/templates/designer/aggregate_query_panel.phtml b/templates/designer/aggregate_query_panel.phtml
new file mode 100755
index 0000000000..d099ec2274
--- /dev/null
+++ b/templates/designer/aggregate_query_panel.phtml
@@ -0,0 +1,84 @@
+<table id="query_Aggregate" style="display:none;"width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    <?php echo __('Aggregate'); ?>
+                                </strong>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="operator" id="e_operator">
+                                    <option value="---" selected="selected">
+                                        ---
+                                    </option>
+                                    <option value="sum" >
+                                        SUM
+                                    </option>
+                                    <option value="min">
+                                        MIN
+                                    </option>
+                                    <option value="max">
+                                        MAX
+                                    </option>
+                                    <option value="avg">
+                                        AVG
+                                    </option>
+                                    <option value="avg">
+                                        COUNT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_edit_Aggr" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button"
+                                       class="butt"
+                                       name="Button"
+                                       value="<?php echo __('Cancel'); ?>"
+                                       onclick="document.getElementById('query_Aggregate').style.display = 'none';" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/canvas.phtml b/templates/designer/canvas.phtml
new file mode 100755
index 0000000000..5110ccc0a7
--- /dev/null
+++ b/templates/designer/canvas.phtml
@@ -0,0 +1,3 @@
+<div id="osn_tab">
+    <canvas class="pmd" id="canvas" width="100" height="100" ></canvas>
+</div>
\ No newline at end of file
diff --git a/templates/designer/database_tables.phtml b/templates/designer/database_tables.phtml
new file mode 100755
index 0000000000..ad5c548568
--- /dev/null
+++ b/templates/designer/database_tables.phtml
@@ -0,0 +1,140 @@
+<?php for ($i = 0; $i < count($GLOBALS['PMD']["TABLE_NAME"]); $i++) :
+    $t_n = $GLOBALS['PMD']["TABLE_NAME"][$i];
+    $t_n_url = $GLOBALS['PMD_URL']["TABLE_NAME"][$i]; ?>
+    <input name="t_x[<?php echo $t_n_url; ?>]" type="hidden" id="t_x_<?php echo $t_n_url; ?>_" />
+    <input name="t_y[<?php echo $t_n_url; ?>]" type="hidden" id="t_y_<?php echo $t_n_url; ?>_" />
+    <input name="t_v[<?php echo $t_n_url; ?>]" type="hidden" id="t_v_<?php echo $t_n_url; ?>_" />
+    <input name="t_h[<?php echo $t_n_url; ?>]" type="hidden" id="t_h_<?php echo $t_n_url; ?>_" />
+    <!-- Why should we put styles here?! -->
+    <table id="<?php echo $t_n_url; ?>"
+           cellpadding="0"
+           cellspacing="0"
+           class="pmd_tab"
+           style="position:absolute; left:<?php echo (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["X"] : rand(20, 700)); ?>px; top:<?php echo (isset($tab_pos[$t_n]) ? $tab_pos[$t_n]["Y"] : rand(20, 550)); ?>px; display:<?php echo (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: 0px;"
+                               value="select_all_<?php echo htmlspecialchars($t_n_url); ?>"
+                               id="select_all_<?php echo htmlspecialchars($t_n_url); ?>"
+                               title="select all"
+                               pmd_url_table_name="<?php echo htmlspecialchars($t_n_url); ?>"
+                               pmd_out_owner="<?php echo htmlspecialchars($GLOBALS['PMD_OUT']['OWNER'][$i]); ?>">
+                    </td>
+                <?php endif; ?>
+                <td class="small_tab"
+                    title="<?php echo __('Toggle'); ?>"
+                    id="id_hide_tbody_<?php echo $t_n_url; ?>"
+                    table_name="<?php echo htmlspecialchars($t_n_url); ?>"
+                    onmouseover="this.className='small_tab2';"
+                    onmouseout="this.className='small_tab';" ><?php echo (! 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="<?php echo $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i]; ?>"
+                    onmouseover="this.className='small_tab_pref2 small_tab_pref_1';"
+                    onmouseout="this.className='small_tab_pref small_tab_pref_1';" >
+                    <img src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/exec_small.png'); ?>"
+                         title="<?php echo __('See table structure'); ?>" />
+                </td>
+                <td id="id_zag_<?php echo htmlspecialchars($t_n_url); ?>"
+                    class="tab_zag nowrap tab_zag_noquery"
+                    onmousedown="cur_click=document.getElementById('<?php echo $t_n_url; ?>');"
+                    table_name="<?php echo htmlspecialchars($t_n_url); ?>"
+                    query_set="<?php echo isset($_REQUEST['query']) ? 1 : 0 ; ?>" >
+                    <span class="owner">
+                        <?php echo $GLOBALS['PMD_OUT']["OWNER"][$i]; ?>
+                    </span>
+                    <?php echo $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i]; ?>
+                </td>
+                <?php if (isset($_REQUEST['query'])) : ?>
+                    <td class="tab_zag tab_zag_query"
+                        id="id_zag_<?php echo htmlspecialchars($t_n_url); ?>_2"
+                        table_name="<?php echo htmlspecialchars($t_n_url); ?>"
+                        onmousedown="cur_click=document.getElementById('<?php echo htmlspecialchars($t_n_url); ?>');">
+                    </td>
+               <?php endif; ?>
+            </tr>
+        </thead>
+        <tbody id="id_tbody_<?php echo $t_n_url; ?>" style="<?php echo (isset($tab_pos[$t_n]) && empty($tab_pos[$t_n]["V"])) ? 'display: none' : ''; ?>">
+            <?php $display_field = PMA_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 (!PMA_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;
+                }
+                ?>
+                <tr id="id_tr_<?php echo $GLOBALS['PMD_URL']["TABLE_NAME_SMALL"][$i]; ?>.<?php echo urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
+                    <?php echo ($display_field == $tab_column[$t_n]["COLUMN_NAME"][$j]) ? 'class="tab_field_3"' : 'class="tab_field"'; ?>
+                    onmouseover="old_class = this.className; this.className = 'tab_field_2';"
+                    onmouseout="this.className = old_class;"
+                    click_field_param="<?php echo implode($click_field_param, ','); ?>">
+                    <?php if (isset($_REQUEST['query'])) : ?>
+                        <td class="select_all">
+                            <input class="select_all_store_col"
+                                   value="<?php echo htmlspecialchars($t_n_url) . urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
+                                   type="checkbox"
+                                   id="select_<?php echo htmlspecialchars($t_n_url); ?>._<?php echo urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
+                                   style="margin: 0px;"
+                                   title="select_<?php echo urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>"
+                                   store_column_param="<?php echo urlencode($GLOBALS['PMD_OUT']["TABLE_NAME_SMALL"][$i]); ?>,<?php echo htmlspecialchars($GLOBALS['PMD_OUT']["OWNER"][$i]); ?>,<?php echo urlencode($tab_column[$t_n]["COLUMN_NAME"][$j]); ?>">
+                        </td>
+                    <?php endif; ?>
+                    <td width="10px" colspan="3" id="<?php echo $t_n_url; ?>.<?php echo 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="<?php echo $_SESSION['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="<?php echo $_SESSION['PMA_Theme']->getImgPath($type); ?>.png" alt="*" />
+                            <?php endif; ?>
+                            <?php echo 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"
+                            onmouseover="this.className='small_tab_pref2 small_tab_pref_click_opt'"
+                            onmouseout="this.className='small_tab_pref small_tab_pref_click_opt'"
+                            Click_option_param="pmd_optionse,<?php echo urlencode($tab_column[$t_n]['COLUMN_NAME'][$j]); ?>,<?php echo $GLOBALS['PMD_OUT']['TABLE_NAME_SMALL'][$i]; ?>" >
+                            <img src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/exec_small.png'); ?>" title="options" />
+                        </td>
+                    <?php endif; ?>
+                </tr>
+            <?php endfor; ?>
+        </tbody>
+    </table>
+<?php endfor; ?>
\ No newline at end of file
diff --git a/templates/designer/delete_relation_panel.phtml b/templates/designer/delete_relation_panel.phtml
new file mode 100755
index 0000000000..6394251c0b
--- /dev/null
+++ b/templates/designer/delete_relation_panel.phtml
@@ -0,0 +1,47 @@
+<table id="layer_upd_relation" style="display:none;" width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%">
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="100%" class="center" cellpadding="2" cellspacing="0">
+                    <tr>
+                        <td colspan="3" class="center nowrap">
+                            <strong>
+                                <?php echo __('Delete relation'); ?>
+                            </strong>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="3" class="center nowrap">
+                            <input id="del_button" name="Button" type="button" class="butt" value="<?php echo __('Delete'); ?>" />
+                            <input id="cancel_button" type="button" class="butt" name="Button" value="<?php echo __('Cancel'); ?>" />
+                        </td>
+                    </tr>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/edit_delete_pages.phtml b/templates/designer/edit_delete_pages.phtml
new file mode 100755
index 0000000000..7560b15abd
--- /dev/null
+++ b/templates/designer/edit_delete_pages.phtml
@@ -0,0 +1,11 @@
+<?php $cfgRelation = PMA_getRelationsParam(); ?>
+<form action="db_designer.php" method="post" name="edit_delete_pages" id="edit_delete_pages" class="ajax">
+    <?php echo PMA_URL_getHiddenInputs($db); ?>
+    <fieldset id="page_edit_delete_options">
+        <input type="hidden" name="operation" value="<?php echo $operation; ?>" />
+        <label for="selected_page">
+            <?php echo $operation == 'editPage' ? __("Page to open") : __("Page to delete"); ?>:
+        </label>
+        <?php echo PMA_getHtmlForPageSelector($cfgRelation, $db); ?>
+    </fieldset>
+</form>
\ No newline at end of file
diff --git a/templates/designer/having_query_panel.phtml b/templates/designer/having_query_panel.phtml
new file mode 100755
index 0000000000..a478680f7c
--- /dev/null
+++ b/templates/designer/having_query_panel.phtml
@@ -0,0 +1,138 @@
+<table id="query_having" style="display:none;" width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    HAVING
+                                </strong>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id="rename_to">
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="hoperator" id="hoperator">
+                                    <option value="---" selected="selected">
+                                        ---
+                                    </option>
+                                    <option value="None" >
+                                        None
+                                    </option>
+                                    <option value="sum" >
+                                        SUM
+                                    </option>
+                                    <option value="min">
+                                        MIN
+                                    </option>
+                                    <option value="max">
+                                        MAX
+                                    </option>
+                                    <option value="avg">
+                                        AVG
+                                    </option>
+                                    <option value="count">
+                                        COUNT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <tr>
+                                <td width="58" class="nowrap">
+                                    <?php echo __('Operator'); ?>
+                                </td>
+                                <td width="102">
+                                    <select name="hrel_opt" id="hrel_opt">
+                                        <option value="--" selected="selected">
+                                            --
+                                        </option>
+                                        <option value="=">
+                                            =
+                                        </option>
+                                        <option value="&gt;">
+                                            &gt;
+                                        </option>
+                                        <option value="&lt;">
+                                            &lt;
+                                        </option>
+                                        <option value="&gt;=">
+                                            &gt;=
+                                        </option>
+                                        <option value="&lt;=">
+                                            &lt;=
+                                        </option>
+                                        <option value="NOT">
+                                            NOT
+                                        </option>
+                                        <option value="IN">
+                                            IN
+                                        </option>
+                                        <option value="EXCEPT">
+                                            <?php echo __('Except'); ?>
+                                        </option>
+                                        <option value="NOT IN">
+                                            NOT IN
+                                        </option>
+                                    </select>
+                                </td>
+                        </tr>
+                        <tr>
+                            <td class="nowrap">
+                                <?php echo __('Value'); ?>
+                                <br />
+                                <?php echo __('subquery'); ?>
+                            </td>
+                            <td>
+                                <textarea id="hQuery" value="" cols="18">
+                                </textarea>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_edit_having" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button"
+                                       class="butt"
+                                       name="Button"
+                                       value="<?php echo __('Cancel'); ?>"
+                                       onclick="document.getElementById('query_having').style.display = 'none';" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/js_fields.phtml b/templates/designer/js_fields.phtml
new file mode 100755
index 0000000000..7187ff8187
--- /dev/null
+++ b/templates/designer/js_fields.phtml
@@ -0,0 +1,10 @@
+<?php $cfgRelation = PMA_getRelationsParam(); ?>
+<!-- Do not expand HTML here, invisible characters will make javascript crash -->
+<div id="script_server" class="hide"><?php echo htmlspecialchars($GLOBALS['server']); ?></div>
+<div id="script_db" class="hide"><?php echo htmlspecialchars($_GET['db']); ?></div>
+<div id="script_token" class="hide"><?php echo htmlspecialchars($_GET['token']); ?></div>
+<div id="script_tables" class="hide"><?php echo htmlspecialchars(json_encode($script_tables)); ?></div>
+<div id="script_contr" class="hide"><?php echo htmlspecialchars(json_encode($script_contr)); ?></div>
+<div id="script_display_field" class="hide"><?php echo htmlspecialchars(json_encode($script_display_field)); ?></div>
+<div id="script_display_page" class="hide"><?php echo htmlspecialchars($display_page); ?></div>
+<div id="pmd_tables_enabled" class="hide"><?php echo htmlspecialchars($cfgRelation['pdfwork']); ?></div>
\ No newline at end of file
diff --git a/templates/designer/new_relation_panel.phtml b/templates/designer/new_relation_panel.phtml
new file mode 100755
index 0000000000..59672f74c2
--- /dev/null
+++ b/templates/designer/new_relation_panel.phtml
@@ -0,0 +1,108 @@
+<table id="layer_new_relation" style="display:none;" width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    <?php echo __('Create relation'); ?>
+                                </strong>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id="foreign_relation">
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    FOREIGN KEY
+                                </strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                on delete
+                            </td>
+                            <td width="102">
+                                <select name="on_delete" id="on_delete">
+                                    <option value="nix" selected="selected">
+                                        --
+                                    </option>
+                                    <option value="CASCADE">
+                                        CASCADE
+                                    </option>
+                                    <option value="SET NULL">
+                                        SET NULL
+                                    </option>
+                                    <option value="NO ACTION">
+                                        NO ACTION
+                                    </option>
+                                    <option value="RESTRICT">
+                                        RESTRICT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="nowrap">
+                                on update
+                            </td>
+                            <td>
+                                <select name="on_update" id="on_update">
+                                    <option value="nix" selected="selected">
+                                        --
+                                    </option>
+                                    <option value="CASCADE">
+                                        CASCADE
+                                    </option>
+                                    <option value="SET NULL">
+                                        SET NULL
+                                    </option>
+                                    <option value="NO ACTION">
+                                        NO ACTION
+                                    </option>
+                                    <option value="RESTRICT">
+                                        RESTRICT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_new_rel_panel" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button" id="cancel_new_rel_panel" class="butt" name="Button" value="<?php echo __('Cancel'); ?>" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/options_panel.phtml b/templates/designer/options_panel.phtml
new file mode 100755
index 0000000000..67f9778311
--- /dev/null
+++ b/templates/designer/options_panel.phtml
@@ -0,0 +1,263 @@
+<table id="pmd_optionse" style="display:none;" width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" rowspan="2" id="option_col_name" class="center nowrap">
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id="where">
+                        <tr>
+                            <td class="center nowrap">
+                                <b>
+                                    WHERE
+                                </b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Relation operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="rel_opt" id="rel_opt">
+                                    <option value="--" selected="selected">
+                                        --
+                                    </option>
+                                    <option value="=">
+                                        =
+                                    </option>
+                                    <option value="&gt;">
+                                        &gt;
+                                    </option>
+                                    <option value="&lt;">
+                                        &lt;
+                                    </option>
+                                    <option value="&gt;=">
+                                        &gt;=
+                                    </option>
+                                    <option value="&lt;=">
+                                        &lt;=
+                                    </option>
+                                    <option value="NOT">
+                                        NOT
+                                    </option>
+                                    <option value="IN">
+                                        IN
+                                    </option>
+                                    <option value="EXCEPT">
+                                        <?php echo __('Except'); ?>
+                                    </option>
+                                    <option value="NOT IN">
+                                        NOT IN
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="nowrap">
+                                <?php echo __('Value'); ?>
+                                <br />
+                                <?php echo __('subquery');
+                            </td>
+                            <td>
+                                <textarea id="Query" value="" cols="18">
+                                </textarea>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="center nowrap">
+                                <b>
+                                    <?php echo __('Rename to'); ?>
+                                </b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('New name'); ?>
+                            </td>
+                            <td width="102">
+                                <input type="text" value="" id="new_name"/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="center nowrap">
+                                <b>
+                                    <?php echo __('Aggregate'); ?>
+                                </b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="operator" id="operator">
+                                    <option value="---" selected="selected">
+                                        ---
+                                    </option>
+                                    <option value="sum" >
+                                        SUM
+                                    </option>
+                                    <option value="min">
+                                        MIN
+                                    </option>
+                                    <option value="max">
+                                        MAX
+                                    </option>
+                                    <option value="avg">
+                                        AVG
+                                    </option>
+                                    <option value="count">
+                                        COUNT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="center nowrap">
+                                <b>
+                                    GROUP BY
+                                </b>
+                            </td>
+                            <td>
+                                <input type="checkbox" value="groupby" id="groupby"/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="center nowrap">
+                                <b>
+                                    ORDER BY
+                                </b>
+                            </td>
+                            <td>
+                                <input type="checkbox" value="orderby" id="orderby"/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="center nowrap">
+                                <b>
+                                    HAVING
+                                </b>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="h_operator" id="h_operator">
+                                    <option value="---" selected="selected">
+                                        ---
+                                    </option>
+                                    <option value="None" >
+                                        <?php echo __('None'); ?>
+                                    </option>
+                                    <option value="sum" >
+                                        SUM
+                                    </option>
+                                    <option value="min">
+                                        MIN
+                                    </option>
+                                    <option value="max">
+                                        MAX
+                                    </option>
+                                    <option value="avg">
+                                        AVG
+                                    </option>
+                                    <option value="count">
+                                        COUNT
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Relation operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="h_rel_opt" id="h_rel_opt">
+                                    <option value="--" selected="selected">
+                                        --
+                                    </option>
+                                    <option value="=">
+                                        =
+                                    </option>
+                                    <option value="&gt;">
+                                        &gt;
+                                    </option>
+                                    <option value="&lt;">
+                                        &lt;
+                                    </option>
+                                    <option value="&gt;=">
+                                        &gt;=
+                                    </option>
+                                    <option value="&lt;=">
+                                        &lt;=
+                                    </option>
+                                    <option value="NOT">
+                                        NOT
+                                    </option>
+                                    <option value="IN">
+                                        IN
+                                    </option>
+                                    <option value="EXCEPT">
+                                        <?php echo __('Except'); ?>
+                                    </option>
+                                    <option value="NOT IN">
+                                        NOT IN
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Value'); ?>
+                                <br/>
+                                <?php echo __('subquery'); ?>
+                            </td>
+                            <td width="102">
+                                <textarea id="having" value="" cols="18">
+                                </textarea>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_add_object" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button" id="cancel_close_option" class="butt" name="Button" value="<?php echo __('Cancel'); ?>" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/page_save_as.phtml b/templates/designer/page_save_as.phtml
new file mode 100755
index 0000000000..8394915d24
--- /dev/null
+++ b/templates/designer/page_save_as.phtml
@@ -0,0 +1,33 @@
+<?php
+$cfgRelation = PMA_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">
+    <?php echo PMA_URL_getHiddenInputs($db); ?>
+    <fieldset id="page_save_as_options">
+        <table>
+            <tbody>
+                <tr>
+                    <td>
+                        <input type="hidden" name="operation" value="savePage" />
+                        <?php echo PMA_getHtmlForPageSelector($cfgRelation, $db); ?>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <?php echo PMA_Util::getRadioFields('save_page', $choices, 'same', true); ?>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="selected_value"><?php echo __('New page name'); ?></label>
+                        <input type="text" name="selected_value" id="selected_value" />
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </fieldset>
+</form>
\ No newline at end of file
diff --git a/templates/designer/page_selector.phtml b/templates/designer/page_selector.phtml
new file mode 100755
index 0000000000..6195f87941
--- /dev/null
+++ b/templates/designer/page_selector.phtml
@@ -0,0 +1,10 @@
+<select name="selected_page" id="selected_page">
+    <option value="0">-- <?php echo __('Select page'); ?> --</option>
+    <?php if ($cfgRelation['pdfwork']) : $pages = PMA_getPageIdsAndNames($db); ?>
+        <?php foreach ($pages as $nr => $desc) : ?>
+            <option value="<?php echo $nr; ?>">
+                <?php echo htmlspecialchars($desc); ?>
+            </option>
+        <?php endforeach; ?>
+    <?php endif; ?>
+</select>
\ No newline at end of file
diff --git a/templates/designer/query_details.phtml b/templates/designer/query_details.phtml
new file mode 100755
index 0000000000..7fbf6a928d
--- /dev/null
+++ b/templates/designer/query_details.phtml
@@ -0,0 +1,27 @@
+<div class="panel">
+    <div style="clear:both;">
+    </div>
+    <div id="ab">
+    </div>
+    <div style="clear:both;">
+    </div>
+</div>
+<a class="trigger" href="#">
+    <?php echo __('Active options'); ?>
+</a>
+<div id="filter">
+</div>
+<div id="box">
+    <span id="boxtitle">
+    </span>
+    <form method="post" action="db_qbe.php">
+        <textarea cols="80" name="sql_query" id="textSqlquery" rows="15">
+        </textarea>
+        <div id="tblfooter">
+            <input type="submit" name="submit_sql" class="btn" />
+            <input type="button" name="cancel" value="<?php echo __('Cancel'); ?>" onclick="closebox()" class="btn" />
+            <?php echo MA_URL_getHiddenInputs($_GET['db']); ?>
+        </div>
+    </p>
+</form>
+</div>
\ No newline at end of file
diff --git a/templates/designer/rename_to_panel.phtml b/templates/designer/rename_to_panel.phtml
new file mode 100755
index 0000000000..41d7c059f7
--- /dev/null
+++ b/templates/designer/rename_to_panel.phtml
@@ -0,0 +1,66 @@
+
+<table id="query_rename_to" style="display:none;" width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    <?php echo __('Rename to'); ?>
+                                </strong>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id="rename_to">
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('New name'); ?>
+                            </td>
+                            <td width="102">
+                                <input type="text" value="" id="e_rename"/>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_edit_rename" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button"
+                                       class="butt"
+                                       name="Button"
+                                       value="<?php echo __('Cancel'); ?>"
+                                       onclick="document.getElementById('query_rename_to').style.display = 'none';" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/designer/schema_export.phtml b/templates/designer/schema_export.phtml
new file mode 100755
index 0000000000..395503b6a4
--- /dev/null
+++ b/templates/designer/schema_export.phtml
@@ -0,0 +1,11 @@
+<form method="post" action="schema_export.php" class="disableAjax" id="id_export_pages">
+    <fieldset>
+        <?php echo PMA_URL_getHiddenInputs($db); ?>
+        <label><?php echo __('Select Export Relational Type'); ?></label><br/>
+        <?php echo PMA_pluginGetChoice(
+            'Schema', 'export_type', $export_list, 'format'
+        ); ?>
+        <input type="hidden" name="page_number" value="<?php echo htmlspecialchars($page); ?>" />
+        <?php echo PMA_pluginGetOptions('Schema', $export_list); ?>
+    </fieldset>
+</form>';
\ No newline at end of file
diff --git a/templates/designer/side_menu.phtml b/templates/designer/side_menu.phtml
new file mode 100755
index 0000000000..dee4508aa9
--- /dev/null
+++ b/templates/designer/side_menu.phtml
@@ -0,0 +1,189 @@
+<?php
+function getImg($path)
+{
+    return $_SESSION['PMA_Theme']->getImgPath($path);
+}
+?>
+<?php if (!$visualBuilder) : ?>
+    <div id="name-panel" style="overflow:hidden">
+        <span id="page_name" style="border:none">
+            <?php echo $selected_page == null ? __("Untitled") : htmlspecialchars($selected_page); ?>
+        </span>
+        <span id="saved_state" style="border:none">
+            <?php echo $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="<?php echo __('Show/Hide tables list'); ?>"
+             alt="v"
+             src="<?php echo getImg('pmd/downarrow2_m.png'); ?>"
+             data-down="<?php echo getImg('pmd/downarrow2_m.png'); ?>"
+             data-up="<?php echo getImg('pmd/uparrow2_m.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Show/Hide tables list'); ?>
+        </span>
+    </a>
+    <a href="#" id="toggleFullscreen" class="M_butt">
+        <img title="<?php echo __('View in fullscreen'); ?>"
+             src="<?php echo getImg('pmd/viewInFullscreen.png'); ?>"
+             data-enter="<?php echo getImg('pmd/viewInFullscreen.png'); ?>"
+             data-exit="<?php echo getImg('pmd/exitFullscreen.png'); ?>" />
+        <span class="hide hidable"
+              data-exit="<?php echo __('Exit fullscreen'); ?>"
+              data-enter="<?php echo __('View in fullscreen'); ?>">
+            <?php echo __('View in fullscreen'); ?>
+        </span>
+    </a>
+    <?php if (! $visualBuilder) : ?>
+        <a id="newPage" href="#" class="M_butt">
+            <img title="<?php echo __('New page'); ?>"
+                 alt=""
+                 src="<?php echo getImg('pmd/page_add.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('New page'); ?>
+            </span>
+        </a>
+        <a href="#" id="editPage" class="M_butt ajax">
+            <img title="<?php echo __('Open page'); ?>"
+                 src="<?php echo getImg('pmd/page_edit.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Open page'); ?>
+            </span>
+        </a>
+        <a href="#" id="savePos" class="M_butt">
+            <img title="<?php echo __('Save page'); ?>"
+                 src="<?php echo getImg('pmd/save.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Save page'); ?>
+            </span>
+        </a>
+        <a href="#" id="SaveAs" class="M_butt ajax">
+            <img title="<?php echo __('Save page as'); ?>"
+                 src="<?php echo getImg('pmd/save_as.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Save page as'); ?>
+            </span>
+        </a>
+        <a href="#" id="delPages" class="M_butt ajax">
+            <img title="<?php echo __('Delete pages'); ?>"
+                 src="<?php echo getImg('pmd/page_delete.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Delete pages'); ?>
+            </span>
+        </a>
+    <?php endif; ?>
+    <a href="#" id="StartTableNew" class="M_butt">
+        <img title="<?php echo __('Create table'); ?>"
+             src="<?php echo getImg('pmd/table.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Create table'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="rel_button">
+        <img title="<?php echo __('Create relation'); ?>"
+             src="<?php echo getImg('pmd/relation.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Create relation'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="display_field_button">
+        <img title="<?php echo __('Choose column to display'); ?>"
+             src="<?php echo getImg('pmd/display_field.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Choose column to display'); ?>
+        </span>
+    </a>
+    <a href="#" id="reloadPage" class="M_butt">
+        <img title="<?php echo __('Reload'); ?>"
+             src="<?php echo getImg('pmd/reload.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Reload'); ?>
+        </span>
+    </a>
+    <a href="<?php echo PMA_Util::getDocuLink('faq', 'faq6-31'); ?>"
+       target="documentation"
+       class="M_butt">
+        <img title="<?php echo __('Help'); ?>"
+             src="<?php echo getImg('pmd/help.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Help'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="angular_direct_button">
+        <img title="<?php echo __('Angular links'); ?> / <?php echo __('Direct links'); ?>"
+             src="<?php echo getImg('pmd/ang_direct.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Angular links'); ?> / <?php echo __('Direct links'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="grid_button">
+        <img title="<?php echo __('Snap to grid'); ?>" src="<?php echo getImg('pmd/grid.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Snap to grid'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="key_SB_all">
+        <img title="<?php echo __('Small/Big All'); ?>"
+             alt="v"
+             src="<?php echo getImg('pmd/downarrow1.png'); ?>"
+             data-down="<?php echo getImg('pmd/downarrow1.png'); ?>"
+             data-right="<?php echo getImg('pmd/rightarrow1.png') ?>" />
+        <span class="hide hidable">
+            <?php echo __('Small/Big All'); ?>
+        </span>
+    </a>
+    <a href="#" id="SmallTabInvert" class="M_butt" >
+        <img title="<?php echo __('Toggle small/big'); ?>"
+             src="<?php echo getImg('pmd/bottom.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Toggle small/big'); ?>
+        </span>
+    </a>
+    <a href="#" id="relLineInvert" class="M_butt" >
+        <img title="<?php echo __('Toggle relation lines'); ?>"
+             src="<?php echo getImg('pmd/toggle_lines.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Toggle relation lines'); ?>
+        </span>
+    </a>
+    <?php if (! $visualBuilder) : ?>
+        <a href="#" id="exportPages" class="M_butt" >
+            <img title="<?php echo __('Export schema'); ?>"
+                 src="<?php echo getImg('pmd/export.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Export schema'); ?>
+            </span>
+        </a>
+    <?php else: ?>
+        <a class="M_butt"
+           href="#"
+           onclick="build_query('SQL Query on Database', 0)"
+           onmousedown="return false;"
+           class="M_butt">
+            <img title="<?php echo __('Build Query'); ?>"
+                 src="<?php echo getImg('pmd/query_builder.png'); ?>" />
+            <span class="hide hidable">
+                <?php echo __('Build Query'); ?>
+            </span>
+        </a>
+    <?php endif; ?>
+    <a href="#" class="M_butt" id="key_Left_Right">
+        <img title="<?php echo __('Move Menu'); ?>" alt=">"
+             data-right="<?php echo getImg('pmd/2leftarrow_m.png'); ?>"
+             src="<?php echo getImg('pmd/2rightarrow_m.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Move Menu'); ?>
+        </span>
+    </a>
+    <a href="#" class="M_butt" id="pin_Text">
+        <img title="<?php echo __('Pin text'); ?>"
+             alt=">"
+             data-right="<?php echo getImg('pmd/anchor.png'); ?>"
+             src="<?php echo getImg('pmd/anchor.png'); ?>" />
+        <span class="hide hidable">
+            <?php echo __('Pin text'); ?>
+        </span>
+    </a>
+</div>
\ No newline at end of file
diff --git a/templates/designer/table_list.phtml b/templates/designer/table_list.phtml
new file mode 100755
index 0000000000..ebbc6cac47
--- /dev/null
+++ b/templates/designer/table_list.phtml
@@ -0,0 +1,69 @@
+<div id="layer_menu" style="display:none;">
+    <div class="center">
+        <a href="#" class="M_butt" target="_self" >
+            <img title="<?php echo __('Hide/Show all'); ?>"
+                 alt="v"
+                 id="key_HS_all"
+                 src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png'); ?>"
+                 data-down="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow1.png'); ?>"
+                 data-right="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/rightarrow1.png'); ?>" />
+        </a>
+        <a href="#" class="M_butt" target="_self" >
+            <img alt="v"
+                 id="key_HS"
+                 title="<?php echo __('Hide/Show Tables with no relation'); ?>"
+                 src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2.png'); ?>"
+                 data-down="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/downarrow2.png'); ?>"
+                 data-right="<?php echo $_SESSION['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="<?php echo __('Structure'); ?>"
+                        width="1px"
+                        onmouseover="this.className='L_butt2_2'"
+                        onmouseout="this.className='L_butt2_1'"
+                        class="L_butt2_1">
+                        <img alt=""
+                             table_name="<?php echo $GLOBALS['PMD_URL']['TABLE_NAME_SMALL'][$i]; ?>"
+                             class="scroll_tab_struct"
+                             src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/exec.png'); ?>"/>
+                    </td>
+                    <td width="1px">
+                        <input class="scroll_tab_checkbox"
+                               title="<?php echo __('Hide'); ?>"
+                               id="check_vis_<?php echo $GLOBALS['PMD_URL']["TABLE_NAME"][$i]; ?>"
+                               style="margin:0px;"
+                               type="checkbox"
+                               value="<?php echo $GLOBALS['PMD_URL']["TABLE_NAME"][$i]; ?>"
+                               <?php if ($checked) : ?>checked="checked"<?php endif; ?> />
+                    </td>
+                    <td class="pmd_Tabs"
+                        onmouseover="this.className='pmd_Tabs2'"
+                        onmouseout="this.className='pmd_Tabs'"
+                        pmd_url_table_name="<?php echo $GLOBALS['PMD_URL']['TABLE_NAME'][$i]; ?>">
+                        <?php echo $GLOBALS['PMD_OUT']["TABLE_NAME"][$i]; ?>
+                    </td>
+                </tr>
+            <?php endfor; ?>
+        </table>
+    </div>
+    <!-- end id_scroll_tab -->
+    <div class="center">
+        <?php echo __('Number of tables:'); ?> <?php echo $name_cnt; ?>
+    </div>
+    <div id="layer_menu_sizer" onmousedown="layer_menu_cur_click=1">
+        <div class="floatleft">
+            <img class="icon"
+                 data-right="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/resizeright.png'); ?>"
+                 src="<?php echo $_SESSION['PMA_Theme']->getImgPath('pmd/resize.png'); ?>"/>
+        </div>
+    </div>
+</div>
+<!-- end layer_menu -->
\ No newline at end of file
diff --git a/templates/designer/where_query_panel.phtml b/templates/designer/where_query_panel.phtml
new file mode 100755
index 0000000000..f719af3078
--- /dev/null
+++ b/templates/designer/where_query_panel.phtml
@@ -0,0 +1,103 @@
+<table id="query_where" style="display:none;"width="5%" cellpadding="0" cellspacing="0">
+    <tbody>
+        <tr>
+            <td class="frams1" width="10px">
+            </td>
+            <td class="frams5" width="99%" >
+            </td>
+            <td class="frams2" width="10px">
+                <div class="bor">
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td class="frams8">
+            </td>
+            <td class="input_tab">
+                <table width="168" class="center" cellpadding="2" cellspacing="0">
+                    <thead>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <strong>
+                                    WHERE
+                                </strong>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody id="rename_to">
+                        <tr>
+                            <td width="58" class="nowrap">
+                                <?php echo __('Operator'); ?>
+                            </td>
+                            <td width="102">
+                                <select name="erel_opt" id="erel_opt">
+                                    <option value="--" selected="selected">
+                                        --
+                                    </option>
+                                    <option value="=" >
+                                        =
+                                    </option>
+                                    <option value="&gt;">
+                                        &gt;
+                                    </option>
+                                    <option value="&lt;">
+                                        &lt;
+                                    </option>
+                                    <option value="&gt;=">
+                                        &gt;=
+                                    </option>
+                                    <option value="&lt;=">
+                                        &lt;=
+                                    </option>
+                                    <option value="NOT">
+                                        NOT
+                                    </option>
+                                    <option value="IN">
+                                        IN
+                                    </option>
+                                    <option value="EXCEPT">
+                                        <?php echo __('Except'); ?>
+                                    </option>
+                                    <option value="NOT IN">
+                                        NOT IN
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="nowrap">
+                                <?php echo __('Value'); ?>
+                                <br />
+                                <?php echo __('subquery'); ?>
+                            </td>
+                            <td>
+                                <textarea id="eQuery" value="" cols="18">
+                                </textarea>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td colspan="2" class="center nowrap">
+                                <input type="button" id="ok_edit_where" class="butt" name="Button" value="<?php echo __('OK'); ?>" />
+                                <input type="button" class="butt" name="Button" value="<?php echo __('Cancel'); ?>" onclick="document.getElementById(\'query_where\').style.display = \'none\'" />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </td>
+            <td class="frams6">
+            </td>
+        </tr>
+        <tr>
+            <td class="frams4">
+                <div class="bor">
+                </div>
+            </td>
+            <td class="frams7">
+            </td>
+            <td class="frams3">
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/templates/tbl_chart.php b/templates/tbl_chart.phtml
similarity index 100%
rename from templates/tbl_chart.php
rename to templates/tbl_chart.phtml
diff --git a/templates/test/echo.phtml b/templates/test/echo.phtml
new file mode 100644
index 0000000000..44da4ed410
--- /dev/null
+++ b/templates/test/echo.phtml
@@ -0,0 +1,2 @@
+<?php
+echo $variable;
\ No newline at end of file
diff --git a/templates/test/static.phtml b/templates/test/static.phtml
new file mode 100644
index 0000000000..703390d105
--- /dev/null
+++ b/templates/test/static.phtml
@@ -0,0 +1 @@
+static content
\ No newline at end of file
diff --git a/templates/test/trim.phtml b/templates/test/trim.phtml
new file mode 100644
index 0000000000..56b4ac493e
--- /dev/null
+++ b/templates/test/trim.phtml
@@ -0,0 +1 @@
+outer <element> value </element> value
\ No newline at end of file
diff --git a/test/classes/PMA_Template_test.php b/test/classes/PMA_Template_test.php
new file mode 100644
index 0000000000..a8edd7b2e5
--- /dev/null
+++ b/test/classes/PMA_Template_test.php
@@ -0,0 +1,45 @@
+<?php
+/* vim: set expandtab sw=4 ts=4 sts=4: */
+/**
+ * Test for PMA\Template class
+ *
+ * @package PhpMyAdmin-test
+ */
+
+require_once 'libraries/Template.class.php';
+
+/**
+ * Test for PMA\Template class
+ *
+ * @package PhpMyAdmin-test
+ */
+class PMA_Template_test extends PHPUnit_Framework_TestCase
+{
+    public function testStaticRender()
+    {
+        $this->assertEquals(
+            'static content',
+            PMA\Template::get('test/static')->render()
+        );
+    }
+
+    public function testDynamicRender()
+    {
+        $this->assertEquals(
+            'value',
+            PMA\Template::get('test/echo')->render(array(
+                'variable' => 'value'
+            ))
+        );
+    }
+
+    public function testTrim()
+    {
+        $html = file_get_contents(PMA\Template::BASE_PATH.'test/trim.phtml');
+
+        $this->assertEquals(
+            'outer <element>value</element> value',
+            PMA\Template::trim($html)
+        );
+    }
+}
diff --git a/test/libraries/PMA_browse_foreigners_test.php b/test/libraries/PMA_browse_foreigners_test.php
index 029f6119f6..4011ef2b28 100644
--- a/test/libraries/PMA_browse_foreigners_test.php
+++ b/test/libraries/PMA_browse_foreigners_test.php
@@ -248,11 +248,11 @@ class PMA_BrowseForeignersTest extends PHPUnit_Framework_TestCase
         $foreignData = array();
         $foreignData['disp_row'] = '';
         $fieldkey = 'bar';
-        $data = array();
+        $current_value = '';
         $_REQUEST['rownumber'] = 1;
         $_REQUEST['foreign_filter'] = '5';
         $result = PMA_getHtmlForRelationalFieldSelection(
-            $db, $table, $field, $foreignData, $fieldkey, $data
+            $db, $table, $field, $foreignData, $fieldkey, $current_value 
         );
 
         $this->assertContains(
@@ -319,7 +319,7 @@ class PMA_BrowseForeignersTest extends PHPUnit_Framework_TestCase
         $foreignData['the_total'] = 5;
         $GLOBALS['cfg']['ShowAll'] = false;
         $result = PMA_getHtmlForRelationalFieldSelection(
-            $db, $table, $field, $foreignData, $fieldkey, $data
+            $db, $table, $field, $foreignData, $fieldkey, $current_value
         );
 
         $this->assertContains(
diff --git a/themes/pmahomme/css/pmd.css.php b/themes/pmahomme/css/pmd.css.php
index 12e7b0d265..749b4ce6c2 100644
--- a/themes/pmahomme/css/pmd.css.php
+++ b/themes/pmahomme/css/pmd.css.php
@@ -571,6 +571,7 @@ h2.active {
 
 .side-menu.right {
     float: right;
+    right: 0;
 }
 
 .side-menu .hide {