diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/WEB-INF/web.xml b/spring-webflow-samples/booking-jsf/src/main/webapp/WEB-INF/web.xml
index 8018953a..6527dbb1 100755
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/WEB-INF/web.xml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/WEB-INF/web.xml
@@ -10,6 +10,25 @@
 		<param-value>.xhtml</param-value>
 	</context-param>
 	
+	<!-- Special Facelets Debug Output for Development -->
+  	<context-param>
+        <param-name>facelets.DEVELOPMENT</param-name>
+   		<param-value>true</param-value>
+  	</context-param>
+  	
+  	<!-- Cause Facelets to refresh templates during development -->
+  	<context-param>
+  		<param-name>facelets.REFRESH_PERIOD</param-name>
+  		<param-value>1</param-value>
+  	</context-param>
+  	
+  	<!-- Cause Facelets always reconstruct the component tree, cutting down on the amount of state that needs to be 
+  	serialized -->
+  	<context-param>
+  		<param-name>facelets.BUILD_BEFORE_RESTORE</param-name>
+  		<param-value>false</param-value>
+  	</context-param>
+	
 	<!-- Use JSF client-side state saving to allow management of state by SWF -->
 	<context-param>
 		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/css/booking.css b/spring-webflow-samples/booking-jsf/src/main/webapp/css/booking.css
