diff --git a/css/style.css b/css/style.css
index a5b4b23..f4b67fe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -18,29 +18,44 @@ p {
   margin: 1em;
 }
 
-h1 {
-  color: #fff;
-  padding: 5px;
-  background-color: #302C29;
+a:link,
+a:visited,
+a:hover
+a:active {
+  color: #6C8C84;
 }
 
-h2 {
-  color: #412726;
+h1#header {
+  height: 50px;
+  color: #fff;
+  padding: 5px;
+  padding-left: 20px;
+  line-height: 50px;
+  background-color: #302C29;
+  font-size: 1.5em;
   font-weight: bold;
 }
 
+
 #container {
   width: 960px;
   padding: 20px;
   margin: 0 auto;
   background-color: #fff;
   overflow: hidden;
+  min-height: 500px;
 }
 
+
 #container .section {
   margin-bottom: 20px;
 }
 
+.section h2 {
+  color: #466964;
+  font-weight: bold;
+}
+
 #leftColumn {
   float: left;
   width: 700px;
@@ -57,11 +72,12 @@ textarea#markdown {
   width: 100%;
   height: 200px;
   font-size: 1em;
+  border: 2px solid #D1D1BC;
 }
 
 #output {
   background-color: #f8f8f8;
-  border: 1px solid #ccc;
+  border: 2px solid #A7C4BB;
   min-height: 100px;
   padding: 10px;
 }
@@ -77,6 +93,7 @@ textarea#markdown {
 #output h5,
 #output h6 {
   font-weight: bold;
+  color: #000;
 }
 
 #output h1 {
@@ -111,3 +128,17 @@ textarea#markdown {
   padding: 0;
   line-height: 1em;
 }
+
+#footer {
+  clear: both;
+  width: 100%;
+  height: 50px;
+  background-color: #302C29;
+  color: #fff;
+  line-height: 50px;
+  text-align: center;
+}
+
+#footer a {
+  color: #fff;
+}
diff --git a/index.html b/index.html
index 5cefc06..77b6fef 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
     <script type="text/javascript" src="js/main.js"></script>
   </head>
   <body>
-    <h1>Markdown Live Previewer</h1>
+    <h1 id="header">Markdown Live Previewer</h1>
     <div id="container">
 
       <div id="leftColumn">
@@ -30,10 +30,15 @@
      <div id="rightColumn">
        <div class="section">
          <h2>reference</h2>
-         <div id="rederence"></div>
+         <div id="reference">sorry, its todo</div>
+         <table>
+         
+         </table>
        </div>
      </div>
 
     </div>
+
+    <div id="footer"><a href="http://twitter.com/#!/tanabe">created by @tanabe</a></div>
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
index 7c7b82a..867a256 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,25 @@
+var example = [
+  "# hello, This is Markdown Live Previewer",
+  "",
+  "----",
+  "## what is Markdown?",
+  "see [Wikipedia](http://en.wikipedia.org/wiki/Markdown)",
+  "",
+  "> Markdown is a lightweight markup language, originally created by John Gruber and Aaron Swartz allowing people \"to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)\".",
+  "",
+  "----",
+  "## usage",
+  "1. write markdown text in above textarea",
+  "2. render automatically to the output area",
+  "",
+  "----",
+  "## thanks",
+  "* [markdown-js](https://github.com/evilstreak/markdown-js)"
+].join("\n");
 $(function() {
+  $("#markdown").val(example);
+  $("#output").html(markdown.toHTML(example));
+  $("#output").html(markdown.toHTML(example));
   $("#markdown").bind("keyup", function() {
     $("#output").html(markdown.toHTML($("#markdown").val()));
   });
