diff --git a/src/main/java/org/codelibs/fess/mylasta/action/FessLabels.java b/src/main/java/org/codelibs/fess/mylasta/action/FessLabels.java
index 21bc1e9e3..e4847de20 100644
--- a/src/main/java/org/codelibs/fess/mylasta/action/FessLabels.java
+++ b/src/main/java/org/codelibs/fess/mylasta/action/FessLabels.java
@@ -824,9 +824,6 @@ public class FessLabels extends ActionMessages {
     /** The key of the message: Labels:  */
     public static final String LABELS_searchoptions_menu_labels = "{labels.searchoptions_menu_labels}";
 
-    /** The key of the message: Username: {0} */
-    public static final String LABELS_searchheader_username = "{labels.searchheader_username}";
-
     /** The key of the message: Error */
     public static final String LABELS_error_title = "{labels.error_title}";
 
@@ -854,7 +851,7 @@ public class FessLabels extends ActionMessages {
     /** The key of the message: Login */
     public static final String LABELS_LOGIN = "{labels.login}";
 
-    /** The key of the message: User name */
+    /** The key of the message: Username */
     public static final String LABELS_LOGIN_placeholder_username = "{labels.login.placeholder_username}";
 
     /** The key of the message: Password */
@@ -953,6 +950,9 @@ public class FessLabels extends ActionMessages {
     /** The key of the message: Options */
     public static final String LABELS_header_form_option_btn = "{labels.header_form_option_btn}";
 
+    /** The key of the message: Username: {0} */
+    public static final String LABELS_header_username = "{labels.header_username}";
+
     /** The key of the message: Accessing {0}<br>At a first time starting, it might take a little more time to open the file. */
     public static final String LABELS_open_uri = "{labels.open_uri}";
 
diff --git a/src/main/resources/fess_label.properties b/src/main/resources/fess_label.properties
index 355e4dfc3..76e8d5ae5 100644
--- a/src/main/resources/fess_label.properties
+++ b/src/main/resources/fess_label.properties
@@ -271,7 +271,6 @@ labels.searchoptions_menu_num=Result:
 labels.searchoptions_num={0} results
 labels.searchoptions_menu_lang=Languages: 
 labels.searchoptions_menu_labels=Labels: 
-labels.searchheader_username=Username: {0}
 labels.error_title=Error
 labels.system_error_title=System Error
 labels.contact_site_admin=Contact the Site Administrator.
@@ -280,9 +279,9 @@ labels.bad_request=Invalid request for the url.
 labels.page_not_found_title=Page Not Found
 labels.check_url=Check the url.
 labels.home=Home
-labels.user_name=User Name
+labels.user_name=Username
 labels.login=Login
-labels.login.placeholder_username=User name
+labels.login.placeholder_username=Username
 labels.login.placeholder_password=Password
 labels.login.footer_copyright=Copyright(C) 2009-2014 CodeLibs Project. All Rights Reserved.
 labels.login.title=Login
@@ -315,6 +314,7 @@ labels.search_unknown=Unknown
 labels.footer_back_to_top=Back to top
 labels.header_brand_name=Fess
 labels.header_form_option_btn=Options
+labels.header_username=Username: {0}
 labels.open_uri=Accessing {0}<br>At a first time starting, it might take a little more time to open the file.
 labels.file_crawling_configuration=File Crawling
 labels.file_crawling_title_details=File Crawling Configuration
diff --git a/src/main/webapp/WEB-INF/view/header.jsp b/src/main/webapp/WEB-INF/view/header.jsp
index cfd9eb631..1bc905482 100755
--- a/src/main/webapp/WEB-INF/view/header.jsp
+++ b/src/main/webapp/WEB-INF/view/header.jsp
@@ -1,27 +1,59 @@
 <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
-<la:form action="search" method="get" styleId="searchForm" styleClass="searchResultForm">
+<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">
-		<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="query" 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-phone"><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-phone"
-			><la:message key="labels.header_form_option_btn" /></span></a>
+		<div class="container">
+			<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="query" maxlength="1000" styleId="query"
+					styleClass="form-control" autocomplete="off" />
+				<div class="btn-group">
+					<button type="submit" name="search" id="searchButton"
+						class="btn btn-primary">
+						<i class="fa fa-search"></i>
+						<la:message key="labels.search" />
+					</button>
+					<button type="button" class="btn btn-primary dropdown-toggle"
+						data-toggle="dropdown" aria-expanded="false">
+						<span class="caret"></span> <span class="sr-only"><la:message
+								key="labels.header_form_option_btn" /></span>
+					</button>
+					<div class="dropdown-menu" aria-labelledby="optionMenu">
+						<a href="#searchOptions" class="dropdown-item" data-toggle="modal"><la:message
+								key="labels.header_form_option_btn" /></a>
+					</div>
+				</div>
+			</div>
+			<ul class="nav navbar-nav pull-right">
+				<c:if test="${!empty username && username != 'guest'}">
+					<li class="nav-item">
+						<div class="dropdown">
+							<a class="nav-link dropdown-toggle" data-toggle="dropdown"
+								href="#" role="button" aria-haspopup="true"
+								aria-expanded="false"> <i class="fa fa-user"></i>${username}
+							</a>
+							<div class="dropdown-menu" aria-labelledby="userMenu">
+								<la:link href="/logout" styleClass="dropdown-item">
+									<la:message key="labels.logout" />
+								</la:link>
+							</div>
+						</div>
+					</li>
+				</c:if>
+			</ul>
 		</div>
 	</nav>
-	<div class="modal fade" id="searchOptions" tabindex="-1" role="dialog" aria-labelledby="searchOptionsLabel"
-		aria-hidden="true"
-	>
+	<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">
+					<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">
@@ -31,7 +63,8 @@ ${fe:facetForm()}${fe:geoForm()}
 				<div class="modal-body">
 					<fieldset class="form-group">
 						<label for="contentNum"><la:message key="labels.index_num" /></label>
-						<la:select property="num" styleId="numSearchOption" styleClass="form-control" style="display:block;">
+						<la:select property="num" styleId="numSearchOption"
+							styleClass="form-control" style="display:block;">
 							<option value="">
 								<la:message key="labels.search_result_select_num" />
 							</option>
@@ -44,8 +77,10 @@ ${fe:facetForm()}${fe:geoForm()}
 						</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" style="display:block;">
+						<label for="contentSort"><la:message
+								key="labels.index_sort" /></label>
+						<la:select property="sort" styleId="sortSearchOption"
+							styleClass="form-control" style="display:block;">
 							<option value="">
 								<la:message key="labels.search_result_select_sort" />
 							</option>
@@ -86,8 +121,10 @@ ${fe:facetForm()}${fe:geoForm()}
 						</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">
+						<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)}
@@ -97,8 +134,11 @@ ${fe:facetForm()}${fe:geoForm()}
 					</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">
+							<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)}
@@ -112,7 +152,8 @@ ${fe:facetForm()}${fe:geoForm()}
 					<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">