new file mode 100644
index 00000000..fc2c4eb2
--- /dev/null
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/css/booking.css
@@ -0,0 +1,169 @@
+	a, a:link a:active {		
+		color: black;		
+		background-color: white;
+		text-decoration: underline;
+	}
+		
+	a:visited {
+		color: black;		
+		background-color: transparent;
+	}
+		
+	a:hover {		
+		color: white;		
+		background-color: #65a242;		
+		text-decoration: none;		
+	}
+	
+	body.spring {
+		background-color: #9cac7c;
+	}
+	
+	#header.spring { 
+		margin: 0 0 1em 0;
+        padding: 0px 0px;
+		background-color : #414f23;
+	}
+	
+	#branding.spring {
+		float: none;
+        width: 100%;
+            
+        margin: 10px 0 0 0;
+        padding: 0 0 0 0;
+            
+        text-align: none;
+    }
+    
+    #welcome {
+    	padding: 10px 10px;
+    }
+    
+    #welcome div.left {
+    	float: left;
+    } 
+    
+    #welcome div.right {
+    	float: right;
+    }
+    
+    #content.spring {
+    	width: 740px;
+    	background: #fff url(../images/bg.gif) 0 0 repeat;
+    	margin-bottom: 0px;
+    }
+    
+    #content .section {
+    	width: 505px;
+    	float: left;
+    }
+    
+    #content.spring input[type="submit"], input[type="button"] {
+    	margin-right: 5px;
+		font-weight: bold;
+		color: #fff;
+		height: 20px;
+		background: #fff url(../images/btn.bg.gif) 0 0 repeat-x;
+		border-style: none;
+		vertical-align: middle;
+	}
+	
+	.errors {
+		font-weight: bold;
+		text-align: center;
+		color: #600;
+	}
+	
+	.errors ul {
+		list-style: none;
+	}
+	
+	#content .field {
+		float:left;
+	}
+	
+	#content .field .label {
+		float: left;
+		padding-top: 5px;
+		padding-right: 5px;
+		font-weight: bold;
+		width: 150px;
+		text-align: right;
+	}
+	
+	#content .field .output {
+		float: left;
+		width: 250px;
+		padding-top: 5px;
+		text-align: left;
+	}
+	
+	#content .field .input {
+		float: left;
+		width: 250px;
+		text-align: left;
+	}
+	
+	#content .searchGroup {
+		width: 35%;
+		text-align: right;
+	}
+	
+	#content .searchGroup .searchButton {
+		text-align: right;
+	}
+	
+	#content .buttonGroup {
+		width: 90%;
+		float: left;
+		text-align: center;
+	}
+	
+	#content .prev {
+		float: left;
+	}
+	
+	#content .prev a {
+		margin-right: 20px;
+	}
+	
+	#content .next {
+		float: left;	
+	}
+	
+	#content .summary {
+		width: 100%;
+		border: 1px solid #414f23;
+		border-collapse: collapse;
+	}
+	
+	#content .summary thead th {
+		border-left: 1px solid #414f23;
+		background: #fff url(../images/th.bg.gif) 0 100% repeat-x;
+		border-bottom: 1px solid #414f23;
+		padding: 6px;
+		text-align: left;
+		font-size: small;
+	}
+    
+    #content .summary tbody td {
+		border-left: 1px solid #9cac7c;
+		padding: 4px;
+		border-bottom: 1px solid #9cac7c;
+		font-size: 8pt;
+	}
+    
+    #local.spring{
+        width: 215px;
+    }
+    
+    #footer.spring {
+    	padding: 25px 0;
+    	background-color : white;
+    	border-top: 1px solid #C3BBB6;
+    }
+    
+    #footer.spring img {
+    	float: right;
+    	padding-right: 20px;
+    }
\ No newline at end of file
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/css/screen.css b/spring-webflow-samples/booking-jsf/src/main/webapp/css/screen.css
deleted file mode 100755
index c09ea787..00000000
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/css/screen.css
+++ /dev/null
@@ -1,265 +0,0 @@
-/* Setup defaults since variable in browsers
------------------------------------------------ */
-body, div, dd, dt, dl, img, ul, ol, li, p, h1, h2, h3, h4, h5, form, hr, fieldset {
-	margin: 0;
-	padding: 0;
-}
-/* Element Defaults
------------------------------------------------ */
-html {
-	height: 100%;
-	background-color: #9cac7c;
-}
-img {
-	border: 0;
-}
-body {
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: small;
-	line-height: 1.25em;
-	color: #362F2D;
-	position: relative;
-	width: 760px;
-	height: 100%;
-	margin-left: auto;
-	margin-right: auto;
-}
-label {
-	font-weight: bold;
-	color: #5E5147;
-}
-input {
-	border: 1px solid #C3BBB6;
-	padding: 4px;
-	margin: 5px 0;
-	background: #fff url(../images/input.bg.gif) 0 0 repeat-x;
-}
-select {
-	border: 1px solid #C3BBB6;
-	padding: 4px;
-	margin: 5px 0;
-	background: #fff url(../images/input.bg.gif) 0 0 repeat-x;
-}ol, ul {
-	margin: 10px 0px 10px 6px;
-}
-li {
-	margin: 10px 12px;
-}
-fieldset {
-	border: 0;
-}
-/* Layout
------------------------------------------------ */
-#document {
-	padding: 0 1px;
-	background: #fff url(../images/bg.gif) 0 0 repeat-y;
-	float: left;
-	border-bottom: 1px solid #C3BBB6;
-}
-#header {
-	float: left;
-	width: 758px;
-	height:36px;
-	background-color: #414f23;
-}
-#container {
-	float: left;
-	width: 758px;
-	background: url(../images/header.jpg) 0 0 repeat-x;
-}
-#sidebar {
-	float: left;
-	width: 205px;
-	margin-left: 5px;
-	margin-top: 185px;
-	padding-top: 5px;
-}
-#content {
-	float: left;
-	width: 448px;
-	margin-top: 195px;
-	padding-top: 5px;
-	background: #fff url(../images/cnt.bg.gif) 0 0 repeat-x;
-}
-#footer {
-	clear: both;
-	margin-top: 40px;
-	float: left;
-	padding: 20px;
-	border-top: 1px solid #C3BBB6;
-	background-color: #fff;
-	width: 718px;
-	text-align: right;
-}
-/* General
------------------------------------------------ */
-input[type="submit"], input[type="button"] {
-	font-weight: bold;
-	color: #fff;
-	border: 1px solid #5D1414;
-	height: 26px;
-	background: #fff url(../images/btn.bg.gif) 0 0 repeat-x;
-	border-style: none;
-}
-.center {
-	text-align: center;
-}
-.entry {
-	clear: both;
-	padding-top: 10px;
-}
-.entry .label {
-	float: left;
-	padding-top: 10px;
-	padding-right: 5px;
-	font-weight: bold;
-	width: 150px;
-	text-align: right;
-}
-.entry .output {
-	float: left;
-	width: 250px;
-	padding-top: 10px;
-	text-align: left;
-}
-.entry .input {
-	float: left;
-	width: 250px;
-	text-align: left;
-}
-/* Sidebar
------------------------------------------------ */
-.notes {
-	text-align: center;
-	font-size: small;
-}
-.errors {
-	font-size: small;
-	font-weight: bold;
-	text-align: center;
-	color: #600;
-}
-.errors div {
-	text-align: left;
-}
-.errors input {
-	border: 1px solid #600;
-}
-.errors ul {
-	list-style: none;
-}
-.buttonBox {
-	text-align: center;
-	padding: 5px 0;
-}
-#sidebar p {
-	font-size: small;
-	color: #8B7869;
-	line-height: 150%;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	padding-left: 5px;
-	padding-right: 5px;
-}
-#sidebar li {
-	font-size: small;
-	color: #8B7869;
-}
-#sidebar h1 {
-	line-height: normal;
-	font-weight: bold;
-	font-size: small;
-}
-/*
-#sidebar p:hover {
-	color: #362F2D;
-}
-*/
-/* Content
------------------------------------------------ */
-#content .section {
-	float: left;
-	width: 518px;
-	padding: 15px 15px 0 10px;
-}
-#content .section h1 {
-	font-family: "Trebuchet MS", Arial, sans-serif;
-	line-height: normal;
-	font-weight: normal;
-	font-size: large;
-}
-#content .section p {
-	line-height: 150%;
-	padding: 10px 0;
-	font-size: small;
-}
-#content table {
-	width: 100%;
-	border: 1px solid #D2C9C4;
-	border-collapse: collapse;
-}
-#content table caption {
-	padding-bottom: 6px;
-	text-align: left;
-	font-weight: bold;
-}
-#content table thead th {
-	border-left: 1px solid #D2C9C4;
-	background: #fff url(../images/th.bg.gif) 0 100% repeat-x;	
-	border-bottom: 1px solid #D2C9C4;
-	padding: 6px;
-	text-align: left;
-	font-size: small;
-}
-#content table tbody td {
-	border-left: 1px solid #E4DBD5;
-	padding: 4px;
-	border-bottom: 1px solid #D2C9C4;
-	font-size: 8pt;
-}
-#content dt {
-	font-weight: bold;
-	float: left;
-	width: 33%;
-}
-#content dd {
-	padding-left: 10px;
-	float: left;
-	width: 66%;
-}
-#radio table {
-	border: 0px;
-}
-#radio table tr td {
-	border: 0px;
-	border-left: 0px;
-	border-bottom: 0px;
-}
-#content .section .prev {
-	float: left;
-	width: 120px;
-}
-#content .section .next {
-	float: left;	
-}
-/* Header
------------------------------------------------ */
-#title {
-	float: left;
-	padding: 10px 0 6px 15px;
-	color: #e9efdb;
-}
-#status {
-	color: #e9efdb;
-	float: right;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-weight: bold;
-	font-size: x-small;
-	text-align: right;
-	padding-top: 14px;
-	padding-right: 15px;
-}
-#status a {
-	color: #e9efdb;
-	text-decoration: none;
-}
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/bookingForm.xhtml b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/bookingForm.xhtml
index 63c7373f..8d5c96f5 100755
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/bookingForm.xhtml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/bookingForm.xhtml
@@ -4,39 +4,37 @@
 	  			xmlns:h="http://java.sun.com/jsf/html"
 	  			xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:sf="http://www.springframework.org/tags/faces"
