diff --git a/Bowerfile b/Bowerfile
index b2a941e..50902df 100644
--- a/Bowerfile
+++ b/Bowerfile
@@ -1,2 +1,3 @@
 asset 'angular'
 asset 'bootstrap-sass-official'
+asset 'angular-route'
diff --git a/Gemfile b/Gemfile
index e7537ed..6b092bc 100644
--- a/Gemfile
+++ b/Gemfile
@@ -31,7 +31,10 @@ gem 'sdoc', '~> 0.4.0', group: :doc
 
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development
+
 gem 'bower-rails'
+gem 'angular-rails-templates'
+
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug'
@@ -42,4 +45,3 @@ group :development, :test do
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
 end
-
diff --git a/Gemfile.lock b/Gemfile.lock
index 6bf664a..925c3ef 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -36,6 +36,10 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
+    angular-rails-templates (0.1.3)
+      railties (>= 3.1)
+      sprockets
+      tilt
     arel (6.0.0)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
@@ -151,6 +155,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  angular-rails-templates
   bower-rails
   byebug
   coffee-rails (~> 4.1.0)
diff --git a/app/assets/javascripts/app.coffee b/app/assets/javascripts/app.coffee
index 17593ac..2331dba 100644
--- a/app/assets/javascripts/app.coffee
+++ b/app/assets/javascripts/app.coffee
@@ -1,3 +1,44 @@
-receta = angular.module('receta', [
+receta = angular.module('receta',[
+  'templates',
+  'ngRoute',
+  'controllers',
+])
+
+receta.config([ '$routeProvider',
+  ($routeProvider)->
+    $routeProvider
+      .when('/',
+        templateUrl: "index.html"
+        controller: 'RecipesController'
+      )
+])
+
+recipes = [
+  {
+    id: 1
+    name: 'Baked Potato w/ Cheese'
+  },
+  {
+    id: 2
+    name: 'Garlic Mashed Potatoes',
+  },
+  {
+    id: 3
+    name: 'Potatoes Au Gratin',
+  },
+  {
+    id: 4
+    name: 'Baked Brussel Sprouts',
+  },
+]
+controllers = angular.module('controllers',[])
+controllers.controller("RecipesController", [ '$scope', '$routeParams', '$location',
+  ($scope,$routeParams,$location)->
+    $scope.search = (keywords)->  $location.path("/").search('keywords',keywords)
 
+    if $routeParams.keywords
+      keywords = $routeParams.keywords.toLowerCase()
+      $scope.recipes = recipes.filter (recipe)-> recipe.name.toLowerCase().indexOf(keywords) != -1
+    else
+      $scope.recipes = []
 ])
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 9e42736..19f42ed 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -14,4 +14,6 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require angular/angular
+//= require angular-route/angular-route
+//= require angular-rails-templates
 //= require_tree .
diff --git a/app/assets/javascripts/templates/index.html b/app/assets/javascripts/templates/index.html
new file mode 100644
index 0000000..d5c580d
--- /dev/null
+++ b/app/assets/javascripts/templates/index.html
@@ -0,0 +1,32 @@
+<header class="row">
+  <h1 class="text-center col-md-6 col-md-offset-3">Find Recipes</h1>
+</header>
+<section class="row">
+  <form>
+    <div class="form-group col-md-6 col-md-offset-3">
+      <label for="keywords" class="sr-only">Keywords</label>
+      <input ng-model="keywords" name="keywords" type="text" autofocus class="form-control" placeholder="Recipe name, e.g. Baked Potato">
+
+    </div>
+    <div class="form-group col-md-6 col-md-offset-3 text-center">
+      <button ng-click="search(keywords)" class="btn btn-primary btn-lg">Search</button>
+
+    </div>
+  </form>
+</section>
+<hr>
+<section class="row" ng-if="recipes">
+
+  <h1 class="text-center h2">Results</h1>
+  <ul class="list-unstyled">
+    <li ng-repeat="recipe in recipes">
+      <section class="well col-md-6 col-md-offset-3">
+        <h1 class="h3 col-md-6 text-right" style="margin-top: 0"><a href="#">{{recipe.name}}</a></h1>
+        <div class="col-md-6">
+          <button class="btn btn-info">Edit</button>
+          <button class="btn btn-danger">Delete</button>
+        </div>
+      </section>
+    </li>
+  </ul>
+</section>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index c126041..f11c291 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,14 +1,5 @@
-<div class="container-fluid" ng-app="receta">
-  <div class="panel panel-success">
-    <div class="panel-heading">
-      <h1 ng-if="name">Hello, {{name}}</h1>
-    </div>
-    <div class="panel-body">
-      <form class="form-inline">
-        <div class="form-group">
-          <input class="form-control" type="text" placeholder="Enter your name" autofocus ng-model="name">
-        </div>
-      </form>
-    </div>
+<div ng-app="receta">
+  <div class="view-container">
+    <div ng-view class="view-frame animate-view"></div>
   </div>
 </div>
diff --git a/vendor/assets/bower.json b/vendor/assets/bower.json
index f0351c5..5e9d35e 100644
--- a/vendor/assets/bower.json
+++ b/vendor/assets/bower.json
@@ -2,6 +2,7 @@
   "name": "dsl-generated dependencies",
   "dependencies": {
     "angular": "latest",
-    "bootstrap-sass-official": "latest"
+    "bootstrap-sass-official": "latest",
+    "angular-route": "latest"
   }
 }