+					<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">
@@ -122,5 +163,6 @@ ${fe:facetForm()}${fe:geoForm()}
 			</div>
 		</div>
 	</div>
+	<!--  /.modal -->
 </la:form>
 
diff --git a/src/main/webapp/WEB-INF/view/index.jsp b/src/main/webapp/WEB-INF/view/index.jsp
index 9596bad2f..7de5ce654 100644
--- a/src/main/webapp/WEB-INF/view/index.jsp
+++ b/src/main/webapp/WEB-INF/view/index.jsp
@@ -14,20 +14,35 @@
 <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/admin/font-awesome.min.css')}"
+	rel="stylesheet" type="text/css" />
 </head>
 <body>
 	<nav class="navbar navbar-dark bg-inverse navbar-static-top pos-f-t">
-		<ul class="nav navbar-nav pull-right">
-			<li class="nav-item"><c:if test="${!empty username}">
-					<la:link href="/logout" styleClass="nav-link logout-link">
-						<la:message key="labels.logout" />
-					</la:link>
-				</c:if></li>
-			<li class="nav-item"><la:link href="/help"
-					styleClass="nav-link help-link">
-					<la:message key="labels.index_help" />
-				</la:link></li>
-		</ul>
+		<div class="container">
+			<ul class="nav navbar-nav pull-right">
+				<c:if test="${!empty username && username != 'guest'}">
+					<li class="nav-item">
+						<div class="dropdown">
+							<a class="nav-link dropdown-toggle" data-toggle="dropdown"
+								href="#" role="button" aria-haspopup="true"
+								aria-expanded="false"> <i class="fa fa-user"></i>${username}
+							</a>
+							<div class="dropdown-menu" aria-labelledby="userMenu">
+								<la:link href="/logout" styleClass="dropdown-item">
+									<la:message key="labels.logout" />
+								</la:link>
+							</div>
+						</div>
+					</li>
+				</c:if>
+				<li class="nav-item"><la:link href="/help"
+						styleClass="nav-link help-link">
+						<i class="fa fa-question-circle"></i>
+						<la:message key="labels.index_help" />
+					</la:link></li>
+			</ul>
+		</div>
 	</nav>
 	<div class="container">
 		<div class="row content">
