diff --git a/src/main/java/org/springframework/samples/petclinic/repository/jdbc/JdbcPetRepositoryImpl.java b/src/main/java/org/springframework/samples/petclinic/repository/jdbc/JdbcPetRepositoryImpl.java
index 4bbd7d002..3c01abe78 100644
--- a/src/main/java/org/springframework/samples/petclinic/repository/jdbc/JdbcPetRepositoryImpl.java
+++ b/src/main/java/org/springframework/samples/petclinic/repository/jdbc/JdbcPetRepositoryImpl.java
@@ -162,7 +162,7 @@ public class JdbcPetRepositoryImpl implements PetRepository {
 		Map<String, String> paramMap = new HashMap<String, String>();
 		paramMap.put("query","%" + query + "%");
 		
-		return this.namedParameterJdbcTemplate.query("SELECT * FROM pets WHERE name LIKE :query", paramMap, new RowMapper<Pet>(){
+		return this.namedParameterJdbcTemplate.query("SELECT * FROM pets WHERE UPPER(name) LIKE UPPER(:query)", paramMap, new RowMapper<Pet>(){
 
 			@Override
 			public Pet mapRow(ResultSet rs, int idx) throws SQLException {
diff --git a/src/main/java/org/springframework/samples/petclinic/repository/jpa/JpaPetRepositoryImpl.java b/src/main/java/org/springframework/samples/petclinic/repository/jpa/JpaPetRepositoryImpl.java
index 6ba194ef0..a9b1f0675 100644
--- a/src/main/java/org/springframework/samples/petclinic/repository/jpa/JpaPetRepositoryImpl.java
+++ b/src/main/java/org/springframework/samples/petclinic/repository/jpa/JpaPetRepositoryImpl.java
@@ -72,7 +72,7 @@ public class JpaPetRepositoryImpl implements PetRepository {
 	@SuppressWarnings("unchecked")
 	@Override
 	public Collection<Pet> findByName(String query) throws DataAccessException {
-		return this.em.createQuery("SELECT pet FROM Pet pet WHERE pet.name like '%" + query + "%'").getResultList();
+		return this.em.createQuery("SELECT pet FROM Pet pet WHERE UPPER(pet.name) like UPPER('%" + query + "%')").getResultList();
 	}
 
 }
diff --git a/src/main/webapp/components/_partials/_modal_add_owner.html b/src/main/webapp/components/_partials/_modal_add_owner.html
index 1836f8509..46bc67e82 100644
--- a/src/main/webapp/components/_partials/_modal_add_owner.html
+++ b/src/main/webapp/components/_partials/_modal_add_owner.html
@@ -33,17 +33,17 @@
               </div>
               <div class="form-group">
                 <label for="occupation">Occupation</label>
-                <input type="text" class="form-control" id="occupation">
+                <input type="text" class="form-control" id="occupation" readonly>
               </div>
                <div class="form-group">
                 <label for="company">Company</label>
-                <input type="text" class="form-control" id="company">
+                <input type="text" class="form-control" id="company" readonly>
               </div>
             </div>
             <div class="col-md-4">
               <div class="form-group">
                 <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate">
+                <input type="text" class="form-control" id="birthDate" readonly>
               </div>
               <div class="form-group">
                 <label for="address">Address</label>
@@ -59,12 +59,12 @@
               </div>
               <div class="form-group">
                 <label for="email">Email</label>
-                <input type="text" class="form-control" id="email">
+                <input type="text" class="form-control" id="email" readonly>
               </div>
             </div>
             <div class="col-md-8 col-md-offset-2">
               <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close" ng-click="addOwner()">Add Owner</button>
+                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close" data-ng-click="addOwner()">Add Owner</button>
                 <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
               </div>
             </div>
@@ -130,11 +130,11 @@
             <div class="col-md-4 col-md-offset-2">
               <div class="form-group">
                 <label for="firstName">First Name</label>
-                <input type="text" class="form-control" id="firstName" value="Maria">
+                <input type="text" class="form-control" id="firstName" ng-model="currentOwner.firstName">
               </div>
               <div class="form-group">
                 <label for="lastName">Last Name</label>
-                <input type="text" class="form-control" id="lastName" value="Rodriguez">
+                <input type="text" class="form-control" id="lastName" ng-model="currentOwner.lastName">
               </div>
               <div class="form-group">
                 <label for="profileImg">Profile Photo</label>
@@ -142,38 +142,38 @@
               </div>
               <div class="form-group">
                 <label for="occupation">Occupation</label>
-                <input type="text" class="form-control" id="occupation" value="Accountant">
+                <input type="text" class="form-control" id="occupation" value="Accountant" readonly>
               </div>
                <div class="form-group">
                 <label for="company">Company</label>
-                <input type="text" class="form-control" id="company" value="Ledger Associates">
+                <input type="text" class="form-control" id="company" value="Ledger Associates" readonly>
               </div>
             </div>
             <div class="col-md-4">
               <div class="form-group">
                 <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate" value="04 Feb 1988">
+                <input type="text" class="form-control" id="birthDate" value="04 Feb 1988" readonly>
               </div>
               <div class="form-group">
                 <label for="address">Address</label>
-                <input type="text" class="form-control" id="address" value="345 Maple St.">
+                <input type="text" class="form-control" id="address" ng-model="currentOwner.address">
               </div>
               <div class="form-group">
                 <label for="city">City</label>
-                <input type="text" class="form-control" id="city" value="Madison">
+                <input type="text" class="form-control" id="city" ng-model="currentOwner.city">
               </div>
               <div class="form-group">
                 <label for="contactNumber">Contact Number</label>
-                <input type="text" class="form-control" id="contactNumber" value="6085557683">
+                <input type="text" class="form-control" id="contactNumber" ng-model="currentOwner.telephone">
               </div>
               <div class="form-group">
                 <label for="email">Email</label>
-                <input type="text" class="form-control" id="email" value="maria.escobito@gmail.com">
+                <input type="text" class="form-control" id="email" value="maria.escobito@gmail.com" readonly>
               </div>
             </div>
             <div class="col-md-8 col-md-offset-2">
               <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close" ng-click="addOwner()">Update Owner</button>
+                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close" ng-click="saveOwner()">Update Owner</button>
                 <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
               </div>
             </div>
diff --git a/src/main/webapp/components/_partials/_modal_add_pet.html b/src/main/webapp/components/_partials/_modal_add_pet.html
index 2ed8b7342..f34def502 100644
--- a/src/main/webapp/components/_partials/_modal_add_pet.html
+++ b/src/main/webapp/components/_partials/_modal_add_pet.html
@@ -1,7 +1,7 @@
 <!-- This partial include Add/Edit Pet and Success Modals -->
 
 <!-- Add New Pet Modal -->
-<div class="modal modal-owner fade" id="addPetModal" tabindex="-1">
+<div class="modal modal-owner fade" id="addPetModal" tabindex="-1" data-ng-controller="AddPetController">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -21,33 +21,28 @@
             <div class="col-md-4 col-md-offset-4">
               <div class="form-group">
                 <label for="firstName">Owner</label>
-                <input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
+                <input type="text" class="form-control" id="firstName" data-ng-value="currentOwner.firstName + ' ' + currentOwner.lastName" readonly>
               </div>
               <div class="form-group">
                 <label for="petName">Pet Name</label>
-                <input type="text" class="form-control" id="petName">
+                <input type="text" class="form-control" id="petName" data-ng-model="currentPet.name">
               </div>
               <div class="form-group">
                 <label for="petProfileImg">Pet Photo</label>
-                <input type="file" class="form-control-file" id="petProfileImg">
+                <input type="file" class="form-control-file" id="petProfileImg" data-ng-src="images/pet-default.jpg">
               </div>
               <div class="form-group">
                 <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate">
+                <input type="text" class="form-control" id="birthDate" data-ng-model="currentPet.birthDate" readonly>
               </div>
                <div class="form-group">
                 <label for="type">Type</label>
-                <select class="form-control" id="type">
-                  <option value="bird">bird</option>
-                  <option value="cat">cat</option>
-                  <option value="dog">dog</option>
-                  <option value="hamster">hamster</option>
-                  <option value="lizard">lizard</option>
-                  <option value="snake">snake</option>
+                <select class="form-control" id="type" data-ng-model="currentPet.type.id">
+                  <option data-ng-repeat="type in petTypes" data-ng-value="type.id" data-ng-bind="type.name"></option>
                 </select>
               </div>
               <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close">Add Pet</button>
+                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close" data-ng-click="save()">Add Pet</button>
                 <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
               </div>
             </div>
diff --git a/src/main/webapp/components/owners/OwnerController.js b/src/main/webapp/components/owners/OwnerController.js
index b9ee06c13..62c45a1d5 100644
--- a/src/main/webapp/components/owners/OwnerController.js
+++ b/src/main/webapp/components/owners/OwnerController.js
@@ -8,26 +8,27 @@ var OwnerController = ['$scope','$state','Owner',function($scope,$state,Owner) {
 	$scope.owners = Owner.query();
 }];
 
-var OwnerDetailsController = ['$scope','$stateParams','Owner', function($scope,$stateParams,Owner) {
-	
+var OwnerDetailsController = ['$scope','$rootScope','$stateParams','Owner', function($scope,$rootScope,$stateParams,Owner) {
+
 	var currentId = $stateParams.id;
 	var nextId = parseInt($stateParams.id) + 1;
 	var prevId = parseInt($stateParams.id) - 1;
-	
+
 	$scope.prevOwner = Owner.get({id:prevId});
 	$scope.nextOwner = Owner.get({id:nextId});
 	$scope.currentOwner = Owner.get($stateParams);
-	
+
 	$scope.saveOwner = function(){
 		owner = $scope.currentOwner;
 		Owner.save(owner);
 	}
+
 }];
 
 var AddOwnerController = ['$scope','Owner', function($scope,Owner) {
-	
+
 	$scope.owner={id:0,pets:[]};
-	
+
 	$scope.addOwner = function(){
 		Owner.save($scope.owner);
 	}
diff --git a/src/main/webapp/components/owners/owner_details.html b/src/main/webapp/components/owners/owner_details.html
index c2080254d..f56cbeaf0 100644
--- a/src/main/webapp/components/owners/owner_details.html
+++ b/src/main/webapp/components/owners/owner_details.html
@@ -59,13 +59,13 @@
         <!-- List group -->
         <ul class="list-group">
           <li class="list-group-item">
-            <span class="glyphicon glyphicon-retweet" aria-hidden="true"></span> 
+            <span class="glyphicon glyphicon-retweet" aria-hidden="true"></span>
             <strong>Next Appointment:</strong> None</li>
           <li class="list-group-item">
-            <span class="glyphicon glyphicon-road" aria-hidden="true"></span> 
+            <span class="glyphicon glyphicon-road" aria-hidden="true"></span>
             <strong>Last Visited:</strong> 02 Feb 2015</li>
           <li class="list-group-item">
-            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 
+            <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
             <strong>Due Date:</strong> 14 Mar 2015</li>
         </ul>
       </div>
@@ -76,12 +76,12 @@
 <!-- Pets -->
 <section id="pets" class="sections sections-narrow">
   <div class="container">
-    <div class="action-items pull-right">
-      <a class="btn btn-primary pull-right action-item" data-toggle="modal" data-target="#addPetModal">
+    <div class="action-wrappers pull-right">
+      <a class="btn btn-primary pull-right action-item" data-toggle="modal" data-target="#addPetModal" data-ng-click="setCurrentOwner()">
         <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add New Pet
       </a>
       <div class="pull-right action-item">
-        View as 
+        View as
         <div class="btn-group">
           <a class="btn btn-default">
             <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
@@ -129,521 +129,9 @@
   </div>
 </section>
 
-<!-- Add Owner Modal -->
-<div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Add An Owner</h1>
-              <em class="text-muted">Fill up pet owners basic information and contact details</em>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-2">
-              <div class="form-group">
-                <label for="firstName">First Name</label>
-                <input type="text" class="form-control" id="firstName">
-              </div>
-              <div class="form-group">
-                <label for="lastName">Last Name</label>
-                <input type="text" class="form-control" id="lastName">
-              </div>
-              <div class="form-group">
-                <label for="profileImg">Profile Photo</label>
-                <input type="file" class="form-control-file" id="profileImg">
-              </div>
-              <div class="form-group">
-                <label for="occupation">Occupation</label>
-                <input type="text" class="form-control" id="occupation">
-              </div>
-               <div class="form-group">
-                <label for="company">Company</label>
-                <input type="text" class="form-control" id="company">
-              </div>
-            </div>
-            <div class="col-md-4">
-              <div class="form-group">
-                <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate">
-              </div>
-              <div class="form-group">
-                <label for="address">Address</label>
-                <input type="text" class="form-control" id="address">
-              </div>
-              <div class="form-group">
-                <label for="city">City</label>
-                <input type="text" class="form-control" id="city">
-              </div>
-              <div class="form-group">
-                <label for="contactNumber">Contact Number</label>
-                <input type="text" class="form-control" id="contactNumber">
-              </div>
-              <div class="form-group">
-                <label for="email">Email</label>
-                <input type="text" class="form-control" id="email">
-              </div>
-            </div>
-            <div class="col-md-8 col-md-offset-2">
-              <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Add Owner</button>
-                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Add Owner Success Modal -->
-<div class="modal modal-owner fade" id="addOwnerSuccessModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Owner added successfully!</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <div class="alert alert-success" role="alert">
-                Well done! You've successfully added an a new owner.
-              </div>
-              <div class="form-group form-group-action">
-                <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
-                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Edit Owner Modal -->
-<div class="modal modal-owner fade" id="editOwnerModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Edit Owner</h1>
-              <em class="text-muted">Fill up pet owners basic information and contact details</em>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-2">
-              <div class="form-group">
-                <label for="firstName">First Name</label>
-                <input type="text" class="form-control" id="firstName" ng-model="currentOwner.firstName">
-              </div>
-              <div class="form-group">
-                <label for="lastName">Last Name</label>
-                <input type="text" class="form-control" id="lastName" ng-model="currentOwner.lastName">
-              </div>
-              <div class="form-group">
-                <label for="profileImg">Profile Photo</label>
-                <input type="file" class="form-control-file" id="profileImg">
-              </div>
-              <div class="form-group">
-                <label for="occupation">Occupation</label>
-                <input type="text" class="form-control" id="occupation" value="Accountant">
-              </div>
-               <div class="form-group">
-                <label for="company">Company</label>
-                <input type="text" class="form-control" id="company" value="Ledger Associates">
-              </div>
-            </div>
-            <div class="col-md-4">
-              <div class="form-group">
-                <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate" value="04 Feb 1988">
-              </div>
-              <div class="form-group">
-                <label for="address">Address</label>
-                <input type="text" class="form-control" id="address" ng-model="currentOwner.address">
-              </div>
-              <div class="form-group">
-                <label for="city">City</label>
-                <input type="text" class="form-control" id="city" ng-model="currentOwner.city">
-              </div>
-              <div class="form-group">
-                <label for="contactNumber">Contact Number</label>
-                <input type="text" class="form-control" id="contactNumber" ng-model="currentOwner.telephone">
-              </div>
-              <div class="form-group">
-                <label for="email">Email</label>
-                <input type="text" class="form-control" id="email" value="maria.escobito@gmail.com">
-              </div>
-            </div>
-            <div class="col-md-8 col-md-offset-2">
-              <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close" ng-click="saveOwner()">Update Owner</button>
-                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Edit Owner Success Modal -->
-<div class="modal modal-owner fade" id="editOwnerSuccessModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Owner updated successfully!</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <div class="alert alert-success" role="alert">
-                Well done! You've successfully updated an owner.
-              </div>
-              <div class="form-group form-group-action">
-                <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
-                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Add New Pet Modal -->
-<div class="modal modal-owner fade" id="addPetModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <h1 class="sub-header">Add a New Pet</h1>
-              <em class="text-muted">Fill up pet basic information</em>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <div class="form-group">
-                <label for="firstName">Owner</label>
-                <input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
-              </div>
-              <div class="form-group">
-                <label for="petName">Pet Name</label>
-                <input type="text" class="form-control" id="petName">
-              </div>
-              <div class="form-group">
-                <label for="petProfileImg">Pet Photo</label>
-                <input type="file" class="form-control-file" id="petProfileImg">
-              </div>
-              <div class="form-group">
-                <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate">
-              </div>
-               <div class="form-group">
-                <label for="type">Type</label>
-                <select class="form-control" id="type">
-                  <option value="bird">bird</option>
-                  <option value="cat">cat</option>
-                  <option value="dog">dog</option>
-                  <option value="hamster">hamster</option>
-                  <option value="lizard">lizard</option>
-                  <option value="snake">snake</option>
-                </select>
-              </div>
-              <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close">Add Pet</button>
-                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Add New Pet Success Modal -->
-<div class="modal modal-owner fade" id="addPetSuccessModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Pet added successfully!</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <div class="alert alert-success" role="alert">
-                Well done! You've successfully added a pet.
-              </div>
-              <div class="form-group form-group-action">
-                <button class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitModal" data-dismiss="modal" aria-label="Close">Add New Visit</button>
-                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Not Now</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Edit Pet Modal -->
-<div class="modal modal-owner fade" id="editPetModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <h1 class="sub-header">Edit Pet</h1>
-              <em class="text-muted">Fill up pet basic information</em>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <div class="form-group">
-                <label for="firstName">Owner</label>
-                <input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
-              </div>
-              <div class="form-group">
-                <label for="petName">Pet Name</label>
-                <input type="text" class="form-control" id="petName" value="Basil">
-              </div>
-              <div class="form-group">
-                <label for="petProfileImg">Pet Photo</label>
-                <input type="file" class="form-control-file" id="petProfileImg">
-              </div>
-              <div class="form-group">
-                <label for="birthDate">Birth Date</label>
-                <input type="text" class="form-control" id="birthDate" value="08 August 2012">
-              </div>
-               <div class="form-group">
-                <label for="type">Type</label>
-                <select class="form-control" id="type">
-                  <option value="bird">bird</option>
-                  <option value="cat">cat</option>
-                  <option value="dog">dog</option>
-                  <option value="hamster" selected>hamster</option>
-                  <option value="lizard">lizard</option>
-                  <option value="snake">snake</option>
-                </select>
-              </div>
-              <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editPetSuccessModal" data-dismiss="modal" aria-label="Close">Update Pet</button>
-                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Edit Pet Success Modal -->
-<div class="modal modal-owner fade" id="editPetSuccessModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Pet update successfully!</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <div class="alert alert-success" role="alert">
-                Well done! You've successfully update a pet.
-              </div>
-              <div class="form-group form-group-action">
-                <a href="owner_details.html" class="btn btn-primary">View owner's pets</a>
-                <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Add Pet Visit Modal -->
-<div class="modal modal-owner fade" id="addPetVisitModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <h1 class="sub-header">New Visit</h1>
-              <em class="text-muted">Fill up pet visit basic information</em>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-4 col-md-offset-4">
-              <div class="form-group">
-                <label for="petName">Pet Name</label>
-                <input type="text" class="form-control" id="petName" value="Basil" readonly>
-              </div>
-              <div class="form-group">
-                <label for="visitDate">Visit Date</label>
-                <input type="text" class="form-control" id="visitDate">
-              </div>
-              <div class="form-group">
-                <label for="visitDesc">Description</label>
-                <textarea class="form-control" rows="3" id="visitDesc"></textarea>
-              </div> 
-              <div class="form-group form-group-action">
-                <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitSuccessModal" data-dismiss="modal" aria-label="Close">Add Visit</button>
-                <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Edit Pet Success Modal -->
-<div class="modal modal-owner fade" id="addPetVisitSuccessModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <h1 class="sub-header">Pet visit added successfully!</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="modal-body">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-              <div class="alert alert-success" role="alert">
-                Well done! You've successfully added a pet visit.
-              </div>
-              <div class="form-group form-group-action">
-                <button class="btn btn-primary" data-dismiss="modal" aria-label="Close">Close</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- Search Result Modal -->
-<div class="modal modal-search fade" id="searchModal" tabindex="-1">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
-        <div class="container">
-        <h1 class="sub-header">Search PetClinic</h1>
-        <em class="text-muted">Start typing to search for owner, pets, or veterinarians...</em>
-      </div>
-    </div>
-    <div class="modal-body">
-      <div class="container">
-        <form>
-          <div class="form-group">
-            <input type="search" class="form-control">
-            <button class="btn btn-default" type="button">
-              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
-            </button>
-          </div>
-        </form>
-        
-        <!-- ### TODO:
-        Note by AA: I'm just showing the results for reference purpose
-        This should be hidden by default and only be shown if there's result -->
-        <div class="modal-seach-result">
-          <h2 class="form-group-heading">Result of your search query</h2>
-          <div class="row thumbnail-wrapper">
-            <div class="col-md-3" ng-repeat="x in [1,2,3,4,5,6,7]">
-              <div class="thumbnail">
-                <a href="#"><img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
-                <div class="caption">
-                  <h3 class="caption-heading"><a href="#">Eduardo Rodriguez</a></h3>
-                  <p class="caption-meta">2693 Commerce St., McFarland</p>
-                  <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- /row -->
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+<!-- Add Owner modal -->
+<data-ng-include src="'components/_partials/_modal_add_owner.html'"></data-ng-include>
+<!-- Add Pet modal -->
+<data-ng-include src="'components/_partials/_modal_add_pet.html'"></data-ng-include>
+<!-- Add Pet Visit modal -->
+<data-ng-include src="'components/_partials/_modal_add_pet_visit.html'"></data-ng-include>
diff --git a/src/main/webapp/components/pets/PetController.js b/src/main/webapp/components/pets/PetController.js
index 72186184d..768cb69be 100644
--- a/src/main/webapp/components/pets/PetController.js
+++ b/src/main/webapp/components/pets/PetController.js
@@ -5,7 +5,25 @@ var PetController = ['$scope', 'Pet', function($scope, Pet) {
 		    scrollTop: $("#pets").offset().top
 		}, 1000);
 	});
-	
+
 	$scope.pets = Pet.query();
-	
+
+}];
+
+var AddPetController = ['$scope','$rootScope','PetType','OwnerPet',function($scope,$rootScope,PetType,OwnerPet) {
+	$scope.petTypes = PetType.query();
+	$scope.currentPet = {type:{}};
+
+	$scope.save = function(){
+		currentOwnerId = $scope.currentOwner.id;
+
+		for (i=0; i<$scope.petTypes.length; i++){
+			if ($scope.petTypes[i].id == $scope.currentPet.type.id){
+				$scope.currentPet.type.name = $scope.petTypes[i].name;
+			}
+		}
+		OwnerPet.save({ownerId:currentOwnerId},$scope.currentPet, function(pet) {
+			$scope.currentOwner.pets.push(pet);
+		});
+	};
 }];
\ No newline at end of file
diff --git a/src/main/webapp/images/avatars/owner11.jpg b/src/main/webapp/images/avatars/owner11.jpg
new file mode 100644
index 000000000..2458a42b4
Binary files /dev/null and b/src/main/webapp/images/avatars/owner11.jpg differ
diff --git a/src/main/webapp/images/avatars/owner12.jpg b/src/main/webapp/images/avatars/owner12.jpg
new file mode 100644
index 000000000..409db1437
Binary files /dev/null and b/src/main/webapp/images/avatars/owner12.jpg differ
diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
index 07e4df255..5d58cba13 100644
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@@ -21,12 +21,6 @@
 
     <!-- Search modal -->
     <data-ng-include src="'components/_partials/_modal_search.html'"></data-ng-include>
-    <!-- Add Owner modal -->
-    <data-ng-include src="'components/_partials/_modal_add_owner.html'"></data-ng-include>
-    <!-- Add Pet modal -->
-    <data-ng-include src="'components/_partials/_modal_add_pet.html'"></data-ng-include>
-    <!-- Add Pet Visit modal -->
-    <data-ng-include src="'components/_partials/_modal_add_pet_visit.html'"></data-ng-include>
 
     <!--<script src="http://code.jquery.com/jquery.js"></script>-->
     <script src="plugins/jquery/jquery-2.1.0.min.js"></script>
@@ -44,7 +38,7 @@
     <script src="js/lib/angular-cookies.js"></script>
     <script src="js/lib/angular-storage.js"></script>
     <script src="js/lib/angular-mocks.js"></script>
-    
+
     <script src="services/services.js"></script>
     <script src="components/main/MainController.js"></script>
     <script src="components/veterinarians/VeterinarianController.js"></script>
diff --git a/src/main/webapp/js/app.js b/src/main/webapp/js/app.js
index 90283e6dd..3083b7074 100644
--- a/src/main/webapp/js/app.js
+++ b/src/main/webapp/js/app.js
@@ -9,9 +9,9 @@ app.constant('context', '/petclinic');
 app.config(['stateHelperProvider','$urlRouterProvider','$urlMatcherFactoryProvider',function(stateHelperProvider,$urlRouterProvider,$urlMatcherFactoryProvider) {
 
 	$urlRouterProvider.otherwise("/");
-	
+
 	$urlMatcherFactoryProvider.strictMode(false)
-	
+
 	stateHelperProvider.state({
 		name: "landing",
 		url: "/",
@@ -49,7 +49,7 @@ app.config(['stateHelperProvider','$urlRouterProvider','$urlMatcherFactoryProvid
 		controller: "OwnerDetailsController",
 		data: {requireLogin : true}
 	});
-	
+
 } ]);
 
 /** Controllers **/
@@ -57,6 +57,7 @@ app.controller('MainController', MainController);
 app.controller('DashboardController', DashboardController);
 app.controller('VeterinarianController', VeterinarianController);
 app.controller('PetController', PetController);
+app.controller('AddPetController', AddPetController);
 app.controller('OwnerController', OwnerController);
 app.controller('OwnerDetailsController', OwnerDetailsController);
 app.controller('AddOwnerController', AddOwnerController);
@@ -66,8 +67,10 @@ app.controller('SearchController', SearchController);
 /** Services **/
 app.factory('Owner', Owner);
 app.factory('Pet', Pet);
+app.factory('OwnerPet', OwnerPet);
 app.factory('Vet', Vet);
 app.factory('Visit', Visit);
+app.factory('PetType', PetType);
 app.factory('MockService', MockService);
 
 /** Directives **/
@@ -77,7 +80,7 @@ app.directive('scrollToTarget', function() {
     element.bind('click', function() {
     	angular.element('html, body').stop().animate({
 			scrollTop: angular.element(angular.element(element).attr('href')).offset().top - 20
-		}, 1500); 
+		}, 1500);
 		return false;
     });
   };
diff --git a/src/main/webapp/services/services.js b/src/main/webapp/services/services.js
index 062ed5db7..81d61e7b8 100644
--- a/src/main/webapp/services/services.js
+++ b/src/main/webapp/services/services.js
@@ -18,6 +18,10 @@ var Visit = ['$resource','context', function($resource, context) {
 	return $resource(context + '/api/pets/:petId/visits', {petId : '@id'});
 }];
 
+var PetType = ['$resource','context', function($resource, context) {
+	return $resource(context + '/api/pets/types');
+}];
+
 var MockService = ['$httpBackend', '$http', '$q', 'context', function($httpBackend, $http, $q, context) {
 	return {
 		mock : function(useMockData) {
@@ -31,7 +35,8 @@ var MockService = ['$httpBackend', '$http', '$q', 'context', function($httpBacke
 				        $http.get(context + '/static/mock-data/pets.json'),
 				        $http.get(context + '/static/mock-data/vets.json'),
 				        $http.get(context + '/static/mock-data/owners.json'),
-				        $http.get(context + '/static/mock-data/owner_one.json')
+				        $http.get(context + '/static/mock-data/owner_one.json'),
+				        $http.get(context + '/static/mock-data/pettypes.json'),
 				]).then(function(data) {
 					console.log("Mocking /api/pets");
 					$httpBackend.whenGET(context + '/api/pets').respond(data[0].data);
@@ -41,6 +46,8 @@ var MockService = ['$httpBackend', '$http', '$q', 'context', function($httpBacke
 					$httpBackend.whenGET(context + '/api/owners').respond(data[2].data);
 					console.log("Mocking /api/owners/1");
 					$httpBackend.whenGET(context + '/api/owners/1').respond(data[3].data);
+					console.log("Mocking /api/pets/types");
+					$httpBackend.whenGET(context + '/api/pets/types').respond(data[4].data);
 					
 					console.log("Setting up passthrough for other urls");
 					var passThroughRegex = new RegExp('/');
diff --git a/src/main/webapp/static/mock-data/pettypes.json b/src/main/webapp/static/mock-data/pettypes.json
new file mode 100644
index 000000000..46a1248b4
--- /dev/null
+++ b/src/main/webapp/static/mock-data/pettypes.json
@@ -0,0 +1,25 @@
+[ {
+  "id" : 5,
+  "name" : "bird",
+  "new" : false
+}, {
+  "id" : 1,
+  "name" : "cat",
+  "new" : false
+}, {
+  "id" : 2,
+  "name" : "dog",
+  "new" : false
+}, {
+  "id" : 6,
+  "name" : "hamster",
+  "new" : false
+}, {
+  "id" : 3,
+  "name" : "lizard",
+  "new" : false
+}, {
+  "id" : 4,
+  "name" : "snake",
+  "new" : false
+} ]
\ No newline at end of file