diff --git a/static/css/note.css b/static/css/note.css
index d27cfbf..df646dd 100644
--- a/static/css/note.css
+++ b/static/css/note.css
@@ -1,3 +1,51 @@
+#new_note_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/new_note_button.png);
+}
+
+#link_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/link_button.png);
+}
+
+#bold_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bold_button.png);
+}
+
+#italic_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/italic_button.png);
+}
+
+#underline_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/underline_button.png);
+}
+
+#title_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/title_button.png);
+}
+
+#bullet_list_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bullet_list_button.png);
+}
+
+#numbered_list_button_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/numbered_list_button.png);
+}
+
 body {
   padding: 1em;
   line-height: 140%;
diff --git a/static/css/style.css b/static/css/style.css
index 16bc838..ecd8865 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -47,72 +47,156 @@ ol li {
   float: right;
 }
 
-#toolbar .button {
-  border-color: #d0e0f0;
-  border-style: solid;
-  border-width: 2px;
-  background-color: #d0e0f0;
-  height: 2em;
-  width: 2em;
-  font-size: 125%;
-  text-align: center;
-  vertical-align: middle;
-  display: table-cell;
+#toolbar .image_button {
   outline: none;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
 }
 
 #toolbar div {
   margin-bottom: 0.25em;
 }
 
-#toolbar .button:hover {
-  border-color: #ffcc66;
-  background-color: #ffcc66;
+#new_note_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/new_note_button_hover.png);
 }
 
-#toolbar .button_down {
-  border-color: #c0d0e0;
-  border-style: inset;
-  border-width: 2px;
-  background-color: #c0d0e0;
+#link_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/link_button_hover.png);
 }
 
-#toolbar .button_down:hover {
-  border-color: #ffbb55;
-  background-color: #ffbb55;
+#bold_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bold_button_hover.png);
 }
 
-.toolbar_link_text {
-  font-size: 60%;
+#italic_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/italic_button_hover.png);
 }
 
-.toolbar_list_text {
-  font-size: 50%;
-  line-height: 90%;
+#underline_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/underline_button_hover.png);
 }
 
-#createLink {
-  color: blue;
-  font-weight: bold;
-  text-decoration: underline;
+#title_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/title_button_hover.png);
 }
 
-#bold {
-  font-weight: bold;
+#bullet_list_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bullet_list_button_hover.png);
 }
 
-#italic {
-  font-style: italic;
+#numbered_list_button_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/numbered_list_button_hover.png);
 }
 
-#underline {
-  text-decoration: underline;
+#new_note_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/new_note_button_down_hover.png);
 }
 
-#title {
-  font-weight: bold;
+#link_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/link_button_down_hover.png);
+}
+
+#bold_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bold_button_down_hover.png);
+}
+
+#italic_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/italic_button_down_hover.png);
+}
+
+#underline_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/underline_button_down_hover.png);
+}
+
+#title_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/title_button_down_hover.png);
+}
+
+#bullet_list_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bullet_list_button_down_hover.png);
+}
+
+#numbered_list_button_down_hover_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/numbered_list_button_down_hover.png);
+}
+
+#new_note_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/new_note_button_down.png);
+}
+
+#link_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/link_button_down.png);
+}
+
+#bold_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bold_button_down.png);
+}
+
+#italic_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/italic_button_down.png);
+}
+
+#underline_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/underline_button_down.png);
+}
+
+#title_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/title_button_down.png);
+}
+
+#bullet_list_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/bullet_list_button_down.png);
+}
+
+#numbered_list_button_down_preload {
+  height: 0;
+  overflow: hidden;
+  background-image: url(/static/images/numbered_list_button_down.png);
 }
 
 #link_area {
diff --git a/static/html/features.html b/static/html/features.html
index ac7fe32..8d2945d 100644
--- a/static/html/features.html
+++ b/static/html/features.html
@@ -39,3 +39,12 @@ Sound interesting? Then
 <a href="/users/demo" target="_top">try the demo</a>, or
 <a href="/notebooks/%s?note_id=new" target="_top">sign up</a> for a free account.
 </p>
