diff --git a/rhodecode/templates/index_base.html b/rhodecode/templates/index_base.html
--- a/rhodecode/templates/index_base.html
+++ b/rhodecode/templates/index_base.html
@@ -1,54 +1,60 @@
-<%page args="parent" /> 
+<%page args="parent" />
     <div class="box">
         <!-- box / title -->
         <div class="title">
             <h5>
-            <input class="top-right-rounded-corner top-left-rounded-corner bottom-left-rounded-corner bottom-right-rounded-corner" id="q_filter" size="15" type="text" name="filter" value="${_('quick filter...')}"/>
-            ${parent.breadcrumbs()} <span id="repo_count"></span> ${_('repositories')} 
+            <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" value="${_('quick filter...')}"/> ${parent.breadcrumbs()} <span id="repo_count">0</span> ${_('repositories')}
             </h5>
             %if c.rhodecode_user.username != 'default':
                 %if h.HasPermissionAny('hg.admin','hg.create.repository')():
                 <ul class="links">
                   <li>
-                    <span>${h.link_to(_('ADD NEW REPOSITORY'),h.url('admin_settings_create_repository'))}</span>
-                  </li>          
-                </ul>           
+                    <span>${h.link_to(_('ADD REPOSITORY'),h.url('admin_settings_create_repository'))}</span>
+                  </li>
+                </ul>
                 %endif
             %endif
         </div>
         <!-- end box / title -->
         <div class="table">
            % if c.groups:
-            <table>
-                <thead>
+            <div id='groups_list_wrap' class="yui-skin-sam">
+              <table id="groups_list">
+                  <thead>
+                      <tr>
+                          <th class="left"><a href="#">${_('Group name')}</a></th>
+                          <th class="left"><a href="#">${_('Description')}</a></th>
+                          ##<th class="left"><a href="#">${_('Number of repositories')}</a></th>
+                      </tr>
+                  </thead>
+
+                  ## REPO GROUPS
+                  % for gr in c.groups:
                     <tr>
-                        <th class="left"><a href="#">${_('Group name')}</a></th>
-                        <th class="left"><a href="#">${_('Description')}</a></th>
-                        ##<th class="left"><a href="#">${_('Number of repositories')}</a></th>
+                        <td>
+                            <div style="white-space: nowrap">
+                            <img class="icon" alt="${_('Repositories group')}" src="${h.url('/images/icons/database_link.png')}"/>
+                            ${h.link_to(gr.name,url('repos_group_home',group_name=gr.group_name))}
+                            </div>
+                        </td>
+                        <td>${gr.group_description}</td>
+                        ## this is commented out since for multi nested repos can be HEAVY!
+                        ## in number of executed queries during traversing uncomment at will
+                        ##<td><b>${gr.repositories_recursive_count}</b></td>
                     </tr>
-                </thead>
-                
-                ## REPO GROUPS
-                
-                % for gr in c.groups:
-                  <tr>
-                      <td>
-                          <div style="white-space: nowrap">
-                          <img class="icon" alt="${_('Repositories group')}" src="${h.url('/images/icons/database_link.png')}"/>
-                          ${h.link_to(gr.name,url('repos_group_home',group_name=gr.group_name))}
-                          </div>
-                      </td>
-                      <td>${gr.group_description}</td>
-                      ##<td><b>${gr.repositories.count()}</b></td>
-                  </tr>
-                % endfor
-                
-            </table>
+                  % endfor
+
+              </table>
+            </div>
             <div style="height: 20px"></div>
             % endif
             <div id="welcome" style="display:none;text-align:center">
                 <h1><a href="${h.url('home')}">${c.rhodecode_name} ${c.rhodecode_version}</a></h1>
             </div>
+            <div id='repos_list_wrap' class="yui-skin-sam">
+            <%cnt=0%>
+            <%namespace name="dt" file="/_data_table/_dt_elements.html"/>
+
             <table id="repos_list">
             <thead>
                 <tr>
@@ -63,87 +69,37 @@
                 </tr>
             </thead>
             <tbody>
-            %for cnt,repo in enumerate(c.repos_list):
+            %for cnt,repo in enumerate(c.repos_list,1):
                 <tr class="parity${cnt%2}">
+                    ##QUICK MENU
                     <td class="quick_repo_menu">
