diff --git a/data/close.png b/data/close.png
new file mode 100644
index 00000000..ba38c3b3
Binary files /dev/null and b/data/close.png differ
diff --git a/data/speeddial-head.html b/data/speeddial-head.html
index 556221eb..58cea24a 100644
--- a/data/speeddial-head.html
+++ b/data/speeddial-head.html
@@ -4,166 +4,81 @@
  This file is licensed under the terms of the expat license, see the file EXPAT.
 -->
 
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>{title}</title>
     <style>
-    html, body, #content {
-        margin: 0px;
-        padding: 0px
+    * {
+        margin: 0;
+        padding: 0;
+        cursor: default;
+        font-size: 13px;
+        color: #4d4d4d;
     }
 
-    body {
-        text-align: center;
-        background-color: #fefefe;
+    html, body {
         font-family: sans-serif;
-    }
-
-    #wrap {
-        width: 660px;
-        height: 500px;
-        margin: 0px auto;
-        text-align: center;
+        width: 100%;
+        height: 100%;
+        outline: 0;
     }
 
     #content {
-        margin-top: 40px;
+        width: 100%;
+        height: 95%;
+        margin: 0 auto;
+        padding: 0;
     }
 
     div.shortcut {
+        width: 25%;
+        height: 33%;
         float: left;
-        border: 1px solid #ccc;
-        position: relative;
-        margin: 20px 20px 0px 0px;
-        background-color: #fff;
-        -webkit-border-radius: 10px;
     }
 
