diff --git a/app/views/filter.scala.html b/app/views/filter.scala.html
index e421432..ea8dc88 100644
--- a/app/views/filter.scala.html
+++ b/app/views/filter.scala.html
@@ -1,7 +1,6 @@
 <!-- Template for Filters -->
 <div class="jumbotron" style="
-    width: 300px; padding:30px;
-">
+    width: 300px; padding:30px;">
 <div class="container">
 	<div class="control-group pre-scrollable" style="height:150px; border:1px solid #628baf; padding:5px; border-radius:5px">
 	  <label class="control-label" for="designers" style="font-weight: bold; text-decoration: underline; text-align: center">DESIGNERS</label>
diff --git a/app/views/product.scala.html b/app/views/product.scala.html
index bbf6bcb..9a983d2 100644
--- a/app/views/product.scala.html
+++ b/app/views/product.scala.html
@@ -20,12 +20,12 @@
     	@header()
     	@navigation()
     	@recom(finallist)
-    	<div class="container" style="margin:0px;margin-left:50px">
+    	<div class="container-fluid" style="margin:0px;margin-left:50px">
 			<div class="row" style="width:1600px">
-				<div class="col-lg-8">
+				<div class="col-xs-6">
 					<img src="data:image/jpg;base64,@p.photo" hspace=20px vspace=20px>
 				</div>
-				<div class="col-lg-4" align=right vspace=20px hspace=20px>
+				<div class="col-xs-3" align=right vspace=20px hspace=20px>
 					<div  class="jumbotron"  style="margin-top: 200px;
 border: 1px solid #ccc;
 background-color: lightgrey;margin-bottom: 0px;margin-left: 250px;width: 520px;text-align: center">
diff --git a/app/views/recom.scala.html b/app/views/recom.scala.html
index 6704df0..ad373b0 100644
--- a/app/views/recom.scala.html
+++ b/app/views/recom.scala.html
@@ -93,20 +93,19 @@
         </div>
 <!-- Slides Container -->
 
-        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 980px; height: 200px; overflow: hidden;">
+        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 100%; height: 200px; overflow: hidden;">
         @for(product1 <- products) {
            
             
             <div class="col-sm-4 thumb" style="text-align: center">
 					                <a  href="#" >
-					                    <img class="img-responsive" src="data:image/jpg;base64,@product1.photo" height=200px width=250px alt="renderedIncorrectly">
+					                    <img class="img-responsive" src="data:image/jpg;base64,@product1.photo" height=200px width=250px id=@product1.prod_id alt="renderedIncorrectly">
 					                </a>
 					                <label>@product1.merchant</label>
 					                <input class="rating" data-size="xxs" data-disabled="true" value=@product1.rating>
 					                <label>$@product1.price</label>
 					            </div>
 					            <script>
-					            	var i = @product1.prod_id;
 					            	$("#@product1.prod_id").click(function() {
 					            		var url = window.location.href.split("/")[0];
 						        		window.location.href = url + "/product?p=" + @product1.prod_id;