+                xmlns:sfe="http://www.springframework.org/tags/faces-ext"
 				template="/template.xhtml">
 
 <ui:define name="content">
 
 <div class="section">
-	<h1>Book Hotel</h1>
-</div>
-
-<div class="section">
+	<h2>Book Hotel</h2>
 	<h:form id="booking">
 	<h:messages errorClass="errors" />
 	<fieldset>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Name:</div>
 			<div class="output">#{hotel.name}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Address:</div>
 			<div class="output">#{hotel.address}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">City, State:</div>
 			<div class="output">#{hotel.city}, #{hotel.state}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Zip:</div>
 			<div class="output">#{hotel.zip}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Country:</div>
 			<div class="output">#{hotel.country}</div>
 		</div>
-        <div class="entry">
+        <div class="field">
             <div class="label">Nightly rate:</div>
             <div class="output">
                 <h:outputText value="#{hotel.price}">
@@ -44,31 +42,31 @@
                 </h:outputText>
             </div>
         </div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="checkinDate">Check In Date:</h:outputLabel>
 			</div>
 			<div class="input">
-				<sf:clientDateValidator allowBlank="false" msgDisplay="block" msgClass="errors">
+				<sf:clientDateValidator required="true" >
 		        	<h:inputText id="checkinDate" value="#{booking.checkinDate}" required="true">
