diff --git a/services/web/app/views/templates/index.jade b/services/web/app/views/templates/index.jade
index 0a0f8240f7..afbcd53871 100644
--- a/services/web/app/views/templates/index.jade
+++ b/services/web/app/views/templates/index.jade
@@ -1,46 +1,57 @@
 extends ../layout
 
 block content
-	.content.content-alt
+
+	.page-header.template-page-header
 		.container
 			.row
-				#searchArea().span12
-					div(ng-controller="SearchController")
-						.row-fluid
-							.span6.offset3.search-field
-								i.icon-search
-								input(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search")#searchField.span12
-						ul.unstyled
-							li(ng-repeat='hit in hits')
-								.thumbnail.searchResult
-									.row-fluid
-										a(ng-href='{{hit.url}}')
-											.span3
-												img(ng-src='{{hit.image_url}}')
-											.span9
-												h2(ng-bind-html='hit.name')
-												p(ng-bind-html='hit.description')
-
-
-				.row
-					-each tag in tags
-						-if(tag.totalNumberOfTemplates > 0)
-							.page-header.span12
-								h2 
-									a(href=tag.tagPagePath) #{tag.name}
-							.span12
+				.col-md-2
+					h1 Templates
+				.col-md-8(ng-controller="SearchController")
+					form.project-search.form-horizontal(role="form")
+						.form-group.has-feedback.has-feedback-left.col-md-12
+							input.form-control.col-md-12(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search template library....")
+							i.fa.fa-search.form-control-feedback-left
+							i.fa.fa-times.form-control-feedback(
+								ng-click="clearSearchText()",
+								style="cursor: pointer;",
+								ng-show="searchQueryText.length > 0"
+							)
+					ul.unstyled
+						li(ng-repeat='hit in hits')
+							.thumbnail.searchResult
 								.row-fluid
-									-each template in tag.exampleTemplates
-										.span3
-											a(href=template.templatePagePath ? template.templatePagePath : template.canonicalUrl) 
-												.template-thumbnail.thumbnail
-													img(src=template.thumbnailUrl)
-													h3.txt-middle #{template.name}
-
-								-if(tag.totalNumberOfTemplates > 4)
-									.row-fluid
-										.span6.offset3.more-templates
-											a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates
+									a(ng-href='{{hit.url}}')
+										.col-md-3
+											img(ng-src='{{hit.image_url}}')
+										.col-md-9
+											h2(ng-bind-html='hit.name')
+											p(ng-bind-html='hit.description')
+
+
+
+
+
+	.container
+		-each tag in tags
+			-if(tag.totalNumberOfTemplates > 0)
+				.page-header.col-md-12
+					h2 
+						a(href=tag.tagPagePath) #{tag.name}
+				.col-md-12
+					.row-fluid
+						-each template in tag.exampleTemplates
+							.col-md-3.template-thumbnail
+								a(href=template.templatePagePath ? template.templatePagePath : template.canonicalUrl).thumbnail
+									//- img(src=template.thumbnailUrl)
+									img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb8c1f33621a613683ecad/v/0/pdf-converted-cache/style-thumbnail")
+									div.caption
+										h3.txt-middle #{template.name}
+
+					-if(tag.totalNumberOfTemplates > 4)
+						.row-fluid
+							.col-md-6.offset3.more-templates
+								a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates
 
 
 
diff --git a/services/web/public/coffee/main/templates.coffee b/services/web/public/coffee/main/templates.coffee
index 2f554879df..6ab8b28199 100644
--- a/services/web/public/coffee/main/templates.coffee
+++ b/services/web/public/coffee/main/templates.coffee
@@ -25,6 +25,9 @@ define [
 	App.controller "SearchController", ($scope, algolia, _) ->
 		$scope.hits = []
 
+		$scope.clearSearchText = ->
+			$scope.searchQueryText = ""
+
 		$scope.safeApply = (fn)->
 			phase = $scope.$root.$$phase
 			if(phase == '$apply' || phase == '$digest')
diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less
new file mode 100644
index 0000000000..0223a481f0
--- /dev/null
+++ b/services/web/public/stylesheets/app/templates.less
@@ -0,0 +1,33 @@
+.template-page-header {
+	background: @gray-lightest;
+	border-top: 1px solid @gray-lightest;
+	margin: 0;
+	padding-top: unit(@line-height-base,rem);
+	h1 {
+		color: @gray-dark;
+		margin-top: 0;
+		margin-right: @line-height-base * 5;
+		line-height: 1;
+	}
+}
+
+.template-thumbnail {
+
+	.thumbnail {
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);	
+	    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	a {
+		padding:0px;
+		h3 {
+			color:@link-color;
+		}
+	}
+
+	.caption {
+		background: @gray-lightest;
+		border-top: 1px solid #ddd;
+	}
+
+}
\ No newline at end of file
diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less
index 01a193b579..d80e0d9641 100755
--- a/services/web/public/stylesheets/style.less
+++ b/services/web/public/stylesheets/style.less
@@ -31,7 +31,7 @@
 @import "components/labels.less";
 //@import "components/badges.less";
 //@import "components/jumbotron.less";
-//@import "components/thumbnails.less";
+@import "components/thumbnails.less";
 @import "components/alerts.less";
 @import "components/progress-bars.less";
 // @import "components/media.less";
@@ -63,3 +63,4 @@
 @import "app/bonus.less";
 @import "app/register.less";
 @import "app/blog.less";
+@import "app/templates.less";