@@ -66,13 +81,15 @@
 								</p>
 							</div>
 						</c:if>
-						<div class="clearfix searchButtonBox">
+						<div class="clearfix searchButtonBox btn-group">
 							<button type="submit" name="search" id="searchButton"
 								class="btn btn-primary">
+								<i class="fa fa-search"></i>
 								<la:message key="labels.index_form_search_btn" />
 							</button>
 							<button type="button" class="btn btn-secondary"
 								data-toggle="modal" data-target="#searchOptions">
+								<i class="fa fa-cog"></i>
 								<la:message key="labels.index_form_option_btn" />
 							</button>
 						</div>
diff --git a/src/main/webapp/WEB-INF/view/search.jsp b/src/main/webapp/WEB-INF/view/search.jsp
index 2045b0db7..953bb1c47 100644
--- a/src/main/webapp/WEB-INF/view/search.jsp
+++ b/src/main/webapp/WEB-INF/view/search.jsp
@@ -5,7 +5,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
-<title>${f:h(displayQuery)}- <la:message
+<title>${f:h(displayQuery)}-<la:message
 		key="labels.search_title" /></title>
 <c:if test="${osddLink}">
 	<link rel="search" type="application/opensearchdescription+xml"
@@ -15,6 +15,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/admin/font-awesome.min.css')}"
+	rel="stylesheet" type="text/css" />
 </head>
 <body>
 	<jsp:include page="header.jsp" />
@@ -82,18 +84,6 @@
 					</c:if>
 				</p>
 			</div>
-			<div class="col-md-3">
-				<c:if test="${!empty username}">
-					<p class="username">
-						<la:message key="labels.searchheader_username"
-							arg0="${f:h(username)}" />
-						|
-						<la:link href="/logout" styleClass="logout-link">
-							<la:message key="labels.logout" />
-						</la:link>
-					</p>
-				</c:if>
-			</div>
 		</div>
 		<c:if test="${fe:hswsize(null) != 0}">
 			<div class="row">
diff --git a/src/main/webapp/css/admin/style.css b/src/main/webapp/css/admin/style.css
index 776f43add..85b1b9452 100644
--- a/src/main/webapp/css/admin/style.css
+++ b/src/main/webapp/css/admin/style.css
@@ -38,7 +38,7 @@
 	font-size: 13px;
 }
 
-button>i, a.btn>i {
+button>i, a>i {
 	margin-right: 0.2em;
 }
 
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index 43857b08b..754ec5425 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -1,5 +1,4 @@
 /* Override some defaults */
-
 body {
 	padding-top: 70px;
 }
@@ -8,26 +7,24 @@ body {
 	min-height: 500px;
 }
 
-h1,
-h2,
-h3 {
-  line-height: 32px;
+h1, h2, h3 {
+	line-height: 32px;
 }
 
 h1 {
-  font-size: 30px;
+	font-size: 30px;
 }
 
 h2 {
-  font-size: 24px;
+	font-size: 24px;
 }
 
 h3 {
-  font-size: 18px;
+	font-size: 18px;
 }
 
 .navbar .logout-link {
-    margin-right: 10px;
+	margin-right: 10px;
 }
 
 .navbar .logout-link, .navbar .help-link {
@@ -40,13 +37,17 @@ h3 {
 }
 
 .nav-list li.reset {
-    margin-top: 10px;
+	margin-top: 10px;
 }
 
 .center {
 	text-align: center;
 }
 
+h1.mainLogo {
+	margin-bottom: 1em;
+}
+
 #result ol {
 	list-style: none;
 }
@@ -61,7 +62,7 @@ h3 {
 
 #result .body a.cache {
 	color: #093;
-    margin-left: 10px;
+	margin-left: 10px;
 }
 
 #result .favorited {
@@ -83,7 +84,6 @@ h3 {
 	margin-top: 10px;
 }
 
-
 #contentOptionButton {
 	margin-left: 10px;
 }
@@ -97,158 +97,145 @@ h3 {
 }
 
 .move-to-top {
-    margin-bottom: 10px;
+	margin-bottom: 10px;
 }
 
 .ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-text-overflow: ellipsis;
+	-o-text-overflow: ellipsis;
 }
 
 .searchResultForm {
-    margin:0;
+	margin: 0;
 }
 
 #searchOptionMenu span {