-	                	<f:convertDateTime pattern="MM/dd/yy" timeZone="EST"/>
+	                	<f:convertDateTime pattern="yyyy-MM-dd" timeZone="EST"/>
 	                </h:inputText>
                	</sf:clientDateValidator>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="checkoutDate">Check Out Date:</h:outputLabel>
 			</div>
 			<div class="input">
-				<sf:clientDateValidator allowBlank="false" msgDisplay="block" msgClass="errors">
+				<sf:clientDateValidator required="true">
 					<h:inputText id="checkoutDate" value="#{booking.checkoutDate}" required="true">
-						<f:convertDateTime pattern="MM/dd/yy" timeZone="EST"/>
+						<f:convertDateTime pattern="yyyy-MM-dd" timeZone="EST"/>
 					</h:inputText>
 				</sf:clientDateValidator>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="beds">Room Preference:</h:outputLabel>
 			</div>
@@ -80,7 +78,7 @@
 				</h:selectOneMenu>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="smoking">Smoking Preference:</h:outputLabel>
 			</div>
@@ -91,27 +89,27 @@
 				</h:selectOneRadio>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="creditCard">Credit Card #:</h:outputLabel>
 			</div>
 			<div class="input">
-				<sf:clientNumberValidator allowBlank="false" allowNegative="false" allowDecimals="false" minLength="16" maxLength="16" msgDisplay="block" msgClass="errors">
+				<sf:clientTextValidator required="true" regExp="[0-9]{16}" invalidMessage="A 16-digit credit card number is required.">
 					<h:inputText id="creditCard" value="#{booking.creditCard}" required="true"/>
-				</sf:clientNumberValidator>
+				</sf:clientTextValidator>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="creditCardName">Credit Card Name:</h:outputLabel>
 			</div>
 			<div class="input">
-				<sf:clientTextValidator allowBlank="false" msgDisplay="block" msgClass="errors">
+				<sf:clientTextValidator required="true">
 					<h:inputText id="creditCardName" value="#{booking.creditCardName}" required="true"/>
 				</sf:clientTextValidator>
 			</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">
 				<h:outputLabel for="creditCardExpiryMonth">Credit Card Expiry:</h:outputLabel>
 			</div>
@@ -139,18 +137,13 @@
 				</h:selectOneMenu>
 			</div>
 		</div>
-		<div class="entry errors">
-			<h:messages globalOnly="true"/>
-		</div>
-		<div class="entry">
-			<div class="label">&#160;</div>
-			<div class="input">
+
+			<div class="buttonGroup">
 				<sf:validateAllOnClick>
 					<h:commandButton id="proceed" action="proceed" value="Proceed"/>
-				</sf:validateAllOnClick>&#160;
+				</sf:validateAllOnClick>
 				<h:commandButton id="cancel" immediate="true" value="Cancel" action="cancel"/>
 			</div>
-		</div>
 	</fieldset>
 	</h:form>
 </div>
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/confirmBooking.xhtml b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/confirmBooking.xhtml
index b38b971c..a6d8b04c 100755
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/confirmBooking.xhtml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/confirmBooking.xhtml
@@ -8,33 +8,33 @@
 <ui:define name="content">
 
 <div class="section">
