diff --git a/src/main/webapp/WEB-INF/pages/login.jsp b/src/main/webapp/WEB-INF/pages/login.jsp
index 068c18c3c..fd6dd2cec 100644
--- a/src/main/webapp/WEB-INF/pages/login.jsp
+++ b/src/main/webapp/WEB-INF/pages/login.jsp
@@ -2,84 +2,85 @@
 <html>
     <head>
         <title>Login Page</title>
-        <!-- Latest compiled and minified CSS -->
-        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
-        <style type="text/css">
-            body {
-                padding-top: 40px;
-                padding-bottom: 40px;
-                background-color: #f5f5f5;
-            }
+        <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+        <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+        <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+        <!--[if gt IE 8]><!-->
 
-            .form-signin {
-                max-width: 300px;
-                padding: 19px 29px 29px;
-                margin: 0 auto 20px;
-                background-color: #fff;
-                border: 1px solid #e5e5e5;
-                -webkit-border-radius: 5px;
-                -moz-border-radius: 5px;
-                border-radius: 5px;
-                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-                box-shadow: 0 1px 2px rgba(0,0,0,.05);
-            }
-            .form-signin .form-signin-heading,
-            .form-signin .checkbox {
-                margin-bottom: 10px;
-            }
-            .form-signin input[type="text"],
-            .form-signin input[type="password"] {
-                font-size: 16px;
-                height: auto;
-                margin-bottom: 15px;
-                padding: 7px 9px;
-            }
-
-        </style>
-    </head>
-    <body onload='document.loginForm.username.focus();'>
-
-        <div class="container">
-            <c:if test="${not empty error}">
-                <div class="error">${error}</div>
-            </c:if>
-            <c:if test="${not empty msg}">
-                <div class="msg">${msg}</div>
-            </c:if>
-            <form class="form-signin" name='loginForm'
-                  action="<c:url value='j_spring_security_check' />" method='POST'>
-                <h2 class="form-signin-heading">Please sign in</h2>
-                <input type="text" class="input-block-level" placeholder="Email address" name='username'>
-                <input type="password" class="input-block-level" placeholder="Password"  name='password'>
-
-                <input type="hidden" name="${_csrf.parameterName}"
-                       value="${_csrf.token}" />
-                <button class="btn btn-large btn-primary" type="submit">Sign in</button>
-            </form>
-            <div class="panel panel-info" style="max-width: 300px; margin: 0 auto 20px;">
-                <div class="panel-heading">
-                    Login with one of the following accounts
-                </div>
-                <div class="panel-body">
-                    <!-- Table -->
-                    <table class="table table-bordered">
-                        <thead>
-                            <tr><td>Account</td><td>User</td><td>Password</td></tr>
-                        </thead>
-                        <tbody>
-                            <tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
-                            <tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
-                            <tr><td>Server Admin</td><td>server</td><td>server</td></tr>
-                        </tbody>
-                    </table>
+        <!--  CSS -->
+        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
+        <!-- Bootstrap core CSS -->
+        <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
+        <!-- Fonts from Font Awsome -->
+        <link rel="stylesheet" href="css/font-awesome.min.css"/>
+        <!-- CSS Animate -->
+        <link rel="stylesheet" href="css/animate.css"/>
+        <!-- Custom styles for this theme -->
+        <link rel="stylesheet" href="css/main.css"/>
+        <!--  end of CSS -->
 
 
-                </div>
+    </style>
+</head>
+<body onload='document.loginForm.username.focus();'>
+    <section id="container" ng-controller="goatLesson">
+        <header id="header">
+            <!--logo start-->
+            <div class="brand">
+                <a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
             </div>
-        </div> <!-- /container -->
+            <!--logo end-->
+            <div class="toggle-navigation toggle-left">
+
+            </div><!--toggle navigation end-->
+            <div class="lessonTitle" >
+                <h1 id="lessonTitle">Please login</h1>
+            </div><!--lesson title end-->
+
+        </header>
+        <section class="main-content-wrapper">
+
+            <section id="main-content" >
+                <c:if test="${not empty error}">
+                    <div class="error">${error}</div>
+                </c:if>
+                <c:if test="${not empty msg}">
+                    <div class="msg">${msg}</div>
+                </c:if>
+                <br/><br/>
+                <form role="form" name='loginForm' action="<c:url value='j_spring_security_check' />" method='POST' style="width: 400px;">
+                    <div class="form-group">
+                        <label for="exampleInputEmail1">Username</label>
+                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Username" name='username'>
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleInputPassword1">Password</label>
+                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name='password'>
+                    </div>
 
 
+                    <input type="hidden" name="${_csrf.parameterName}"
+                           value="${_csrf.token}" />
+                    <button class="btn btn-large btn-primary" type="submit">Sign in</button>
+                </form>
+                <br/><br/>
+                <h4>The following accounts are built into Webgoat</h4>
+                <table class="table table-bordered" style="width:400px;">
+                    <thead>
+                        <tr class="warning"><th>Account</th><th>User</th><th>Password</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
+                        <tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
+                    </tbody>
+                </table>
+                <br/><br/>
 