-    margin-right:10px;
+	margin-right: 10px;
 }
 
 .username {
-    text-align:right;
+	text-align: right;
 }
 
 /* Large desktop */
-@media (min-width: 74.9em) {
+@media ( min-width : 74.9em) {
 	.visible-phone {
-		display: none!important;
+		display: none !important;
+	}
+	#query {
+		width: 500px;
+	}
+	#contentQuery {
+		width: 500px;
 	}
-
-    #query {
-	    width: 500px;
-    }
-
-    #contentQuery {
-	    width: 500px;
-    }
 }
- 
+
 /* Large devices (desktops, less than 75em) */
-@media (max-width: 74.9em) {
+@media ( max-width : 74.9em) {
 	.visible-phone {
-		display: none!important;
+		display: none !important;
+	}
+	.br-tablet {
+		display: block;
+	}
+	#query {
+		width: 200px;
+	}
+	#contentQuery {
+		width: 500px;
 	}
-
-    .br-tablet {
-	    display: block;
-    }
-
-    #query {
-	    width: 200px;
-    }
-
-    #contentQuery {
-	    width: 500px;
-    }
 }
- 
+
 /* Medium devices (tablets, less than 62em) */
-@media (max-width: 61.9em) {
-    #query {
-	    width: 300px;
-    }
-
-    #contentQuery {
-	    width: 500px;
-    }
+@media ( max-width : 61.9em) {
+	#query {
+		width: 300px;
+	}
+	#contentQuery {
+		width: 500px;
+	}
 }
- 
+
 /* Small devices (landscape phones, less than 48em) */
-@media (max-width: 47.9em) {
-    .br-phone {
-	    display: block;
-    }
-
-    #query {
-	    width: 150px;
-    }
-
-    #contentQuery {
-	    width: 200px;
-    }
-
-    .searchFormBox {
-	    margin-top: 20px;
-    }
-
-    #result ol {
-        margin-left: 0;
-    }
-
-    .hotSearchWordBody {
-        width: 440px;
-    }
-
-    #result .site {
-        width: 440px;
-    }
-
-    #result .info {
-        display: none;
-    }
+@media ( max-width : 47.9em) {
+	.br-phone {
+		display: block;
+	}
+	#query {
+		width: 150px;
+	}
+	#contentQuery {
+		width: 200px;
+	}
+	.searchFormBox {
+		margin-top: 20px;
+	}
+	#result ol {
+		margin-left: 0;
+	}
+	.hotSearchWordBody {
+		width: 440px;
+	}
+	#result .site {
+		width: 440px;
+	}
+	#result .info {
+		display: none;
+	}
 }
 
 /* Extra small devices (portrait phones, less than 34em) */
-@media (max-width: 360px) {
-    .br-phone {
-	    display: block;
-    }
-
-    .mainLogo img {
-	    width: 200px;
-    }
-
-    .brand img {
-	    width: 80px;
-    }
-
-    #query {
-	    width: 100px;
-    }
-
-    .searchFormBox {
-	    margin-top: 80px;
-    }
-
-    .hotSearchWordBody {
-        width: 280px;
-    }
-
-    #result .site {
-        width: 280px;
-    }
-
-    #result .info {
-        display: none;
-    }
+@media ( max-width : 360px) {
+	.br-phone {
+		display: block;
+	}
+	.mainLogo img {
+		width: 200px;
+	}
+	.brand img {
+		width: 80px;
+	}
+	#query {
+		width: 100px;
+	}
+	.searchFormBox {
+		margin-top: 80px;
+	}
+	.hotSearchWordBody {
+		width: 280px;
+	}
+	#result .site {
+		width: 280px;
+	}
+	#result .info {
+		display: none;
+	}
 }
 
-@media (max-width: 767px) and (min-width: 481px){
+@media ( max-width : 767px) and (min-width: 481px) {
 }
 
-@media (max-height: 480px){
+@media ( max-height : 480px) {
 	#searchOptions {
 		max-height: 450px;
-        overflow-y:scroll;
+		overflow-y: scroll;
 	}
 }
 
-@media (max-height: 390px){
+@media ( max-height : 390px) {
 	#searchOptions {
 		max-height: 300px;
-        overflow-y:scroll;
+		overflow-y: scroll;
 	}
 }
 
+button>i, a>i {
+	margin-right: 0.2em;
+}
+
+nav.navbar .form-inline {
+	margin-left: 20px;
+}
\ No newline at end of file