diff --git a/public/app/mygarden/garden.js b/public/app/mygarden/garden.js
index 266ca00..bf449dd 100644
--- a/public/app/mygarden/garden.js
+++ b/public/app/mygarden/garden.js
@@ -2,29 +2,43 @@ angular.module('iGrow.mygarden', [])
 .controller('GardenController', function ($window, $location, $scope, Plants) {
 	$scope.data = {}
 	
+	Plants.getFriends()
+			.then(function(resp){
+		var user=$window.localStorage.getItem('com.username');
+                for(var i=0;i<resp.length;i++){
+                    
+                    if(resp[i].username===user){
+                        resp.splice(i,1);
+                        break;
+                    }
+                }
+		$scope.data.friends=resp;
+	});
 	
 
-
 	Plants.getGarden()
 	.then(function(resp){
 		$scope.data.plants=resp;
 		window.user=$window.localStorage['com.username'];
 		$scope.username=$window.localStorage['com.username'];
 	})
+
 	$scope.addComment=function ( comment) {
-		Plants.addNewComment(comment,$scope.username,function (data) {	
+		Plants.addNewComment(comment,$scope.username)
+		.then(function () {
 			Plants.getAllComment()
 			.then(function (resp) {
 				$scope.data.comment=resp;
-				$location.path('/mygarden')
+				$location.path('/mygarden');
 			})
-
-		})	
-
+		})		
+		$scope.gotoBottom();		
 	}
+	
 	Plants.getAllComment()
 		.then(function (resp) {
 			$scope.data.comment=resp;
+			console.log(resp)
 			$location.path('/mygarden')
 	})
 
@@ -45,4 +59,16 @@ angular.module('iGrow.mygarden', [])
 			$location.path('/mygarden')
 		})
 	}
+
+	 $scope.gotoBottom = function() {
+      // set the location.hash to the id of
+      // the element you wish to scroll to.
+      $location.hash('bottom');
+      console.log("going down !!!!")
+      // call $anchorScroll()
+      $anchorScroll();
+    }
+
+
+
 });
\ No newline at end of file
diff --git a/public/app/mygarden/mygarden.html b/public/app/mygarden/mygarden.html
index 0be9f30..6b1d2ea 100644
--- a/public/app/mygarden/mygarden.html
+++ b/public/app/mygarden/mygarden.html
@@ -1,28 +1,50 @@
-<div>
-  <div>  
-  <button type="button"  class="btn btn-default" data-toggle="collapse"  class="toggleButton"  data-target="#descContent,#editbtndesc" >description</button>
-  <button type="button" class="btn btn-default btn-sm" data-toggle="collapse"  class="toggleButton"  data-target='#edittxt'>
-    <span class="glyphicon glyphicon-pencil"></span> Edit
-  </button>
-  
-  <div class="description" >
-    <div class="collapse content"  id="descContent"  >
-       <p>{{data.description}}</p>
-      
-      <p>
-        <textarea id="edittxt" class="collapse content" class="form-control" placeholder="add comment" rows="3" ng-model="desTxt" style="color: black;">{{edittxt}}</textarea>
-        <button id="editbtndesc" type="button" class="toggleButton"  class="collapse content" data-target="edittxt"  class="btn btn-default btn-sm" ng-click="editTheDescription(desTxt)">
-           Save
-        </button>
+    <div>
+  <div class="row">
+    <div class="col-md-3">  
+      <button type="button"  class="Fbutton" data-toggle="collapse"  class="toggleButton"  data-target="#descContent,#editbtndesc" >description</button>
+    </div>
+
+
+    <div class="col-md-2">
+      <button type="button" class="btn btn-default" data-toggle="collapse"  class="toggleButton"  data-target='#edittxt'>
+        <span class="glyphicon glyphicon-pencil"></span> Edit
+     </button>
+    </div>
+  </div> 
+
+
+  <div class="row" >
+   <div class="description" >
+      <div class="collapse content"  id="descContent"  >
+        <p>{{data.description}}</p>
+        <p>
+          <textarea id="edittxt" class="collapse content" class="form-control" placeholder="add comment" rows="3" ng-model="desTxt" style="color: black;">{{edittxt}}</textarea>
+          <button id="editbtndesc" class="collapse content" type="button" class="toggleButton"  class="collapse content" data-target="edittxt"  class="Fbutton" ng-click="editTheDescription(desTxt)">
+               Save
+          </button>
       </p>
     </div>
+  </div>    
+ </div>
+   
 
 
+<div>
+<button class="Fbutton" data-toggle="collapse"  class="toggleButton"  data-target="#toto">friend</button>
+ 
+  <table class="collapse content"  id="toto" >
+    <tr>
+      <td data-ng-repeat="f in data.friends">
+         <button  class="friendsbutton"><span class="glyphicon glyphicon-user"></span>  {{f.username}}</button>
+      </td>
+    </tr>
+  </table>
+</div>
+<br>
 
 
+ 
 
