diff --git a/src/main/webapp/WEB-INF/view/footer.jsp b/src/main/webapp/WEB-INF/view/footer.jsp
index e7301fa1c..7d377c882 100755
--- a/src/main/webapp/WEB-INF/view/footer.jsp
+++ b/src/main/webapp/WEB-INF/view/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="center">
 		<p>
diff --git a/src/main/webapp/WEB-INF/view/index.jsp b/src/main/webapp/WEB-INF/view/index.jsp
index 8e7503df3..54b117f70 100644
--- a/src/main/webapp/WEB-INF/view/index.jsp
+++ b/src/main/webapp/WEB-INF/view/index.jsp
@@ -14,8 +14,8 @@
 <link href="${f:url('/css/style-base.css')}" rel="stylesheet"
 	type="text/css" />
 <link href="${f:url('/css/style.css')}" rel="stylesheet" type="text/css" />
-<link href="${f:url('/css/font-awesome.min.css')}"
-	rel="stylesheet" type="text/css" />
+<link href="${f:url('/css/font-awesome.min.css')}" rel="stylesheet"
+	type="text/css" />
 </head>
 <body>
 	<nav class="navbar navbar-dark bg-inverse navbar-static-top pos-f-t">
@@ -63,15 +63,15 @@
 					styleId="searchForm">
 					${fe:facetForm()}${fe:geoForm()}
 					<fieldset>
-						<div class="clearfix">
-							<div class="input">
+						<div class="cleafix">
+							<div class="centered col-lg-5 col-md-6 col-sm-6 col-xs-8">
 								<la:text styleClass="query form-control center-block"
-									property="q" size="50" maxlength="1000"
-									styleId="contentQuery" autocomplete="off" />
+									property="q" size="50" maxlength="1000" styleId="contentQuery"
+									autocomplete="off" />
 							</div>
 						</div>
 						<c:if test="${!empty popularWords}">
-							<div>
+							<div class="clearfix">
 								<p class="popularWordBody ellipsis">
 									<la:message key="labels.search_popular_word_word" />
 									<c:forEach var="item" items="${popularWords}">
@@ -148,7 +148,8 @@
 													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:message
+													key="labels.search_result_sort_last_modified_asc" />
 											</la:option>
 											<la:option value="last_modified.desc">
 												<la:message
@@ -159,7 +160,8 @@
 													<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:message
+														key="labels.search_result_sort_click_count_desc" />
 												</la:option>
 											</c:if>
 											<c:if test="${favoriteSupport}">
diff --git a/src/main/webapp/WEB-INF/view/searchResults.jsp b/src/main/webapp/WEB-INF/view/searchResults.jsp
index 0b7caf15c..23197433b 100644
--- a/src/main/webapp/WEB-INF/view/searchResults.jsp
+++ b/src/main/webapp/WEB-INF/view/searchResults.jsp
@@ -8,8 +8,7 @@
 				arg2="${f:h(currentStartRecordNumber)}"
 				arg3="${f:h(currentEndRecordNumber)}" />
 			<c:if test="${execTime!=null}">
-				<la:message key="labels.search_result_time"
-					arg0="${f:h(execTime)}" />
+				<la:message key="labels.search_result_time" arg0="${f:h(execTime)}" />
 			</c:if>
 		</p>
 	</div>
@@ -22,58 +21,80 @@
 	</div>
 </c:if>
 <div id="result" class="row content">
-	<input type="hidden" id="queryId" value="${f:u(queryId)}" />
-	<input type="hidden" id="rt" value="${f:u(requestedTime)}" />
+	<input type="hidden" id="queryId" value="${f:u(queryId)}" /> <input
+		type="hidden" id="rt" value="${f:u(requestedTime)}" />
 	<div class="col-md-8">
 		<ol>
 			<c:forEach var="doc" varStatus="s" items="${documentItems}">
 				<li id="result${s.index}">
 					<h3 class="title ellipsis">
-						<a class="link" href="${doc.urlLink}" data-uri="${doc.urlLink}" data-id="${doc.doc_id}" data-order="${s.index}">${f:h(doc.contentTitle)}</a>
+						<a class="link" href="${doc.urlLink}" data-uri="${doc.urlLink}"
+							data-id="${doc.doc_id}" data-order="${s.index}">${f:h(doc.contentTitle)}</a>
 					</h3>
 					<div class="body">
 						<div class="description">${doc.contentDescription}</div>
 						<div class="site ellipsis">
 							<cite>${f:h(doc.sitePath)}</cite>
 							<c:if test="${doc.has_cache=='true'}">
