diff --git a/js/pmd/history.js b/js/pmd/history.js
index 1577f4e338..4269818d12 100644
--- a/js/pmd/history.js
+++ b/js/pmd/history.js
@@ -10,22 +10,7 @@
 var history_array = []; // Global array to store history objects
 var select_field = [];  // Global array to store informaation for columns which are used in select clause
 var g_index;
-
-/**
- * function for panel, hides and shows toggle_container <div>,which is for history elements uses {@link JQuery}.
- *
- * @param index has value 1 or 0,decides wheter to hide toggle_container on load.
-**/
-
-function panel(index)
-{
-    if (!index) {
-        $(".toggle_container").hide();
-    }
-    $("h2.tiger").click(function () {
-        $(this).toggleClass("active").next().slideToggle("slow");
-    });
-}
+var vqb_editor = null;
 
 /**
  * To display details of objects(where,rename,Having,aggregate,groupby,orderby,having)
@@ -97,7 +82,7 @@ function display(init, finit)
     str = ''; // string to store Html code for history tab
     for (i = 0; i < history_array.length; i++) {
         temp = history_array[i].get_tab(); //+ '.' + history_array[i].get_obj_no(); for Self JOIN
-        str += '<h2 class="tiger"><a href="#">' + temp + '</a></h2>';
+        str += '<h3 class="tiger"><a href="#">' + temp + '</a></h3>';
         str += '<div class="toggle_container">\n';
         while ((history_array[i].get_tab()) == temp) { //+ '.' + history_array[i].get_obj_no()) == temp) {
             str += '<div class="block"> <table width ="250">';
@@ -117,10 +102,10 @@ function display(init, finit)
             if (i >= history_array.length) {
                 break;
             }
-            str += '</table></div><br/>';
+            str += '</table></div>';
         }
         i--;
-        str += '</div><br/>';
+        str += '</div>';
     }
     return str;
 }
@@ -142,7 +127,7 @@ function and_or(index)
     }
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -163,7 +148,7 @@ function history_delete(index)
     history_array.splice(index, 1);
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -256,7 +241,7 @@ function edit(type)
     }
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -508,10 +493,10 @@ function query_groupby()
     var str = "";
     for (i = 0; i < history_array.length;i++) {
         if (history_array[i].get_type() == "GroupBy") {
-            str += history_array[i].get_column_name() + ", ";
+            str += '`' + history_array[i].get_column_name() + "`, ";
         }
     }
-    str = str.substr(0, str.length - 1);
+    str = str.substr(0, str.length - 2);
     return str;
 }
 
@@ -573,10 +558,10 @@ function query_where()
     for (i = 0; i < history_array.length;i++) {
         if (history_array[i].get_type() == "Where") {
             if (history_array[i].get_and_or() === 0) {
-                and += "( " + history_array[i].get_column_name() + " " + history_array[i].get_obj().getrelation_operator() + " " + history_array[i].get_obj().getquery() + ")";
+                and += "( `" + history_array[i].get_column_name() + "` " + history_array[i].get_obj().getrelation_operator() + " " + history_array[i].get_obj().getquery() + ")";
                 and += " AND ";
             } else {
-                or += "( " + history_array[i].get_column_name() + " " + history_array[i].get_obj().getrelation_operator() + " " + history_array[i].get_obj().getquery() + ")";
+                or += "( `" + history_array[i].get_column_name() + "` " + history_array[i].get_obj().getrelation_operator() + " " + history_array[i].get_obj().getquery() + ")";
                 or += " OR ";
             }
         }
@@ -621,26 +606,6 @@ function check_rename(id_this)
     return "";
 }
 
-function gradient(id, level)
-{
-    var box = document.getElementById(id);
-    box.style.opacity = level;
-    box.style.MozOpacity = level;
-    box.style.KhtmlOpacity = level;
-    box.style.filter = "alpha(opacity=" + level * 100 + ")";
-    box.style.display = "block";
-}
-
-
-function fadein(id)
-{
-    var level = 0;
-    while (level <= 1) {
-        setTimeout("gradient('" + id + "'," + level + ")", (level * 1000) + 10);
-        level += 0.01;
-    }
-}
-
  /**
   * This function builds from clause of query
   * makes automatic joins.
@@ -672,7 +637,7 @@ function query_from()
     from_array = unique(from_array);
     tab_left = from_array;
     temp = tab_left.shift();
-    quer = temp;
+    quer = '`' + temp + '`';
     tab_used.push(temp);
     // if master table (key2) matches with tab used get all keys and check if tab_left matches
     // after this check if master table (key2) matches with tab left then check if any foreign matches with master .
@@ -686,7 +651,7 @@ function query_from()
                             parts1 = contr[K][key][key2][key3][0].split(".");
                             if (found(tab_left, parts1[1]) > 0) {
                                 query += "\n" + 'LEFT JOIN ';
-                                query += '`' + parts1[0] + '`.`' + parts1[1] + '` ON ';
+                                query += '`' + parts1[1] + '` ON ';
                                 query += '`' + parts[1] + '`.`' + key3 + '` = ';
                                 query += '`' + parts1[1] + '`.`' + contr[K][key][key2][key3][1] + '` ';
                                 t_tab_left.push(parts1[1]);
@@ -710,7 +675,7 @@ function query_from()
                             parts1 = contr[K][key][key2][key3][0].split(".");
                             if (found(tab_used, parts1[1]) > 0) {
                                 query += "\n" + 'LEFT JOIN ';
-                                query += '`' + parts[0] + '`.`' + parts[1] + '` ON ';
+                                query += '`' + parts[1] + '` ON ';
                                 query += '`' + parts1[1] + '`.`' + contr[K][key][key2][key3][1] + '` = ';
                                 query += '`' + parts[1] + '`.`' + key3 + '` ';
                                 t_tab_left.push(parts[1]);
@@ -750,46 +715,90 @@ function build_query(formtitle, fadin)
 {
     var q_select = "SELECT ";
     var temp;
-    for (var i = 0;i < select_field.length; i++) {
-        temp = check_aggregate(select_field[i]);
-        if (temp !== "") {
-            q_select += temp;
-            temp = check_rename(select_field[i]);
-            q_select += temp + ",";
-        } else {
-            temp = check_rename(select_field[i]);
-            q_select += select_field[i] + temp + ",";
+    if (select_field.length > 0) {
+        for (var i = 0; i < select_field.length; i++) {
+            temp = check_aggregate(select_field[i]);
+            if (temp !== "") {
+                q_select += temp;
+                temp = check_rename(select_field[i]);
+                q_select += temp + ", ";
+            } else {
+                temp = check_rename(select_field[i]);
+                q_select += select_field[i] + temp + ", ";
+            }
         }
-    }
-    q_select = q_select.substring(0, q_select.length - 1);
-    q_select += " FROM " + query_from();
-    if (query_where() !== "") {
-        q_select += "\n WHERE";
-        q_select += query_where();
-    }
-    if (query_groupby() !== "") { q_select += "\nGROUP BY " + query_groupby(); }
-    if (query_having() !== "") { q_select += "\nHAVING " + query_having(); }
-    if (query_orderby() !== "") { q_select += "\nORDER BY " + query_orderby(); }
-    var box = document.getElementById('box');
-    document.getElementById('filter').style.display = 'block';
-    var btitle = document.getElementById('boxtitle');
-    btitle.innerHTML = 'SELECT';//formtitle;
-    if (fadin) {
-        gradient("box", 0);
-        fadein("box");
+        q_select = q_select.substring(0, q_select.length - 2);
     } else {
-        box.style.display = 'block';
+        q_select += "* ";
     }
-    document.getElementById('textSqlquery').innerHTML = q_select;
-}
 
-function closebox()
-{
-    document.getElementById('box').style.display = 'none';
-    document.getElementById('filter').style.display = 'none';
+    q_select += "\nFROM " + query_from();
+
+    var q_where = query_where();
+    if (q_where !== "") {
+        q_select += "\nWHERE " + q_where;
+    }
+
+    var q_groupby = query_groupby();
+    if (q_groupby !== "") {
+        q_select += "\nGROUP BY " + q_groupby;
+    }
+
+    var q_having = query_having();
+    if (q_having !== "") {
+        q_select += "\nHAVING " + q_having;
+    }
+
+    var q_orderby = query_orderby();
+    if (q_orderby !== "") {
+        q_select += "\nORDER BY " + q_orderby;
+    }
+
+    /**
+     * @var button_options Object containing options
+     *                     for jQueryUI dialog buttons
+     */
+    var button_options = {};
+    button_options[PMA_messages.strClose] = function () {
+        $(this).dialog("close");
+    };
+    button_options[PMA_messages.strGo] = function () {
+        if (vqb_editor) {
+            var $elm = $ajaxDialog.find('textarea');
+            vqb_editor.save();
+            $elm.val(vqb_editor.getValue());
+        }
+        $('#vqb_form').submit();
+    };
+
+    var $ajaxDialog = $('#box').dialog({
+        width: 500,
+        buttons: button_options,
+        modal: true,
+        title: 'SELECT'
+    });
+    // Attach syntax highlighted editor to query dialog
+    /**
+     * @var $elm jQuery object containing the reference
+     *           to the query textarea.
+     */
+    var $elm = $ajaxDialog.find('textarea');
+    if (! vqb_editor) {
+        vqb_editor = PMA_getSQLEditor($elm);
+    }
+    if (vqb_editor) {
+        vqb_editor.setValue(q_select);
+        vqb_editor.focus();
+    } else {
+        $elm.val(q_select);
+        $elm.focus();
+    }
 }
 
 AJAX.registerTeardown('pmd/history.js', function () {
+    vqb_editor = null;
+    history_array = [];
+    select_field = [];
     $("#ok_edit_rename").unbind('click');
     $("#ok_edit_having").unbind('click');
     $("#ok_edit_Aggr").unbind('click');
@@ -809,4 +818,5 @@ AJAX.registerOnload('pmd/history.js', function () {
     $("#ok_edit_where").click(function() {
         edit('Where');
     });
+    $('#ab').accordion({collapsible : true, active : 'none'});
 });
\ No newline at end of file
diff --git a/js/pmd/init.js b/js/pmd/init.js
index 2719353716..871d49e915 100644
--- a/js/pmd/init.js
+++ b/js/pmd/init.js
@@ -13,6 +13,7 @@ AJAX.registerOnload('pmd/init.js', function () {
     $(".trigger").click(function () {
         $(".panel").toggle("fast");
         $(this).toggleClass("active");
+        $('#ab').accordion("refresh");
         return false;
     });
     var tables_data = $.parseJSON($("#script_tables").html());
diff --git a/js/pmd/move.js b/js/pmd/move.js
index 3dbef8d244..c6f3513e50 100644
--- a/js/pmd/move.js
+++ b/js/pmd/move.js
@@ -1797,7 +1797,7 @@ function add_object()
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(init, history_array.length);
     Close_option();
-    panel(0);
+    $('#ab').accordion("refresh");
 }
 
 AJAX.registerTeardown('pmd/move.js', function () {
diff --git a/templates/designer/query_details.phtml b/templates/designer/query_details.phtml
index b8315d91a2..ffae53a2b4 100755
--- a/templates/designer/query_details.phtml
+++ b/templates/designer/query_details.phtml
@@ -9,19 +9,11 @@
 <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">
+    <form method="post" action="db_qbe.php" id="vqb_form">
         <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 PMA_URL_getHiddenInputs($_GET['db']); ?>
-        </div>
-        <p></p>
+        <input type="hidden" name="submit_sql" value="true">
+        <?php echo PMA_URL_getHiddenInputs($_GET['db']); ?>
     </form>
 </div>
\ No newline at end of file
diff --git a/themes/pmahomme/css/pmd.css.php b/themes/pmahomme/css/pmd.css.php
index 749b4ce6c2..a3a69809c2 100644
--- a/themes/pmahomme/css/pmd.css.php
+++ b/themes/pmahomme/css/pmd.css.php
@@ -398,15 +398,11 @@ a.M_butt:hover {
     position: fixed;
     top: 60px;
     <?php echo $right; ?>: 0;
-    display: none;
-    background: #FFF;
-    border: 1px solid gray;
-    width: 350 px;
+    width: 350px;
     max-height: 500px;
-    overflow:scroll;
-    padding: 30px;
-    padding-<?php echo $left; ?>: 30px;
-    color: #FFF;
+    display: none;
+    overflow: auto;
+    padding-top: 34px;
     z-index: 102;
 }
 
@@ -438,58 +434,15 @@ a.active.trigger:hover {
     background: #fff696 url(<?php echo $minusImg; ?>) 85% 55% no-repeat;
 }
 
-h2.tiger {
-    background-repeat: repeat-x;
-    padding: 1px;
-    font-weight: bold;
-    padding: 50px 20px 50px;
-    margin: 0 0 5px 0;
-    width: 250px;
-    float: <?php echo $left; ?>;
-    color : #333;
-    text-align: center;
-}
-
-h2.tiger a {
-    background-image: url(<?php echo $headerImg; ?>);
-    text-align: center;
-    text-decoration: none;
-    color : #333;
-    display: block;
-}
-
-h2.tiger a:hover {
-    color: #000;
-    background-image: url(<?php echo $headerLinkedImg; ?>);
-}
-
-h2.active {
-    background-image: url(<?php echo $headerImg ?>);
-    background-repeat: repeat-x;
-    padding: 1px;
-    background-position: left bottom;
-}
-
-.toggle_container {
-    margin: 0 0 5px;
-    padding: 0;
-    border-top: 1px solid #d6d6d6;
-    background: #FFF;
-    overflow: hidden;
-    font-size: 1.2em;
-    clear: both;
-}
-
 .toggle_container .block {
     background-color: #DBE4E8;
-    padding: 40px 15px 40px 15px; /*--Padding of Container--*/
-    border:1px solid #999;
-    color: #000;
+    border-top: 1px solid #999;
 }
 
 .history_table {
     text-align: center;
     background-color: #9999CC;
+    cursor: pointer;
 }
 
 .history_table2 {
@@ -497,58 +450,16 @@ h2.active {
     background-color: #DBE4E8;
 }
 
-#filter {
-    display: none;
-    position: absolute;
-    top: 0%;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    background-color: #CCA;
-    z-index: 10;
-    opacity: .5;
-    filter: alpha(opacity=50);
+#ab {
+    min-width: 300px;
+}
+
+#ab .ui-accordion-content {
+    padding: 0;
 }
 
 #box {
     display: none;
-    position: absolute;
-    top: 20%;
-    <?php echo $left; ?>: 30%;
-    width: 500px;
-    height: 220px;
-    padding: 48px;
-    margin: 0;
-    border: 1px solid #000;
-    background-color: #fff;
-    z-index: 101;
-    overflow: visible;
-}
-
-#boxtitle {
-    position: absolute;
-    float: center;
-    top: 0;
-    <?php echo $left; ?>: 0;
-    width: 593px;
-    height: 20px;
-    padding: 0;
-    padding-top: 4px;
-    margin: 0;
-    border-bottom: 4px solid #3CF;
-    background-color: #D0DCE0;
-    color: black;
-    font-weight: bold;
-    padding-<?php echo $left; ?>: 2px;
-    text-align: <?php echo $left; ?>;
-}
-
-#tblfooter {
-    background-color: #D3DCE3;
-    float: <?php echo $right; ?>;
-    padding-top: 10px;
-    color: black;
-    font-weight: normal;
 }
 
 #foreignkeychk {