diff --git a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/header.ftlh b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/header.ftlh
index b1be17c2e..dff804402 100644
--- a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/header.ftlh
+++ b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/header.ftlh
@@ -1,22 +1,17 @@
 <#import "/spring.ftl" as spring />
-<nav class="navbar navbar-default" role="navigation">
+<nav class="navbar navbar-expand-md navbar-dark" role="navigation">
   <div class="container">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="<@spring.url dashboardPath/>"><span></span></a>
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-    </div>
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav navbar-right">
-        <li>
-          <a href="<@spring.url dashboardPath/>">Home</a>
+    <a class="navbar-brand my-auto" href="<@spring.url dashboardPath/>"><span></span></a>
+    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarContent">
+      <ul class="navbar-nav ms-auto">
+        <li class="nav-item">
+          <a class="nav-link px-2" href="<@spring.url dashboardPath/>">Home</a>
         </li>
-        <li>
-          <a href="<@spring.url dashboardPath/>/lastn">Last 1000 since startup</a>
+        <li class="nav-item">
+          <a class="nav-link px-2" href="<@spring.url dashboardPath/>/lastn">Last 1000 since startup</a>
         </li>
       </ul>
     </div>
diff --git a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/lastn.ftlh b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/lastn.ftlh
index 37181ceb5..b0157351a 100644
--- a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/lastn.ftlh
+++ b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/lastn.ftlh
@@ -1,29 +1,27 @@
 <#import "/spring.ftl" as spring />
 <!doctype html>
-<!--[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]><!--> <html class="no-js"> <!--<![endif]-->
+<html lang="en">
   <head>
     <base href="<@spring.url basePath/>">
     <title>Eureka - Last N events</title>
     <link rel="stylesheet" type="text/css" href="eureka/css/wro.css">
   </head>
   <body id="three">
-
-    <!--[if lt IE 7]>
-      <p>You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
-    <![endif]-->
+    <script type="text/javascript">
+      if ( document.documentMode ) {
+         document.write('<p>You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>');
+      }
+    </script>
 
     <#include "header.ftlh">
 
     <div class="container-fluid xd-container">
       <#include "navbar.ftlh">
 
-    <div id="xd-jobs" class="tab-pane active col-md-12">
+    <div id="xd-jobs" class="tab-pane col-md-12">
         <ul class="nav nav-tabs" role="tablist" id="myTab">
-          <li class="active"><a data-toggle="tab" href="#cancelled">Last 1000 cancelled leases</a></li>
-          <li><a data-toggle="tab" href="#registered">Last 1000 newly registered leases</a></li>
+          <li class="nav-item"><a href="<@spring.url dashboardPath/>/lastn#cancelled" class="nav-link p-2" data-bs-toggle="tab">Last 1000 cancelled leases</a></li>
+          <li class="nav-item"><a href="<@spring.url dashboardPath/>/lastn#registered" class="nav-link p-2 active" data-bs-toggle="tab">Last 1000 newly registered leases</a></li>
         </ul>
         <div class="tab-content">
           <div class="tab-pane" id="cancelled">
@@ -42,7 +40,7 @@
               <tbody>
             </table>
           </div>
-          <div class="tab-pane" id="registered">
+          <div class="tab-pane active" id="registered">
             <table id='lastNRegistered' class="table table-striped table-hover">
               <thead>
                 <tr><th>Timestamp</th><th>Lease</th></tr>
@@ -62,10 +60,5 @@
     </div>
     </div>
     <script type="text/javascript" src="eureka/js/wro.js" ></script>
-    <script type="text/javascript">
-      $(function () {
-        $('#myTab a:last').tab('show')
-      })
-    </script>
   </body>
 </html>
diff --git a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/navbar.ftlh b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/navbar.ftlh
index cf3cf133c..2fe468bf0 100644
--- a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/navbar.ftlh
+++ b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/navbar.ftlh
@@ -63,7 +63,7 @@
 </#if>
 
 <h1>DS Replicas</h1>