-								<small>
-								<la:link href="/cache/?docId=${doc.doc_id}${appendHighlightParams}" class="cache"><la:message
-										key="labels.search_result_cache" /></la:link>
+								<small class="hidden-md-down"> <la:link
+										href="/cache/?docId=${doc.doc_id}${appendHighlightParams}"
+										class="cache">
+										<la:message key="labels.search_result_cache" />
+									</la:link>
 								</small>
 							</c:if>
 						</div>
 						<div class="more hidden-md-up">
-							<a href="#result${s.index}"><la:message key="labels.search_result_more" /></a>
+							<a href="#result${s.index}"><la:message
+									key="labels.search_result_more" /></a>
 						</div>
 						<div class="info">
-							<small>
-							<c:if test="${doc.created!=null && doc.created!=''}">
-								<c:set var="hasInfo" value="true"/>
-								<la:message key="labels.search_result_created" />
-								<fmt:formatDate value="${fe:parseDate(doc.created)}" type="BOTH" pattern="yyyy-MM-dd HH:mm" />
-							</c:if>
-							<c:if test="${doc.last_modified!=null && doc.last_modified!=''}">
-								<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
-								<la:message key="labels.search_result_last_modified" />
-								<fmt:formatDate value="${fe:parseDate(doc.last_modified)}" type="BOTH" pattern="yyyy-MM-dd HH:mm" />
-							</c:if>
-							<c:if test="${doc.content_length!=null && doc.content_length!=''}">
-								<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
-								<la:message key="labels.search_result_size"
-									arg0="${fe:formatNumber(doc.content_length)}" />
-							</c:if>
-							<c:if test="${searchLogSupport}">
-								<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
-								<la:message key="labels.search_click_count"
-									arg0="${f:h(doc.click_count)}" />
-							</c:if>
-							<c:if test="${favoriteSupport}">
-								<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
-								<a href="#${doc.doc_id}" class="favorite"><la:message
-										key="labels.search_result_favorite" /> (${f:h(doc.favorite_count)})</a>
-								<span class="favorited"><la:message
-										key="labels.search_result_favorited"/> <span class="favorited-count">(${f:h(doc.favorite_count)})</span></span>
-							</c:if>
+							<small> <c:if
+									test="${doc.created!=null && doc.created!=''}">
+									<c:set var="hasInfo" value="true" />
+									<la:message key="labels.search_result_created" />
+									<fmt:formatDate value="${fe:parseDate(doc.created)}"
+										type="BOTH" pattern="yyyy-MM-dd HH:mm" />
+								</c:if> <c:if
+									test="${doc.last_modified!=null && doc.last_modified!=''}">
+									<c:if test="${hasInfo}">
+										<span class="br-phone"></span>
+										<span class="hidden-phone">-</span>
+									</c:if>
+									<c:set var="hasInfo" value="true" />
+									<la:message key="labels.search_result_last_modified" />
+									<fmt:formatDate value="${fe:parseDate(doc.last_modified)}"
+										type="BOTH" pattern="yyyy-MM-dd HH:mm" />
+								</c:if> <c:if
+									test="${doc.content_length!=null && doc.content_length!=''}">
+									<c:if test="${hasInfo}">
+										<span class="br-phone"></span>
+										<span class="hidden-phone">-</span>
+									</c:if>
+									<c:set var="hasInfo" value="true" />
+									<la:message key="labels.search_result_size"
+										arg0="${fe:formatNumber(doc.content_length)}" />
+								</c:if> <c:if test="${searchLogSupport}">
+									<c:if test="${hasInfo}">
+										<span class="br-phone"></span>
+										<span class="hidden-phone">-</span>
+									</c:if>
+									<c:set var="hasInfo" value="true" />
+									<la:message key="labels.search_click_count"
+										arg0="${f:h(doc.click_count)}" />
+								</c:if> <c:if test="${favoriteSupport}">
+									<c:if test="${hasInfo}">
+										<span class="br-phone"></span>
+										<span class="hidden-phone">-</span>
+									</c:if>
+									<c:set var="hasInfo" value="true" />
+									<a href="#${doc.doc_id}" class="favorite"><la:message
+											key="labels.search_result_favorite" />
+										(${f:h(doc.favorite_count)})</a>
+									<span class="favorited"><la:message
+											key="labels.search_result_favorited" /> <span
+										class="favorited-count">(${f:h(doc.favorite_count)})</span></span>
+								</c:if>
 							</small>
 						</div>
 					</div>