-    </body>
+
+            </section>
+        </section> 
+    </section>
+
+
+</body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/pages/logout.jsp b/src/main/webapp/WEB-INF/pages/logout.jsp
index f55c73a8e..2ee704beb 100644
--- a/src/main/webapp/WEB-INF/pages/logout.jsp
+++ b/src/main/webapp/WEB-INF/pages/logout.jsp
@@ -1,59 +1,68 @@
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <html>
     <head>
-        <title>Login Page</title>
-        <!-- Latest compiled and minified CSS -->
-        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
-        <style type="text/css">
-            body {
-                padding-top: 40px;
-                padding-bottom: 40px;
-                background-color: #f5f5f5;
-            }
+        <title>Logout Page</title>
+        <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+        <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+        <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+        <!--[if gt IE 8]><!-->
 
-            .form-signin {
-                max-width: 300px;
-                padding: 19px 29px 29px;
-                margin: 0 auto 20px;
-                background-color: #fff;
-                border: 1px solid #e5e5e5;
-                -webkit-border-radius: 5px;
-                -moz-border-radius: 5px;
-                border-radius: 5px;
-                -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-                -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-                box-shadow: 0 1px 2px rgba(0,0,0,.05);
-            }
-            .form-signin .form-signin-heading,
-            .form-signin .checkbox {
-                margin-bottom: 10px;
-            }
-            .form-signin input[type="text"],
-            .form-signin input[type="password"] {
-                font-size: 16px;
-                height: auto;
-                margin-bottom: 15px;
-                padding: 7px 9px;
-            }
+        <!--  CSS -->
+        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
+        <!-- Bootstrap core CSS -->
+        <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
+        <!-- Fonts from Font Awsome -->
+        <link rel="stylesheet" href="css/font-awesome.min.css"/>
+        <!-- CSS Animate -->
+        <link rel="stylesheet" href="css/animate.css"/>
+        <!-- Custom styles for this theme -->
+        <link rel="stylesheet" href="css/main.css"/>
+        <!--  end of CSS -->
 
-        </style>
-    </head>
-    <body onload='document.loginForm.username.focus();'>
 
-        <div class="container">
-            <c:if test="${not empty error}">
-                <div class="error">${error}</div>
-            </c:if>
-            <c:if test="${not empty msg}">
-                <div class="msg">${msg}</div>
-            </c:if>
-            You have logged out successfully
-            <hr/>
-            Click here to <a href="<c:url value="login.mvc" />" > Login</a>
+    </style>
+</head>
+<body onload='document.loginForm.username.focus();'>
+    <section id="container" ng-controller="goatLesson">
+        <header id="header">
+            <!--logo start-->
+            <div class="brand">
+                <a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
+            </div>
+            <!--logo end-->
+            <div class="toggle-navigation toggle-left">
 
-        </div> <!-- /container -->
+            </div><!--toggle navigation end-->
+            <div class="lessonTitle" >
+                <h1 id="lessonTitle">Logout</h1>
+            </div><!--lesson title end-->
+
+        </header>
+        <section class="main-content-wrapper">
+
+            <section id="main-content" >
+                <c:if test="${not empty error}">
+                    <div class="error">${error}</div>
+                </c:if>
+                <c:if test="${not empty msg}">
+                    <div class="msg">${msg}</div>
+                </c:if>
+                <br/><br/>
+                <div class="alert alert-success" role="alert" style="width: 400px;">
+                    You have logged out successfully
+                </div>
+                
+                <hr/>
+                <h4>Click here if you would like to log back in: <a href="<c:url value="login.mvc" />" > Login</a></h4>
+
+
+            </section>
+        </section> 
+    </section>
+
+
+</body>
+</html>
 
 
 
-    </body>
-</html>
\ No newline at end of file

Account	User	Password
Webgoat User	guest	guest
Webgoat Admin	webgoat	webgoat
Server Admin	server	server