-<ul class="list-group">
+<ul class="list-group mb-3">
   <#list replicas as replica>
     <li class="list-group-item"><a href="${replica.value}">${replica.key}</a></li>
   </#list>
diff --git a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/status.ftlh b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/status.ftlh
index 2f1888921..44bb48681 100755
--- a/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/status.ftlh
+++ b/spring-cloud-netflix-eureka-server/src/main/resources/templates/eureka/status.ftlh
@@ -1,13 +1,9 @@
 <#import "/spring.ftl" as spring />
 <!doctype html>
-<!--[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]><!--> <html class="no-js"> <!--<![endif]-->
+<html lang="en">
   <head>
     <base href="<@spring.url basePath/>">
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Eureka</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
@@ -17,6 +13,12 @@
   </head>
 
   <body id="one">
+    <script type="text/javascript">
+      if ( document.documentMode ) {
+         document.write('<p>You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>');
+      }
+    </script>
+
     <#include "header.ftlh">
     <div class="container-fluid xd-container">
       <#include "navbar.ftlh">
@@ -103,11 +105,5 @@
       </table>
     </div>
     <script type="text/javascript" src="eureka/js/wro.js" ></script>
-    <script type="text/javascript">
-       $(document).ready(function() {
-         $('table.stripeable tr:odd').addClass('odd');
-         $('table.stripeable tr:even').addClass('even');
-       });
-    </script>
   </body>
 </html>
diff --git a/spring-cloud-netflix-eureka-server/src/main/wro/header.css b/spring-cloud-netflix-eureka-server/src/main/wro/header.css
index 0c4d886e2..3ec34f39f 100644
--- a/spring-cloud-netflix-eureka-server/src/main/wro/header.css
+++ b/spring-cloud-netflix-eureka-server/src/main/wro/header.css
@@ -1,7 +1,8 @@
 .navbar {
     border-top: 4px solid #6db33f;
     background-color: #34302d;
-    margin-bottom: 0px;
+    margin: 0;
+    padding: 0;
     border-bottom: 0;
     border-left: 0;
     border-right: 0;
@@ -21,63 +22,35 @@
     height: 46px;
     background: url("../images/spring-logo-eureka.png") -1px -48px no-repeat;
     opacity: 0;
+    transition: opacity 0.12s ease-in-out;
     -moz-transition: opacity 0.12s ease-in-out;
     -webkit-transition: opacity 0.12s ease-in-out;
-    -o-transition: opacity 0.12s ease-in-out;
 }
 .navbar a:hover.navbar-brand span {
     opacity: 1;
-    color: #eeeeee;
-    background-color: #6db33f;
 }
