diff --git a/src/main/twirl/gitbucket/core/main.scala.html b/src/main/twirl/gitbucket/core/main.scala.html
index 4500b03..24c7f25 100644
--- a/src/main/twirl/gitbucket/core/main.scala.html
+++ b/src/main/twirl/gitbucket/core/main.scala.html
@@ -47,9 +47,10 @@
     <div class="wrapper">
       <header class="main-header">
         <a href="@context.path/" class="logo">
-          <img src="@helpers.assets("/common/images/gitbucket.svg")" style="width: 24px; height: 24px; display: inline;"/>
-          GitBucket
-          <span class="header-version">@gitbucket.core.GitBucketCoreModule.getVersions.last.getVersion</span>
+          <span class="logo-mini"><img src="@helpers.assets("/common/images/gitbucket.svg")" alt="GitBucket" /></span>
+          <span class="logo-lg"><img src="@helpers.assets("/common/images/gitbucket.svg")" alt="GitBucket" />
+          <span class="header-title strong">GitBucket</span>
+          <span class="header-version">@gitbucket.core.GitBucketCoreModule.getVersions.last.getVersion</span></span>
         </a>
         <nav class="navbar navbar-static-top" role="navigation">
           <!-- Sidebar toggle button-->
diff --git a/src/main/webapp/assets/common/css/gitbucket.css b/src/main/webapp/assets/common/css/gitbucket.css
index 5f1cb80..b0eb58b 100644
--- a/src/main/webapp/assets/common/css/gitbucket.css
+++ b/src/main/webapp/assets/common/css/gitbucket.css
@@ -131,6 +131,12 @@
   font-size: small;
 }
 
+.main-header .logo img {
+  width: 24px;
+  height: 24px;
+  display: inline;
+}
+
 /* ======================================================================== */
 /* General Styles */
 /* ======================================================================== */