-                    <ul class="menu_items hidden">
-                      <li>
-                         <a title="${_('Summary')}" href="${h.url('summary_home',repo_name=repo['name'])}">
-                         <span class="icon">
-                             <img src="${h.url('/images/icons/clipboard_16.png')}" alt="${_('Summary')}" />
-                         </span>
-                         <span>${_('Summary')}</span>                 
-                         </a>             
-                      </li>
-                      <li>
-                         <a title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=repo['name'])}">
-                         <span class="icon">
-                             <img src="${h.url('/images/icons/time.png')}" alt="${_('Changelog')}" />
-                         </span>
-                         <span>${_('Changelog')}</span>                 
-                         </a>             
-                      </li>
-                      <li>
-                         <a title="${_('Files')}" href="${h.url('files_home',repo_name=repo['name'])}">
-                         <span class="icon">
-                             <img src="${h.url('/images/icons/file.png')}" alt="${_('Files')}" />
-                         </span>
-                         <span>${_('Files')}</span>                 
-                         </a>             
-                      </li>                                    
-                    </ul>
+                      ${dt.quick_menu(repo['name'])}
                     </td>
-                    <td>
-                    ## TYPE OF REPO
-                    <div style="white-space: nowrap">
-                     %if repo['dbrepo']['repo_type'] =='hg':
-                       <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/>
-                     %elif repo['dbrepo']['repo_type'] =='git':
-                       <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/>
-                     %endif 
-                    
-                     ##PRIVATE/PUBLIC
-                     %if repo['dbrepo']['private']:
-                        <img class="icon" title="${_('private repository')}" alt="${_('private repository')}" src="${h.url('/images/icons/lock.png')}"/>
-                     %else:
-                        <img class="icon" title="${_('public repository')}" alt="${_('public repository')}" src="${h.url('/images/icons/lock_open.png')}"/>
-                     %endif
-                    
-                    ##NAME   
-                    ${h.link_to(repo['name'],
-                        h.url('summary_home',repo_name=repo['name']),class_="repo_name")}
-                    %if repo['dbrepo_fork']:
-                        <a href="${h.url('summary_home',repo_name=repo['dbrepo_fork']['repo_name'])}">
-                        <img class="icon" alt="${_('fork')}"
-                        title="${_('Fork of')} ${repo['dbrepo_fork']['repo_name']}" 
-                        src="${h.url('/images/icons/arrow_divide.png')}"/></a>
-                    %endif
-                    </div>
+                    ##REPO NAME AND ICONS
+                    <td class="reponame">
+                      ${dt.repo_name(repo['name'],repo['dbrepo']['repo_type'],repo['dbrepo']['private'],repo['dbrepo_fork'].get('repo_name'))}
                     </td>
                     ##DESCRIPTION
                     <td><span class="tooltip" title="${h.tooltip(repo['description'])}">
                        ${h.truncate(repo['description'],60)}</span>
                     </td>
-                    ##LAST CHANGE
-                    <td>
-                      <span class="tooltip" title="${repo['last_change']}">
-                      ${h.age(repo['last_change'])}</span>
-                    </td>
+                    ##LAST CHANGE DATE
                     <td>
-                        %if repo['rev']>=0:
-                        <a title="${h.tooltip('%s\n%s' % (repo['author'],repo['last_msg']))}" class="tooltip" href="${h.url('changeset_home',repo_name=repo['name'],revision=repo['tip'])}">${'r%s:%s' % (repo['rev'],h.short_id(repo['tip']))}</a>
-                        %else:
-                            ${_('No changesets yet')}
-                        %endif    
+                      <span class="tooltip" title="${repo['last_change']}">${h.age(repo['last_change'])}</span>
                     </td>
+                    ##LAST REVISION
+                    <td>
+                        ${dt.revision(repo['name'],repo['rev'],repo['tip'],repo['author'],repo['last_msg'])}
+                    </td>
+                    ##
                     <td title="${repo['contact']}">${h.person(repo['contact'])}</td>
                     <td>
                       %if c.rhodecode_user.username != 'default':
                         <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>
                       %else:
                         <a title="${_('Subscribe to %s rss feed')%repo['name']}" class="rss_icon"  href="${h.url('rss_feed_home',repo_name=repo['name'])}"></a>
-                      %endif:                       
-                    </td>        
+                      %endif:
+                    </td>
                     <td>
                       %if c.rhodecode_user.username != 'default':
                         <a title="${_('Subscribe to %s atom feed')%repo['name']}"  class="atom_icon" href="${h.url('atom_feed_home',repo_name=repo['name'],api_key=c.rhodecode_user.api_key)}"></a>
@@ -156,71 +112,86 @@
             </tbody>
             </table>
             </div>
+        </div>
     </div>
