diff --git a/app/assets/javascripts/discourse/app/lib/popup.js b/app/assets/javascripts/discourse/app/lib/popup.js
index f098f75e817..bbd110309e7 100644
--- a/app/assets/javascripts/discourse/app/lib/popup.js
+++ b/app/assets/javascripts/discourse/app/lib/popup.js
@@ -23,6 +23,7 @@ export function showPopup(options) {
     showOnCreate: true,
     hideOnClick: false,
     trigger: "manual",
+    theme: "d-onboarding",
 
     // It must be interactive to make buttons work.
     interactive: true,
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 0af5ac85810..163ec74b3cb 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/app/assets/stylesheets/common/base/_index.scss
@@ -12,6 +12,7 @@
 @import "crawler_layout";
 @import "d-icon";
 @import "d-popover";
+@import "d-onboarding";
 @import "dialog";
 @import "directory";
 @import "discourse";
diff --git a/app/assets/stylesheets/common/base/d-onboarding.scss b/app/assets/stylesheets/common/base/d-onboarding.scss
new file mode 100644
index 00000000000..f7f795d9d7f
--- /dev/null
+++ b/app/assets/stylesheets/common/base/d-onboarding.scss
@@ -0,0 +1,37 @@
+.onboarding-popup-container {
+  min-width: 300px;
+  padding: 0.5em;
+  text-align: left;
+
+  .onboarding-popup-title {
+    font-size: $font-up-2;
+    font-weight: bold;
+  }
+
+  .onboarding-popup-content {
+    margin-top: 0.25em;
+  }
+
+  .onboarding-popup-buttons {
+    margin-top: 1em;
+  }
+}
+
+.tippy-box[data-theme~="d-onboarding"][data-placement^="left"]
+  > .tippy-svg-arrow
+  > svg {
+  left: 11px;
+}
+
+.tippy-box[data-theme~="d-onboarding"][data-placement^="bottom"]
+  > .tippy-svg-arrow
+  > svg {
+  top: -13px;
+  left: -1px;
+}
+
+.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow:after,
+.tippy-box[data-theme~="d-onboarding"] > .tippy-svg-arrow > svg {
+  width: 18px;
+  height: 18px;
+}
diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index 7c4547c2ecb..588aa1d2fc9 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -14,6 +14,7 @@ $d-popover-border: var(--primary-low);
 .tippy-box[data-placement^="bottom"] .tippy-svg-arrow > svg {
   top: -10px;
 }
+
 .tippy-rounded-arrow {
   fill: $d-popover-background;
   .svg-arrow {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 9a52a296a8b..fe579fe9f0c 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -570,25 +570,6 @@ table {
   animation-name: ping;
 }
 
-.onboarding-popup-container {
-  min-width: 300px;
-  padding: 0.5em;
-  text-align: left;
-
-  .onboarding-popup-title {
-    font-size: $font-up-2;
-    font-weight: bold;
-  }
-
-  .onboarding-popup-content {
-    margin-top: 0.25em;
-  }
-
-  .onboarding-popup-buttons {
-    margin-top: 1em;
-  }
-}
-
 .fade {
   opacity: 0;
   transition: opacity 0.15s linear;