diff --git a/doc-src/02-docstyle.css b/doc-src/02-docstyle.css
index dd61d2e82..b1a907277 100644
--- a/doc-src/02-docstyle.css
+++ b/doc-src/02-docstyle.css
@@ -2,7 +2,7 @@ body {
     -x-system-font:none;
     font-family: Helvetica,Arial,Tahoma,Verdana,Sans-Serif;
     color: #555555;
-    font-size: 1.1em;
+    font-size: 1.2em;
 }
 
 a {
@@ -15,7 +15,7 @@ a {
 }
 #hd h1 {
     letter-spacing: 3px;
-    font-size: 2.5em;
+    font-size: 2em;
     line-height: 100%;
     margin: 0.3em 0;
     font-weight: normal;
@@ -46,49 +46,6 @@ a {
         letter-spacing: 0.5px;
 }
 
-.pageindex {
-    font-size: 1.5em;
-}
-
-.pageindex ul {
-    list-style-image:none;
-    list-style-position:outside;
-    list-style-type:none;
-    margin: 0px;
-}
-
-.pageindex li { 
-    list-style-image:none;
-    list-style-position:outside;
-    list-style-type:none;
-    margin: 0; 
-}
-
-.pageindex li.active {
-    padding-left: 4px;
-    border-left: 5px solid #ff0000;
-}
-
-.pageindex li.inactive{
-    border-left: none;
-    margin-left: 9px;
-}
-
-.pageindex li li a {
-    display: block;
-    background-color: transparent;
-    margin: 0;
-    border-top: none;
-    border-bottom: none;
-}
-
-.pageindex ul ul {
-    margin-left: 20px;
-    padding: 0;
-    list-style-type: none;
-}
-
-
 .faq .question {
     font-size: 1.1em;
     font-weight: bold;
@@ -99,3 +56,22 @@ pre {
     background-color: #e0e0e0;
     margin: 10px;
 }
+
+ul {
+    margin-top: 0.1em;
+    margin-bottom: 0;
+    margin-left: 2em;
+}
+
+li a {
+    text-decoration: none;
+}
+
+#nav {
+    float: right;
+
+
+}
+
+
+
diff --git a/doc-src/_layout.html b/doc-src/_layout.html
index 2e706ecd0..11d456a0e 100644
--- a/doc-src/_layout.html
+++ b/doc-src/_layout.html
@@ -1,14 +1,26 @@
-<div class="yui-t2" id="doc3">
+<div id="doc3">
     <div style="" id="hd">
-        $!head!$
+
+        <div id="nav">
+        <!--(block pb)-->
+        <a href="@!urlTo(previous)!@">prev</a>
+        <!--(end)-->
+        <!--(block nb)-->
+        <a href="@!urlTo(next)!@">next</a>
+        <!--(end)-->
+
+        $!pb if previous else "prev"!$ |
+        <a href="@!urlTo('index.html')!@">index</a> |
+        $!nb if next else "next"!$
+        </div>
+
+        $!title!$
+        
     </div>
     <div id="bd">
         <div id="yui-main">
             <div style="" class="yui-b">$!body!$</div>
         </div>
-        <div style="" class="yui-b">
-            <div>@!sidebar!@</div>
-        </div>
     </div>
     <div style="" id="ft">
         <p>@!copyright!@</p>
diff --git a/doc-src/index.html b/doc-src/index.html
index 859ffad07..71e82087a 100644
--- a/doc-src/index.html
+++ b/doc-src/index.html
@@ -1,3 +1,23 @@
 
-@!index_contents!@
+
+* [Introduction](@!urlTo("intro.html")!@)
+* [mitmproxy](@!urlTo("mitmproxy.html")!@) - Console-based HTTP Swiss Army Knife.
+    * [Tutorial](@!urlTo("mitmproxy/tutorial.html")!@)
+* [mitmdump](@!urlTo("mitmdump.html")!@) - tcpdump for HTTP conversations
+    * [Tutorial](@!urlTo("mitmproxy/tutorial.html")!@)
+* [Client scripts](@!urlTo("scripts.html")!@) - Writing client scripts for mitmproxy and mitmdump
+* [libmproxy](@!urlTo("library.html")!@) - Using the mitmproxy library
+* [SSL](@!urlTo("ssl.html")!@) - Installing mitmproxy's SSL certificate
+    * Browsers:
+        * [Firefox](@!urlTo("ssl.html")!@#firefox)
+        * [Chrome](@!urlTo("ssl.html")!@#chrome)
+        * [Safari](@!urlTo("ssl.html")!@#safari)
+        * [IE8](@!urlTo("ssl.html")!@#ie)
+    * Global installation:
+        * [Windows 7](@!urlTo("ssl.html")!@#windows7)
+        * [iPhone/iPad](@!urlTo("ssl.html")!@#ios)
+* [FAQ](@!urlTo("faq.html")!@)
+* [administrivia](@!urlTo("admin.html")!@)
+
+
 
diff --git a/doc-src/index.py b/doc-src/index.py
index c34fcb78b..c0546ab12 100644
--- a/doc-src/index.py
+++ b/doc-src/index.py
@@ -8,12 +8,10 @@ ns.docTitle = "mitmproxy"
 this.markup = markup.Markdown()
 ns.docMaintainer = "Aldo Cortesi"
 ns.docMaintainerEmail = "aldo@corte.si"
-ns.copyright = "Aldo Cortesi 2010"
-ns.head = countershape.template.Template(None, "<h1> @!docTitle!@ - @!this.title!@ </h1>")
-ns.sidebar = countershape.widgets.SiblingPageIndex(
-            '/index.html',
-            exclude=['countershape']
-          )
+ns.copyright = u"\u00a9 mitmproxy project, 2011"
+ns.title = countershape.template.Template(None, "<h1> @!docTitle!@ - @!this.title!@ </h1>")
+
+ns.index = countershape.widgets.SiblingPageIndex('/index.html', divclass="pageindex")
 
 ns.license = file("../LICENSE").read()
 ns.index_contents = file("../README.mkd").read()
@@ -30,11 +28,15 @@ ns.example = example
 
 
 pages = [
-    Page("index.html", "introduction"),
+    Page("index.html", "Index"),
+    Page("intro.html", "Introduction"),
     Page("mitmproxy.html", "mitmproxy"),
+    Directory("mitmproxy"),
     Page("mitmdump.html", "mitmdump"),
-    Page("scripts.html", "scripts"),
-    Page("library.html", "libmproxy"),
-    Page("faq.html", "faq"),
-    Page("admin.html", "administrivia")
+    Directory("mitmdump"),
+    Page("scripts.html", "External scripts"),
+    Page("library.html", "libmproxy: mitmproxy as a library"),
+    Page("ssl.html", "SSL"),
+    Page("faq.html", "FAQ"),
+    Page("admin.html", "Administrivia")
 ]
diff --git a/doc-src/intro.html b/doc-src/intro.html
new file mode 100644
index 000000000..c48206c8e
--- /dev/null
+++ b/doc-src/intro.html
@@ -0,0 +1,2 @@
+
+@!index_contents!@
diff --git a/doc-src/mitmdump/index.py b/doc-src/mitmdump/index.py
new file mode 100644
index 000000000..312ece1db
--- /dev/null
+++ b/doc-src/mitmdump/index.py
@@ -0,0 +1,5 @@
+from countershape import Page, Directory, PythonModule, markup
+
+pages = [
+    Page("tutorial.html", "Tutorial"),
+]
diff --git a/doc-src/mitmdump/tutorial.html b/doc-src/mitmdump/tutorial.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/doc-src/mitmproxy/index.py b/doc-src/mitmproxy/index.py
new file mode 100644
index 000000000..312ece1db
--- /dev/null
+++ b/doc-src/mitmproxy/index.py
@@ -0,0 +1,5 @@
+from countershape import Page, Directory, PythonModule, markup
+
+pages = [
+    Page("tutorial.html", "Tutorial"),
+]
diff --git a/doc-src/mitmproxy/tutorial.html b/doc-src/mitmproxy/tutorial.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/doc-src/screenshots/firefox3-import.jpg b/doc-src/screenshots/firefox3-import.jpg
new file mode 100644
index 000000000..2ccfc490d
Binary files /dev/null and b/doc-src/screenshots/firefox3-import.jpg differ
diff --git a/doc-src/screenshots/firefox3-trust.jpg b/doc-src/screenshots/firefox3-trust.jpg
new file mode 100644
index 000000000..ec780dc33
Binary files /dev/null and b/doc-src/screenshots/firefox3-trust.jpg differ
diff --git a/doc-src/screenshots/firefox3.jpg b/doc-src/screenshots/firefox3.jpg
new file mode 100644
index 000000000..439fb9ad0
Binary files /dev/null and b/doc-src/screenshots/firefox3.jpg differ
diff --git a/doc-src/ssl.html b/doc-src/ssl.html
new file mode 100644
index 000000000..4fe1ee15b
--- /dev/null
+++ b/doc-src/ssl.html
@@ -0,0 +1,41 @@
+
+# Browsers
+
+<a name="firefox"></a>
+## Firefox 3.x
+
+### 1: Open preferences, click on "Advanced", then select"Encryption":
+
+<img src="@!urlTo('firefox3.jpg')!@"/>
+
+### 2: Click "View Certificates", "Import", and select the certificate file: 
+
+<img src="@!urlTo('firefox3-import.jpg')!@"/>
+
+### 3: Tick "Trust this CS to identify web sites", and click "Ok":
+
+<img src="@!urlTo('firefox3-trust.jpg')!@"/>
+
+You should now see the mitmproxy certificate listed in the Authorities tab.
+
+
+<a name="chrome"></a>
+## Chrome
+
+<a name="safari"></a>
+## Safari
+
+<a name="ie"></a>
+## Internet Explorer 8
+
+
+# Global installation
+
+<a name="windows"></a>
+## Windows 7
+
+<a name="ios"></a>
+## iPhone/iPad
+
+
+
diff --git a/libmproxy/console.py b/libmproxy/console.py
index 815eebdf1..fe0326e1a 100644
--- a/libmproxy/console.py
+++ b/libmproxy/console.py
@@ -46,63 +46,58 @@ def format_keyvals(lst, key="key", val="text", space=5, indent=0):
 
 
 def format_flow(f, focus, extended=False, padding=2):
-    if not f.request:
-        txt = [
-            ("title", " Connection from %s..."%(f.client_conn.address[0])),
-        ]
+    if extended:
+        ts = ("highlight", utils.format_timestamp(f.request.timestamp) + " ")
     else:
-        if extended:
-            ts = ("highlight", utils.format_timestamp(f.request.timestamp) + " ")
+        ts = " "
+
+    txt = [
+        ts,
+        ("ack", "!") if f.intercepting and not f.request.acked else " ",
+        ("method", f.request.method),
+        " ",
+        (
+            "text" if (f.response or f.error) else "title",
+            f.request.url(),
+        ),
+    ]
+    if f.response or f.error or f.request.is_replay():
+        tsr = f.response or f.error
+        if extended and tsr:
+            ts = ("highlight", utils.format_timestamp(tsr.timestamp) + " ")
         else:
             ts = " "
 
-        txt = [
-            ts,
-            ("ack", "!") if f.intercepting and not f.request.acked else " ",
-            ("method", f.request.method),
-            " ",
-            (
-                "text" if (f.response or f.error) else "title",
-                f.request.url(),
-            ),
-        ]
-        if f.response or f.error or f.request.is_replay():
-            tsr = f.response or f.error
-            if extended and tsr:
-                ts = ("highlight", utils.format_timestamp(tsr.timestamp) + " ")
-            else:
-                ts = " "
+        txt.append("\n") 
+        txt.append(("text", ts))
+        txt.append(" "*(padding+2))
+        met = ""
+        if f.request.is_replay():
+            txt.append(("method", "[replay] "))
+        elif f.modified():
+            txt.append(("method", "[edited] "))
+        if not (f.response or f.error):
+            txt.append(("text", "waiting for response..."))
 
-            txt.append("\n") 
-            txt.append(("text", ts))
-            txt.append(" "*(padding+2))
-            met = ""
-            if f.request.is_replay():
-                txt.append(("method", "[replay] "))
-            elif f.modified():
-                txt.append(("method", "[edited] "))
-            if not (f.response or f.error):
-                txt.append(("text", "waiting for response..."))
-
-        if f.response:
-            txt.append(
-               ("ack", "!") if f.intercepting and not f.response.acked else " "
-            )
-            txt.append("<- ")
-            if f.response.code in [200, 304]:
-                txt.append(("goodcode", str(f.response.code)))
-            else:
-                txt.append(("error", str(f.response.code)))
-            t = f.response.headers.get("content-type")
-            if t:
-                t = t[0].split(";")[0]
-                txt.append(("text", " %s"%t))
-            if f.response.content:
-                txt.append(", %s"%utils.pretty_size(len(f.response.content)))
-        elif f.error:
-            txt.append(
-               ("error", f.error.msg)
-            )
+    if f.response:
+        txt.append(
+           ("ack", "!") if f.intercepting and not f.response.acked else " "
+        )
+        txt.append("<- ")
+        if f.response.code in [200, 304]:
+            txt.append(("goodcode", str(f.response.code)))
+        else:
+            txt.append(("error", str(f.response.code)))
+        t = f.response.headers.get("content-type")
+        if t:
+            t = t[0].split(";")[0]
+            txt.append(("text", " %s"%t))
+        if f.response.content:
+            txt.append(", %s"%utils.pretty_size(len(f.response.content)))
+    elif f.error:
+        txt.append(
+           ("error", f.error.msg)
+        )
 
     if focus:
         txt.insert(0, ("focus", ">>" + " "*(padding-2)))