-.navbar li > a, .navbar-text {
-    color: #f1f1f1;
+.nav-link, .navbar-text {
+    color: #34302d;
     font-family: "montserratregular", sans-serif;
     text-shadow: none;
     font-size: 14px;
     padding: 28px 20px;
     transition: all 0.15s;
-    -webkit-transition: all 0.15s;
     -moz-transition: all 0.15s;
-    -o-transition: all 0.15s;
-    -ms-transition: all 0.15s;
+    -webkit-transition: all 0.15s;
 }
-.navbar li > a {
+.navbar .nav-link:link {
+    color: #f1f1f1;
     text-transform: uppercase;
 }
-.navbar .navbar-text {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-.navbar li:hover > a {
-    color: #eeeeee;
+.navbar .nav-item .nav-link:hover {
+    color: #f1f1f1;
     background-color: #6db33f;
 }
-.navbar-toggle {
+.navbar-toggler {
+    color: #f1f1f1;
     border-width: 0;
 }
-.navbar-toggle .icon-bar + .icon-bar {
-    margin-top: 3px;
-}
-.navbar-toggle .icon-bar {
-    width: 19px;
-    height: 3px;
-    background-color: #f1f1f1;
-}
-.navbar-default-toggle:hover .icon-bar {
-    background-color: transparent;
-}
-
-.navbar-default a:active{
-    background-color: #6db33f;
-}
-
-.nav-tabs:active a:hover{
-    color: #f1f1f1;
-    background-color: #34302D;
+table {
     border-color: #34302D;
 }
-
-table{
-    border-color: #34302D;
-}
\ No newline at end of file
diff --git a/spring-cloud-netflix-eureka-server/src/main/wro/main.css b/spring-cloud-netflix-eureka-server/src/main/wro/main.css
index 451355473..6e5226f3d 100644
--- a/spring-cloud-netflix-eureka-server/src/main/wro/main.css
+++ b/spring-cloud-netflix-eureka-server/src/main/wro/main.css
@@ -2,10 +2,10 @@
 @import "header.css";
 @import "responsive.css";
 
-a:link{
+a:link {
     color: #5fa134;
 }
-a:hover{
+a:hover {
     color: #5fa134;
 }
 body {
@@ -19,9 +19,14 @@ body {
     background-color: #34302D;
     padding: 9px 12px;
 }
-.nav > li > a {
+.nav-tabs .nav-link {
     color: #838789;
 }
+.nav-tabs .nav-link.active, .nav-tabs .nav-link.active:hover {
+    color: #f1f1f1;
+    background-color: #34302D;
+    border-color: #34302D;
+}
 .btn-default {
     border-width: 2px;
     transition: border 0.15s;
@@ -95,4 +100,3 @@ table td.action-column {
 .help-block {
     color: #f1f1f1;
 }
-
diff --git a/spring-cloud-netflix-eureka-server/src/main/wro/responsive.css b/spring-cloud-netflix-eureka-server/src/main/wro/responsive.css
index ac3656382..f14a0a260 100644
--- a/spring-cloud-netflix-eureka-server/src/main/wro/responsive.css
+++ b/spring-cloud-netflix-eureka-server/src/main/wro/responsive.css
@@ -1,16 +1,5 @@
 @media (max-width: 768px) {
-    .navbar-toggle {
-        position: absolute;
-        z-index: 9999;
-        left: 0px;
-        top: 0px;
-    }
     .navbar a.navbar-brand {
-        display: block;
-        margin: 0 auto 0 auto;
-        width: 200px;
-        height: 50px;
-        float: none;
         background: url("../images/spring-logo-eureka-mobile.png") 0 center no-repeat;
     }
     .homepage-billboard .homepage-subtitle {
diff --git a/spring-cloud-netflix-eureka-server/src/test/java/org/springframework/cloud/netflix/eureka/server/ApplicationDashboardPathTests.java b/spring-cloud-netflix-eureka-server/src/test/java/org/springframework/cloud/netflix/eureka/server/ApplicationDashboardPathTests.java
index 6ac3daf86..9b1dfe044 100644
--- a/spring-cloud-netflix-eureka-server/src/test/java/org/springframework/cloud/netflix/eureka/server/ApplicationDashboardPathTests.java
+++ b/spring-cloud-netflix-eureka-server/src/test/java/org/springframework/cloud/netflix/eureka/server/ApplicationDashboardPathTests.java
@@ -57,9 +57,9 @@ class ApplicationDashboardPathTests {
 		// The "DS Replicas"
 		assertThat(body.contains("<h1>Instances currently registered with Eureka</h1>")).isTrue();
 		// The Home
-		assertThat(body.contains("<a href=\"/dashboard\">Home</a>")).isTrue();
+		assertThat(body.contains("<a class=\"nav-link px-2\" href=\"/dashboard\">Home</a>")).isTrue();
 		// The Lastn
-		assertThat(body.contains("<a href=\"/dashboard/lastn\">Last")).isTrue();
+		assertThat(body.contains("<a class=\"nav-link px-2\" href=\"/dashboard/lastn\">Last")).isTrue();
 	}
 
 	@Test
