diff --git a/src/main/webapp/static/.bowerrc b/src/main/webapp/static/.bowerrc
new file mode 100644
index 000000000..69fad3580
--- /dev/null
+++ b/src/main/webapp/static/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}
diff --git a/src/main/webapp/static/.editorconfig b/src/main/webapp/static/.editorconfig
new file mode 100644
index 000000000..c2cdfb8ad
--- /dev/null
+++ b/src/main/webapp/static/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/src/main/webapp/static/.gitattributes b/src/main/webapp/static/.gitattributes
new file mode 100644
index 000000000..212566614
--- /dev/null
+++ b/src/main/webapp/static/.gitattributes
@@ -0,0 +1 @@
+* text=auto
\ No newline at end of file
diff --git a/src/main/webapp/static/.gitignore b/src/main/webapp/static/.gitignore
new file mode 100644
index 000000000..f9a9ad30e
--- /dev/null
+++ b/src/main/webapp/static/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+.tmp
+.sass-cache
+bower_components
diff --git a/src/main/webapp/static/.jshintrc b/src/main/webapp/static/.jshintrc
new file mode 100644
index 000000000..e0e07301b
--- /dev/null
+++ b/src/main/webapp/static/.jshintrc
@@ -0,0 +1,21 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "jquery": true
+}
diff --git a/src/main/webapp/static/.yo-rc.json b/src/main/webapp/static/.yo-rc.json
new file mode 100644
index 000000000..7a2135249
--- /dev/null
+++ b/src/main/webapp/static/.yo-rc.json
@@ -0,0 +1,3 @@
+{
+  "generator-mocha": {}
+}
\ No newline at end of file
diff --git a/src/main/webapp/static/Gruntfile.js b/src/main/webapp/static/Gruntfile.js
new file mode 100644
index 000000000..99758f3a6
--- /dev/null
+++ b/src/main/webapp/static/Gruntfile.js
@@ -0,0 +1,453 @@
+// Generated on 2015-01-19 using
+// generator-webapp 0.5.1
+'use strict';
+
+// # Globbing
+// for performance reasons we're only matching one level down:
+// 'test/spec/{,*/}*.js'
+// If you want to recursively match all subfolders, use:
+// 'test/spec/**/*.js'
+
+module.exports = function(grunt) {
+
+  // Time how long tasks take. Can help when optimizing build times
+  require('time-grunt')(grunt);
+
+  // Load grunt tasks automatically
+  require('load-grunt-tasks')(grunt);
+
+  // Configurable paths
+  var config = {
+    app: 'app',
+    dist: 'dist'
+  };
+
+  // Define the configuration for all the tasks
+  grunt.initConfig({
+
+    // Project settings
+    config: config,
+
+    // Watches files for changes and runs tasks based on the changed files
+    watch: {
+      bower: {
+        files: ['bower.json'],
+        tasks: ['wiredep']
+      },
+      js: {
+        files: ['<%= config.app %>/scripts/{,*/}*.js'],
+        tasks: ['jshint'],
+        options: {
+          livereload: true
+        }
+      },
+      jstest: {
+        files: ['test/spec/{,*/}*.js'],
+        tasks: ['test:watch']
+      },
+      gruntfile: {
+        files: ['Gruntfile.js']
+      },
+      sass: {
+        files: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
+        tasks: ['sass:server', 'autoprefixer']
+      },
+      styles: {
+        files: ['<%= config.app %>/styles/{,*/}*.css'],
+        tasks: ['newer:copy:styles', 'autoprefixer']
+      },
+      livereload: {
+        options: {
+          livereload: '<%= connect.options.livereload %>'
+        },
+        files: [
+          '<%= config.app %>/{,*/}*.html',
+          '.tmp/styles/{,*/}*.css',
+          '<%= config.app %>/images/{,*/}*'
+        ]
+      }
+    },
+
+    // The actual grunt server settings
+    connect: {
+      options: {
+        port: 9000,
+        open: true,
+        livereload: 35729,
+        // Change this to '0.0.0.0' to access the server from outside
+        hostname: '0.0.0.0'
+      },
+      livereload: {
+        options: {
+          middleware: function(connect) {
+            return [
+              connect.static('.tmp'),
+              connect().use('/bower_components', connect.static(
+                './bower_components')),
+              connect.static(config.app)
+            ];
+          }
+        }
+      },
+      test: {
+        options: {
+          open: false,
+          port: 9001,
+          middleware: function(connect) {
+            return [
+              connect.static('.tmp'),
+              connect.static('test'),
+              connect().use('/bower_components', connect.static(
+                './bower_components')),
+              connect.static(config.app)
+            ];
+          }
+        }
+      },
+      dist: {
+        options: {
+          base: '<%= config.dist %>',
+          livereload: false
+        }
+      }
+    },
+
+    // Empties folders to start fresh
+    clean: {
+      dist: {
+        files: [{
+          dot: true,
+          src: [
+            '.tmp',
+            '<%= config.dist %>/*',
+            '!<%= config.dist %>/.git*'
+          ]
+        }]
+      },
+      server: '.tmp'
+    },
+
+    // Make sure code styles are up to par and there are no obvious mistakes
+    jshint: {
+      options: {
+        jshintrc: '.jshintrc',
+        reporter: require('jshint-stylish')
+      },
+      all: [
+        'Gruntfile.js',
+        '<%= config.app %>/scripts/{,*/}*.js',
+        '!<%= config.app %>/scripts/vendor/*',
+        'test/spec/{,*/}*.js'
+      ]
+    },
+
+    // Mocha testing framework configuration options
+    mocha: {
+      all: {
+        options: {
+          run: true,
+          urls: [
+            'http://<%= connect.test.options.hostname %>:<%= connect.test.options.port %>/index.html'
+          ]
+        }
+      }
+    },
+
+    // Compiles Sass to CSS and generates necessary files if requested
+    sass: {
+      options: {
+        sourceMap: true,
+        includePaths: ['bower_components']
+      },
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.app %>/styles',
+          src: ['*.{scss,sass}'],
+          dest: '.tmp/styles',
+          ext: '.css'
+        }]
+      },
+      server: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.app %>/styles',
+          src: ['*.{scss,sass}'],
+          dest: '.tmp/styles',
+          ext: '.css'
+        }]
+      }
+    },
+
+    // Add vendor prefixed styles
+    autoprefixer: {
+      options: {
+        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
+      },
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '.tmp/styles/',
+          src: '{,*/}*.css',
+          dest: '.tmp/styles/'
+        }]
+      }
+    },
+
+    // Automatically inject Bower components into the HTML file
+    wiredep: {
+      app: {
+        ignorePath: /^\/|\.\.\//,
+        src: ['<%= config.app %>/index.html'],
+        exclude: [
+          'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js'
+        ]
+      },
+      sass: {
+        src: ['<%= config.app %>/styles/{,*/}*.{scss,sass}'],
+        ignorePath: /(\.\.\/){1,2}bower_components\//
+      }
+    },
+
+    // Renames files for browser caching purposes
+    rev: {
+      dist: {
+        files: {
+          src: [
+            '<%= config.dist %>/scripts/{,*/}*.js',
+            '<%= config.dist %>/styles/{,*/}*.css',
+            '<%= config.dist %>/images/{,*/}*.*',
+            '<%= config.dist %>/styles/fonts/{,*/}*.*',
+            '<%= config.dist %>/*.{ico,png}'
+          ]
+        }
+      }
+    },
+
+    // Reads HTML for usemin blocks to enable smart builds that automatically
+    // concat, minify and revision files. Creates configurations in memory so
+    // additional tasks can operate on them
+    // For Production
+    useminPrepare: {
+      options: {
+        dest: '<%= config.dist %>'
+      },
+      html: '<%= config.app %>/index.html'
+    },
+    // For Development
+    // useminPrepare: {
+    //   options: {
+    //     dest: '<%= config.dist %>',
+    //     flow: {
+    //       steps: {
+    //         js: ['concat'],
+    //         css: ['concat']
+    //       },
+    //       post: {}
+    //     }
+    //   },
+    //   html: '<%= config.app %>/index.html',
+    // },
+
+    // Performs rewrites based on rev and the useminPrepare configuration
+    usemin: {
+      options: {
+        assetsDirs: [
+          '<%= config.dist %>',
+          '<%= config.dist %>/images',
+          '<%= config.dist %>/styles'
+        ]
+      },
+      html: ['<%= config.dist %>/{,*/}*.html'],
+      css: ['<%= config.dist %>/styles/{,*/}*.css']
+    },
+
+    // The following *-min tasks produce minified files in the dist folder
+    imagemin: {
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.app %>/images',
+          src: '{,*/}*.{gif,jpeg,jpg,png}',
+          dest: '<%= config.dist %>/images'
+        }]
+      }
+    },
+
+    svgmin: {
+      dist: {
+        files: [{
+          expand: true,
+          cwd: '<%= config.app %>/images',
+          src: '{,*/}*.svg',
+          dest: '<%= config.dist %>/images'
+        }]
+      }
+    },
+
+    htmlmin: {
+      dist: {
+        options: {
+          collapseBooleanAttributes: true,
+          collapseWhitespace: true,
+          conservativeCollapse: true,
+          removeAttributeQuotes: true,
+          removeCommentsFromCDATA: true,
+          removeEmptyAttributes: true,
+          removeOptionalTags: true,
+          removeRedundantAttributes: true,
+          useShortDoctype: true
+        },
+        files: [{
+          expand: true,
+          cwd: '<%= config.dist %>',
+          src: '{,*/}*.html',
+          dest: '<%= config.dist %>'
+        }]
+      }
+    },
+
+    // By default, your `index.html`'s <!-- Usemin block --> will take care
+    // of minification. These next options are pre-configured if you do not
+    // wish to use the Usemin blocks.
+    // cssmin: {
+    //   dist: {
+    //     files: {
+    //       '<%= config.dist %>/styles/main.css': [
+    //         '.tmp/styles/{,*/}*.css',
+    //         '<%= config.app %>/styles/{,*/}*.css'
+    //       ]
+    //     }
+    //   }
+    // },
+    // uglify: {
+    //   dist: {
+    //     files: {
+    //       '<%= config.dist %>/scripts/scripts.js': [
+    //         '<%= config.dist %>/scripts/scripts.js'
+    //       ]
+    //     }
+    //   }
+    // },
+    // concat: {
+    //   dist: {}
+    // },
+
+    // Copies remaining files to places other tasks can use
+    copy: {
+      dist: {
+        files: [{
+          expand: true,
+          dot: true,
+          cwd: '<%= config.app %>',
+          dest: '<%= config.dist %>',
+          src: [
+            '*.{ico,png,txt}',
+            'images/{,*/}*.webp',
+            '{,*/}*.html',
+            'styles/fonts/{,*/}*.*'
+          ]
+        }, {
+          src: 'node_modules/apache-server-configs/dist/.htaccess',
+          dest: '<%= config.dist %>/.htaccess'
+        }, {
+          expand: true,
+          dot: true,
+          cwd: '.',
+          src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
+          dest: '<%= config.dist %>'
+        }]
+      },
+      styles: {
+        expand: true,
+        dot: true,
+        cwd: '<%= config.app %>/styles',
+        dest: '.tmp/styles/',
+        src: '{,*/}*.css'
+      }
+    },
+
+    // Run some tasks in parallel to speed up build process
+    concurrent: {
+      server: [
+        'sass:server',
+        'copy:styles'
+      ],
+      test: [
+        'copy:styles'
+      ],
+      dist: [
+        'sass',
+        'copy:styles',
+        'imagemin',
+        'svgmin'
+      ]
+    }
+  });
+
+
+  grunt.registerTask('serve',
+    'start the server and preview your app, --allow-remote for remote access',
+    function(target) {
+      if (grunt.option('allow-remote')) {
+        grunt.config.set('connect.options.hostname', '0.0.0.0');
+      }
+      if (target === 'dist') {
+        return grunt.task.run(['build', 'connect:dist:keepalive']);
+      }
+
+      grunt.task.run([
+        'clean:server',
+        'wiredep',
+        'concurrent:server',
+        'autoprefixer',
+        'connect:livereload',
+        'watch'
+      ]);
+    });
+
+  grunt.registerTask('server', function(target) {
+    grunt.log.warn(
+      'The `server` task has been deprecated. Use `grunt serve` to start a server.'
+    );
+    grunt.task.run([target ? ('serve:' + target) : 'serve']);
+  });
+
+  grunt.registerTask('test', function(target) {
+    if (target !== 'watch') {
+      grunt.task.run([
+        'clean:server',
+        'concurrent:test',
+        'autoprefixer'
+      ]);
+    }
+
+    grunt.task.run([
+      'connect:test',
+      'mocha'
+    ]);
+  });
+
+  grunt.registerTask('build', [
+    'clean:dist',
+    'wiredep',
+    'useminPrepare',
+    'concurrent:dist',
+    'autoprefixer',
+    'concat',
+    // For Development - Prevent minification
+    'cssmin',
+    'uglify',
+    'copy:dist',
+    // 'rev',
+    'usemin',
+    // For Development - Prevent minification
+    'htmlmin'
+  ]);
+
+  grunt.registerTask('default', [
+    'newer:jshint',
+    'test',
+    'build'
+  ]);
+};
diff --git a/src/main/webapp/static/README.md b/src/main/webapp/static/README.md
new file mode 100644
index 000000000..03e955b7c
--- /dev/null
+++ b/src/main/webapp/static/README.md
@@ -0,0 +1,41 @@
+Pet Clinic Front-end
+====================
+
+Pet Clinic Front-end is the static file for [Spring Pet Clinic repo](https://github.com/singularity-sg/spring-petclinic) client-side code. It is generated by using [Yoeman](http://yeoman.io/), The web's scaffolding tool for modern webapps.
+
+### Start here:
+
+1. Download and install [NodeJS](http://nodejs.org/) if you haven't installed it yet.
+2. Be sure you are at the root directory of the **spring-petclinic** repo.
+3. Change directory by issuing this command, `cd assets/petclinic/`
+4. Run `npm install -g yo bower grunt-cli`. This will install [Yoeman](http://yeoman.io/), [Bower](http://bower.io/), and [Grunt](http://gruntjs.com/).
+5. On the same folder, run `bower install && npm install`
+
+Assuming all went well, after which, all we have to run are `grunt` commands to start the server and review the app you have generated, run the unit tests, and build an optimized, production-ready version of your app.
+
+
+## Preview an app you have generated (with Livereload)
+
+Run `grunt serve`. This will open up the app on your browser in http://localhost:9000/ url
+
+## Run the unit tests
+
+Run `grunt test`. This is how you'll run unit test. Though we haven't done any test for this app, so you skip this.
+
+## Build an optimized, production-ready version of your app
+
+Run `grunt build`
+
+Running `grunt build` takes your `app/` source code files and turns them into a distributable application, which ends up in `dist/` directory
+
+### Install Grunt
+
+
+> **Note**
+>
+> If an error occurred when running any grunt commands relating to PhantomJS timing out, do the following to fix the issue.
+
+1. Make sure you're in `assets/petclinic/` directory. Run `cd test`
+2. Run `bower install`
+3. Go back to the petclinic folder, run `cd ..`
+4. Try to run `grunt`. See if no errors appeared.
\ No newline at end of file
diff --git a/src/main/webapp/static/app/dashboard.html b/src/main/webapp/static/app/dashboard.html
new file mode 100644
index 000000000..92b48d1f0
--- /dev/null
+++ b/src/main/webapp/static/app/dashboard.html
@@ -0,0 +1,327 @@
+<!doctype html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>Pet Clinic - Dashboard</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+    <!-- build:css(.) styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- endbower -->
+    <!-- endbuild -->
+    <!-- build:css(.tmp) styles/main.css -->
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <nav class="navbar navbar-default navbar-static-top">
+      <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <a class="navbar-brand" href="/">
+            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
+          </a>
+          <button class="navbar-toggle navbar-toggle-left collapsed" type="button" data-toggle="collapse" data-target="#nav-menu">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="glyphicon glyphicon-triangle-bottom"></span>
+          </button>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div id="nav-menu" class="navbar-collapse navbar-left collapse">
+          <ul class="nav navbar-nav navbar-menu">
+            <li><a href="owners.html">Owners</a></li>
+            <li><a href="pets.html">Pets</a></li>
+            <li><a href="vets.html">Vets</a></li>
+          </ul>
+        </div><!-- /.navbar-collapse -->
+        <ul class="nav navbar-profile">
+          <li class="hidden">
+            <button class="btn btn-default btn-primary btn-new navbar-btn" data-toggle="dropdown">Create New</button>
+          </li>
+          <li><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
+          <li><a href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
+              <img class="img-circle" src="../images/avatar.jpg" width="30" height="30">
+            </a>
+            <ul class="dropdown-menu navbar-dropdown-menu">
+              <li><a href="#">View Profile</a></li>
+              <li><a href="#">Settings</a></li>
+              <li><a href="#">Sign Out</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Help</a></li>
+            </ul>
+          </li>
+        </ul>
+        </div>
+      </div><!-- /.container-fluid -->
+    </nav>
+
+    <!-- Welcome -->
+    <header class="sections sections-narrow sections-light">
+      <div class="container">
+        <div class="media media-welcome">
+          <div class="media-left">
+            <img src="../images/avatar.jpg" class="img-circle media-object" width="90" height="90">
+          </div>
+          <div class="media-body">
+            <h4 class="h3">Welcome, John Doe</h4>
+            <p>When you’re ready, you may start adding a new <a href="#">pet owner</a> or <a href="#">continue browsing</a>.</p>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Owners -->
+    <section id="owners" class="sections sections-narrow">
+      <div class="container">
+        <h2 class="sub-header">Browse Owners</h2>
+        <div class="row thumbnail-wrapper">
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Eduardo Rodriguez</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 class="action-bar">
+                <ul>
+                  <li>
+                    <a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
+                  </li>
+                  <li>
+                    <a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Eduardo Rodriguez</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 class="action-bar">
+                <ul>
+                  <li>
+                    <a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
+                  </li>
+                  <li>
+                    <a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Eduardo Rodriguez</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 class="action-bar">
+                <ul>
+                  <li>
+                    <a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
+                  </li>
+                  <li>
+                    <a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/owner-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Eduardo Rodriguez</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 class="action-bar">
+                <ul>
+                  <li>
+                    <a href="#"><img src="../images/pet-small.png" class="img-circle" alt="Generic placeholder image" height="30" width="30"></a>
+                  </li>
+                  <li>
+                    <a href="#" class="btn-add-pet"><span class="glyphicon glyphicon-plus"></span></a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /row -->
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <p><a class="btn btn-default btn-block" href="/owners">See All Owners</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Pets -->
+    <section id="pets" class="sections sections-narrow">
+      <div class="container">
+        <h2 class="sub-header">Pets</h2>
+        <div class="row thumbnail-wrapper">
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Basil</h3>
+                <p class="caption-meta">08 August 2012</p>
+                <p class="caption-meta"><span class="caption-label">Hamster</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Basil</h3>
+                <p class="caption-meta">08 August 2012</p>
+                <p class="caption-meta"><span class="caption-label">Hamster</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Basil</h3>
+                <p class="caption-meta">08 August 2012</p>
+                <p class="caption-meta"><span class="caption-label">Hamster</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/pet-default.png" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Basil</h3>
+                <p class="caption-meta">08 August 2012</p>
+                <p class="caption-meta"><span class="caption-label">Hamster</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /row -->
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <p><a class="btn btn-default btn-block" href="/pets">See All Pets</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+    
+    <!-- Vets -->
+    <section id="owners" class="sections">
+      <div class="container">
+        <h2 class="sub-header">Veterinarians</h2>
+        <div class="row thumbnail-wrapper">
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Helen Leary</h3>
+                <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
+                <p class="caption-meta"><span class="caption-label">Surgery</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Helen Leary</h3>
+                <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
+                <p class="caption-meta"><span class="caption-label">Surgery</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Helen Leary</h3>
+                <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
+                <p class="caption-meta"><span class="caption-label">Surgery</span></p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="../images/veterinarian-default.jpg" class="img-circle" alt="Generic placeholder image">
+              <div class="caption">
+                <h3 class="caption-heading">Helen Leary</h3>
+                <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
+                <p class="caption-meta"><span class="caption-label">Surgery</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /row -->
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <p><a class="btn btn-default btn-block" href="/vets">See All Veterinarians</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
+        <p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
+      </div>
+    </footer>
+
+    <!-- build:js(.) scripts/vendor.js -->
+    <!-- bower:js -->
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X');ga('send','pageview');
+    </script>
+
+    <!-- build:js({app,.tmp}) scripts/main.js -->
+    <script src="scripts/main.js"></script>
+    <!-- endbuild -->
+</body>
+</html>
diff --git a/src/main/webapp/static/app/discover.html b/src/main/webapp/static/app/discover.html
new file mode 100644
index 000000000..86fb437ec
--- /dev/null
+++ b/src/main/webapp/static/app/discover.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>Pet Clinic - Discover Pet Owners on your Neigborhood</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+    <!-- build:css(.) styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- endbower -->
+    <!-- endbuild -->
+    <!-- build:css(.tmp) styles/main.css -->
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">Pet Clinic</a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse pull-right">
+          <ul class="nav navbar-nav">
+            <li><a href="discover.html" class="active">Discover</a></li>
+            <li><a href="#vet">Veterinarians</a></li>
+            <li><a href="#about">About</a></li>
+          </ul>
+        </div><!--/.navbar-collapse -->
+      </div>
+    </nav>
+
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron jumbotron-tertiary">
+      <div class="container">
+        <div class="jumbotron-headline">
+          <div class="jumbotron-headline-cell">
+            <h1>Discover Pet Owners</h1>
+            <p>Helping you discover pet owners near you and connect.</p>
+            <div class="row">
+              <div class="col-md-6 col-md-offset-2">
+                <input type="text" class="form-control input-lg" placeholder=".col-md-8">
+              </div>
+              <div class="col-md-2">
+                <button type="submit" class="btn btn-primary btn-lg btn-block">Discover</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Featured veterinarians -->
+    <section id="veterianarians" class="sections">
+      <div class="container">
+        <div class="nav-tabs-filter">
+          <a href="#add_owner" role="button" class="btn btn-primary pull-right">Register Now - It's Free!</a>
+          <ul class="nav nav-tabs">
+            <li role="presentation" class="active"><a href="#">Newest</a></li>
+            <li role="presentation"><a href="#">Popular</a></li>
+            <li role="presentation" class="dropdown open">
+              <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                Dropdown <span class="caret"></span>
+              </a>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="#">McFarland</a></li>
+                <li><a href="#">Sun Prairie</a></li>
+                <li><a href="#">Madison</a></li>
+                <li><a href="#">New York</a></li>
+                <li><a href="#">Madison</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+
+        <div class="row">
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
+              <div class="caption">
+                <a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a></a>
+              <div class="caption">
+                <a href="show.html"><a href="show.html"><h3>Thumbnail label</h3></a></a>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <a href="show.html"><img src="http://placehold.it/600x600" alt="Generic placeholder image"></a>
+              <div class="caption">
+                <a href="show.html"><h3>Thumbnail label</h3></a>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <p><a class="btn btn-primary btn-lg btn-block" href="#">Show More »</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Make an appointment call to action -->
+    <section id="appointment" class="jumbotron jumbotron-secondary">
+      <div class="container">
+        <div class="jumbotron-headline">
+          <div class="jumbotron-headline-cell">
+            <h2>Over 40,000 pet owners trust us. Register now. It's <strong>Free</strong> forever!</h2>
+            <p>Use it as a starting point to create something more unique.</p>
+            <form class="form-inline">
+              <div class="form-group">
+                <label class="sr-only" for="clientName">Your Name</label>
+                <input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
+              </div><div class="form-group">
+                <label class="sr-only" for="emailAddress">Email Address</label>
+                <input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
+              </div>
+              <div class="form-group">
+                <label class="sr-only" for="clientNumber">Contact Number</label>
+                <input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
+              </div>
+              <button type="submit" class="btn btn-primary btn-lg">Get Started - It's Free!</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact details -->
+    <section id="add_owner" class="sections sections-narrow">
+      <div class="container">
+        <!-- Three columns of text below the carousel -->
+        <div class="row">
+          <div class="col-lg-4">
+            <h3>Business Hours</h3>
+            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3>Our Location</h3>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3>Questions or comments</h3>
+            <p>Cras mattis consectetur purus sit amet fermentum. </p>
+            <p>
+              <a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-default">Drop us a line</a>
+            </p>
+          </div><!-- /.col-lg-4 -->
+        </div><!-- /.row -->
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
+        <p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
+      </div>
+    </footer>
+
+    <!-- build:js(.) scripts/vendor.js -->
+    <!-- bower:js -->
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X');ga('send','pageview');
+    </script>
+
+    <!-- build:js({app,.tmp}) scripts/main.js -->
+    <script src="scripts/main.js"></script>
+    <!-- endbuild -->
+</body>
+</html>
diff --git a/src/main/webapp/static/app/favicon.ico b/src/main/webapp/static/app/favicon.ico
new file mode 100644
index 000000000..04c64a9d8
Binary files /dev/null and b/src/main/webapp/static/app/favicon.ico differ
diff --git a/src/main/webapp/static/app/images/avatar.jpg b/src/main/webapp/static/app/images/avatar.jpg
new file mode 100644
index 000000000..053ba2d28
Binary files /dev/null and b/src/main/webapp/static/app/images/avatar.jpg differ
diff --git a/src/main/webapp/static/app/images/logo.png b/src/main/webapp/static/app/images/logo.png
new file mode 100644
index 000000000..b05277ef6
Binary files /dev/null and b/src/main/webapp/static/app/images/logo.png differ
diff --git a/src/main/webapp/static/app/images/owner-default.png b/src/main/webapp/static/app/images/owner-default.png
new file mode 100644
index 000000000..51db28cdf
Binary files /dev/null and b/src/main/webapp/static/app/images/owner-default.png differ
diff --git a/src/main/webapp/static/app/images/pet-default.png b/src/main/webapp/static/app/images/pet-default.png
new file mode 100644
index 000000000..8e6f7c2df
Binary files /dev/null and b/src/main/webapp/static/app/images/pet-default.png differ
diff --git a/src/main/webapp/static/app/images/pet-small.png b/src/main/webapp/static/app/images/pet-small.png
new file mode 100644
index 000000000..df3f275f0
Binary files /dev/null and b/src/main/webapp/static/app/images/pet-small.png differ
diff --git a/src/main/webapp/static/app/images/veterinarian-default.jpg b/src/main/webapp/static/app/images/veterinarian-default.jpg
new file mode 100644
index 000000000..fdf962529
Binary files /dev/null and b/src/main/webapp/static/app/images/veterinarian-default.jpg differ
diff --git a/src/main/webapp/static/app/index.html b/src/main/webapp/static/app/index.html
new file mode 100644
index 000000000..16f0d7955
--- /dev/null
+++ b/src/main/webapp/static/app/index.html
@@ -0,0 +1,336 @@
+<!doctype html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>Pet Clinic</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+    <!-- build:css(.) styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- endbower -->
+    <!-- endbuild -->
+    <!-- build:css(.tmp) styles/main.css -->
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <nav class="navbar navbar-default navbar-static-top">
+      <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header pull-left">
+          <a class="navbar-brand" href="/dashboard.html">
+            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
+          </a>
+        </div>
+
+        <ul class="nav navbar-links pull-right">
+          <li>
+            <a href="#appointment" class="js-scroll-nav">Get started</a>
+          </li>
+          <li>
+            <a href="#">Login</a>
+          </li>
+        </ul>
+        </div>
+      </div><!-- /.container-fluid -->
+    </nav>
+
+    <!-- Main jumbotron for a primary marketing message or call to action -->
+    <div class="jumbotron">
+      <div class="container">
+        <div class="jumbotron-headline">
+          <div class="jumbotron-headline-cell">
+            <h1>Pet care for the People who love them</h1>
+            <p>PetClinic is here to enhance people's relationships with their pets</p>
+            <p><a class="btn btn-primary btn-lg js-scroll-nav" href="#veterianarians" role="button">Learn more</a></p>
+          </div>
+        </div>
+      </div>
+      <video loop="loop" preload="auto" class="jumbotron-video" autoplay muted>
+        <source src="videos/hero-bird.mp4" type="video/mp4">
+      </video>
+    </div>
+
+    <!-- Featured veterinarians -->
+    <section class="sections">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+            <div class="text-center">
+              <h3 id="veterianarians" class="section-heading">Our Veterinarians</h3>
+              <p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-6">
+            <div class="thumbnail">
+              <img src="images/600x345.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="images/600x600.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="images/600x600.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /row -->
+        <div class="row">
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="images/600x600.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="thumbnail">
+              <img src="images/600x600.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
+              </div>
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="thumbnail">
+              <img src="images/600x345.gif" alt="Generic placeholder image">
+              <div class="caption">
+                <h3>Thumbnail label</h3>
+                <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- /row -->
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <p><a class="btn btn-primary btn-lg btn-block" href="/veterinarians">View More »</a></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services 1 section -->
+    <section id="services" class="sections">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
+          </div>
+          <div class="col-md-6">
+            <h3 class="section-heading">Services One</h3>
+            <p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+            <p>
+              <a class="btn btn-primary" href="/business">Learn more »</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services 2 section -->
+    <section id="services2" class="sections">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <h3 class="section-heading">Services Two</h3>
+            <p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+            <p>
+              <a class="btn btn-primary" href="/business">Learn more »</a>
+            </p>
+          </div>
+          <div class="col-md-6">
+            <img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Services 3 section -->
+    <section id="services3" class="sections">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-6">
+            <img class="img-thumbnail" src="images/560x250.gif" alt="Generic placeholder image">
+          </div>
+          <div class="col-md-6">
+            <h3 class="section-heading">Services Three</h3>
+            <p class="section-desc">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+            <p>
+              <a class="btn btn-primary" href="/business">Learn more »</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section id="testimonials" class="sections">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+            <div class="text-center">
+              <h3 class="section-heading">What our customers are saying.</h3>
+              <p class="section-desc">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-4 text-center">
+            <img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
+            <h4>Client One</h4>
+            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4 text-center">
+            <img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
+            <h4>Client Two</h4>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4 text-center">
+            <img class="img-circle" src="images/140x140.gif" alt="Generic placeholder image">
+            <h4>Client Three</h4>
+            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          </div><!-- /.col-lg-4 -->
+        </div>
+
+      </div>
+    </section>
+
+    <!-- Client logos -->
+    <section id="companies" class="sections sections-narrow">
+      <div class="container text-center">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2">
+            <div class="text-center">
+              <h3 class="h4">Trusted by some of the world's smartest companies</h3>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+          <div class="col-lg-2">
+            <img src="images/100x40.gif" alt="Companies placeholder image">
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Make an appointment call to action -->
+    <section id="appointment" class="jumbotron jumbotron-secondary jumbotron-pattern jumbotron-appointment">
+      <div class="container">
+        <div class="jumbotron-headline">
+          <div class="jumbotron-headline-cell">
+            <h2>Over 40,000 pet owners trust us.</h2>
+            <p>Use it as a starting point to create something more unique.</p>
+            <form class="form-inline">
+              <div class="form-group">
+                <label class="sr-only" for="clientName">Your Name</label>
+                <input type="text" class="form-control input-lg" id="clientName" placeholder="Your name">
+              </div>
+              <div class="form-group">
+                <label class="sr-only" for="emailAddress">Email Address</label>
+                <input type="email" class="form-control input-lg" id="emailAddress" placeholder="Your email">
+              </div>
+              <div class="form-group">
+                <label class="sr-only" for="clientNumber">Contact Number</label>
+                <input type="text" class="form-control input-lg" id="clientNumber" placeholder="Your contact number">
+              </div>
+              <button type="submit" class="btn btn-primary btn-lg">Get an Appointment</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Add Owner / Register -->
+    <!-- <section id="add_owner" class="sections sections-narrow"> -->
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <!-- Three columns of text below the carousel -->
+        <div class="row">
+          <div class="col-lg-4">
+            <h3 class="h4">Business Hours</h3>
+            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3 class="h4">Our Location</h3>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3 class="h4">Questions or comments</h3>
+            <p>Cras mattis consectetur purus sit amet fermentum. </p>
+            <p>
+              <a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-primary">Drop us a line</a>
+            </p>
+          </div><!-- /.col-lg-4 -->
+        </div><!-- /.row -->
+      </div>
+
+      <div class="colophon container">
+        <p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
+        <p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
+      </div>
+    </footer>
+
+    <!-- build:js(.) scripts/vendor.js -->
+    <!-- bower:js -->
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X');ga('send','pageview');
+    </script>
+
+    <!-- build:js({app,.tmp}) scripts/main.js -->
+    <script src="scripts/main.js"></script>
+    <!-- endbuild -->
+</body>
+</html>
diff --git a/src/main/webapp/static/app/robots.txt b/src/main/webapp/static/app/robots.txt
new file mode 100644
index 000000000..ee2cc216a
--- /dev/null
+++ b/src/main/webapp/static/app/robots.txt
@@ -0,0 +1,3 @@
+# robotstxt.org/
+
+User-agent: *
diff --git a/src/main/webapp/static/app/scripts/main.js b/src/main/webapp/static/app/scripts/main.js
new file mode 100644
index 000000000..158d65722
--- /dev/null
+++ b/src/main/webapp/static/app/scripts/main.js
@@ -0,0 +1,19 @@
+'use strict';
+
+// Scroll Nav
+function scrollNav() {
+	$('.js-scroll-nav').click(function() {
+		//Animate
+		$('html, body').stop().animate({
+			scrollTop: $($(this).attr('href')).offset().top - 20
+		}, 1000);
+		return false;
+	});
+}
+
+// On Dom Ready
+$(function() {
+
+	scrollNav();
+
+});
diff --git a/src/main/webapp/static/app/show.html b/src/main/webapp/static/app/show.html
new file mode 100644
index 000000000..e5b14e57c
--- /dev/null
+++ b/src/main/webapp/static/app/show.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>Pet Clinic - Discover Pet Owners on your Neigborhood</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+    <!-- build:css(.) styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- endbower -->
+    <!-- endbuild -->
+    <!-- build:css(.tmp) styles/main.css -->
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
+  </head>
+  <body>
+    <!--[if lt IE 10]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">Pet Clinic</a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse pull-right">
+          <ul class="nav navbar-nav">
+            <li><a href="discover.html" class="active">Discover</a></li>
+            <li><a href="#vet">Veterinarians</a></li>
+            <li><a href="#about">About</a></li>
+          </ul>
+        </div><!--/.navbar-collapse -->
+      </div>
+    </nav>
+
+    <!-- Owner Summary -->
+    <div id="content" class="show-hero">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-10">
+            <h1>John Doe</h1>
+            <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
+          </div>
+          <div class="col-md-2">
+            <a href="discover.html" class="btn btn-link btn-md pull-right">
+              <span class="glyphicon glyphicon-chevron-left"></span> Back
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Owner Information / Update -->
+    <section id="owner_info" class="sections sections-narrow">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-7">
+            <form>
+              <fieldset>
+                <!-- Form Name -->
+                <legend>Owner Information</legend>
+
+                <div class="row">
+                  <div class="col-md-6">
+                    <!-- Text input-->
+                    <div class="form-group">
+                      <label class="form-label" for="fldFirstName">First Name</label>
+                      <input id="fldFirstName" name="fldFirstName" type="text" placeholder="Your name" class="form-control input-lg" required="">
+                    </div>
+                  </div>
+                  <div class="col-md-6">
+                    <!-- Text input-->
+                    <div class="form-group">
+                      <label class="form-label" for="fldLastName">Last Name</label>
+                      <div class="controls">
+                        <input id="fldLastName" name="fldLastName" type="text" placeholder="Your last name" class="form-control input-lg">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Textarea -->
+                <div class="form-group">
+                  <label class="form-label" for="fldAddress">Your Address</label>
+                  <div class="controls">
+                    <textarea id="fldAddress" name="fldAddress" class="form-control" rows="3">Your address</textarea>
+                  </div>
+                </div>
+
+                <div class="row">
+                  <div class="col-md-6">
+                    <!-- Text input-->
+                    <div class="form-group">
+                      <label class="form-label" for="fldCity">City</label>
+                      <div class="controls">
+                        <input id="fldCity" name="fldCity" type="text" placeholder="Your city" class="form-control input-lg">
+                      </div>
+                    </div>
+
+                    <!-- Text input-->
+                    <div class="form-group">
+                      <label class="form-label" for="fldPhone">Phone</label>
+                      <div class="controls">
+                        <input id="fldPhone" name="fldPhone" type="text" placeholder="Your phone number" class="form-control input-lg">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Textarea -->
+                <div class="form-group">
+                  <label class="form-label" for="fldDesc">Description</label>
+                  <div class="controls">
+                    <textarea id="fldDesc" name="fldDesc" class="form-control" rows="4">Write something about yourself.</textarea>
+                  </div>
+                </div>
+
+                <!-- Button (Double) -->
+                <div class="form-group form-control-group">
+                  <div class="controls">
+                    <button id="buttonDelete" name="buttonDelete" class="btn btn-link btn-lg btn-danger pull-right">Delete Owner</button>
+                    <button id="buttonUpdate" name="buttonUpdate" class="btn btn-lg btn-success">Update Owner</button>
+                  </div>
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div class="col-md-4 offset-md-1">
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Browser page -->
+    <section class="sections sections-browse">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-10">
+            <div class="btn btn-group">
+              <a href="show-prev.html" class="btn btn-link btn-md">
+                <span class="glyphicon glyphicon-chevron-left"></span> Previous
+              </a>
+              <a href="show-next.html" class="btn btn-link btn-md">
+                Next <span class="glyphicon glyphicon-chevron-right"></span>
+              </a>
+            </div>
+          </div>
+          <div class="col-md-2">
+            <a href="discover.html" class="btn btn-link btn-md pull-right">
+              <span class="glyphicon glyphicon-chevron-left"></span> Back
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact details -->
+    <section id="add_owner" class="sections sections-narrow">
+      <div class="container">
+        <!-- Three columns of text below the carousel -->
+        <div class="row">
+          <div class="col-lg-4">
+            <h3>Business Hours</h3>
+            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3>Our Location</h3>
+            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          </div><!-- /.col-lg-4 -->
+          <div class="col-lg-4">
+            <h3>Questions or comments</h3>
+            <p>Cras mattis consectetur purus sit amet fermentum. </p>
+            <p>
+              <a href="mailto:youremail@yourdomain.com" type="submit" class="btn btn-default">Drop us a line</a>
+            </p>
+          </div><!-- /.col-lg-4 -->
+        </div><!-- /.row -->
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="container">
+        <p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
+        <p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
+      </div>
+    </footer>
+
+    <!-- build:js(.) scripts/vendor.js -->
+    <!-- bower:js -->
+    <script src="bower_components/jquery/dist/jquery.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
+    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
+    <!-- endbower -->
+    <!-- endbuild -->
+
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+      (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
+      function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
+      e=o.createElement(i);r=o.getElementsByTagName(i)[0];
+      e.src='//www.google-analytics.com/analytics.js';
+      r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
+      ga('create','UA-XXXXX-X');ga('send','pageview');
+    </script>
+
+    <!-- build:js({app,.tmp}) scripts/main.js -->
+    <script src="scripts/main.js"></script>
+    <!-- endbuild -->
+</body>
+</html>
diff --git a/src/main/webapp/static/app/styles/main.scss b/src/main/webapp/static/app/styles/main.scss
new file mode 100644
index 000000000..f43acfd8b
--- /dev/null
+++ b/src/main/webapp/static/app/styles/main.scss
@@ -0,0 +1,654 @@
+$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
+$brand-primary: #6cb947;
+$text-color: #747c83;
+$text-color-inverse: #fff;
+$headings-color: #555f64;
+$sections-bg: #f0f2f5;
+$sections-border: #e7e9eb;
+$jumbotron-bg: #42494d;
+$navbar-default-bg: #2d4f61;
+$navbar-default-border: #2d4f61;
+$navbar-default-link-color: #749aa4;
+$navbar-default-link-hover-color: #d9e9ed;
+$navbar-default-link-active-color: #e6f2f5;
+$thumbnail-border: #e6e9ed;
+$btn-default-color: #495256;
+$btn-default-border: #D4D5D7;
+
+%font-smoothing {
+  -webkit-font-smoothing: antialiased;
+}
+
+// bower:scss
+@import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
+// endbower
+
+.browsehappy {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+/* Space out content a bit */
+body {
+  @extend %font-smoothing;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Custom page header */
+.header {
+  border-bottom: 1px solid #e5e5e5;
+
+  /* Make the masthead heading the same height as the navigation */
+  h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 40px;
+    padding-bottom: 19px;
+  }
+}
+
+/* Header */
+.sub-header {
+  font-size: 26px;
+  font-weight: 500;
+  margin-top: 10px;
+  padding-bottom: 10px;
+}
+
+.container-narrow > hr {
+  margin: 30px 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  background-color: $jumbotron-bg;
+  height: 580px;
+  margin-bottom: 0;
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+  position: relative;
+  overflow: hidden;
+
+  .container {
+    height: 100%;
+    position: relative;
+    z-index: 3;
+  }
+}
+
+.jumbotron-auto {
+  height: auto;
+}
+
+.jumbotron-headline {
+  display: table;
+  height: 100%;
+  width: 100%;
+
+
+  h1, .h1 {
+    color: $text-color-inverse;
+    font-size: 48px;
+    font-weight: 500;
+    margin-bottom: 15px;
+  }
+
+  p {
+    color: $text-color-inverse;
+    font-size: 23px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+}
+
+.jumbotron-headline-cell {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+/* Secondary marketing message and call to action */
+.jumbotron-secondary {
+  height: 500px;
+
+  h2 {
+    color: $text-color-inverse;
+    font-size: 36px;
+    font-weight: 600;
+    margin-bottom: 15px;
+
+    strong {
+      font-weight: 600;
+    }
+  }
+
+  @media (max-width: $screen-md-min) {
+    height: auto;
+  }
+}
+
+.jumbotron-appointment {
+  .form-inline {
+    font-size: 0;
+  }
+
+  .form-group {
+    margin-right: 8px;
+  }
+
+  .form-control {
+    height: 54px;
+  }
+
+  .btn-primary {
+    padding: 15px 25px;
+  }
+
+  @media (max-width: $grid-float-breakpoint) {
+    .form-group {
+      margin-right: 0;
+    }
+
+    .btn-primary {
+      display: block;
+      margin-bottom: 20px;
+      width: 100%;
+    }
+  }
+}
+
+/* Tertiary marketing message and call to action. */
+.jumbotron-tertiary {
+  height: 400px;
+
+  h1, .h1 {
+    margin-top: 0;
+  }
+}
+
+.jumbotron-video {
+  position: absolute;
+  opacity: .85;
+  left: 0;
+  top: 0px;
+  z-index: 1;
+  height: auto;
+  width: 100%;
+}
+
+.jumbotron-welcome {
+  background-color: $text-color-inverse;
+}
+
+@media (max-width: $screen-md-min) {
+  .jumbotron-video {
+    width: auto;
+    height: 100%;
+  }
+}
+
+/* Sections */
+.sections {
+  background-color: $sections-bg;
+  border-bottom: 1px solid $sections-border;
+  padding: 100px 0;
+
+  .thumbnail {
+    margin-bottom: 25px;
+  }
+}
+
+.sections-narrow {
+  padding: 40px 0;
+}
+
+.sections-browse {
+  background-color: $jumbotron-bg;
+  padding: 20px 0;
+}
+
+.sections-light {
+  background-color: $text-color-inverse;
+}
+
+.section-heading {
+  font-size: 40px;
+}
+
+.section-heading-alt {
+  font-size:
+}
+
+.section-desc {
+  font-size: 18px;
+  margin-bottom: 25px;
+}
+
+.navbar {
+  height: 60px;
+}
+
+.navbar-static-top {
+  margin-bottom: 0;
+}
+
+.navbar-brand {
+  padding: 15px;
+  height: 60px;
+  line-height: normal;
+}
+
+.navbar-nav {
+  > li {
+    > a {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+  }
+}
+
+.navbar-form {
+  .form-group {
+    margin-bottom: 0;
+  }
+}
+
+.nav-tabs-filter {
+  margin-bottom: 30px;
+}
+
+.navbar-default {
+  .navbar-menu {
+    > li {
+      padding: 0 6px;
+
+      @media (min-width: $grid-float-breakpoint) {
+        > a {
+          font-weight: 500;
+          padding: 20px 15px;
+        }
+      }
+
+      &:hover {
+        > a {
+          background-color: transparent;
+        }
+      }
+
+      &.active {
+        > a {
+          background-color: transparent;
+          font-weight: bold;
+
+          &:hover  {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: $grid-float-breakpoint) {
+    .navbar-menu {
+      background-color: darken($navbar-default-bg,10%);
+
+      > li {
+        padding: 0;
+        
+        > a {
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
+        
+        &:hover {
+          > a {
+            background-color: transparent;
+            color: $navbar-default-link-hover-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+.navbar-profile {
+  @extend .pull-right;
+
+  > li {
+    float:left;
+    margin-left: 15px;
+    margin-top: 15px;
+
+    > a {
+      color: $navbar-default-link-color;
+      line-height: 30px;
+      height: 30px;
+      padding: 0;
+      text-align: center;
+      width: 30px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: transparent;
+      }
+
+      &.img-profile {
+        background-color: transparent;
+        border: 0;
+        line-height: 0;
+      }
+    }
+    
+    .glyphicon-plus {
+      color: $navbar-default-link-color;
+      margin-left: 1px;
+    }
+  }
+
+  .open {
+    > a,
+    > a:focus {
+      background-color: transparent;
+    }
+  }
+  
+  @media (max-width: $grid-float-breakpoint) {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    > li {
+      &:last-child {
+        margin-right: 15px;
+      }
+    }
+  }
+
+}
+
+.navbar-dropdown-menu {
+  right: 0;
+  left: auto;
+
+  &:after {
+    border-bottom: 10px solid;
+    border-right: 10px solid rgba($gray-darker, 0);
+    border-left: 10px solid rgba($gray-darker, 0);
+    color: darken($navbar-default-bg,10%);
+    content: '';
+    display: block;
+    height: 0;
+    margin-left: 2px;
+    position: absolute;
+    top: -10px;
+    right: 10px;
+    vertical-align: middle;
+    width: 0;
+  }
+  
+  > li {
+    > a {
+      color: $navbar-default-link-color;
+      padding: 12px 15px;
+
+      &:hover {
+        color: $navbar-default-link-hover-color;
+        background-color: rgba($gray-darker, 0);
+      }
+    }
+  }
+
+  .divider {
+    background-color: rgba($navbar-default-link-color, .15);
+    margin: 0;
+  }
+}
+
+.open > .navbar-dropdown-menu {
+  background-color: darken($navbar-default-bg,10%);
+  display: block;
+  width: 200px;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  top: 43px;
+  right: -5px;
+
+  @media (max-width: $grid-float-breakpoint) {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 58px;
+    
+    &:after {
+      right: 20px;
+    }
+  }
+}
+
+.navbar-collapse {
+  border-top: 0;
+}
+
+.navbar-links {
+  > li {
+    display: inline-block;
+
+    > a {
+      color: #303030;
+      font-weight: bold;
+      padding: 19px 15px;
+
+      &:hover {
+        background-color: transparent;
+        color: $brand-primary;
+      }
+    }
+  }
+}
+
+/* Show page */
+.show-hero {
+  background-color: $jumbotron-bg;
+  padding-top: 60px;
+  padding-bottom: 60px;
+  font-size: 24px;
+  text-align: left;
+
+  h1 {
+    margin-top: 0;
+  }
+}
+
+.form-control {
+  border: 1px solid $text-color-inverse;
+  border-radius: 3px;
+  box-shadow: none;
+}
+
+.form-control-group {
+  padding-top: $padding-large-vertical;
+}
+
+.btn {
+  border-color: transparent;
+  border-radius: 3px;
+  font-weight: 500;
+  transition: .3s ease-in-out;
+
+  &:hover {
+    border-color: transparent;
+  }
+
+  &:active,
+  &:focus {
+    border-color: rgba($gray-darker, 0.3);
+    outline: none 0;
+    box-shadow: inset 0 0 200px rgba($gray-darker, 0.3);
+  }
+}
+
+.btn-default {
+  border-color: $btn-default-border;
+  
+  &:hover {
+    background-color: $btn-default-bg;
+    border-color: darken($btn-default-border,15%);
+    color: darken($btn-default-color,15%);
+  }
+}
+
+.btn-lg {
+  font-weight: 500;
+}
+
+/* Responsive: Portrait tablets and up */
+@media (max-width: 768px) {
+
+  .navbar-brand {
+    padding-right: 0;
+  }
+
+  .navbar-nav {
+    margin-bottom: 0;
+    margin-top: 0;
+
+    > li {
+      > a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+  }
+
+  .navbar-form {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-top: 0;
+    border-bottom: 0;
+  }
+
+  // Default navbar
+  .navbar-default {
+    .navbar-toggle-left {
+      color: $navbar-default-link-color;
+      border: 0;
+      float: left;
+      margin: 15px 0 0 5px;
+      padding: 5px 8px 5px 8px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $navbar-default-link-hover-color;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+/* Media Object */
+.media-welcome {
+  .media-left {
+    padding-right: 20px;
+  }
+}
+
+/* Mixin and adjust the regular image class */
+.thumbnail {
+  background-color: $thumbnail-bg;
+  border: 1px solid $thumbnail-border;
+  box-shadow: 0 1px 1px rgba($gray-base, 0.03);
+  padding: 0;
+  
+  > img {
+    margin-top: 40px;
+  }
+  
+  .caption {
+    padding: 20px;
+    text-align: center;
+  }
+  
+  .caption-heading {
+    color: darken($headings-color,5%);
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  
+  .caption-meta {
+    color: #98a4b0;
+    font-size: 13px;
+    margin-bottom: 5px;
+  }
+  
+  .caption-label {
+    @extend .label;
+    @extend .label-default;
+    background-color: #98a4b0;
+  }
+  
+  .action-bar {
+    border-top: 1px solid $sections-border;
+    padding: 20px;
+    @extend .clearfix;
+    
+    ul {
+      list-style-type: none;
+      margin-bottom: 0;
+      margin-left: -10px;
+      padding-left: 0;
+      
+      li {
+        float: left;
+        margin-left: 10px;
+      }
+    }
+  }
+  
+  .action-add {
+    border: 1px dotted
+  }
+  
+  .btn-add-pet {
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    border: 1px dashed #AAA;
+    border-radius: 100%;
+    position: relative;
+    
+    .glyphicon {
+      color: #C3C6CA;
+      margin: 5px 0 0 8px;
+    }
+  }
+  
+  
+}
+
+.thumbnail-wrapper {
+  margin-bottom: 20px;
+}
+
+/* Custom page footer */
+.footer {
+  font-size: 13px;
+  padding: 30px 0;
+}
+
+.colophon {
+  border-top: 1px solid $sections-border;
+  margin-top: 30px;
+  padding-top: 30px;
+}
diff --git a/src/main/webapp/static/app/videos/hero-bird.mp4 b/src/main/webapp/static/app/videos/hero-bird.mp4
new file mode 100644
index 000000000..e0dcdfc95
Binary files /dev/null and b/src/main/webapp/static/app/videos/hero-bird.mp4 differ
diff --git a/src/main/webapp/static/bower.json b/src/main/webapp/static/bower.json
new file mode 100644
index 000000000..7bd66ed56
--- /dev/null
+++ b/src/main/webapp/static/bower.json
@@ -0,0 +1,7 @@
+{
+	"name": "petclinic",
+	"private": true,
+	"dependencies": {
+		"bootstrap-sass-official": "~3.3.3"
+	}
+}
diff --git a/src/main/webapp/static/package.json b/src/main/webapp/static/package.json
new file mode 100644
index 000000000..5bec1e486
--- /dev/null
+++ b/src/main/webapp/static/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "petclinic",
+  "devDependencies": {
+    "apache-server-configs": "^2.7.1",
+    "grunt": "^0.4.5",
+    "grunt-autoprefixer": "^1.0.0",
+    "grunt-concurrent": "^0.5.0",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-concat": "^0.5.0",
+    "grunt-contrib-connect": "^0.8.0",
+    "grunt-contrib-copy": "^0.5.0",
+    "grunt-contrib-cssmin": "^0.10.0",
+    "grunt-contrib-htmlmin": "^0.3.0",
+    "grunt-contrib-imagemin": "^0.8.0",
+    "grunt-contrib-jshint": "^0.10.0",
+    "grunt-contrib-uglify": "^0.7.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-mocha": "^0.4.10",
+    "grunt-newer": "^0.7.0",
+    "grunt-rev": "^0.1.0",
+    "grunt-sass": "^0.14.0",
+    "grunt-svgmin": "^0.4.0",
+    "grunt-usemin": "^2.3.0",
+    "grunt-wiredep": "^1.7.0",
+    "jshint-stylish": "^0.4.0",
+    "load-grunt-tasks": "^0.4.0",
+    "time-grunt": "^0.4.0"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
+}
diff --git a/src/main/webapp/static/test/.bowerrc b/src/main/webapp/static/test/.bowerrc
new file mode 100644
index 000000000..44491d3df
--- /dev/null
+++ b/src/main/webapp/static/test/.bowerrc
@@ -0,0 +1,3 @@
+{
+    "directory": "bower_components"
+}
diff --git a/src/main/webapp/static/test/bower.json b/src/main/webapp/static/test/bower.json
new file mode 100644
index 000000000..0798eb592
--- /dev/null
+++ b/src/main/webapp/static/test/bower.json
@@ -0,0 +1,9 @@
+{
+  "name": "petclinic",
+  "private": true,
+  "dependencies": {
+    "chai": "~1.8.0",
+    "mocha": "~1.14.0"
+  },
+  "devDependencies": {}
+}
diff --git a/src/main/webapp/static/test/index.html b/src/main/webapp/static/test/index.html
new file mode 100644
index 000000000..d10cee026
--- /dev/null
+++ b/src/main/webapp/static/test/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Mocha Spec Runner</title>
+    <link rel="stylesheet" href="bower_components/mocha/mocha.css">
+</head>
+<body>
+    <div id="mocha"></div>
+    <script src="bower_components/mocha/mocha.js"></script>
+    <script>mocha.setup('bdd')</script>
+    <script src="bower_components/chai/chai.js"></script>
+    <script>
+        var assert = chai.assert;
+        var expect = chai.expect;
+        var should = chai.should();
+    </script>
+
+    <!-- include source files here... -->
+
+    <!-- include spec files here... -->
+    <script src="spec/test.js"></script>
+
+    <script>mocha.run()</script>
+</body>
+</html>
diff --git a/src/main/webapp/static/test/spec/test.js b/src/main/webapp/static/test/spec/test.js
new file mode 100644
index 000000000..acbc11a4c
--- /dev/null
+++ b/src/main/webapp/static/test/spec/test.js
@@ -0,0 +1,13 @@
+/* global describe, it */
+
+(function () {
+  'use strict';
+
+  describe('Give it some context', function () {
+    describe('maybe a bit more context here', function () {
+      it('should run here few assertions', function () {
+
+      });
+    });
+  });
+})();