diff --git a/public/css/style.less b/public/css/style.less
index 064d7e318f..b11eec2644 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -390,6 +390,10 @@ footer.footer {
   margin-bottom:10px;
 }
 
+.account-sub-links a{
+	margin-left:10px;
+}
+
 .account-username{
   font-size:20px;
   font-weight:bold;
diff --git a/public/src/templates.js b/public/src/templates.js
index 27a1a4af1d..3c0f40531d 100644
--- a/public/src/templates.js
+++ b/public/src/templates.js
@@ -65,7 +65,7 @@ var templates = {};
 
 	function init() {
 		loadTemplates([
-			'header', 'footer', 'register', 'home', 'topic','account', 'category', 'users', 'accountedit', 
+			'header', 'footer', 'register', 'home', 'topic','account', 'category', 'users', 'accountedit', 'friends',
 			'login', 'reset', 'reset_code', 'account',
 			'confirm', '403',
 			'emails/reset', 'emails/reset_plaintext', 'emails/email_confirm', 'emails/email_confirm_plaintext',
diff --git a/public/templates/account.tpl b/public/templates/account.tpl
index 2579de2670..eba82fcc6f 100644
--- a/public/templates/account.tpl
+++ b/public/templates/account.tpl
@@ -1,15 +1,16 @@
 
 <div class="well">
-    <div class="alert" id="message" style="display:none">
-        <button type="button" class="close" data-dismiss="message">&times;</button>
-        <strong></strong>
-        <p></p>
-    </div>
+   
 
 
-	<div class="account-username-box">
-		<span class="account-username"><a href="/users/{username}">{username}</a></span>
-		<span id="editLink" class="pull-right"><a href="/users/{username}/edit">edit</a></span>
+  <div class="account-username-box">
+		<span class="account-username">
+			<a href="/users/{username}">{username}</a>
+		</span>
+		<div class="account-sub-links inline-block pull-right">
+			<span id="friendsLink" class="pull-right"><a href="/users/{username}/friends">friends</a></span>
+			<span id="editLink" class="pull-right"><a href="/users/{username}/edit">edit</a></span>
+		</div>
 	</div>
 		
 
@@ -60,6 +61,8 @@
 	<div id="user-actions" class="container">
 		<a id="add-friend-btn" href="#" class="btn">Add Friend</a>
 	</div>
+	<br/>
+	<div id="user-action-alert" class="alert alert-success hide"></div>
 </div>
 
 <script type="text/javascript">
@@ -67,11 +70,7 @@
 var yourid = '{yourid}';
 var theirid = '{theirid}';
 
-
-
 (function() {
-	
-	
 
     function addCommas(text) {
         return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
@@ -94,14 +93,13 @@ var theirid = '{theirid}';
             addFriendBtn.show();
         }
     	else {
-    		addFriendBtn.hide();
-        
+    		addFriendBtn.hide();        
     	}
         
         addFriendBtn.on('click', function() {
         	$.post('/users/addfriend', {uid: theirid},
             	function(data) {
-            		
+            		$('#user-action-alert').html('Friend Added!').show();
 				}                
 			);
         	return false;
diff --git a/public/templates/accountedit.tpl b/public/templates/accountedit.tpl
index c8987e3bef..5c75c9b4e9 100644
--- a/public/templates/accountedit.tpl
+++ b/public/templates/accountedit.tpl
@@ -1,11 +1,7 @@
 
 <div class="well">
 
-    <div class="alert" id="message" style="display:none">
-        <button type="button" class="close" data-dismiss="message">&times;</button>
-        <strong></strong>
-        <p></p>
-    </div>
+   
  
 	<!-- Change Picture Modal -->
 	<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -65,9 +61,15 @@
 	</div>
     
     <div class="account-username-box">
-        <span class="account-username"><a href="/users/{username}">{username}</a></span>
-        <span class="pull-right"><a href="/users/{username}/edit">edit</a></span>
-    </div>
+		<span class="account-username">
+			<a href="/users/{username}">{username}</a> >
+			<a href="/users/{username}/edit">edit</a>
+		</span>
+		<div class="account-sub-links inline-block pull-right">
+			<span id="friendsLink" class="pull-right"><a href="/users/{username}/friends">friends</a></span>
+			<span id="editLink" class="pull-right"><a href="/users/{username}/edit">edit</a></span>
+		</div>
+	</div>
 
 	<div class="row-fluid">
 		<div class="span3" style="text-align: center; margin-bottom:20px;">
diff --git a/public/templates/config.json b/public/templates/config.json
index 01913a0c0d..df327ff93e 100644
--- a/public/templates/config.json
+++ b/public/templates/config.json
@@ -4,6 +4,7 @@
     	"admin/categories[^]*": "admin/categories",
     	"admin/users[^]*": "admin/users",
     	"users[^]*edit": "accountedit",
+        "users[^]*friends": "friends",
         "users": "account",
         "latest": "category",
         "popular": "category",
diff --git a/public/templates/friends.tpl b/public/templates/friends.tpl
new file mode 100644
index 0000000000..233bafa3ad
--- /dev/null
+++ b/public/templates/friends.tpl
@@ -0,0 +1,94 @@
+
+<div class="well">
+   
+
+
+	<div class="account-username-box">
+		<span class="account-username">
+			<a href="/users/{username}">{username}</a> >
+			<a href="/users/{username}/friends">friends</a>
+		</span>
+		<div class="account-sub-links inline-block pull-right">
+			<span id="friendsLink" class="pull-right"><a href="/users/{username}/friends">friends</a></span>
+			<span id="editLink" class="pull-right"><a href="/users/{username}/edit">edit</a></span>
+		</div>
+	</div>
+
+	<div>
+	    <!-- BEGIN friends -->
+
+	    <div class="users-box well">
+		 	<a href="/users/{friends.username}">
+			    <img src="{friends.picture}" class="user-8080-picture"/>
+		    </a>
+		    <br/>
+			<a href="/users/{friends.username}">{friends.username}</a>
+		    <br/>
+			<div title="reputation">
+				<span class='reputation'>{friends.reputation}</span>
+				<i class='icon-star'></i>
+			</div>
+			<div title="post count">
+				<span class='postcount'>{friends.postcount}</span>
+				<i class='icon-pencil'></i>
+			</div>
+			<a id="remove-friend-btn" href="#" class="btn remove-friend-btn" friendid="{friends.uid}">Unfriend</a>
+		</div>
+
+		<!-- END friends -->
+	</div>
+	<div id="no-friend-notice" class="alert alert-warning hide">This user doesn't have any friends :(</div>
+</div>
+
+<script>
+
+var yourid = '{yourid}';
+var theirid = '{theirid}';
+
+var friendCount = '{friendCount}';
+
+(function() {
+    
+    function addCommas(text) {
+        return text.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
+    }
+    
+    $(document).ready(function() {
+    	
+    	if(parseInt(friendCount, 10) === 0) {
+    		$('#no-friend-notice').show();
+    	}
+    	var editLink = $('#editLink');
+
+		if(yourid !== theirid) {
+			editLink.hide();
+			$('.remove-friend-btn').hide();
+		}
+		else {
+			$('.remove-friend-btn').on('click',function(){
+
+				var removeBtn = $(this);
+				var friendid = $(this).attr('friendid');
+				
+				$.post('/users/removefriend', {uid: friendid},
+	            	function(data) {
+	            		button.parent().remove();
+					}                
+				);
+				return false;
+			});
+		}
+
+        $('.reputation').each(function(index, element) {
+        	$(element).html(addCommas($(element).html()));
+        })
+        
+        $('.postcount').each(function(index, element) {
+        	$(element).html(addCommas($(element).html()));
+        })
+        
+    });
+    
+
+}());
+</script>
diff --git a/src/routes/user.js b/src/routes/user.js
index 5902b10dc3..fe92c1913c 100644
--- a/src/routes/user.js
+++ b/src/routes/user.js
@@ -34,7 +34,8 @@ var user = require('./../user.js'),
 			
 		});
 
-		app.get('/users/:username*', function(req, res) {
+		app.get('/users/:username', function(req, res) {
+
 			if(!req.params.username) {
 				res.send("User doesn't exist!");
 				return;
@@ -189,30 +190,33 @@ var user = require('./../user.js'),
 			if(req.user.uid == req.body.uid)
 				return res.redirect('/');
 
-			user.addFriend(req.user.uid, req.body.uid, function(err, data) {
-				if(err)
-					res.send({error:err});
-				else
-					res.send(data);
+			user.addFriend(req.user.uid, req.body.uid, function(data) {
+				res.send({data:data});
+			});
+		});
+
+		app.post('/users/removefriend', function(req, res){
+			if(!req.user)
+				return res.redirect('/403');
+			
+			if(req.user.uid == req.body.uid)
+				return res.redirect('/');
+
+			user.removeFriend(req.user.uid, req.body.uid, function(data) {
+				res.send({data:data});
 			});
 		});
 
 		app.get('/users/:username/friends', function(req, res){
-				
+
 			if(!req.user)
 				return res.redirect('/403');
 			
-			user.get_uid_by_username(req.params.username, function(uid) {
-					user.getFriends(uid, function(data) {
-						res.send(JSON.stringify(data, null, 0));
-					});
-				});
+			res.send(templates['header'] + app.create_route('users/'+req.params.username+'/friends','friends') + templates['footer']);
 		});
 
 		function api_method(req, res) {
 			
-			
-			
 			var callerUID = req.user?req.user.uid : 0;
 	
 			if (!req.params.section && !req.params.username) {
@@ -225,6 +229,14 @@ var user = require('./../user.js'),
 			}
 			else if(String(req.params.section).toLowerCase() === 'friends') {
 				
+				getUserDataByUserName(req.params.username, callerUID, function(userData) {
+					
+					user.getFriends(userData.uid, function(friendsData){
+						userData.friends = friendsData;
+						userData.friendCount = friendsData.length;
+						res.send(JSON.stringify(userData));
+					});
+				});
 			}
 			else if (String(req.params.section).toLowerCase() === 'edit') {
 				getUserDataByUserName(req.params.username, callerUID, function(userData) {
diff --git a/src/templates.js b/src/templates.js
index 30a14df328..2ad56e23ae 100644
--- a/src/templates.js
+++ b/src/templates.js
@@ -29,7 +29,7 @@ var fs = require('fs');
 
 	Templates.init = function() {
 		loadTemplates([
-			'header', 'footer', 'register', 'home', 'topic', 'account',
+			'header', 'footer', 'register', 'home', 'topic', 'account', 'friends',
 			'login', 'reset', 'reset_code', 'logout',
 			'403',
 			'admin/header', 'admin/footer', 'admin/index',
diff --git a/src/user.js b/src/user.js
index 8d47e572b3..04d0af9ca0 100644
--- a/src/user.js
+++ b/src/user.js
@@ -64,6 +64,7 @@ var config = require('../config.js'),
 			{
 				if(data && data['password'])
 					delete data['password'];
+				data.uid = uid;
 				callback(data);
 			}
 			else
@@ -365,8 +366,24 @@ var config = require('../config.js'),
 
 	User.getFriends = function(uid, callback) {
 		RDB.smembers('user:'+uid+':friends', function(err, data){
-			if(err === null) 
-				callback(data);
+			if(err === null){ 
+				
+				var friendsData = [];
+
+				if(data.length === 0) {
+					callback(friendsData);
+					return;
+				}
+
+				for(var i=0, ii=data.length; i<ii; ++i) {
+					User.getUserData(data[i], function(userData){
+						friendsData.push(userData);
+						console.log(friendsData);
+						if(friendsData.length == data.length)
+							callback(friendsData);			
+					});	
+				}
+			}
 			else
 				console.log(err);	
 		});