diff --git a/content/screen.sass b/content/screen.sass
index a4c65d7..c41cfd4 100644
--- a/content/screen.sass
+++ b/content/screen.sass
@@ -279,7 +279,7 @@ a
     margin: 1em 2em 1em 0
 
 
-ul.menu
+body.articles #content nav
   padding-bottom: 1em
 
 
@@ -289,8 +289,6 @@ ul.menu
   display: none
   float: left
   margin-right: 20px
-  background: #fff url(/images/srch_l.gif) 0 0 no-repeat
-  padding-left: 19px
 
   fieldset
     margin: 0
@@ -298,32 +296,11 @@ ul.menu
     border: 0
 
   label
-    color: #999
-    display: none
+    font-weight: normal
+    padding-right: 10px
 
   input
-    border: 0
-    margin: 0
-    outline: 0
-    vertical-align: middle
-    height: 19px
     width: 180px
-    width: 132px
-    padding: 3px
-    background: #fff url(/images/srch_bg.gif) 0 0 repeat-x
-    float: left
-    font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
-    color: #000
-
-  span.clear
-    background: #fff url(/images/srch_r.gif) 0 0 no-repeat
-    float: left
-    width: 19px
-    height: 19px
-    clear: none
-
-  .active
-    background-position: 0 -19px
 
 
 #respond
diff --git a/layouts/articles.html b/layouts/articles.html
index d73e499..7325518 100644
--- a/layouts/articles.html
+++ b/layouts/articles.html
@@ -2,37 +2,22 @@
 <html>
 <head>
   <%= render '_head' %>
-  <script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
   <script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/liquidmetal.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
     jQuery(function() {
-      WezM.showJavascriptWidgets();
-      $('#search input').keypress(function(e) {
+      function search_handler(e) {
         var input = $(this);
-        var q = (input.val() + String.fromCharCode(e.which)).toLowerCase();
+        var value = input.val();
+        // var q = (value + String.fromCharCode(e.which)).toLowerCase();
+        var q = value.toLowerCase();
 
-        var filtered_articles = $('#articles li').filter(function(i) {
+        $('#articles li').filter(function(i) {
           var article = $(this);
-          var text = article.text().toLowerCase();
-          // var score = LiquidMetal.score(text,  q);
-          // article.attr("data-score", score);
-          // return score > 0;
-          return text.indexOf(q) >= 0;
-        })
-
-        // Sort results
-        // var sorted_articles = filtered_articles.get().sort(function(a, b) {
-        //   var valA = parseFloat($(a).attr("data-score"));
-        //   var valB = parseFloat($(b).attr("data-score"));
-        //   return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
-        // });
-
-        $("#articles").quicksand($(filtered_articles));
-      });
+          return article.text().toLowerCase().indexOf(q) < 0;
+        }).animate({height: 0, opacity: 0}, {queue: false, duration: 500});
+      }
+      $('#search').show();
+      $('#search input').keypress(search_handler).change(search_handler).focus();
     });
   </script>
 </head>
@@ -48,7 +33,7 @@
         ['Personal', personal_articles.size],
       ]
     %>
-    <ul class="inline menu">
+    <nav class="inline menu">
       <% menu.each do |menu_item|
         label, count = menu_item
         path = (label != "All" ? '/' + label.downcase : '') + "/articles/"
@@ -64,22 +49,15 @@
       <li id="search">
         <fieldset>
           <label for="query">Search</label>
-          <input type="text" name="q" id="query" value="" />
-          <span class="clear"></span>
+          <input type="search" name="q" id="query" value="" />
         </fieldset>
       </li>
-    </ul>
+    </nav>
 
     <ul id="articles" class="articles">
       <%= yield %>
     </ul>
 
-    <div class="pagination">
-      <% pagepath = @item.identifier; pagepath += 'page/' if pagepath !~ %r{/page/$} %>
-      <a href="<%= pagepath %>" class="newer">&laquo; Newer</a>
-      |
-      <a href="<%= pagepath %>#2" class="older">Older &raquo;</a>
-    </div>
   </div>
   <%= render '_footer' %>
 </body>
diff --git a/output/images/srch_bg.gif b/output/images/srch_bg.gif
deleted file mode 100755
index 6a523ba..0000000
Binary files a/output/images/srch_bg.gif and /dev/null differ
diff --git a/output/images/srch_l.gif b/output/images/srch_l.gif
deleted file mode 100755
index 6d95bf3..0000000
Binary files a/output/images/srch_l.gif and /dev/null differ
diff --git a/output/images/srch_r.gif b/output/images/srch_r.gif
deleted file mode 100644
index 7a6d1c4..0000000
Binary files a/output/images/srch_r.gif and /dev/null differ
diff --git a/output/js/application.js b/output/js/application.js
index e929ca8..a0c5a83 100644
--- a/output/js/application.js
+++ b/output/js/application.js
@@ -12,23 +12,6 @@ var WezM = {
     if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { // TODO: This is too generic (iPhone)
       $('#search input').css('paddingTop', 0);
     }
-    // The following should be triggered onchange for the input as well
-    // (to handle things like Cut with the mouse)
-    // $('#search input').keyup(function(e) {
-    //   var input = $(this);
-    //   var clear_search = $('#search .clear');
-    //   var value = input.attr('value');
-    //   if(value && (value != '')) {
-    //     clear_search.addClass('active');
-    //   }
-    //   else {
-    //     clear_search.removeClass('active');
-    //   }
-    // });
-    $('#search .clear.active').live('click', function() {
-      $('#search input').attr('value', '').keyup(); // Simulate keypress to clear results
-
-    });
   },
   _searchItemSelected: function(article) {
     document.location.href = article.path;
