diff --git a/src/main/webapp/WEB-INF/view/error/badRequest.jsp b/src/main/webapp/WEB-INF/view/error/badRequest.jsp
index 34a823460..ce116fd4a 100644
--- a/src/main/webapp/WEB-INF/view/error/badRequest.jsp
+++ b/src/main/webapp/WEB-INF/view/error/badRequest.jsp
@@ -12,7 +12,10 @@
 <link href="${f:url('/css/style.css')}" rel="stylesheet"
 	type="text/css" />
 </head>
-<body>
+<link href="/css/font-awesome.min.css"
+	rel="stylesheet" type="text/css" />
+</head>
+<body class="error">
 	<jsp:include page="header.jsp" />
 	<div class="container">
 		<div class="content">
@@ -31,6 +34,8 @@
 	<script type="text/javascript"
 		src="${f:url('/js/jquery-2.1.4.min.js')}"></script>
 	<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/suggestor.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/search.js')}"></script>
 </body>
 </html>
 <% }catch(Exception e){ session.invalidate();}%>
diff --git a/src/main/webapp/WEB-INF/view/error/error.jsp b/src/main/webapp/WEB-INF/view/error/error.jsp
index 6cc37dafa..749f757c9 100644
--- a/src/main/webapp/WEB-INF/view/error/error.jsp
+++ b/src/main/webapp/WEB-INF/view/error/error.jsp
@@ -10,8 +10,10 @@
 	type="text/css" />
 <link href="${f:url('/css/style.css')}" rel="stylesheet"
 	type="text/css" />
+<link href="/css/font-awesome.min.css"
+	rel="stylesheet" type="text/css" />
 </head>
-<body>
+<body class="error">
 	<jsp:include page="header.jsp" />
 	<div class="container">
 		<div class="content">
@@ -35,5 +37,7 @@
 	<script type="text/javascript"
 		src="${f:url('/js/jquery-2.1.4.min.js')}"></script>
 	<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/suggestor.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/search.js')}"></script>
 </body>
 </html>
diff --git a/src/main/webapp/WEB-INF/view/error/footer.jsp b/src/main/webapp/WEB-INF/view/error/footer.jsp
index 6221d0fbb..a865de2cd 100755
--- a/src/main/webapp/WEB-INF/view/error/footer.jsp
+++ b/src/main/webapp/WEB-INF/view/error/footer.jsp
@@ -1,5 +1,4 @@
 <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
-<hr/>
 <footer class="bd-footer text-muted" role="contentinfo">
 	<div id="footer" class="container center">
 		<p>
diff --git a/src/main/webapp/WEB-INF/view/error/header.jsp b/src/main/webapp/WEB-INF/view/error/header.jsp
index 95d025f32..fe768d0fe 100755
--- a/src/main/webapp/WEB-INF/view/error/header.jsp
+++ b/src/main/webapp/WEB-INF/view/error/header.jsp
@@ -2,140 +2,143 @@
 <la:form action="/search" method="get" styleId="searchForm"
 	styleClass="searchResultForm">
 ${fe:facetForm()}${fe:geoForm()}
-	<nav class="navbar navbar-dark bg-inverse navbar-static-top pos-f-t">
+	<nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
 		<la:link styleClass="navbar-brand" href="/">
 			<img src="${f:url('/images/logo-head.png')}"
 				alt="<la:message key="labels.header_brand_name" />" />
 		</la:link>
-		<div class="form-inline navbar-form pull-right">
-			<la:text property="q" maxlength="1000" styleId="query"
-				styleClass="form-control" autocomplete="off" />
-			<button class="btn medium btn-primary" type="submit" name="search"
-				id="searchButton">
-				<i class="icon-search icon-white"></i><span class="hidden-xs"><la:message
-						key="labels.search" /></span>
-			</button>
-			<a href="#searchOptions" role="button" class="btn btn-secondary"
-				data-toggle="modal"><i class="icon-cog"></i><span
-				class="hidden-xs"><la:message
-						key="labels.header_form_option_btn" /></span></a>
+		<div
+			class="search-box navbar-form col-lg-5 col-md-6 col-sm-6 col-xs-8 pull-right"
+			role="search">
+			<div class="input-group">
+				<la:text property="q" maxlength="1000" styleId="query"
+					styleClass="form-control" autocomplete="off" />
+				<span class="input-group-btn">
+					<button type="submit" name="search" id="searchButton"
+						class="btn btn-primary">
+						<i class="fa fa-search"></i>
+					</button>
+					<button type="button" class="btn btn-default"
+						data-toggle="control-options" data-target="#searchOptions"
+						id="searchOptionsButton">
+						<i class="fa fa-cog"></i> <span class="sr-only"><la:message
+								key="labels.header_form_option_btn" /></span>
+					</button>
+				</span>
+			</div>
 		</div>
 	</nav>