@@ -88,14 +109,16 @@
 		</c:if>
 		<c:if test="${facetResponse != null}">
 			<c:forEach var="fieldData" items="${facetResponse.fieldList}">
-				<c:if test="${fieldData.name == 'label' && fieldData.valueCountMap.size() > 0}">
+				<c:if
+					test="${fieldData.name == 'label' && fieldData.valueCountMap.size() > 0}">
 					<ul class="list-group m-b">
-						<li class="list-group-item text-uppercase"><la:message key="labels.facet_label_title" /></li>
+						<li class="list-group-item text-uppercase"><la:message
+								key="labels.facet_label_title" /></li>
 						<c:forEach var="countEntry" items="${fieldData.valueCountMap}">
-							<c:if test="${countEntry.value != 0 && fe:labelexists(countEntry.key)}">
+							<c:if
+								test="${countEntry.value != 0 && fe:labelexists(countEntry.key)}">
 								<li class="list-group-item"><la:link
-										href="/search/search?q=${f:u(q)}&ex_q=label%3a${f:u(countEntry.key)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}"
-									>
+										href="/search/search?q=${f:u(q)}&ex_q=label%3a${f:u(countEntry.key)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
 											${f:h(fe:label(countEntry.key))} 
 											<span class="label label-default label-pill pull-right">${f:h(countEntry.value)}</span>
 									</la:link></li>
@@ -106,12 +129,12 @@
 			</c:forEach>
 			<c:forEach var="facetQueryView" items="${fe:facetQueryViewList()}">
 				<ul class="list-group m-b">
-					<li class="list-group-item text-uppercase"><la:message key="${facetQueryView.title}" /></li>
+					<li class="list-group-item text-uppercase"><la:message
+							key="${facetQueryView.title}" /></li>
 					<c:forEach var="queryEntry" items="${facetQueryView.queryMap}">
 						<c:if test="${facetResponse.queryCountMap[queryEntry.value] != 0}">
 							<li class="list-group-item p-l-md"><la:link
-									href="/search/search?q=${f:u(q)}&ex_q=${f:u(queryEntry.value)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}"
-								>
+									href="/search/search?q=${f:u(q)}&ex_q=${f:u(queryEntry.value)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
 									<la:message key="${queryEntry.key}" />
 									<span class="label label-default label-pill pull-right">${f:h(facetResponse.queryCountMap[queryEntry.value])}</span>
 								</la:link></li>
@@ -121,7 +144,8 @@
 			</c:forEach>
 			<c:if test="${!empty ex_q}">
 				<div class="pull-right">
-					<la:link href="/search/search?q=${f:u(q)}" styleClass="btn btn-secondary btn-sm">
+					<la:link href="/search/search?q=${f:u(q)}"
+						styleClass="btn btn-secondary btn-sm">
 						<la:message key="labels.facet_label_reset" />
 					</la:link>
 				</div>
@@ -135,21 +159,20 @@
 			<c:if test="${existPrevPage}">
 				<li class="prev"><la:link aria-label="Previous"
 						href="/search/prev?q=${f:u(q)}&pn=${f:u(currentPageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
-					<span aria-hidden="true">&laquo;</span>
-					<span class="sr-only"><la:message key="labels.prev_page" /></span>
-				</la:link></li>
+						<span aria-hidden="true">&laquo;</span>
+						<span class="sr-only"><la:message key="labels.prev_page" /></span>
+					</la:link></li>
 			</c:if>
 			<c:if test="${!existPrevPage}">
 				<li class="prev disabled" aria-label="Previous"><a href="#">