-	<h1>Confirm Hotel Booking</h1>
+	<h1>Confirm Hotel Booking</h1> 
 </div>
 
 <div class="section">
 	<h:form id="confirm">
 	<fieldset>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Name:</div>
 			<div class="output">#{hotel.name}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Address:</div>
 			<div class="output">#{hotel.address}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">City, State:</div>
 			<div class="output">#{hotel.city}, #{hotel.state}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Zip:</div>
 			<div class="output">#{hotel.zip}</div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Country:</div>
 			<div class="output">#{hotel.country}</div>
 		</div>
-        <div class="entry">
+        <div class="field">
             <div class="label">Total payment:</div>
             <div class="output">
                 <h:outputText value="#{booking.total}">
@@ -43,26 +43,24 @@
                 </h:outputText>
             </div>
         </div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Check In Date:</div>
 			<div class="output"><h:outputText value="#{booking.checkinDate}"/></div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Check Out Date:</div>
 			<div class="output"><h:outputText value="#{booking.checkoutDate}"/></div>
 		</div>
-		<div class="entry">
+		<div class="field">
 			<div class="label">Credit Card #:</div>
 			<div class="output">#{booking.creditCard}</div>
 		</div>
-		<div class="entry">
-			<div class="label">&#160;</div>
-			<div class="input">
-				<h:commandButton id="confirm" value="Confirm" action="confirm"/>&#160;
-    			<h:commandButton id="revise" value="Revise" action="revise"/>&#160;
-    			<h:commandButton id="cancel" value="Cancel" action="cancel"/>
-			</div>
+		<div class="buttonGroup">
+			<h:commandButton id="confirm" value="Confirm" action="confirm"/>&#160;
+    		<h:commandButton id="revise" value="Revise" action="revise"/>&#160;
+    		<h:commandButton id="cancel" value="Cancel" action="cancel"/>
 		</div>
+
 	</fieldset>
 	</h:form>
 </div>
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/hotelDetails.xhtml b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/hotelDetails.xhtml
index f3bbe026..1f5228e2 100755
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/hotelDetails.xhtml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/booking/hotelDetails.xhtml
@@ -8,35 +8,32 @@
 <ui:define name="content">
 
 <div class="section">
-	<h1>View Hotel</h1>
-</div>
-
-<div class="section">
-	<div class="entry">
+	<h2>View Hotel</h2>
+	<div class="field">
 		<div class="label">Name:</div>
 		<div class="output">#{hotel.name}</div>
 	</div>
-	<div class="entry">
+	<div class="field">
 		<div class="label">Address:</div>
 		<div class="output">#{hotel.address}</div>
 	</div>
-	<div class="entry">
+	<div class="field">
 		<div class="label">City:</div>
 		<div class="output">#{hotel.city}</div>
 	</div>
-	<div class="entry">
+	<div class="field">
 		<div class="label">State:</div>
 		<div class="output">#{hotel.state}</div>
 	</div>
-	<div class="entry">
+	<div class="field">
 		<div class="label">Zip:</div>
 		<div class="output">#{hotel.zip}</div>
 	</div>
-	<div class="entry">
+	<div class="field">
 		<div class="label">Country:</div>
 		<div class="output">#{hotel.country}</div>
 	</div>
-    <div class="entry">
+    <div class="field">
         <div class="label">Nightly rate:</div>
         <div class="output">
             <h:outputText value="#{hotel.price}">
@@ -48,8 +45,8 @@
 
 <div class="section">
 	<h:form id="hotel">
-	<fieldset class="buttonBox">
-		<h:commandButton id="book" action="book" value="Book Hotel"/>&#160;
+	<fieldset class="buttonGroup">
+		<h:commandButton id="book" action="book" value="Book Hotel"/>
 		<h:commandButton id="cancel" action="cancel" value="Back to Search"/>
 	</fieldset>
 	</h:form>
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/main/main.xhtml b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/main/main.xhtml
index 46ca70b2..871c1596 100755
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/flow/main/main.xhtml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/flow/main/main.xhtml
@@ -2,7 +2,8 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
 	    		xmlns:ui="http://java.sun.com/jsf/facelets"
 	  			xmlns:h="http://java.sun.com/jsf/html"