-    div.right {
-        margin-right: 0px;
-        margin-left: 0px;
+    div.shortcut .preview {
+        width: 70%;
+        height: 60%;
+        margin: 20% auto;
+        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 2px #fff inset;
+        box-shadow: 0 1px 6px rgba(0,0,0,.25), 0 0 2px #fff inset;
+        background-image: -webkit-gradient(
+            linear, center top, center bottom,
+            from(#f6f6f6), to(#e3e3e3));
+        border: 1px solid #bebebe;
+        border-bottom-color: #a0a0a0;
     }
 
-    div.top {
-        margin-top: 0px;
-    }
-
-    h1 {
-        font-size: 50px;
-        font-weight: bold;
-        margin: 0px;
-        padding: 10px 0px 0px 0px;
+    div.shortcut .preview.new .add {
         display: block;
-    }
-
-    h4 {
-        font-size: 11px;
-        font-weight: bold
-        margin: 10px 0px 0px 0px;
-        padding: 10px 5px 0px;
-        display: block;
-    }
-
-    h4 span:before {
-        content: "{click_to_add}";
-        font-size: 11px;
-    }
-
-    h4 span {
-        font-size: 11px;
-    }
-
-    div.shortcut a {
-        border: 1px solid #ccc;
-        display: block;
-        margin: 15px auto 0px;
-        background-color: #fafafa;
-        color: #aaa;
-        text-decoration: none;
-    }
-
-    div.shortcut a img {
-        width: 100%;
         height: 100%;
+        width: 50%;
+        margin: 0 auto;
+        cursor: pointer;
     }
 
-    div.shortcut a:hover {
-        border: 1px solid #999;
-    }
-
-    div.shortcut p {
-        font-size: 12px;
-        margin: 0px;
-        padding: 5px 0px 0px;
-        color: #222;
+    .title {
+        text-align: center;
+        margin-top: -12%;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-    }
-
-    div.clear {
-        clear: both;
-    }
-
-    div.activated {
-        background-color: #f5f5f5;
+        cursor: text;
     }
 
     .cross {
-        height: 16px;
-        width: 16px;
-        margin-bottom: -17px;
-        margin-top: 2px;
-        background: url(stock://1/gtk-close) 98% 70% no-repeat;
-        cursor: pointer;
-        z-index: -4;
-        opacity: 0.6;
-    }
-
-    .cross:hover {
-        opacity: 1;
-    }
-
-    .activated p {
-        cursor: text;
-        background: url(stock://1/gtk-edit) 98% 70% no-repeat;
-        opacity: 0.6;
-        color: rgba(0,0,0,1);
-    }
-
-    .activated p:hover {
-        opacity: 1;
-        color: rgba(0,0,0,0.5);
-    }
-
-    div.config {
-        position: absolute;
-        top: 0px;
-        padding: 12px;
-        text-align: left;
-    }
-
-    div.config span {
-        color: #ccc;
-        margin-right: 10px;
-        margin-right: 10px;
-    }
-
-    div.config span.config_option:hover {
-        color: #999;
+        display: block;
+        width: 27px;
+        height: 27px;
+        top: -14px;
+        left: -14px;
+        background: url(res://close.png);
+        position: relative;
         cursor: pointer;
     }
 
-    div.config span.config_label {
-        color: #ccc;
-        cursor: default;
-        margin-right: 0px;
-    }
-
-    div.config span.config_option {
-        margin-left: 0px;
-        margin-right: 0px;
+    .box.added {
+        display:none;
     }
 
     div.osd {
@@ -187,7 +102,7 @@
 
     var getAction = function (id)
     {
-        var host = document.getElementById(id).childNodes[3].host;
+        var host = document.getElementById(id).childNodes[0].childNodes[0].host;
         if (host)
             return true;
 
@@ -205,7 +120,7 @@
 
     var renameShortcut = function (id)
     {
-        var old_name = document.getElementById(id).childNodes[5].textContent;
+        var old_name = document.getElementById(id).childNodes[1].textContent;
 
         var name = prompt ("{enter_shortcut_name}", old_name);
         if (!name) return;
@@ -221,44 +136,6 @@
         console.log ("speed_dial-save-delete " + id);
     }
 
-    var setSize = function ()
-    {
-
-        var size = prompt ("{enter_dial_size}", columns + 'x' + rows);
-
-        if (!size) return;
-
-        var pos = size.indexOf('x');
-
-        if (pos <= 0)
-        {
-            alert ("{invalid_dial_size}");
-            return;
-        }
-
-        var cols = size.substr(0, pos);
-        rows = size.substr(pos+1);
-
-        if (isNaN (cols) || isNaN (rows) || cols == 0 || rows == 0)
-        {
-            alert ("{invalid_dial_size}");
-            return;
-        }
-
-        if (size.indexOf('.') >= 0)
-        {
-            alert ("{invalid_dial_size}");
-            return;
-        }
-
-        console.log ("speed_dial-save-size " + cols  + " " + rows);
-    }
-
-    var setThumbSize = function (size)
-    {
-        console.log ("speed_dial-save-thumbsize " + size);
-    }
-
     var key_id = 's';
     var key_timeout;
 
@@ -277,11 +154,11 @@
             if (key_id.substr(1) > 9)
             {
                 if (getAction (key_id))
-                    document.location = div.childNodes[3].href;
+                    document.location = div.childNodes[0].childNodes[0].href;
                 key_id = 's';
             }
             else
-                key_timeout = setTimeout ('if (getAction (key_id)) document.location = document.getElementById(key_id).childNodes[3].href; key_id = \'s\'', 1000);
+                key_timeout = setTimeout ('if (getAction (key_id)) document.location = document.getElementById(key_id).childNodes[0].childNodes[0].href; key_id = \'s\'', 1000);
         }
         else
             key_id = 's';
@@ -298,12 +175,4 @@
     <div class="osd" >
         <span id="dialing"></span>
     </div>
-    <div class="config">
-        <span onclick="javascript:setSize()" class="config_option">{set_dial_size}</span>
-        <span class="config_label">{set_thumb_size}</span>
-        <span onclick="javascript:setThumbSize(80)" class="config_option">{set_thumb_small}</span>
-        <span onclick="javascript:setThumbSize(160)" class="config_option">{set_thumb_normal}</span>
-        <span onclick="javascript:setThumbSize(240)" class="config_option">{set_thumb_big}</span>
-    </div>
-    <div id="wrap">
-        <div id="content">
+    <div id="content">
diff --git a/midori/midori-view.c b/midori/midori-view.c
index f69cbb61..66db05eb 100644
--- a/midori/midori-view.c
+++ b/midori/midori-view.c
@@ -3674,11 +3674,11 @@ prepare_speed_dial_html (MidoriView* view)
     GKeyFile* key_file;
     GString* markup = NULL;
     guint rows, cols, slot = 1;
-    gchar* thumb_size_type;
+    guint slot_count = 1, i, grid_index = 3, slot_size;
     gchar* speed_dial_head;
     gchar* file_path;
     gchar* file_name;
-    guint thumb_size = 160;
+    gchar** groups;
 
     g_object_get (browser, "speed-dial", &key_file, NULL);
     if (!key_file)
@@ -3700,10 +3700,7 @@ prepare_speed_dial_html (MidoriView* view)
             "{set_dial_size}", _("Set number of columns and rows"),
             "{enter_dial_size}", _("Enter number of columns and rows:"),
             "{invalid_dial_size}", _("Invalid input for the size of the speed dial"),
-            "{set_thumb_size}", _("Thumb size:"),
-            "{set_thumb_small}", _("Small"),
-            "{set_thumb_normal}", _("Medium"),
-            "{set_thumb_big}", _("Big"),  NULL);
+            NULL);
 
         markup = g_string_new (header);
 
@@ -3719,59 +3716,31 @@ prepare_speed_dial_html (MidoriView* view)
 
     rows = g_key_file_get_integer (key_file, "settings", "rows", NULL);
     cols = g_key_file_get_integer (key_file, "settings", "columns", NULL);
-    thumb_size_type = g_key_file_get_string (key_file, "settings", "size", NULL);
-    if (thumb_size_type == NULL)
-        thumb_size_type = g_strdup ("MEDIUM");
 
-    if (g_str_equal (thumb_size_type, "SMALL"))
-        thumb_size = 80;
-    else if (g_str_equal (thumb_size_type, "MEDIUM"))
-        thumb_size = 160;
-    else if (g_str_equal (thumb_size_type, "BIG"))
-        thumb_size = 240;
-
-    g_free (thumb_size_type);
+    groups = g_key_file_get_groups (key_file, NULL);
+    for (i = 0; groups[i]; i++)
+    {
+        if (g_key_file_has_key (key_file, groups[i], "uri", NULL))
+	    slot_count++;
+    }
 
     g_string_append_printf (markup,
-        "<script>var columns = %d; var rows = %d;"
-        "setThumbSize(%d);</script>\n",
-        cols, rows, thumb_size);
+        "<script>var columns=%d; var rows=%d;</script>", cols, rows);
 
-    g_string_append_printf (markup,
-        "<style type=\"text/css\">"
-        "#content div.shortcut { width: %dpx; height: %dpx; }\n"
-        "#content div.shortcut a { width: %dpx; height: %dpx; }\n"
-        "#content div.shortcut .cross { margin-left: %dpx; }\n"
-        "#content div.shortcut h1 { font-size: %dpx; height: %dpx; }\n"
-        "#wrap { width: %dpx; }\n"
-        "#content h4 span:before { visibility: %s; }\n</style>",
-        thumb_size + 40, (int)((thumb_size / 1.5) + 43),
-        thumb_size, (int)(thumb_size / 1.5),
-        thumb_size + 20,
-        (int)((thumb_size / 4) + 10), (int)((thumb_size / 4) - 10),
-        cols * (thumb_size + 60),
-        thumb_size < 160 ? "hidden" : "visible");
+    /* try to guess the best X by X grid  size */
+    while ((grid_index * grid_index) < slot_count)
+        grid_index++;
 
-    g_string_append (markup,
-        "<noscript><style type=\"text/css\">"
-        "#content h4 span:before { visibility: hidden; }\n"
-        "div.config { visibility: hidden; }\n"
-        ".cross { visibility:hidden; }\n"
-        ".activated p { background-image: none; }</style></noscript>");
+   /* percent width size of one slot */
+   slot_size = (100 / grid_index);
+   g_string_append_printf (markup,
+        "<style> div.shortcut { height: %d%%; width: %d%%; }</style>\n",
+        slot_size + 1, slot_size - 4);
 
-    while (slot <= rows * cols)
+    while (slot <= slot_count)
     {
         gchar* dial_entry = g_strdup_printf ("Dial %d", slot);
         gchar* uri = g_key_file_get_string (key_file, dial_entry, "uri", NULL);
-        const gchar* position;
-        if (slot < cols)
-            position = " top";
-        else if (slot == cols)
-            position = " top right";
-        else if (slot > cols && slot % cols == 0)
-            position = " right";
-        else
-            position = "";
 
         if (uri && *uri && *uri != '#')
         {
@@ -3794,13 +3763,13 @@ prepare_speed_dial_html (MidoriView* view)
             g_free (thumb_file);
 
             g_string_append_printf (markup,
-                    "<div class=\"shortcut%s activated\" id=\"s%d\">\n"
-                    "<div onclick='javascript:clearShortcut(\"s%d\");' "
-                    "class='cross'></div>\n<a href=\"%s\">"
-                    "<img src=\"data:image/png;base64,%s\"></a>\n"
-                    "<p onclick='javascript:renameShortcut(\"s%d\");'>"
-                    "‪%s</p></div>\n",
-                    position, slot, slot, uri, encoded, slot, title);
+                "<div class=\"shortcut\" id=\"s%d\"><div class=\"preview\">"
+                "<a href=\"%s\"><img style=\"width: 100%%;\" "
+                "src=\"data:image/png;base64,%s\"></a><a class=\"cross\" "
+                "href=\"#\" onclick='javascript:clearShortcut(\"s%d\");' ></a>"
+                "</div><div class=\"title\" "
+                "onclick='javascript:renameShortcut(\"s%d\");'>%s</div></div>\n",
+                slot, uri, encoded, slot, slot, title);
 
             g_free (title);
             g_free (encoded);
@@ -3808,12 +3777,11 @@ prepare_speed_dial_html (MidoriView* view)
         else
         {
             g_string_append_printf (markup,
-                    "<div class=\"shortcut%s\" id=\"s%d\">"
-                    "\n<a href=\"#\" onclick='javascript:return"
-                    " getAction(\"s%d\");'>"
-                    "<h1>%d</h1>\n<h4><span></span></h4>"
-                    "</a>\n<p></p></div>\n",
-                    position, slot, slot, slot);
+                "<div class=\"shortcut\" id=\"s%d\"><div class=\"preview new\">"
+                "<a class=\"add\" href=\"#\" onclick='javascript:return "
+                " getAction(\"s%d\");'></a></div>"
+                "<div class=\"title\">%s</div></div>\n",
+                slot, slot, _("Click to add a shortcut"));
         }
 
         slot++;
@@ -3821,7 +3789,7 @@ prepare_speed_dial_html (MidoriView* view)
         g_free (uri);
     }
     g_string_append_printf (markup,
-            "</div>\n</div>\n</body>\n</html>\n");
+            "</div>\n</body>\n</html>\n");
 
     return g_string_free (markup, FALSE);
 }
