diff --git a/frontend/resources/images/assets/nitrate-welcome-light.svg b/frontend/resources/images/assets/nitrate-welcome-light.svg
new file mode 100644
index 0000000000..2ee4fbd363
--- /dev/null
+++ b/frontend/resources/images/assets/nitrate-welcome-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/assets/nitrate-welcome.svg b/frontend/resources/images/assets/nitrate-welcome.svg
index ef9296dbcc..2956031d64 100644
--- a/frontend/resources/images/assets/nitrate-welcome.svg
+++ b/frontend/resources/images/assets/nitrate-welcome.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
index f30c5e5bc4..e856a2a1c5 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
@@ -22,6 +22,7 @@
(def ^:svg-id logo-subscription "logo-subscription")
(def ^:svg-id logo-subscription-light "logo-subscription-light")
(def ^:svg-id nitrate-welcome "nitrate-welcome")
+(def ^:svg-id nitrate-welcome-light "nitrate-welcome-light")
(def ^:svg-id marketing-arrows "marketing-arrows")
(def ^:svg-id marketing-exchange "marketing-exchange")
(def ^:svg-id marketing-file "marketing-file")
diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs
index 1ef023a079..5a68b70933 100644
--- a/frontend/src/app/main/ui/icons.cljs
+++ b/frontend/src/app/main/ui/icons.cljs
@@ -21,6 +21,7 @@
(def ^:icon logo-subscription (icon-xref :logo-subscription))
(def ^:icon logo-subscription-light (icon-xref :logo-subscription-light))
(def ^:icon nitrate-welcome (icon-xref :nitrate-welcome))
+(def ^:icon nitrate-welcome-light (icon-xref :nitrate-welcome-light))
(def ^:icon brand-openid (icon-xref :brand-openid))
(def ^:icon brand-github (icon-xref :brand-github))
diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs
index 24361df2c3..65d0cd528c 100644
--- a/frontend/src/app/main/ui/nitrate/nitrate_form.cljs
+++ b/frontend/src/app/main/ui/nitrate/nitrate_form.cljs
@@ -48,8 +48,10 @@
:size "m"}]]
[:div {:class (stl/css :modal-success-content)}
[:div {:class (stl/css :modal-start)}
- ;; TODO this svg is a placeholder. Use the proper one when created
- [:> raw-svg* {:id "nitrate-welcome"}]]
+ [:> raw-svg* {:id "nitrate-welcome-light"
+ :class (stl/css :welcome-illustration-light)}]
+ [:> raw-svg* {:id "nitrate-welcome"
+ :class (stl/css :welcome-illustration-dark)}]]
[:div {:class (stl/css :modal-end)}
[:div {:class (stl/css :modal-title)}
diff --git a/frontend/src/app/main/ui/nitrate/nitrate_form.scss b/frontend/src/app/main/ui/nitrate/nitrate_form.scss
index 74872c0265..5de76305e5 100644
--- a/frontend/src/app/main/ui/nitrate/nitrate_form.scss
+++ b/frontend/src/app/main/ui/nitrate/nitrate_form.scss
@@ -101,6 +101,22 @@
block-size: auto;
}
+.welcome-illustration-light {
+ display: none;
+
+ :global(.light) & {
+ display: block;
+ }
+}
+
+.welcome-illustration-dark {
+ display: block;
+
+ :global(.light) & {
+ display: none;
+ }
+}
+
.radio-btns {
display: flex;
flex-direction: column;