-	  			xmlns:f="http://java.sun.com/jsf/core"
+	  			xmlns:f="http://java.sun.com/jsf/core"
+	  			xmlns:sf="http://www.springframework.org/tags/faces"
 				template="/template.xhtml">
 
 <ui:define name="content">
@@ -12,23 +13,32 @@
     <span class="errors">
        <h:messages globalOnly="true"/>
     </span>
-	<h1>Search Hotels</h1>
-	<fieldset> 
-	   <h:inputText id="searchString" value="#{searchCriteria.searchString}" style="width: 165px; height: 15px;"/>&#160;
-	   <h:commandButton id="findHotels" value="Find Hotels" actionListener="#{searchCriteria.findHotelsListener}" action="findHotels"/>
-	   <br/>
-       <h:outputLabel for="pageSize">Maximum results:</h:outputLabel>&#160;
-       <h:selectOneMenu value="#{searchCriteria.pageSize}" id="pageSize">
-          <f:selectItem itemLabel="5" itemValue="5"/>
-          <f:selectItem itemLabel="10" itemValue="10"/>
-          <f:selectItem itemLabel="20" itemValue="20"/>
-       </h:selectOneMenu>
+	<h2>Search Hotels</h2>
+	<div id="hotelsearch">
+	<fieldset>
+		<div class="searchGroup">
+			<div class="searchField">
+			<sf:clientTextValidator promptMessage="Search hotels by name, address, city or zip.">
+				<h:inputText id="searchString" value="#{searchCriteria.searchString}" style="width: 165px; height: 15px;"/>
+			</sf:clientTextValidator>
+			</div>
+			<div class="searchSize">
+			   	<h:outputLabel for="pageSize">Maximum results:</h:outputLabel>
+			   	<h:selectOneMenu value="#{searchCriteria.pageSize}" id="pageSize">
+			    	<f:selectItem itemLabel="5" itemValue="5"/>
+			      	<f:selectItem itemLabel="10" itemValue="10"/>
+			      	<f:selectItem itemLabel="20" itemValue="20"/>
+			   	</h:selectOneMenu>  
+	   		</div>
+			<div class="searchButton">
+		   		<h:commandButton id="findHotels" value="Find Hotels" actionListener="#{searchCriteria.findHotelsListener}" action="findHotels"/>
+			</div>
+		</div>
     </fieldset>
-</div>
+    </div>
 
-<div class="section">
 	<h:outputText value="No Hotels Found" rendered="#{hotels.rowCount==0}"/>
-	<h:dataTable id="hotels" value="#{hotels}" var="hotel" rendered="#{hotels.rowCount > 0}">
+	<h:dataTable id="hotels" styleClass="summary" value="#{hotels}" var="hotel" rendered="#{hotels.rowCount > 0}">
 		<h:column>
 			<f:facet name="header">Name</f:facet>
 			#{hotel.name}
@@ -61,12 +71,10 @@
 </div>
 
 <div class="section">
-	<h1>Current Hotel Bookings</h1>
-</div>
-
-<div class="section">
+	<h2>Current Hotel Bookings</h2>
+	
 	<h:outputText value="No Bookings Found" rendered="#{bookings.rowCount == 0}"/>
