diff --git a/app/app.animations.css b/app/app.animations.css
new file mode 100644
index 000000000..175320b50
--- /dev/null
+++ b/app/app.animations.css
@@ -0,0 +1,67 @@
+/* Animate `ngRepeat` in `phoneList` component */
+.phone-list-item.ng-enter,
+.phone-list-item.ng-leave,
+.phone-list-item.ng-move {
+  overflow: hidden;
+  transition: 0.5s linear all;
+}
+
+.phone-list-item.ng-enter,
+.phone-list-item.ng-leave.ng-leave-active,
+.phone-list-item.ng-move {
+  height: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.phone-list-item.ng-enter.ng-enter-active,
+.phone-list-item.ng-leave,
+.phone-list-item.ng-move.ng-move-active {
+  height: 120px;
+  margin-bottom: 20px;
+  opacity: 1;
+  padding-bottom: 4px;
+  padding-top: 15px;
+}
+
+/* Animate view transitions with `ngView` */
+.view-container {
+  position: relative;
+}
+
+.view-frame {
+  margin-top: 20px;
+}
+
+.view-frame.ng-enter,
+.view-frame.ng-leave {
+  background: white;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.view-frame.ng-enter {
+  animation: 1s fade-in;
+  z-index: 100;
+}
+
+.view-frame.ng-leave {
+  animation: 1s fade-out;
+  z-index: 99;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Older browsers might need vendor-prefixes for keyframes and animation! */
diff --git a/app/app.animations.js b/app/app.animations.js
new file mode 100644
index 000000000..394fcc944
--- /dev/null
+++ b/app/app.animations.js
@@ -0,0 +1,43 @@
+'use strict';
+
+angular.
+  module('phonecatApp').
+  animation('.phone', function phoneAnimationFactory() {
+    return {
+      addClass: animateIn,
+      removeClass: animateOut
+    };
+
+    function animateIn(element, className, done) {
+      if (className !== 'selected') return;
+
+      element.css({
+        display: 'block',
+        position: 'absolute',
+        top: 500,
+        left: 0
+      }).animate({
+        top: 0
+      }, done);
+
+      return function animateInEnd(wasCanceled) {
+        if (wasCanceled) element.stop();
+      };
+    }
+
+    function animateOut(element, className, done) {
+      if (className !== 'selected') return;
+
+      element.css({
+        position: 'absolute',
+        top: 0,
+        left: 0
+      }).animate({
+        top: -500
+      }, done);
+
+      return function animateOutEnd(wasCanceled) {
+        if (wasCanceled) element.stop();
+      };
+    }
+  });
diff --git a/app/app.css b/app/app.css
index eb74556db..f4b45b02a 100644
--- a/app/app.css
+++ b/app/app.css
@@ -4,6 +4,7 @@ body {
 
 h1 {
   border-bottom: 1px solid gray;
+  margin-top: 0;
 }
 
 /* View: Phone list */
@@ -28,7 +29,7 @@ h1 {
 /* View: Phone detail */
 .phone {
   background-color: white;
-  border: 1px solid black;
+  display: none;
   float: left;
   height: 400px;
   margin-bottom: 2em;
@@ -37,6 +38,19 @@ h1 {
   width: 400px;
 }
 
+.phone:first-child {
+  display: block;
+}
+
+.phone-images {
+  background-color: white;
+  float: left;
+  height: 450px;
+  overflow: hidden;
+  position: relative;
+  width: 450px;
+}
+
 .phone-thumbs {
   list-style: none;
   margin: 0;
diff --git a/app/app.module.js b/app/app.module.js
index 651b0a20b..8c392c4d6 100644
--- a/app/app.module.js
+++ b/app/app.module.js
@@ -2,6 +2,7 @@
 
 // Define the `phonecatApp` module
 angular.module('phonecatApp', [
+  'ngAnimate',
   'ngRoute',
   'core',
   'phoneDetail',
diff --git a/app/index.html b/app/index.html
index abab94cf6..dd1e0891d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -5,11 +5,16 @@
     <title>Google Phone Gallery</title>
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
     <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="app.animations.css" />
+
+    <script src="lib/jquery/dist/jquery.js"></script>
     <script src="lib/angular/angular.js"></script>
+    <script src="lib/angular-animate/angular-animate.js"></script>
     <script src="lib/angular-resource/angular-resource.js"></script>
     <script src="lib/angular-route/angular-route.js"></script>
     <script src="app.module.js"></script>
     <script src="app.config.js"></script>
+    <script src="app.animations.js"></script>
     <script src="core/core.module.js"></script>
     <script src="core/checkmark/checkmark.filter.js"></script>
     <script src="core/phone/phone.module.js"></script>
@@ -21,7 +26,9 @@
   </head>
   <body>
 
-    <div ng-view></div>
+    <div class="view-container">
+      <div ng-view class="view-frame"></div>
+    </div>
 
   </body>
 </html>
diff --git a/app/phone-detail/phone-detail.template.html b/app/phone-detail/phone-detail.template.html
index 09061ce7a..f48657803 100644
--- a/app/phone-detail/phone-detail.template.html
+++ b/app/phone-detail/phone-detail.template.html
@@ -1,4 +1,8 @@
-<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
+<div class="phone-images">
+  <img ng-src="{{img}}" class="phone"
+      ng-class="{selected: img === $ctrl.mainImageUrl}"
+      ng-repeat="img in $ctrl.phone.images" />
+</div>
 
 <h1>{{$ctrl.phone.name}}</h1>
 
diff --git a/app/phone-list/phone-list.template.html b/app/phone-list/phone-list.template.html
index b0d81d4cb..90548f9f9 100644
--- a/app/phone-list/phone-list.template.html
+++ b/app/phone-list/phone-list.template.html
@@ -21,7 +21,8 @@
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
+            class="thumbnail phone-list-item">
           <a href="#!/phones/{{phone.id}}" class="thumb">
             <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
           </a>
diff --git a/e2e-tests/scenarios.js b/e2e-tests/scenarios.js
index e3620f391..1f074aca4 100644
--- a/e2e-tests/scenarios.js
+++ b/e2e-tests/scenarios.js
@@ -78,13 +78,13 @@ describe('PhoneCat Application', function() {
     });
 
     it('should display the first phone image as the main phone image', function() {
-      var mainImage = element(by.css('img.phone'));
+      var mainImage = element(by.css('img.phone.selected'));
 
       expect(mainImage.getAttribute('src')).toContain('img/phones/nexus-s.0.jpg');
     });
 
     it('should swap the main image when clicking on a thumbnail image', function() {
-      var mainImage = element(by.css('img.phone'));
+      var mainImage = element(by.css('img.phone.selected'));
       var thumbnails = element.all(by.css('.phone-thumbs img'));
 
       thumbnails.get(2).click();
diff --git a/karma.conf.js b/karma.conf.js
index c516ccc09..fb9318382 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -6,6 +6,7 @@ module.exports = function(config) {
 
     files: [
       'lib/angular/angular.js',
+      'lib/angular-animate/angular-animate.js',
       'lib/angular-resource/angular-resource.js',
       'lib/angular-route/angular-route.js',
       '../node_modules/angular-mocks/angular-mocks.js',
diff --git a/package-lock.json b/package-lock.json
index 1b812e96f..d68597d62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,6 +70,11 @@
       "resolved": "https://registry.npmjs.org/angular/-/angular-1.7.5.tgz",
       "integrity": "sha512-760183yxtGzni740IBTieNuWLtPNAoMqvmC0Z62UoU0I3nqk+VJuO3JbQAXOyvo3Oy/ZsdNQwrSTh/B0OQZjNw=="
     },
+    "angular-animate": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/angular-animate/-/angular-animate-1.7.5.tgz",
+      "integrity": "sha512-kU/fHIGf2a4a3bH7E1tzALTHk+QfoUSCK9fEcMFisd6ZWvNDwPzXWAilItqOC3EDiAXPmGHaNc9/aXiD9xrAxQ=="
+    },
     "angular-mocks": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/angular-mocks/-/angular-mocks-1.7.5.tgz",
@@ -2584,6 +2589,11 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
diff --git a/package.json b/package.json
index 2fa6b423e..6a4e433c1 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,11 @@
   "license": "MIT",
   "dependencies": {
     "angular": "1.7.x",
+    "angular-animate": "1.7.x",
     "angular-resource": "1.7.x",
     "angular-route": "1.7.x",
-    "bootstrap": "3.3.x"
+    "bootstrap": "3.3.x",
+    "jquery": "3.3.x"
   },
   "devDependencies": {
     "angular-mocks": "1.7.x",