diff --git a/app/assets/javascripts/friends.js b/app/assets/javascripts/friends.js
new file mode 100644
index 0000000..1eb2c4c
--- /dev/null
+++ b/app/assets/javascripts/friends.js
@@ -0,0 +1,15 @@
+$(document).on('ready page:load', function(){
+  var friend_cell = $(".friend");
+
+  $("#search").keyup(function() {
+      var val = $.trim(this.value).toUpperCase();
+      if (val === "")
+          friend_cell.show();
+      else {
+          friend_cell.hide();
+          friend_cell.filter(function() {
+              return -1 != $(this).text().toUpperCase().indexOf(val); }).show();
+      }
+  });
+});
+
diff --git a/app/views/friends/index.html.erb b/app/views/friends/index.html.erb
index d70c8f1..1398d71 100644
--- a/app/views/friends/index.html.erb
+++ b/app/views/friends/index.html.erb
@@ -3,9 +3,12 @@
 <div class="container friends">
   <div class="header">
   </div>
+  <h3 class="page-header">친구 찾기 <small class="pull-right"><%= text_field_tag 'query', nil, size: 40, placeholder: '이름 검색', id: "search", class: "form-control" %></small></h3>
+
+
   <div class="friends-grid">
     <div class="row">
-      <div class="col-sm-4 col-md-2">
+      <div class="friend col-sm-4 col-md-2">
         <%= link_to new_friend_path(uid: @user.uid, name: @user.name) do %>
         <div class="thumbnail">
           <img src="http://graph.facebook.com/<%= @user.uid %>/picture?height=192&width=192">
@@ -17,7 +20,7 @@
       </div>
 
     <% (@friends*200).each do |f| %>
-      <div class="col-sm-4 col-md-2">
+      <div class="friend col-sm-4 col-md-2">
         <%= link_to new_friend_path(uid: f['id'], name: f['name']) do %>
         <div class="thumbnail">
           <img src="http://graph.facebook.com/<%= f["id"] %>/picture?height=192&width=192">