+
+<span id="new_note_button_preload"></span>
+<span id="link_button_preload"></span>
+<span id="bold_button_preload"></span>
+<span id="italic_button_preload"></span>
+<span id="underline_button_preload"></span>
+<span id="title_button_preload"></span>
+<span id="bullet_list_button_preload"></span>
+<span id="numbered_list_button_preload"></span>
diff --git a/static/html/welcome to your wiki.html b/static/html/welcome to your wiki.html
index 9f3401a..1521c46 100644
--- a/static/html/welcome to your wiki.html	
+++ b/static/html/welcome to your wiki.html	
@@ -6,13 +6,14 @@
 notes, each with a unique title. Right now you're reading a note titled
 "welcome to your wiki".</p>
 
-<p><b>To make a new wiki note</b>, click the "+" button on the left. Start by
-typing a title for your new note and then press enter. Next, type the contents
-of your new note, using the formatting buttons on the left for things like
-bold, italics, or lists.</p>
+<p><b>To make a new wiki note</b>, click the new note button on the left.
+Start by typing a title for your new note and then press enter. Next, type the
+contents of your new note, using the formatting buttons on the left for things
+like bold, italics, or lists.</p>
 
 <p><b>To link one note to another</b>, click the "<u>link</u>" button on the
-left, type a note title, and then click the button again.</p>
+left, type a note title, and then click the button again. Or, you can just
+highlight some text and click the "<u>link</u>" button.</p>
 
 <p><b>To follow a link to another note</b>, just click on the link and the
 note will open up for you to view or edit. You can switch between notes simply