-	<div class="modal fade" id="searchOptions" tabindex="-1" role="dialog"
-		aria-labelledby="searchOptionsLabel" aria-hidden="true">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal"
-						aria-label="Close">
-						<span aria-hidden="true">&times;</span> <span class="sr-only">Close</span>
-					</button>
-					<h4 class="modal-title" id="searchOptionsLabel">
-						<la:message key="labels.search_options" />
-					</h4>
-				</div>
-				<div class="modal-body">
+	<div id="searchOptions" class="control-options">
+		<div class="container">
+			<h4 id="searchOptionsLabel">
+				<la:message key="labels.search_options" />
+			</h4>
+			<div>
+				<fieldset class="form-group">
+					<label for="contentNum"><la:message key="labels.index_num" /></label>
+					<la:select property="num" styleId="numSearchOption"
+						styleClass="form-control">
+						<option value="">
+							<la:message key="labels.search_result_select_num" />
+						</option>
+						<la:option value="10">10</la:option>
+						<la:option value="20">20</la:option>
+						<la:option value="30">30</la:option>
+						<la:option value="40">40</la:option>
+						<la:option value="50">50</la:option>
+						<la:option value="100">100</la:option>
+					</la:select>
+				</fieldset>
+				<fieldset class="form-group">
+					<label for="contentSort"><la:message
+							key="labels.index_sort" /></label>
+					<la:select property="sort" styleId="sortSearchOption"
+						styleClass="form-control">
+						<option value="">
+							<la:message key="labels.search_result_select_sort" />
+						</option>
+						<la:option value="score.desc">
+							<la:message key="labels.search_result_sort_score_desc" />
+						</la:option>
+						<la:option value="created.asc">
+							<la:message key="labels.search_result_sort_created_asc" />
+						</la:option>
+						<la:option value="created.desc">
+							<la:message key="labels.search_result_sort_created_desc" />
+						</la:option>
+						<la:option value="content_length.asc">
+							<la:message key="labels.search_result_sort_content_length_asc" />
+						</la:option>
+						<la:option value="content_length.desc">
+							<la:message key="labels.search_result_sort_content_length_desc" />
+						</la:option>
+						<la:option value="last_modified.asc">
+							<la:message key="labels.search_result_sort_last_modified_asc" />
+						</la:option>
+						<la:option value="last_modified.desc">
+							<la:message key="labels.search_result_sort_last_modified_desc" />
+						</la:option>
+						<c:if test="${searchLogSupport}">
+							<la:option value="click_count.asc">
+								<la:message key="labels.search_result_sort_click_count_asc" />
+							</la:option>
+							<la:option value="click_count.desc">
+								<la:message key="labels.search_result_sort_click_count_desc" />
+							</la:option>
+						</c:if>
+						<c:if test="${favoriteSupport}">
+							<la:option value="favorite_count.asc">
+								<la:message key="labels.search_result_sort_favorite_count_asc" />
+							</la:option>
+							<la:option value="favorite_count.desc">
+								<la:message key="labels.search_result_sort_favorite_count_desc" />
+							</la:option>
+						</c:if>
+					</la:select>
+				</fieldset>
+				<fieldset class="form-group">
+					<label for="contentLang"><la:message
+							key="labels.index_lang" /></label>
+					<la:select property="lang" styleId="langSearchOption"
+						multiple="true" styleClass="form-control">
+						<c:forEach var="item" items="${langItems}">
+							<la:option value="${f:u(item.value)}">
+				    ${f:h(item.label)}
+				</la:option>
+						</c:forEach>
+					</la:select>
+				</fieldset>
+				<c:if test="${displayLabelTypeItems}">
 					<fieldset class="form-group">
