diff --git a/src/app.css b/src/app.css
index 1eb72743c..c3388f1d3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -150,3 +150,7 @@ input[type='number'] {
 .cm-editor.cm-focused {
 	outline: none;
 }
+
+.tippy-box[data-theme~='dark'] {
+	@apply rounded-lg bg-gray-950 text-xs border border-gray-900 shadow-xl;
+}
diff --git a/src/lib/components/common/Tooltip.svelte b/src/lib/components/common/Tooltip.svelte
index b8c2e1cd2..1198935b1 100644
--- a/src/lib/components/common/Tooltip.svelte
+++ b/src/lib/components/common/Tooltip.svelte
@@ -3,11 +3,13 @@
 	import { marked } from 'marked';
 
 	import tippy from 'tippy.js';
+	import { roundArrow } from 'tippy.js';
 
 	export let placement = 'top';
 	export let content = `I'm a tooltip!`;
 	export let touch = true;
 	export let className = 'flex';
+	export let theme = '';
 
 	let tooltipElement;
 	let tooltipInstance;
@@ -20,7 +22,10 @@
 				content: content,
 				placement: placement,
 				allowHTML: true,
-				touch: touch
+				touch: touch,
+				...(theme !== '' ? { theme } : { theme: 'dark' }),
+				arrow: false,
+				offset: [0, 4]
 			});
 		}
 	} else if (tooltipInstance && content === '') {