-  </div>    
-  </div>
   <div class="row" id='container' data-ng-repeat="plant in data.plants">
     <div class='panel-group' id='accordion' role='tablist' aria-mutliselectable='true' style="opacity:0.8"> 
       <div class='col-sm-3 col-md-2'>
@@ -53,17 +75,24 @@ <h4 class="panel-title">
 
 
 
-  <div id="comment" class="row" >
-    <div data-ng-repeat="comment in data.comment">
-     <div class="commntDIV">
-       <p>{{comment.friendid}}</p>
-      <p>{{comment.text}}</p>
+
+  <div id="comment" class="row" >  
+    <div  data-ng-repeat="comment in data.comment">
+     <div style="background-color:white">
+          <p style=" font-weight: bold;">{{username}}</p>
+      <div class="row">
+          <p class="col-md-1"></p>
+          <p class="col-md-6">{{comment.text}}</p>
+      </div>
      </div>
+    
     </div>
+
     <textarea id="" class="form-control" placeholder="add comment" rows="3" ng-model="comment"></textarea>
     <a href=""><button class="btn btn-default"  type="submit" ng-click="addComment(comment)">Comment</button></a>
-  </div>
 
+  </div>
 
 
+<div id="bottom"></div>
 </div>
diff --git a/public/app/services/services.js b/public/app/services/services.js
index 445c3c3..abea8dc 100644
--- a/public/app/services/services.js
+++ b/public/app/services/services.js
@@ -61,8 +61,9 @@ angular.module('iGrow.services', [])
      });
   };
  
+
  var addNewComment = function(text,user){
-  console.log(text);
+
      return $http({
       method:'POST',
       url:'/api/1/'+ user,
diff --git a/public/styles/style.css b/public/styles/style.css
index be89619..3f6d63f 100644
--- a/public/styles/style.css
+++ b/public/styles/style.css
@@ -36,11 +36,13 @@ body {
   margin-bottom: 10px;
   margin-left: 10px;
   margin-right: 10px;
-  background-color: gray;
+  background-color: white;
   opacity:0.7 ;
-  color: white;
+  border-radius: 4px;
+  /*color: white;*/
 }
-.commentStyle{
+
+.commentDiv{
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 10px;
@@ -49,16 +51,23 @@ body {
   opacity:0.7
 }
 
-.commntDIV{
-  background-color: white;
-}
 
-#comment{
-  background-color: gray;
-  opacity:0.7 ;
+
+  #comment{
+    background-color: gray;
+    opacity:0.7 ;
+    border-radius: 4px;
+  }
+
+#scrollArea {
+  overflow: auto;
 }
 
 
+#bottom {
+  display: block;
+  margin-top: 2000px;
+}
 
 
 
@@ -67,6 +76,7 @@ body {
    font-weight: bold;
     border: none;
     color: white;
+    border-radius: 4px;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
@@ -79,3 +89,36 @@ body {
     margin: 30px;
     float: center;
   }
+
+  .Fbutton {
+    background-color: #4CAF50; /* Green */
+    padding: 32px 16px;
+    border: none;
+    color: white;
+    width: 250px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+     -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    border: 2px solid #4CAF50; /* Green */
+     border-radius: 4px;
+}
+.Fbutton:hover {
+    background-color: white; /* Green */
+    color: black;
+}
+
+.friendsbutton {
+    background-color: #e7e7e7; color: black;; /* Green */
+    border: none;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+     border-radius: 4px;
+     margin-right: 20px;
+}
\ No newline at end of file
diff --git a/server/comments/commentController.js b/server/comments/commentController.js
index 18094dc..648939a 100644
--- a/server/comments/commentController.js
+++ b/server/comments/commentController.js
@@ -25,7 +25,6 @@ module.exports = {
      // console.log(friendid,"this is the friend name")
      findOneUser({username:username})
      .then(function (user){
-      //console.log(user,"inside userttttttttttttttttttttttttttttttttt")
      	if (user){
         console.log(user,"user in newComment");
      		return user
@@ -39,8 +38,10 @@ module.exports = {
 	    .then(function(newComment){
 	    	user.comments.push(newComment._id);
         user.save();
-          
+
+
 	      res.json(friendName);
+
 	    })
 	    .catch(function(error){
 	      res.send(204)
@@ -48,6 +49,7 @@ module.exports = {
 	  })
     }
 },
+
 getAllComments:function(req,res,next){
    var token = req.headers['x-access-token'];
       //decoded user token