diff --git a/static/js/Wiki.js b/static/js/Wiki.js
index 5fc3d0b..dc97476 100644
--- a/static/js/Wiki.js
+++ b/static/js/Wiki.js
@@ -142,15 +142,23 @@ Wiki.prototype.populate = function ( startup_notes, note, note_read_write ) {
 
   if ( this.notebook.read_write ) {
     connect( window, "onunload", function ( event ) { self.editor_focused( null, true ); } );
+    connect( "newNote", "onclick", this, "create_blank_editor" );
+    connect( "createLink", "onclick", this, "toggle_link_button" );
     connect( "bold", "onclick", function ( event ) { self.toggle_button( event, "bold" ); } );
     connect( "italic", "onclick", function ( event ) { self.toggle_button( event, "italic" ); } );
     connect( "underline", "onclick", function ( event ) { self.toggle_button( event, "underline" ); } );
     connect( "title", "onclick", function ( event ) { self.toggle_button( event, "title", "h3" ); } );
     connect( "insertUnorderedList", "onclick", function ( event ) { self.toggle_button( event, "insertUnorderedList" ); } );
     connect( "insertOrderedList", "onclick", function ( event ) { self.toggle_button( event, "insertOrderedList" ); } );
-    connect( "createLink", "onclick", this, "toggle_link_button" );
-    connect( "newNote", "onmousedown", function ( event ) { addElementClass( "newNote", "button_down" ); } );
-    connect( "newNote", "onmouseup", this, "create_blank_editor" );
+
+    this.make_image_button( "newNote", "new_note", true );
+    this.make_image_button( "createLink", "link" );
+    this.make_image_button( "bold" );
+    this.make_image_button( "italic" );
+    this.make_image_button( "underline" );
+    this.make_image_button( "title" );
+    this.make_image_button( "insertUnorderedList", "bullet_list" );
+    this.make_image_button( "insertOrderedList", "numbered_list" );
 
     // grab the next available object id
     this.invoker.invoke( "/next_id", "POST", null,
@@ -182,8 +190,6 @@ Wiki.prototype.background_clicked = function ( event ) {
 Wiki.prototype.create_blank_editor = function ( event ) {
   if ( event ) event.stop();
 
-  removeElementClass( "newNote", "button_down" );
-
   // if we're within the trash, don't allow new note creation
   if ( this.notebook.name == "trash" ) {
     this.display_error( "You can't create notes in the trash." );
@@ -574,6 +580,82 @@ Wiki.prototype.editor_key_pressed = function ( editor, event ) {
   }
 }
 
+IMAGE_DIR = "/static/images/";
+
+Wiki.prototype.make_image_button = function ( name, filename_prefix, handle_mouse_up_and_down ) {
+  var button = getElement( name );
+
+  if ( !filename_prefix )
+    filename_prefix = name;
+
+  button.filename_prefix = filename_prefix;
+
+  connect( button, "onmouseover", function ( event ) {
+    if ( /_down/.test( button.src ) )
+      button.src = IMAGE_DIR + filename_prefix + "_button_down_hover.png";
+    else
+      button.src = IMAGE_DIR + filename_prefix + "_button_hover.png";
+  } );
+
+  connect( button, "onmouseout", function ( event ) {
+    if ( /_down/.test( button.src ) )
+      button.src = IMAGE_DIR + filename_prefix + "_button_down.png";
+    else
+      button.src = IMAGE_DIR + filename_prefix + "_button.png";
+  } );
+
+  if ( handle_mouse_up_and_down ) {
+    connect( button, "onmousedown", function ( event ) {
+      if ( /_hover/.test( button.src ) )
+        button.src = IMAGE_DIR + filename_prefix + "_button_down_hover.png";
+      else
+        button.src = IMAGE_DIR + filename_prefix + "_button_down.png";
+    } );
+    connect( button, "onmouseup", function ( event ) {
+      if ( /_hover/.test( button.src ) )
+        button.src = IMAGE_DIR + filename_prefix + "_button_hover.png";
+      else
+        button.src = IMAGE_DIR + filename_prefix + "_button.png";
+    } );
+  }
+}
+
+Wiki.prototype.down_image_button = function ( name ) {
+  var button = getElement( name );
+
+  if ( /_hover/.test( button.src ) )
+    button.src = IMAGE_DIR + button.filename_prefix + "_button_down_hover.png";
+  else
+    button.src = IMAGE_DIR + button.filename_prefix + "_button_down.png";
+}
+
+Wiki.prototype.up_image_button = function ( name ) {
+  var button = getElement( name );
+
+  if ( /_hover/.test( button.src ) )
+    button.src = IMAGE_DIR + button.filename_prefix + "_button_hover.png";
+  else
+    button.src = IMAGE_DIR + button.filename_prefix + "_button.png";
+}
+
+Wiki.prototype.toggle_image_button = function ( name ) {
+  var button = getElement( name );
+
+  if ( /_down/.test( button.src ) ) {
+    if ( /_hover/.test( button.src ) )
+      button.src = IMAGE_DIR + button.filename_prefix + "_button_hover.png";
+    else
+      button.src = IMAGE_DIR + button.filename_prefix + "_button.png";
+    return false;
+  } else {
+    if ( /_hover/.test( button.src ) )
+      button.src = IMAGE_DIR + button.filename_prefix + "_button_down_hover.png";
+    else
+      button.src = IMAGE_DIR + button.filename_prefix + "_button_down.png";
+    return true;
+  }
+}
+
 Wiki.prototype.toggle_button = function ( event, button_id, state_name ) {
   this.clear_messages();
   this.clear_pulldowns();
@@ -590,9 +672,9 @@ Wiki.prototype.toggle_button = function ( event, button_id, state_name ) {
 
 Wiki.prototype.update_button = function ( button_id, state_name ) {
   if ( this.focused_editor.state_enabled( state_name || button_id ) )
-    addElementClass( button_id, "button_down" );
+    this.down_image_button( button_id );
   else
-    removeElementClass( button_id, "button_down" );
+    this.up_image_button( button_id );
 }
 
 Wiki.prototype.update_toolbar = function() {
@@ -614,8 +696,7 @@ Wiki.prototype.toggle_link_button = function ( event ) {
 
   if ( this.focused_editor && this.focused_editor.read_write ) {
     this.focused_editor.focus();
-    toggleElementClass( "button_down", "createLink" );
-    if ( hasElementClass( "createLink", "button_down" ) )
+    if ( this.toggle_image_button( "createLink" ) )
       this.focused_editor.start_link();
     else
       link = this.focused_editor.end_link();
diff --git a/view/Toolbar.py b/view/Toolbar.py
index 7c8508d..7c82fdf 100644
--- a/view/Toolbar.py
+++ b/view/Toolbar.py
@@ -7,45 +7,97 @@ class Toolbar( Div ):
       self,
       Div(
         P(
-          Div( Div( Span( u"+", class_ = u"toolbar_text" ), id = u"newNote", title = u"new note [ctrl-N]", class_ = u"button" ) ),
-          Div( Div(
-            Span(
-              u"link",
-              class_ = u"toolbar_text toolbar_link_text",
-            ),
-            id = u"createLink", title = u"link [ctrl-L]", class_ = u"button"
+          Div( Input(
+            type = u"image",
+            id = u"newNote", title = u"new note [ctrl-N]",
+            src = u"/static/images/new_note_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
+          ) ),
+          Div( Input(
+            type = u"image",
+            id = u"createLink", title = u"link [ctrl-L]",
+            src = u"/static/images/link_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
           ) ),
         ),
         P(
-          Div( Div( Span( u"B", class_ = u"toolbar_text" ), id = u"bold", title = u"bold [ctrl-B]", class_ = u"button" ) ),
-          Div( Div( Span( u"I", class_ = u"toolbar_text" ), id = u"italic", title = u"italic [ctrl-I]", class_ = u"button" ) ),
-          Div( Div( Span( u"U", class_ = u"toolbar_text" ), id = u"underline", title = u"underline [ctrl-U]", class_ = u"button" ) ),
-          Div( Div( Span( u"T", class_ = u"toolbar_text" ), id = u"title", title = u"title [ctrl-T]", class_ = u"button" ) ),
+          Div( Input(
+            type = u"image",
+            id = u"bold", title = u"bold [ctrl-B]",
+            src = u"/static/images/bold_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
+          ) ),
+          Div( Input(
+            type = u"image",
+            id = u"italic", title = u"italic [ctrl-I]",
+            src = u"/static/images/italic_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
+          ) ),
+          Div( Input(
+            type = u"image",
+            id = u"underline", title = u"underline [ctrl-U]",
+            src = u"/static/images/underline_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
+          ) ),
+          Div( Input(
+            type = u"image",
+            id = u"title", title = u"title [ctrl-T]",
+            src = u"/static/images/title_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
+          ) ),
         ),
         P(
-          Div( Div(
-            Span(
-              u"&#149; &#8213;", Br(),
-              u"&#149; &#8213;", Br(),
-              u"&#149; &#8213;", Br(),
-              Br( class_ = "undisplayed" ), # to make IE 6 happy. without this, the last list element is truncated
-              class_ = u"toolbar_list_text",
-            ),
-            id = u"insertUnorderedList", title = u"bullet list [ctrl-period]", class_ = u"button",
+          Div( Input(
+            type = u"image",
+            id = u"insertUnorderedList", title = u"bullet list [ctrl-period]",
+            src = u"/static/images/bullet_list_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
           ) ),
-          Div( Div(
-            Span(
-              u"1.&#8213;", Br(),
-              u"2.&#8213;", Br(),
-              u"3.&#8213;", Br(),
-              Br( class_ = "undisplayed" ),
-              class_ = u"toolbar_list_text",
-            ),
-            id = u"insertOrderedList", title = u"numbered list [ctrl-1]", class_ = u"button",
+          Div( Input(
+            type = u"image",
+            id = u"insertOrderedList", title = u"numbered list [ctrl-1]",
+            src = u"/static/images/numbered_list_button.png",
+            width = u"40", height = u"40",
+            class_ = "image_button",
           ) ),
         ),
         class_ = u"button_wrapper",
       ),
+
+      Span( id = "new_note_button_hover_preload" ),
+      Span( id = "link_button_hover_preload" ),
+      Span( id = "bold_button_hover_preload" ),
+      Span( id = "italic_button_hover_preload" ),
+      Span( id = "underline_button_hover_preload" ),
+      Span( id = "title_button_hover_preload" ),
+      Span( id = "bullet_list_button_hover_preload" ),
+      Span( id = "numbered_list_button_hover_preload" ),
+
+      Span( id = "new_note_button_down_hover_preload" ),
+      Span( id = "link_button_down_hover_preload" ),
+      Span( id = "bold_button_down_hover_preload" ),
+      Span( id = "italic_button_down_hover_preload" ),
+      Span( id = "underline_button_down_hover_preload" ),
+      Span( id = "title_button_down_hover_preload" ),
+      Span( id = "bullet_list_button_down_hover_preload" ),
+      Span( id = "numbered_list_button_down_hover_preload" ),
+
+      Span( id = "new_note_button_down_preload" ),
+      Span( id = "link_button_down_preload" ),
+      Span( id = "bold_button_down_preload" ),
+      Span( id = "italic_button_down_preload" ),
+      Span( id = "underline_button_down_preload" ),
+      Span( id = "title_button_down_preload" ),
+      Span( id = "bullet_list_button_down_preload" ),
+      Span( id = "numbered_list_button_down_preload" ),
+
       id = u"toolbar",
       class_ = hide_toolbar and u"undisplayed" or None,
     )