diff --git a/schema.sql b/schema.sql
index 93936a8..995119e 100644
--- a/schema.sql
+++ b/schema.sql
@@ -50,6 +50,7 @@ CREATE TABLE man (
 
 
 CREATE INDEX ON man USING hash (hash);
+CREATE INDEX ON man (name);
 
 
 INSERT INTO systems (id, name, release, short, relorder) VALUES
diff --git a/www/index.pl b/www/index.pl
index 6ba499f..d3b6e03 100755
--- a/www/index.pl
+++ b/www/index.pl
@@ -21,7 +21,7 @@ TUWF::set(
   logfile => $ENV{TUWF_LOG},
   db_login => [undef, undef, undef],
   debug => 1,
-  xml_pretty => 2,
+  xml_pretty => 0,
   # Cache the system information
   pre_request_handler => sub {
     my $self = shift;
@@ -56,7 +56,7 @@ sub home {
   p style => 'float: none';
    # Relevant query: SELECT count(distinct hash), count(distinct name), count(*), count(distinct package) FROM man;
    # It's far too slow to run that on every pageview. :-(
-   lit 'Indexing <b>483,771</b> versions of <b>119,397</b> manual pages found in <b>1,574,505</b> files of <b>169,949</b> packages.';
+   lit 'Indexing <b>485,506</b> versions of <b>119,406</b> manual pages found in <b>1,578,498</b> files of <b>170,215</b> packages.';
    br;
    txt 'At this point only Arch Linux and Ubuntu have been indexed. More systems and repositories will be added later on.';
   end;
@@ -71,11 +71,11 @@ sub home {
      li;
       a href => "/browse/$sys->[0]{short}" if @$sys == 1;
        span style => "background-image: url('images/$img.png')", '';
-       txt $sys->[0]{name};
+       b $sys->[0]{name};
        if(@$sys > 1) {
-         for(@$sys) {
-           a href => "/browse/$_->{short}", $_->{release};
-         }
+         my $i = 0;
+         a href => "/browse/$_->{short}", ++$i > 3 ? (class => "old") : (), $_->{release} for(reverse @$sys);
+         a href => "#", 'more...' if $i > 3;
        }
       end 'a' if @$sys == 1;
      end;
@@ -83,7 +83,7 @@ sub home {
   end;
 
   h2 'Other sites';
-  ul;
+  ul id => 'external';
    li; a href => 'http://man.cx/', 'Man.cx'; end;
    li; a href => 'http://man.he.net/', 'Man.he.net'; end;
    li; a href => 'http://linux.die.net/man/', 'Die.net'; end;
@@ -261,7 +261,10 @@ sub manselect {
      dd;
       for my $pkg (sort { $pkgs{$a}[0]{package} cmp $pkgs{$b}[0]{package} || $pkgs{$b}[0]{released} cmp $pkgs{$a}[0]{released} } keys %pkgs) {
         dl;
-         dt $pkg;
+         dt;
+          txt $pkgs{$pkg}[0]{package};
+          i $pkgs{$pkg}[0]{version};
+         end;
          dd;
           for my $man (sort { $a->{section} cmp $b->{section} || ($a->{locale}||'') cmp ($b->{locale}||'') } @{$pkgs{$pkg}}) {
             my $t = $man->{locale} ? "$man->{section}.$man->{locale}" : $man->{section};
@@ -391,9 +394,15 @@ sub man {
 
   h1 $man->{name};
   p;
-   a href => "/$man->{name}/".substr($hash, 0, 8), 'permalink';
+   a href => "/$man->{name}/".substr($man->{hash}, 0, 8), 'permalink';
    txt ' - ';
-   a href => "/$man->{name}/".substr($hash, 0, 8).'/src', 'source';
+   a href => "/$man->{name}/".substr($man->{hash}, 0, 8).'/src', 'source';
+  end;
+
+  div id => 'contents';
+   my $c = $self->dbManContent($man->{hash});
+   ($c = GrottyParser::html(manfmt $c)) =~ s/[\t\s\r\n]+$//; # TODO: <- Do this in GrottyParser
+   pre; lit $c; end;
   end;
 
   div id => 'locations';
@@ -406,8 +415,13 @@ sub man {
      td 'Name';
      td 'Filename';
     end; end;
-    my $l = $self->dbManInfo(hash => $man->{hash});
-    for(@$l) {
+    my @l = sort {
+         $self->{sysbyid}{$a->{system}}{name}     cmp $self->{sysbyid}{$b->{system}}{name}
+      || $self->{sysbyid}{$b->{system}}{relorder} <=> $self->{sysbyid}{$a->{system}}{relorder}
+      || $b->{released} cmp $a->{released}
+      || $a->{filename} cmp $b->{filename}
+    } @{$self->dbManInfo(hash => $man->{hash})};
+    for(@l) {
       Tr;
        td $self->{sysbyid}{$_->{system}}{full};
        td "$_->{category}/$_->{package}";
@@ -423,11 +437,6 @@ sub man {
    end;
   end;
 
-  div id => 'contents';
-   h2 'Contents';
-   my $c = $self->dbManContent($man->{hash});
-   pre; lit GrottyParser::html(manfmt $c); end;
-  end;
   $self->htmlFooter;
 }
 
@@ -472,17 +481,21 @@ sub htmlHeader {
       input type => 'submit', value => 'Search';
      end;
     end;
+
+    div id => 'body';
 }
 
 
 sub htmlFooter {
   my $self = shift;
 
+     br style => 'clear: both';
+    end;
     div id => 'footer';
      lit 'All manual pages are copyrighted by their respective authors.
-       | <a href="/info/about">About manned.org</a> | <a href="mailto:contact@manned.org">Contact</a>.';
+       | <a href="/info/about">About manned.org</a> | <a href="mailto:contact@manned.org">Contact</a>';
     end;
-   end 'body';
+   end;
   end 'html';
 
   # write the SQL queries as a HTML comment when debugging is enabled
diff --git a/www/man.css b/www/man.css
index bd2c4ff..f48ef8f 100644
--- a/www/man.css
+++ b/www/man.css
@@ -1,46 +1,75 @@
-* { margin: 0; padding: 0; font-family: Trebuchet MS, sans-serif; }
+/* TODO:
+ * - The linear-gradient() functions are fairly new - perhaps want to provide background images for those.
+ * - column-width is better done in Perl? (More like a column-count, then)
+ */
+
+* { margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; }
 html { background: #333; padding: 0 10px; }
-body { margin: 20px auto; max-width: 1250px; background: #fff; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
-	-webkit-box-shadow: 0 10px 10px #def; }
+body { margin: 10px auto 50px auto; max-width: 1250px; border-collapse: separate; padding-bottom: 10px;
+  -webkit-border-radius: 10px; -moz-border-radius: 10px;
+  -webkit-box-shadow: 0 10px 10px #def; -moz-box-shadow: 0 10px 10px #def; box-shadow: 0 10px 10px #def; }
 h1 { font-size: 24px; font-weight: normal; color: #abc; }
 h1 + p { float: right; }
 h2 { font-size: 21px; margin-top: 40px; color: #468; font-weight: normal; clear: left }
 h2 + i { font-size: 12px; }
-dd { margin-left: 20px; }
-a { color: #048; font-family: Verdana; font-weight: normal; text-decoration: underline; padding: 3px 5px;
-	-webkit-border-radius: 4px; -moz-border-radius: 4px; }
+dd { margin-left: 15px; }
+a { color: #048; font-family: "Verdana"; font-weight: normal; text-decoration: underline; padding: 3px 5px;
+  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 a:hover { text-decoration: none; background: #cde; }
 table { background: #eee; border: 5px solid #f8f8f8; margin: 10px 0; }
 td { padding: 1px 5px; font-size: 12px; }
 
-#header { padding: 4px 20px; background: -webkit-linear-gradient(#40556a, #b0c5da); margin: -10px -10px 20px -10px; -webkit-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0;
-	border-bottom: 1px solid #888; font: 24px Arial; }
+#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial";
+  -webkit-border-radius: 8px 8px 0 0; -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
+  background: -webkit-linear-gradient(#40556a, #b0c5da);
+  background: -moz-linear-gradient(#40556a, #b0c5da);
+  background: -ms-linear-gradient(#40556a, #b0c5da);
+  background: -o-linear-gradient(#40556a, #b0c5da);
+  background: linear-gradient(#40556a, #b0c5da); }
 #header a { color: #f8f8f8; text-decoration: none; font-weight: bold; }
 #header a:hover { background: none; }
 #header form { float: right; }
-#header input { -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; }
+#header input { -webkit-box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; -moz-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; }
 #header input[type=text] { width: 260px; padding: 2px; border: 1px solid #444; border-radius: 12px 0 0 12px;
-	background: -webkit-gradient(linear, left top, left bottom, from(#89a), to(white), color-stop(.9, #cde)); padding-left: 15px; }
+  background: -webkit-gradient(linear, left top, left bottom, from(#89a), to(white), color-stop(.9, #cde)); padding-left: 15px; }
 #header input[type=text]:hover, #header input[type=text]:focus { background: -webkit-linear-gradient(#abc, #f0f8ff); outline: none; }
 #header input[type=submit] { padding: 2px 8px; border: 1px solid #444; border-radius: 0 12px 12px 0;  color: #EEE; padding-right: 12px;
-	margin-left: -5px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#556), to(#223)); }
+  margin-left: -5px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, from(#556), to(#223)); }
 
-#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; width: 250px; margin-bottom: 10px; }
+#body { padding: 10px 10px 20px 10px; background: #fff }
+
+#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px;
+  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
 #nav > dt { font-weight: bold; }
 #nav a { font-size: 13px; }
-#nav b { font-family: Verdana; font-size: 13px; background: #cde; padding: 3px 5px;
-	-webkit-border-radius: 4px; -moz-border-radius: 4px; }
+#nav i { font-style: normal; font-size: 12px; padding-left: 7px; color: #aaa }
+#nav b { font-family: "Verdana"; font-size: 13px; background: #cde; padding: 3px 5px;
+  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
 
-#systems li { display: block; float: left; font-size: 24px; width: 360px; margin: 20px;  }
-#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px; background-size: contain; background-repeat: no-repeat; }
+#systems li { display: block; float: left; width: 360px; margin: 20px;  }
+#systems span { display: block; float: left; width: 50px; height: 50px; margin: 5px; background-repeat: no-repeat; }
+#systems b { font-size: 24px; display: block; }
+#systems .old { display: none; }
 
+#external { list-style-type: none }
+
+#packages { margin: 20px 0; -webkit-column-width: 500px; -moz-column-width: 500px; column-width: 500px }
 #packages li { display: block; }
 #packages i { color: #ccc; font-size: 13px; }
 
-#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; background: -webkit-linear-gradient(#b0c5da, #40556a); margin: 10px -10px -20px -10px; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px;
-	border-top: 1px solid #888; }
+#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0;
+  border-top: 1px solid #888; font-size: 13px;
+  -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
+  background: -webkit-linear-gradient(#b0c5da, #40556a);
+  background: -moz-linear-gradient(#b0c5da, #40556a);
+  background: -ms-linear-gradient(#b0c5da, #40556a);
+  background: -o-linear-gradient(#b0c5da, #40556a);
+  background: linear-gradient(#b0c5da, #40556a); }
+#footer a { font-size: 13px; padding: 0; color: #f8f8f8; }
+#footer a:hover { background: none; }
 
-pre, pre * { font-family: Lucida Console, Monospace; }
+pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px }
 pre b { color: #369; font-weight: normal; }
 pre a { padding: 0; font-weight: normal; }
 pre a:hover { background: none; text-decoration: underline; color: #48B;}
+