-    
-    
-    <script type="text/javascript">
-     var D = YAHOO.util.Dom;
-     var E = YAHOO.util.Event;
-     var S = YAHOO.util.Selector;
-     
-     var q_filter = D.get('q_filter');
-     var F = YAHOO.namespace('q_filter'); 
-     
-     E.on(q_filter,'click',function(){
-        q_filter.value = '';
-     });
+    <script>
+      YUD.get('repo_count').innerHTML = ${cnt};
+      var func = function(node){
+          return node.parentNode.parentNode.parentNode.parentNode;
+      }
+
+
+      // groups table sorting
+      var myColumnDefs = [
+          {key:"name",label:"${_('Group Name')}",sortable:true,
+              sortOptions: { sortFunction: groupNameSort }},
+          {key:"desc",label:"${_('Description')}",sortable:true},
+      ];
+
+      var myDataSource = new YAHOO.util.DataSource(YUD.get("groups_list"));
+
+      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
+      myDataSource.responseSchema = {
+          fields: [
+              {key:"name"},
+              {key:"desc"},
+          ]
+      };
+
+      var myDataTable = new YAHOO.widget.DataTable("groups_list_wrap", myColumnDefs, myDataSource,
+              {
+               sortedBy:{key:"name",dir:"asc"},
+               MSG_SORTASC:"${_('Click to sort ascending')}",
+               MSG_SORTDESC:"${_('Click to sort descending')}"
+              }
+      );
 
-     F.filterTimeout = null;
-     
-     function set_count(count){
-    
-    	 if(count == 0){
-    		 YUD.setStyle('repos_list','display','none');
-    		 YUD.setStyle('welcome','display','');
-    	 }
-    	 else{
-    		 YUD.setStyle('repos_list','display','');
-    		 YUD.setStyle('welcome','display','none');
-    	 }
-    	 YUD.get('repo_count').innerHTML = count;
-    	 
-     }
-     
-     
-     //set initial count for repos
-     var nodes = S.query('div.table tr td div a.repo_name');
-     
-     set_count(nodes.length)
-     F.updateFilter  = function() { 
-        // Reset timeout 
-        F.filterTimeout = null;
-        
-        var obsolete = [];
-        nodes = S.query('div.table tr td div a.repo_name');
-        var req = q_filter.value.toLowerCase();
-        for (n in nodes){
-            D.setStyle(nodes[n].parentNode.parentNode.parentNode,'display','')
-        }
-        if (req){
-            for (n in nodes){
-                if (nodes[n].innerHTML.toLowerCase().indexOf(req) == -1) {
-                    obsolete.push(nodes[n]); 
-                }
-            }
-            if(obsolete){
-                for (n in obsolete){
-                    D.setStyle(obsolete[n].parentNode.parentNode.parentNode,'display','none');
-                }
-            }
-        }
-        // set new count into dashboard
-        set_count(nodes.length - obsolete.length)
-     }
-     
-     E.on(q_filter,'keyup',function(e){
-         clearTimeout(F.filterTimeout); 
-         F.filterTimeout = setTimeout(F.updateFilter,600); 
-     });
-     
+      // main table sorting
+      var myColumnDefs = [
+          {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"},
+          {key:"name",label:"${_('Name')}",sortable:true,
+              sortOptions: { sortFunction: nameSort }},
+          {key:"desc",label:"${_('Description')}",sortable:true},
+          {key:"last_change",label:"${_('Last Change')}",sortable:true,
+              sortOptions: { sortFunction: ageSort }},
+          {key:"tip",label:"${_('Tip')}",sortable:true,
+        	  sortOptions: { sortFunction: revisionSort }},
+          {key:"owner",label:"${_('Owner')}",sortable:true},
+          {key:"rss",label:"",sortable:false},
+          {key:"atom",label:"",sortable:false},
+      ];
+
+      var myDataSource = new YAHOO.util.DataSource(YUD.get("repos_list"));
+
+      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
+
+      myDataSource.responseSchema = {
+          fields: [
+              {key:"menu"},
+              {key:"name"},
+              {key:"desc"},
+              {key:"last_change"},
+              {key:"tip"},
+              {key:"owner"},
+              {key:"rss"},
+              {key:"atom"},
+          ]
+      };
+
+      var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,
+              {
+               sortedBy:{key:"name",dir:"asc"},
+               MSG_SORTASC:"${_('Click to sort ascending')}",
+               MSG_SORTDESC:"${_('Click to sort descending')}",
+               MSG_EMPTY:"${_('No records found.')}",
+               MSG_ERROR:"${_('Data error.')}",
+               MSG_LOADING:"${_('Loading...')}",
+              }
+      );
+      myDataTable.subscribe('postRenderEvent',function(oArgs) {
+          tooltip_activate();
+          quick_repo_menu();
+          q_filter('q_filter',YUQ('div.table tr td a.repo_name'),func);
+      });
+
     </script>