diff --git a/lemonauth/jinja2/lemonauth/indie.html b/lemonauth/jinja2/lemonauth/indie.html
index 7f05247..f6ddf45 100644
--- a/lemonauth/jinja2/lemonauth/indie.html
+++ b/lemonauth/jinja2/lemonauth/indie.html
@@ -62,17 +62,19 @@
       </div>
 
       <div id="verified-success" hidden>
-        this client has been <strong>verified</strong> using <code>{{ '<link rel="redirect_uri">' | escape }}</code> - they are who they claim to be!
+        this client has been <strong>verified</strong> using <code>{{ '<link rel="redirect_uri">' | escape }}</code> <br/>- they are who they claim to be!
       </div>
       <div id="verified-warning" hidden>
-        this client could <strong>not</strong> be verified using <code>{{ '<link rel="redirect_uri">' | escape }}</code> - check the redirect uri carefully yourself!
+        this client could <strong>not</strong> be verified using <code>{{ '<link rel="redirect_uri">' | escape }}</code> <br/>- check the redirect uri carefully yourself!
       </div>
 {% endblock %}
 
 {% block foot %}
 <script type="text/javascript">
-  tippy('[data-tippy-theme]', {
+  tippy('[data-tippy-html]', {
     arrow: true,
+    allowHTML: true,
+    maxWidth: 500,
     content: function(element) {
       return document.querySelector(element.getAttribute('data-tippy-html')).innerHTML;
     }
diff --git a/lemonauth/static/lemonauth/css/indie.styl b/lemonauth/static/lemonauth/css/indie.styl
index 4c64399..2a09022 100644
--- a/lemonauth/static/lemonauth/css/indie.styl
+++ b/lemonauth/static/lemonauth/css/indie.styl
@@ -2,10 +2,10 @@
 	img
 		height 2em
 		margin-right .5em
-.tippy-tooltip
-	&.success-theme
+.tippy-box
+	&[data-theme~='success']
 		color $base0B
-	&.warning-theme
+	&[data-theme~='warning']
 		color $base0A
 .verified-success
 	color $base0B
diff --git a/lemoncurry/jinja2/lemoncurry/layout.html b/lemoncurry/jinja2/lemoncurry/layout.html
index 6adb6d6..9e1eda3 100644
--- a/lemoncurry/jinja2/lemoncurry/layout.html
+++ b/lemoncurry/jinja2/lemoncurry/layout.html
@@ -146,12 +146,14 @@
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"
             integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"
-            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js" crossorigin="anonymous"
             integrity="sha384-BlPof9RtjBqeJFskKv3sK3dh4Wk70iKlpIe92FeVN+6qxaGUOUu+mZNpALZ+K7ya"></script>
-    <script src="https://unpkg.com/tippy.js@3.4.1/dist/tippy.standalone.min.js" crossorigin="anonymous"
-            integrity="sha384-x7dGoSfOWUdyPccAel9dkWte6n8GxDWbByavEixRzW0O9xvPGzg3y0qzZBwGNUw9"></script>
+    <script src="https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"
+            integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"
+            integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"></script>
+    <script src="https://unpkg.com/tippy.js@6.3.7/dist/tippy-bundle.umd.js" crossorigin="anonymous"
+            integrity="sha384-dtMr4wkcxQWUqsJFgElu4AttgIhOsjr2vYIzP2mv0MZbD/uJ6OHxFdbgE3MOKabN"></script>
     {% compress js %}
     <script type="text/javascript">
       hljs.initHighlightingOnLoad();
diff --git a/lemoncurry/static/lemoncurry/css/layout.styl b/lemoncurry/static/lemoncurry/css/layout.styl
index 35dd496..ede133c 100644
--- a/lemoncurry/static/lemoncurry/css/layout.styl
+++ b/lemoncurry/static/lemoncurry/css/layout.styl
@@ -32,13 +32,13 @@ code, pre, .code, .pre
 		text-decoration none
 		line-height 1
 
-for placement in top bottom left right
-	.tippy-popper[x-placement^={placement}] .tippy-tooltip.dark-theme .tippy-arrow
-		border-{placement}-color $base03
-
-.tippy-tooltip.dark-theme
+.tippy-box[data-theme~='dark']
 	background-color $base03
 	color $base04
+	text-align center
+	for placement in top bottom left right
+		&[data-placement^={placement}] > .tippy-arrow::before
+			border-{placement}-color $base03
 
 body
 	display flex