diff --git a/src/java/azkaban/webapp/servlet/velocity/joblogpage.vm b/src/java/azkaban/webapp/servlet/velocity/joblogpage.vm
index 200f5de..811e9d9 100644
--- a/src/java/azkaban/webapp/servlet/velocity/joblogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/joblogpage.vm
@@ -16,13 +16,11 @@
<!DOCTYPE html>
<html>
- <head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
- <script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
- <script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
- <script type="text/javascript" src="${context}/js/namespace.js"></script>
- <script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
- <script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+ <head lang="en">
+
+#parse("azkaban/webapp/servlet/velocity/style2.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
<script type="text/javascript" src="${context}/js/azkaban.joblog.view.js"></script>
@@ -41,53 +39,85 @@
</script>
</head>
<body>
- #set($current_page="executing")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
- <div class="content">
-#if($errorMsg)
- <div class="box-error-message">$errorMsg</div>
+
+#set ($current_page="executing")
+#parse ("azkaban/webapp/servlet/velocity/nav2.vm")
+
+ <div class="container">
+
+## Page error or success message.
+
+#if ($errorMsg)
+ <div class="panel panel-danger">
+ <div class="panel-heading">Error</div>
+ <div class="panel-body">
+ $errorMsg
+ </div>
+ </div>
#else
-#if($error_message != "null")
- <div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
- <div class="box-success-message">$success_message</div>
-#end
-
- <div id="all-jobs-content">
- <div class="section-hd flow-header">
- <h2><a href="${context}/executor?execid=${execid}&job=${jobid}">Job Execution<span>$jobid</span></a></h2>
- <div class="section-sub-hd">
- <h4><a href="${context}/manager?project=${projectName}">Project <span>$projectName</span></a></h4>
- <h4 class="separator">></h4>
- <h4><a href="${context}/manager?project=${projectName}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
- <h4 class="separator">></h4>
- <h4><a href="${context}/executor?execid=${execid}#jobslist">Execution <span>$execid</span></a></h4>
- <h4 class="separator">></h4>
- <h4><a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid">Job <span>$jobid</span></a></h4>
+ #if ($error_message != "null")
+ <div class="alert alert-danger">$error_message</div>
+ #elseif ($success_message != "null")
+ <div class="alert alert-success">$success_message</div>
+ #end
+
+ ## Page header.
+
+ <div class="page-header">
+ <h1><a href="${context}/executor?execid=${execid}&job=${jobid}">Job Execution<small>$jobid</small></a></h1>
+ </div>
+
+ ## Breadcrumb
+
+ <ol class="breadcrumb">
+ <li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
+ <li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+ <li><a href="${context}/executor?execid=${execid}#jobslist"><strong>Execution</strong> $execid</a></li>
+ <li><a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid"><strong>Job</strong> $jobid</a></li>
+ </ol>
+
+ ## Tabs
+
+ <ul class="nav nav-tabs" id="headertabs">
+ <li><a id="logViewLink" >Log</a></li>
+ </ul>
+
+ ## Log content.
+
+ <div class="row">
+ <div class="col-lg-12">
+ <div id="jobLogView" class="panel panel-default">
+ <div class="panel-heading">
+ <div class="pull-right">
+ <button type="button" id="updateLogBtn" class="btn btn-xs btn-default">Refresh</button>
+ </div>
+ </div>
+ <div class="panel-body">
+ <pre id="logSection" class="log"></pre>
+ </div>
</div>
</div>
</div>
- <div id="headertabs" class="headertabs">
- <ul>
- <li><a id="logViewLink" >Log</a></li>
- </ul>
- </div>
+ ## Error message message dialog.
- <div id="jobLogView" class="logView">
- <div class="logHeader"><div class="logButtonRow"><div id="updateLogBtn" class="btn7">Refresh</div></div></div>
- <div class="logViewer">
- <pre id="logSection" class="log"></pre>
+ <div class="modal fade" id="messageDialog">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header" id="messageTitle">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h4 class="modal-title">Upload Project Files</h4>
+ </div>
+ <div class="modal-body" id="messageDiv">
+ <p id="messageBox"></p>
+ </div>
+ </div>
</div>
</div>
+
#end
- <div id="messageDialog" class="modal">
- <h3 id="messageTitle">Error</h3>
- <div class="messageDiv">
- <p id="messageBox"></p>
- </div>
- </div>
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
</div>
</body>
</html>
