diff --git a/src/main/twirl/gitbucket/core/settings/brancheprotection.scala.html b/src/main/twirl/gitbucket/core/settings/brancheprotection.scala.html
index 05f61e3..ae50111 100644
--- a/src/main/twirl/gitbucket/core/settings/brancheprotection.scala.html
+++ b/src/main/twirl/gitbucket/core/settings/brancheprotection.scala.html
@@ -12,9 +12,9 @@
     @menu("branches", repository){
       @helper.html.information(info)
         <div class="alert alert-info" style="display:none" id="saved-info">Branch protection options saved</div>
-        <div class="box"><form name="branchProtection" onsubmit="submitForm(event)">
-          <div class="box-header">Branch protection for <b>@branch</b></div>
-          <div class="box-content">
+        <form name="branchProtection" onsubmit="submitForm(event)"><div class="panel panel-default">
+          <div class="panel-heading">Branch protection for <b>@branch</b></div>
+          <div class="panel-body">
 
             <div class="checkbox">
               <label class="strong"><input type="checkbox" name="enabled" onclick="update()" @check(protection.enabled)>Protect this branch</label>
@@ -32,9 +32,9 @@
                   <p class="help-block">Enforce required status checks for repository administrators.</p>
                 </div>
 
-                <div class="box">
-                  <div class="box-header">Status checks found in the last week for this repository</div>
-                  <div class="box-content">
+                <div class="panel panel-default">
+                  <div class="panel-heading">Status checks found in the last week for this repository</div>
+                  <div class="panel-body">
                     @knownContexts.map{ br =>
                       <div class="checkbox">
                         <label>
@@ -49,7 +49,7 @@
             </div>
             <input class="btn btn-success" type="submit" value="Save changes" />
           </div>
-        </form></div>
+        </div></form>
     }
   }
 }
diff --git a/src/main/twirl/gitbucket/core/settings/branches.scala.html b/src/main/twirl/gitbucket/core/settings/branches.scala.html
index deca340..8a731b0 100644
--- a/src/main/twirl/gitbucket/core/settings/branches.scala.html
+++ b/src/main/twirl/gitbucket/core/settings/branches.scala.html
@@ -17,40 +17,43 @@
         </div>
       }else{
         @helper.html.information(info)
-        <div class="box">
-          <div class="box-header">Default branch</div>
-          <div class="box-content">
+        <div class="panel panel-default">
+          <div class="panel-heading">Default branch</div>
+          <div class="panel-body">
             <p>The default branch is considered the “base” branch in your repository, against which all pull requests and code commits are automatically made, unless you specify a different branch.</p>
             <form id="form" method="post" action="@url(repository)/settings/update_default_branch" validate="true" class="form-inline">
               <span class="error" id="error-defaultBranch"></span>
-              <select name="defaultBranch" id="defaultBranch">
+              <select name="defaultBranch" id="defaultBranch" class="form-control">
                 @repository.branchList.map { branch =>
                   <option @if(branch==repository.repository.defaultBranch){ selected}>@branch</option>
                 }
               </select>
-              <input type="submit" class="btn" value="Update" />
+              <input type="submit" class="btn btn-default" value="Update" />
             </form>
           </div>
+        </div>
 
-          <div class="box-header">Protected branches</div>
-          <div class="box-content">
-            <p>Protect branches to disable force pushing, prevent branches from being deleted, and optionally require status checks before merging. New to protected branches?</p>
-            <fieldset class="margin">
-              <select name="protectBranch" id="protectBranch" onchange="location=$(this).val()">
-                <option>Choose a branch...</option>
-                @repository.branchList.map { branch =>
-                  <option value="@url(repository)/settings/branches/@encodeRefName(branch)">@branch</option>
-                }
-              </select>
-              <span class="error" id="error-protectBranch"></span>
-            </fieldset>
+        <div class="panel panel-default">
+          <div class="panel-heading">Protected branches</div>
+          <div class="panel-body">
+            <p>Protect branches to disable force pushing, prevent branches from being deleted, and optionally require status checks before merging. New to protected branches?
+              <form class="form-inline">
+                <select name="protectBranch" id="protectBranch" onchange="location=$(this).val()" class="form-control">
+                  <option>Choose a branch...</option>
+                  @repository.branchList.map { branch =>
+                    <option value="@url(repository)/settings/branches/@encodeRefName(branch)">@branch</option>
+                  }
+                </select>
+                <span class="error" id="error-protectBranch"></span>
+              </form>
+            </p>
 
             <table class="table table-bordered table-hover branches">
               @protectedBranchList.map{ branch =>
               <tr><td>
                 <span class="branch-name">@branch</span>
                 <span class="branch-action">
-                  <a href="@url(repository)/settings/branches/@encodeRefName(branch)" class="btn btn-small">Edit</a>
+                  <a href="@url(repository)/settings/branches/@encodeRefName(branch)" class="btn btn-small btn-default">Edit</a>
                 </span>
               </td></tr>
               }