diff --git a/bender.css b/bender.css
index 70ede1e..ad144cd 100644
--- a/bender.css
+++ b/bender.css
@@ -132,6 +132,10 @@ a {
   color: black;
 }
 
+.yellow-bg a {
+  color: #0000cd;
+}
+
 .purple-bg {
   background-color: #9e0b46;
   color: white;
@@ -142,6 +146,10 @@ a {
   color: white;
 }
 
+.red-bg a {
+  color: #f1bbba;
+}
+
 .peach-bg {
   background-color: #fbc599;
 }
@@ -150,6 +158,41 @@ a {
   color: #444;
 }
 
+.pink-bg {
+  background-color: #db7093;
+  color: white;
+}
+
+.pink-bg a {
+  color: #d3d3d3;
+}
+
+.gray-bg {
+  background-color: #d3d3d3;
+  color: #c71585;
+}
+
+.gray-bg a {
+  color: #9e0b46;
+}
+
+.sky-bg {
+  background-color: #2495b5;
+  color: white;
+}
+
+.sky-bg a {
+  color: #ff9e9d;
+}
+
+.brown-bg {
+  background-color: #a76819;
+}
+
+.brown-bg a {
+  color: #f8ecc9;
+}
+
 .black-bg {
   background-color: #222;
   background-image: -webkit-linear-gradient(top, #444, #000);
@@ -158,3 +201,17 @@ a {
   background-image:         linear-gradient(to bottom, #444, #000);
 }
 
+code {
+  font-family: Inconsolota, Consolas, Menlo, monospace;
+}
+
+blockquote {
+  border: 1px dotted;
+  padding: 10px;
+}
+
+blockquote > p {
+  padding: 0;
+  margin: 0;
+}
+
diff --git a/index.html b/index.html
index 95cdefa..33acdaf 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,9 @@
 
     <div class="tiles">
 
-        <div class="orange-bg" id="logo">
-          <a href="run.html?href=demo/logo.xml"></a>
-        </div>
+      <div class="orange-bg" id="logo">
+        <a href="run.html?href=demo/logo.xml"></a>
+      </div>
 
       <div class="text blue-bg">
         <div>
@@ -35,9 +35,22 @@
       <div class="text yellow-bg">
         <div>
           <h2>Docs</h2>
+          <ul>
+            <li><a href="docs/reference/reference.html">API Reference</a></li>
+            <li><a href="http://bender-framework.tumblr.com">Development log</a></li>
+          </ul>
         </div>
       </div>
 
+      <div class="text sky-bg">
+        <div>
+          <h2>Developers</h2>
+          <ul>
+            <li><a href="">Setup</a></li>
+            <li><a href="docs/tutorial/tutorial.html">Tutorial</a></li>
+          </ul>
+        </div>
+      </div>
 
       <div class="text purple-bg">
         <div>
@@ -99,11 +112,27 @@ <h3>Automated tests</h3>
         <a href="run.html?href=t/arrow.xml"></a>
       </div>
 
-    </div>
+      <div class="text black-bg">
+        <a href="run.html?href=t/arrow.xml"></a>
+      </div>
 
-    <footer>
-      Copyright © 2011, 2012, <a href="http://www.igel.co.jp">IGEL Co., Ltd.</a>
-    </footer>
+      <div class="text pink-bg">
+        <div>
+          <ul>
+            <li><a href="index.ja.html">Japanese</a></li>
+            <li><a href="index.ja.html">日本語</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="text gray-bg">
+        <div>
+          <p>Copyright © 2011, 2012, <a href="http://www.igel.co.jp">IGEL Co., Ltd.</a></p>
+        </div>
+      </div>
+
+    </div>
+    </div>
 
     <script src="flexo.js"></script>
     <script src="bender.js"></script>