-						<label for="contentNum"><la:message key="labels.index_num" /></label>
-						<la:select property="num" styleId="numSearchOption"
-							styleClass="form-control">
-							<option value="">
-								<la:message key="labels.search_result_select_num" />
-							</option>
-							<la:option value="10">10</la:option>
-							<la:option value="20">20</la:option>
-							<la:option value="30">30</la:option>
-							<la:option value="40">40</la:option>
-							<la:option value="50">50</la:option>
-							<la:option value="100">100</la:option>
-						</la:select>
-					</fieldset>
-					<fieldset class="form-group">
-						<label for="contentSort"><la:message
-								key="labels.index_sort" /></label>
-						<la:select property="sort" styleId="sortSearchOption"
-							styleClass="form-control">
-							<option value="">
-								<la:message key="labels.search_result_select_sort" />
-							</option>
-							<la:option value="created.asc">
-								<la:message key="labels.search_result_sort_created_asc" />
-							</la:option>
-							<la:option value="created.desc">
-								<la:message key="labels.search_result_sort_created_desc" />
-							</la:option>
-							<la:option value="content_length.asc">
-								<la:message key="labels.search_result_sort_content_length_asc" />
-							</la:option>
-							<la:option value="content_length.desc">
-								<la:message key="labels.search_result_sort_content_length_desc" />
-							</la:option>
-							<la:option value="last_modified.asc">
-								<la:message key="labels.search_result_sort_last_modified_asc" />
-							</la:option>
-							<la:option value="last_modified.desc">
-								<la:message key="labels.search_result_sort_last_modified_desc" />
-							</la:option>
-							<c:if test="${searchLogSupport}">
-								<la:option value="click_count.asc">
-									<la:message key="labels.search_result_sort_click_count_asc" />
-								</la:option>
-								<la:option value="click_count.desc">
-									<la:message key="labels.search_result_sort_click_count_desc" />
-								</la:option>
-							</c:if>
-							<c:if test="${favoriteSupport}">
-								<la:option value="favorite_count.asc">
-									<la:message key="labels.search_result_sort_favorite_count_asc" />
-								</la:option>
-								<la:option value="favorite_count.desc">
-									<la:message key="labels.search_result_sort_favorite_count_desc" />
-								</la:option>
-							</c:if>
-						</la:select>
-					</fieldset>
-					<fieldset class="form-group">
-						<label for="contentLang"><la:message
-								key="labels.index_lang" /></label>
-						<la:select property="lang" styleId="langSearchOption"
+						<label for="contentLabelType"><la:message
+								key="labels.index_label" /></label>
+						<la:select property="fields.label" styleId="labelTypeSearchOption"
 							multiple="true" styleClass="form-control">
-							<c:forEach var="item" items="${langItems}">
+							<c:forEach var="item" items="${labelTypeItems}">
 								<la:option value="${f:u(item.value)}">
-													${f:h(item.label)}
-												</la:option>
+					${f:h(item.label)}
+				    </la:option>
 							</c:forEach>
 						</la:select>
 					</fieldset>
-					<c:if test="${displayLabelTypeItems}">
-						<fieldset class="form-group">
-							<label for="contentLabelType"><la:message
-									key="labels.index_label" /></label>
-							<la:select property="fields.label"
-								styleId="labelTypeSearchOption" multiple="true"
-								styleClass="form-control">
-								<c:forEach var="item" items="${labelTypeItems}">
-									<la:option value="${f:u(item.value)}">
-										${f:h(item.label)}
-									</la:option>
-								</c:forEach>
-							</la:select>
-						</fieldset>
-					</c:if>
-				</div>
-				<div class="modal-footer">
-					<button class="btn btn-secondary" id="searchOptionsClearButton">
-						<la:message key="labels.search_options_clear" />
-					</button>
-					<button class="btn btn-secondary" data-dismiss="modal"
-						aria-hidden="true">
-						<la:message key="labels.search_options_close" />
-					</button>
-					<button class="btn btn-primary" type="submit">
-						<la:message key="labels.search" />
-					</button>
-				</div>
+				</c:if>
+			</div>
+			<div>
+				<button class="btn btn-secondary" id="searchOptionsClearButton">
+					<la:message key="labels.search_options_clear" />
+				</button>
+				<button class="btn btn-primary" type="submit">
+					<i class="fa fa-search"></i>
+					<la:message key="labels.search" />
+				</button>
+				<button class="btn btn-secondary pull-right"
+					data-toggle="control-options" data-target="#searchOptions"
+					id="searchOptionsCloseButton">
+					<i class="fa fa-angle-double-right"></i>
+					<la:message key="labels.search_options_close" />
+				</button>
 			</div>
 		</div>
 	</div>
