diff --git a/movies.rb b/movies.rb
index 018625d..0d5374a 100644
--- a/movies.rb
+++ b/movies.rb
@@ -4,13 +4,38 @@
 require 'json'
 require 'pry'
 
-# A setup step to get rspec tests running.
 configure do
   root = File.expand_path(File.dirname(__FILE__))
   set :views, File.join(root,'views')
 end
 
 get '/' do
+
+  erb :index
 end
 
 
+
+get '/search' do
+  if params["movie"] == ""
+    redirect '/search'
+  end
+  response = Typhoeus.get("http://www.omdbapi.com/",:params => {:s => params[:movie]})
+  @result1 = JSON.parse(response.body)
+  @movies = @result1["Search"]
+
+  erb :search
+
+end
+
+
+get '/show/:imdbID' do
+
+  response = Typhoeus.get("http://www.omdbapi.com/",:params => {:i => params["imdbID"]})
+  @result2 = JSON.parse(response.body)
+  @picture = @result2["Poster"]
+  
+erb :show
+
+end
+
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
new file mode 100644
index 0000000..92ed185
--- /dev/null
+++ b/public/stylesheets/style.css
@@ -0,0 +1,129 @@
+h1 {
+  text-align: center;
+  color: rgb(52, 73, 94);
+  font-size: 40px;
+}
+
+h2 {
+  color: white;
+  text-align: center;
+  color: rgb(236, 240, 241);
+}
+#error1 {
+  text-align: center;
+  color:rgba(236, 38, 44,1.0);
+}
+#error3 {
+  text-align: center;
+  color: rgb(236, 240, 241);
+}
+
+form {
+  text-align: center;
+  font-family : inherit;
+  font-size   : 30px;
+  color: rgb(236, 240, 241);
+
+}
+.search {
+  height: 30px;
+  width: 300px;
+  font-size: 15px;
+}
+
+body {
+  background-image: url("http://www.hollywoodreporter.com/sites/default/files/2011/12/imdb_a.jpg");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+p {
+  color: rgb(236, 240, 241);
+}
+#second_head {
+  text-decoration: underline;
+}
+a {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  color: white;
+  font-size: 35px;
+  text-decoration: none;
+
+}
+a:hover {
+  color:maroon;
+}
+
+#picture {
+  float: left;
+  margin: 0 2em 0 12em;
+}
+#goback {
+  text-align: center;
+  color: white;
+}
+.movies {
+text-align: center;
+color: rgb(127, 140, 141)
+}
+
+#words {
+  /*text-align: center;*/
+  color: rgb(127, 140, 141);
+  font-size: 23px;
+}
+
+.button {
+  text-align: center;
+  background-color:#4b3f39;
+  font-family: 'Open Sans', sans-serif;
+  font-size:20px;
+  text-decoration:none;
+  color:#fff;
+  position:relative;
+  padding:10px 20px;
+  padding-right:50px;
+  background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
+  border-radius: 5px;
+  box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
+}
+ 
+.button:active {
+  top:3px;
+  background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
+  box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
+}
+ 
+.button::before {
+  background-color:#322620;
+  background-image:url(http://www.clker.com/cliparts/0/5/7/9/1195435734741708243kuba_arrow_button_set_2.svg.med.png);   background-repeat:no-repeat;
+  background-position:center center;
+  content:"";
+  width:20px;
+  height:20px;
+  position:absolute;
+  right:15px;
+  top:50%;
+  margin-top:-9px;
+  border-radius: 50%;
+  box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
+}
+ 
+.button:active::before {
+  top:50%;
+  margin-top:-12px;
+  box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
+}
+
+#second_button {
+  display: block;
+  width: 6em;
+}
+
+#end_button {
+  text-align: center;
+  display: block;
+  width: 6em;
+}
\ No newline at end of file
diff --git a/views/index.erb b/views/index.erb
new file mode 100644
index 0000000..4789088
--- /dev/null
+++ b/views/index.erb
@@ -0,0 +1,8 @@
+<br><br><br>
+<h1>Welcome to the Movie Search</h1>
+<br><br><br><br><br><br><br><br>
+
+<form id="form" action="/search" method="get">
+  Movie: <input class = "search" type="text" name="movie" placeholder="Enter movie here."><br>
+  <input class="button" id="go_button" type="submit" value="Go!">
+</form>
\ No newline at end of file
diff --git a/views/layout.erb b/views/layout.erb
index d7eee9e..c7a565f 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -1,9 +1,11 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
 <head>
-  <title>Your Title Here</title>
+  <link rel="stylesheet" href="/stylesheets/style.css">
+  <title>Movie Search</title>
 </head>
 <body>
+
       <%= yield  %>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/search.erb b/views/search.erb
new file mode 100644
index 0000000..a3d5eb5
--- /dev/null
+++ b/views/search.erb
@@ -0,0 +1,20 @@
+<% if @movies == nil %>
+    <br><br><br><br>
+  <h1 id="error1">ERROR!</h1>
+    <br><br><br><br><br><br>
+  <h2 id ="error2">The movie name you entered didn't match any movie on file</h1>
+   <br><br>
+  <h3 id ="error3">Please go back and enter a different movie name.</h3>
+    <br><br><br><br><br><br><br>
+  <a class ="button" id="second_button" href="/">Go Back</a>
+
+<% else %>
+    <br><br><br><br>
+  <h1 id="second_head"> Results </h1>
+  <div class="movies"> <% @movies.each do |item| %>
+    <li> <a href='/show/<%=item["imdbID"]%>'>
+    <%=item["Title"]%> - <%=item["Year"]%></a>
+    </li>
+  <%end%>
+  </div>
+<%end%>
\ No newline at end of file
diff --git a/views/show.erb b/views/show.erb
new file mode 100644
index 0000000..1d491a6
--- /dev/null
+++ b/views/show.erb
@@ -0,0 +1,16 @@
+<h1 id="movie_title"><%=@result2["Title"]%></h1>
+<br><br><br>
+<div class ="elements">
+  <img id="picture" src='<%=@picture%>'/>
+    <div id ="words">
+      <p id="director">Director: <%= @result2["Director"] %></p>
+      <p id="">Released Year: <%= @result2["Released"] %></p>
+      <p id="rated">Rated: <%= @result2["Rated"] %></p>
+      <p id="runtime">Runtime: <%= @result2["Runtime"] %></p>
+      <p id="genre">Genre: <%= @result2["Genre"] %></p>
+      <!-- <p id="plot">Plot: <%= @result2["Plot"] %></p> -->
+      <p id="actors">Actors: <%= @result2["Actors"] %></p>
+    </div>
+    <br><br><br><br><br><br><br><br>
+  <a class ="button" id="end_button" href="/">Main Page</a>
+</div>