diff --git a/backend/app/index.js b/backend/app/index.js
index 2e924b5d8b21eb8f3dfa8b1051091820d5dc42a7..615a435393dd98e8a9d55e7bef6ecbd7b37b5dd5 100644
--- a/backend/app/index.js
+++ b/backend/app/index.js
@@ -14,7 +14,6 @@ app.use(bodyParser.urlencoded({ extended: false }))
 app.use(bodyParser.json())
 app.use(cors())
 
-var people_path = '/people'
 
 function end(res,err) {
   if (err) {
@@ -24,6 +23,8 @@ function end(res,err) {
   }
 }
 
+var people_path = '/people'
+
 app.get(people_path,function (req,res) {
   people.index(function (err,people) {
     res.send(people)
@@ -43,6 +44,12 @@ app.put(people_path,function (req,res) {
   })
 })
 
+app.delete(people_path+"/:person_id/pets/:petname",function (req,res) {
+  people.removePet(req.params.person_id,req.params.petname, function (err) {
+    end(res,err)
+  })
+})
+
 app.delete(people_path+"/:person_id",function (req,res) {
   people.remove(req.params.person_id,  function (err) {
     end(res,err)
@@ -55,10 +62,5 @@ app.post(people_path+"/pets",function (req,res) {
   })
 })
 
-app.delete(people_path+"/pets",function (req,res) {
-  people.removePet(req.body.person_id,req.body.petname, function (err) {
-    end(res,err)
-  })
-})
 
 app.listen(port)
diff --git a/backend/app/people/people.js b/backend/app/people/people.js
index eb26dfaf32ea78df21d3137eb8a9c748f744856e..b323626fa462cdc720327aa177a66358c6d7c42c 100644
--- a/backend/app/people/people.js
+++ b/backend/app/people/people.js
@@ -7,7 +7,7 @@ db.once('open',function () {
   people.model = mongoose.model('People',{ name: String, pets: Array })
 
   people.index = function (callback) {
-    people.model.find({},callback)
+    people.model.find({}, callback)
   }
 
   people.create = function (personName, callback) {
@@ -15,27 +15,27 @@ db.once('open',function () {
     newPeople.save(callback)
   }
 
-  people.modify = function (id,name,callback) {
+  people.modify = function (id, name, callback) {
     people.model.findById(id).then(function (person) {
       person.name = name
       person.save(callback)
     })
   }
 
-  people.remove = function (id,callback) {
+  people.remove = function (id, callback) {
     people.model.findById(id).remove(callback)
   }
 
-  people.addPet = function (id,pet_name,callback) {
+  people.addPet = function (id, pet_name, callback) {
     people.model.findById(id).then(function (person) {
       person.pets.push(pet_name)
       person.save(callback)
     })
   }
 
-  people.removePet = function (id, pet_name , callback) {
+  people.removePet = function (id, pet_name, callback) {
     people.model.findById(id).then(function (person) {
-      person.pets.remove(pet_name)
+      person.pets.splice(person.pets.indexOf(pet_name),1)
       person.save(callback)
     })
   }
diff --git a/frontend/app/assets/css/flatten.css b/frontend/app/assets/css/flatten.css
deleted file mode 100644
index 99ee48895c8aa782bade6ba6c02da3358573e0cd..0000000000000000000000000000000000000000
--- a/frontend/app/assets/css/flatten.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.cfield{
-  margin-bottom: 30px;
-}
diff --git a/frontend/app/assets/css/people.css b/frontend/app/assets/css/people.css
new file mode 100644
index 0000000000000000000000000000000000000000..1c1f25940e3eb07ba0cd5435a3cdb248973d19fc
--- /dev/null
+++ b/frontend/app/assets/css/people.css
@@ -0,0 +1,7 @@
+.margin {
+  margin-bottom: 20px;
+}
+
+.name {
+  margin: 30px;
+}
diff --git a/frontend/app/core/people.js b/frontend/app/core/people.js
index 030cfa8c403bcbf01d29e92c1c31cda6b6e3255a..9c87a33320ec6c3850351b5a6c92421d2377840b 100644
--- a/frontend/app/core/people.js
+++ b/frontend/app/core/people.js
@@ -15,6 +15,16 @@ app.service('people', function ($http) {
     $http.put('http://127.0.0.1:8000/people',{person_id: item._id, name: item.name})
     .then(callback)
   }
+
+  this.addPet = function (item,pet_name,callback) {
+    $http.post('http://127.0.0.1:8000/people/pets',{person_id: item._id, petname: pet_name})
+    .then(callback)
+  }
+
+  this.removePet = function (item, pet_name, callback) {
+    $http.delete('http://127.0.0.1:8000/people/'+item._id+'/pets/'+pet_name)
+    .then(callback)
+  }
 })
 
 app.controller('peopleCtrl',function ($scope,people) {
@@ -54,4 +64,17 @@ app.controller('peopleCtrl',function ($scope,people) {
     })
   }
 
+  $scope.addPet = function (person,pet) {
+    people.addPet(person, pet, function () {
+      self.load()
+      $scope.pet = ''
+    })
+  }
+
+  $scope.removePet = function (person,pet) {
+    people.removePet(person, pet, function () {
+      self.load()
+    })
+  }
+
 })
diff --git a/frontend/app/index.html b/frontend/app/index.html
index 95cbd3c946db0c121dfc18cca0730e3f8a585253..0ee07fbcbc978e6fcaf29897f59695c52b55da4b 100644
--- a/frontend/app/index.html
+++ b/frontend/app/index.html
@@ -1,10 +1,10 @@
 <html>
 	<head>
-		<title>Flatten!</title>
+		<title>People!</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" href="assets/css/main.css" />
-		<link rel="stylesheet" href="assets/css/flatten.css" />
+		<link rel="stylesheet" href="assets/css/people.css" />
 	</head>
 	<body ng-app='daa'>
     <div ng-controller='peopleCtrl as $ctrl'>
@@ -24,13 +24,31 @@
           </div>
           <hr/>
           <div class="box" ng-repeat='i in people_list'>
-						<span ng-hide='editing'>{{i.name}}</span>
-						<button ng-hide='editing' ng-click='edit(i.name)'>edit</button>
-						<input ng-show='editing' class="text" ng-model='e'/>
-						<button ng-click='save(i,e)' ng-show='editing'>save</button>
-            <section class='align-right'>
-              <button class='align-right' ng-click='remove(i)'>Trash</button>
-            </section>
+						<!-- just show name -->
+						<div class="row">
+							<div class="12u margin">
+								<span class='name' ng-hide='editing'>{{i.name}}</span>
+								<button ng-hide='editing' ng-click='edit(i.name)'>edit</button>
+								<button ng-click='remove(i)'>Trash</button>
+								<!-- hide name and show input text -->
+								<input ng-show='editing' class="text" ng-model='e'/>
+								<button ng-click='save(i,e)' ng-show='editing'>save</button>
+							</div>
+							<div class="12u margin">
+								<!-- pets -->
+								<button ng-click='removePet(i,p)' ng-repeat='p in i.pets'>
+									{{p}} X
+								</button>
+							</div>
+
+							<div class="10u">
+								<input type="text" ng-model='pet'>
+							</div>
+							<div class="2u margin">
+								<button ng-click='addPet(i,pet)'>add</button>
+							</div>
+						</div>
+
           </div>
         </div>
       </section>