-	<h:dataTable id="bookings" value="#{bookings}" var="booking" rendered="#{bookings.rowCount > 0}">
+	<h:dataTable id="bookings" styleClass="summary" value="#{bookings}" var="booking" rendered="#{bookings.rowCount > 0}">
 		<h:column>
 			<f:facet name="header">Name</f:facet>
 			#{booking.hotel.name}
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/bg.gif b/spring-webflow-samples/booking-jsf/src/main/webapp/images/bg.gif
index ea9200df..013cfa6f 100755
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/bg.gif and b/spring-webflow-samples/booking-jsf/src/main/webapp/images/bg.gif differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/btn.bg.gif b/spring-webflow-samples/booking-jsf/src/main/webapp/images/btn.bg.gif
index b77cc954..87256cf4 100755
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/btn.bg.gif and b/spring-webflow-samples/booking-jsf/src/main/webapp/images/btn.bg.gif differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/header.jpg b/spring-webflow-samples/booking-jsf/src/main/webapp/images/header.jpg
index ce170222..0be0d4d7 100644
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/header.jpg and b/spring-webflow-samples/booking-jsf/src/main/webapp/images/header.jpg differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/spring-logo.jpg b/spring-webflow-samples/booking-jsf/src/main/webapp/images/spring-logo.jpg
deleted file mode 100755
index 62be3983..00000000
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/spring-logo.jpg and /dev/null differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/th.bg.gif b/spring-webflow-samples/booking-jsf/src/main/webapp/images/th.bg.gif
index 7ab7c249..4663cf51 100755
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/th.bg.gif and b/spring-webflow-samples/booking-jsf/src/main/webapp/images/th.bg.gif differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/images/webflow-logo.jpg b/spring-webflow-samples/booking-jsf/src/main/webapp/images/webflow-logo.jpg
deleted file mode 100755
index ed76bae0..00000000
Binary files a/spring-webflow-samples/booking-jsf/src/main/webapp/images/webflow-logo.jpg and /dev/null differ
diff --git a/spring-webflow-samples/booking-jsf/src/main/webapp/template.xhtml b/spring-webflow-samples/booking-jsf/src/main/webapp/template.xhtml
index ea9c5045..dca90d88 100644
--- a/spring-webflow-samples/booking-jsf/src/main/webapp/template.xhtml
+++ b/spring-webflow-samples/booking-jsf/src/main/webapp/template.xhtml
@@ -5,20 +5,32 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<title>Spring Faces: Hotel Booking Sample Application</title>
-	<link href="/swf-booking-jsf/css/screen.css" rel="stylesheet" type="text/css" />
+	<style type="text/css" media="screen">
+        @import url("/swf-booking-jsf/spring/resources/css-framework/css/tools.css");
+        @import url("/swf-booking-jsf/spring/resources/css-framework/css/typo.css");
+        @import url("/swf-booking-jsf/spring/resources/css-framework/css/forms.css");
+        @import url("/swf-booking-jsf/spring/resources/css-framework/css/layout-navtop-localleft.css");        
+        @import url("/swf-booking-jsf/spring/resources/css-framework/css/layout.css");
+        @import url("/swf-booking-jsf/spring/resources/css/booking.css");
+    </style>
 	<ui:insert name="headIncludes"/>
 </head>
-<body>
+<body class="tundra spring">
 
-<div id="document">
-	<div id="header">
-		<div id="title">Spring Faces: Hotel Booking Sample Application</div>
-		<div id="status">
-            Welcome #{user.name}
+<div id="page">
+	<div id="header" class="clearfix spring">
+		<div id="welcome">
+			<div class="left">Spring Faces: Hotel Booking Sample Application</div>
+			<div class="right">
+	            Welcome #{user.name}
+			</div>
+		</div>
+		<div id="branding" class="spring">
+			<img src="/swf-booking-jsf/spring/resources/images/header.jpg" alt="foo bar"/>
 		</div>
 	</div>
-	<div id="container">
-		<div id="sidebar">
+	<div id="content" class="clearfix spring">
+		<div id="local" class="spring">
 			<a href="http://www.thespringexperience.com">
 				<img src="/swf-booking-jsf/images/diplomat.jpg" />
 			</a>
@@ -32,12 +44,12 @@
 				December 12 - 15, 2007 at the Westin Diplomat in Hollywood, Florida.
 			</p>
 		</div>
-		<div id="content">
+		<div id="main">
 			<ui:insert name="content"/>
 		</div>
-		<div id="footer">
-			<a href="http://www.springframework.org"><img src="/swf-booking-jsf/images/powered-by-spring.png" /></a>
-		</div>
+	</div>
+	<div id="footer" class="clearfix spring">
+		<a href="http://www.springframework.org"><img src="/swf-booking-jsf/images/powered-by-spring.png" /></a>
 	</div>
 </div>