+	<!--  /#searchOptions -->
 </la:form>
-
diff --git a/src/main/webapp/WEB-INF/view/error/notFound.jsp b/src/main/webapp/WEB-INF/view/error/notFound.jsp
index 25d73f4c6..a74a26049 100644
--- a/src/main/webapp/WEB-INF/view/error/notFound.jsp
+++ b/src/main/webapp/WEB-INF/view/error/notFound.jsp
@@ -10,8 +10,10 @@
 	type="text/css" />
 <link href="${f:url('/css/style.css')}" rel="stylesheet"
 	type="text/css" />
+<link href="/css/font-awesome.min.css"
+	rel="stylesheet" type="text/css" />
 </head>
-<body>
+<body class="error">
 	<jsp:include page="header.jsp" />
 	<div class="container">
 		<div class="content">
@@ -33,5 +35,7 @@
 	<script type="text/javascript"
 		src="${f:url('/js/jquery-2.1.4.min.js')}"></script>
 	<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/suggestor.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/search.js')}"></script>
 </body>
 </html>
diff --git a/src/main/webapp/WEB-INF/view/error/system.jsp b/src/main/webapp/WEB-INF/view/error/system.jsp
index 41e2ce417..03c23f9bb 100644
--- a/src/main/webapp/WEB-INF/view/error/system.jsp
+++ b/src/main/webapp/WEB-INF/view/error/system.jsp
@@ -12,7 +12,10 @@
 <link href="${f:url('/css/style.css')}" rel="stylesheet"
 	type="text/css" />
 </head>
-<body>
+<link href="/css/font-awesome.min.css"
+	rel="stylesheet" type="text/css" />
+</head>
+<body class="error">
 	<jsp:include page="header.jsp" />
 	<div class="container">
 		<div class="content">
@@ -31,6 +34,8 @@
 	<script type="text/javascript"
 		src="${f:url('/js/jquery-2.1.4.min.js')}"></script>
 	<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/suggestor.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/search.js')}"></script>
 </body>
 </html>
 <% }catch(Exception e){ session.invalidate();}%>
diff --git a/src/main/webapp/WEB-INF/view/header.jsp b/src/main/webapp/WEB-INF/view/header.jsp
index 9977e3221..35f1b7f30 100755
--- a/src/main/webapp/WEB-INF/view/header.jsp
+++ b/src/main/webapp/WEB-INF/view/header.jsp
@@ -1,5 +1,5 @@
 <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
-<la:form action="search" method="get" styleId="searchForm" role="search">
+<la:form action="/search" method="get" styleId="searchForm" role="search">
 ${fe:facetForm()}${fe:geoForm()}
 <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
 		<la:link styleClass="navbar-brand" href="/">
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index d0cab84de..19b4b6143 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -215,7 +215,7 @@ ul.searchOptionLabels li {
 	vertical-align: middle;
 }
 
-body.search #searchOptions, body.help #searchOptions {
+body.search #searchOptions, body.help #searchOptions, body.error #searchOptions {
 	position: fixed;
 	top: 0;
 	padding-top: 72px;
@@ -227,7 +227,7 @@ body.search #searchOptions, body.help #searchOptions {
 	transition: all .4s ease 0s;
 }
 
-body.search #searchOptions.active, body.help #searchOptions.active {
+body.search #searchOptions.active, body.help #searchOptions.active,  body.error #searchOptions.active {
 	right: 0;
 }
 
@@ -284,11 +284,11 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	#result .info {
 		display: none;
 	}
-	body.search #searchOptions, body.help #searchOptions {
+	body.search #searchOptions, body.help #searchOptions, body.error #searchOptions {
 		width: 100%;
 		right: -100%;
 	}
-	body.search #searchOptions.active, body.help #searchOptions.active {
+	body.search #searchOptions.active, body.help #searchOptions.active, body.error #searchOptions.active {
 		right: 0;
 	}
 }