-					<span aria-hidden="true">&laquo;</span>
-					<span class="sr-only"><la:message key="labels.prev_page" /></span>
+						<span aria-hidden="true">&laquo;</span> <span class="sr-only"><la:message
+								key="labels.prev_page" /></span>
 				</a></li>
 			</c:if>
 			<c:forEach var="pageNumber" varStatus="s" items="${pageNumberList}">
 				<li
 					<c:if test="${pageNumber < currentPageNumber - 2 || pageNumber > currentPageNumber + 2}">class="hidden-phone"</c:if>
-					<c:if test="${pageNumber == currentPageNumber && pageNumber >= currentPageNumber - 2 && pageNumber <= currentPageNumber + 2}">class="active"</c:if>
-					>
+					<c:if test="${pageNumber == currentPageNumber && pageNumber >= currentPageNumber - 2 && pageNumber <= currentPageNumber + 2}">class="active"</c:if>>
 					<la:link
 						href="/search/move?q=${f:u(q)}&pn=${f:u(pageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">${f:h(pageNumber)}</la:link>
 				</li>
@@ -157,14 +180,14 @@
 			<c:if test="${existNextPage}">
 				<li class="next"><la:link aria-label="Next"
 						href="/search/next?q=${f:u(q)}&pn=${f:u(currentPageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
-					<span class="sr-only"><la:message key="labels.next_page" /></span>
-					<span aria-hidden="true">&raquo;</span>
-				</la:link></li>
+						<span class="sr-only"><la:message key="labels.next_page" /></span>
+						<span aria-hidden="true">&raquo;</span>
+					</la:link></li>
 			</c:if>
 			<c:if test="${!existNextPage}">
-				<li class="next disabled" aria-label="Next"><a href="#">
-					<span class="sr-only"><la:message key="labels.next_page"/></span>
-					<span aria-hidden="true">&raquo;</span>
+				<li class="next disabled" aria-label="Next"><a href="#"> <span
+						class="sr-only"><la:message key="labels.next_page" /></span> <span
+						aria-hidden="true">&raquo;</span>
 				</a></li>
 			</c:if>
 		</ul>
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index b62395392..ec69f3c93 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -1,10 +1,26 @@
 /* Override some defaults */
+html {
+	min-height: 100%;
+	position: relative;
+}
+
 body {
 	padding-top: 70px;
+	margin-bottom: 4em;
+}
+
+footer {
+	width: 100%;
+	bottom: 0;
+	left: 0; height : 4em;
+	position: absolute;
+	border-top: 1px solid;
+	padding-top: 1em;
+	height: 4em;
 }
 
 .content {
-	min-height: 500px;
+	min-height: 100%;
 }
 
 h1, h2, h3 {
@@ -215,14 +231,20 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	right: 0;
 }
 
+.centered {
+	float: none;
+	display: inline-block;
+}
+
+#contentQuery {
+	display: inline-block;
+}
+
 /* Large desktop */
 @media ( min-width : 74.9em) {
 	.visible-phone {
 		display: none !important;
 	}
-	#contentQuery {
-		width: 500px;
-	}
 }
 
 /* Large devices (desktops, less than 75em) */
@@ -233,16 +255,10 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	.br-tablet {
 		display: block;
 	}
-	#contentQuery {
-		width: 500px;
-	}
 }
 
 /* Medium devices (tablets, less than 62em) */
 @media ( max-width : 61.9em) {
-	#contentQuery {
-		width: 500px;
-	}
 }
 
 /* Small devices (landscape phones, less than 48em) */
@@ -250,21 +266,18 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	.br-phone {
 		display: block;
 	}
-	#contentQuery {
+	.mainLogo img {
 		width: 200px;
 	}
+	.navbar-brand img {
+		width: 80px;
+	}
 	.searchFormBox {
 		margin-top: 20px;
 	}
 	#result ol {
 		margin-left: 0;
 	}
-	.popularWordBody {
-		width: 440px;
-	}
-	#result .site {
-		width: 440px;
-	}
 	#result .info {
 		display: none;
 	}
@@ -291,12 +304,6 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 	.searchFormBox {
 		margin-top: 80px;
 	}
-	.popularWordBody {
-		width: 280px;
-	}
-	#result .site {
-		width: 280px;
-	}
 	#result .info {
 		display: none;
 	}
@@ -331,4 +338,4 @@ body.search #searchOptions.active, body.help #searchOptions.active {
 		max-height: 300px;
 		overflow-y: scroll;
 	}
-}
+}
\ No newline at end of file
