diff --git a/share/jupyterhub/static/scss/login.scss b/share/jupyterhub/static/scss/login.scss
index b128bfd5..54b9a5b3 100644
--- a/share/jupyterhub/static/scss/login.scss
+++ b/share/jupyterhub/static/scss/login.scss
@@ -3,7 +3,6 @@
   height: 80vh;
 
   & #insecure-login-warning {
-    background-color: $warning-bg-subtle;
     padding: 10px;
   }
 
diff --git a/share/jupyterhub/templates/login.html b/share/jupyterhub/templates/login.html
index 23165308..d9728733 100644
--- a/share/jupyterhub/templates/login.html
+++ b/share/jupyterhub/templates/login.html
@@ -12,7 +12,7 @@
           {{ custom_html | safe }}
         {% elif login_service %}
           <div class="service-login">
-            <p id='insecure-login-warning' class='hidden'>
+            <p id='insecure-login-warning' class='hidden alert alert-warning'>
               Warning: JupyterHub seems to be served over an unsecured HTTP connection.
               We strongly recommend enabling HTTPS for JupyterHub.
             </p>
@@ -28,7 +28,7 @@
               <h1>Sign in</h1>
             </div>
             <div class='auth-form-body m-auto'>
-              <p id='insecure-login-warning' class='hidden'>
+              <p id='insecure-login-warning' class='hidden alert alert-warning'>
                 Warning: JupyterHub seems to be served over an unsecured HTTP connection.
                 We strongly recommend enabling HTTPS for JupyterHub.
               </p>