diff --git a/ui/src/components/WelcomeCard.tsx b/ui/src/components/WelcomeCard.tsx
index 813fdeb2b2..4a2eb18c12 100644
--- a/ui/src/components/WelcomeCard.tsx
+++ b/ui/src/components/WelcomeCard.tsx
@@ -14,24 +14,24 @@ export default function WelcomeCard() {
   }
 
   return (
-    <div className="mx-3 mt-1 mb-4 space-y-6 rounded-[32px] bg-[#edf3fb] p-9 text-[#165FCD]">
-      <h3 className="text-[17px] font-medium">Welcome to our pilot program</h3>
-      <p>
+    <div className="mx-4 mt-1 mb-4 space-y-4 rounded-2xl bg-blue-soft p-4 text-blue-700 dark:text-black">
+      <h3 className="text-lg font-medium">Welcome to our pilot program</h3>
+      <p className="leading-5">
         Tlon is built on an open source, user-owned network. This presents
         unique development challenges. You may encounter turbulence while we
         make the experience as smooth as any other app. Help us improve by
         providing feedback.
       </p>
-      <div className="space-x-3 text-right text-[17px] font-medium">
+      <div className="space-x-3 text-right font-medium">
         <button
-          className="rounded-lg bg-[#E4E9F1] px-4 py-2.5 active:opacity-90"
+          className="rounded-lg bg-transparent px-4 py-2.5 active:opacity-90"
           onClick={() => setIsWelcomeSeen(true)}
         >
           Close
         </button>
         <Link
           to="/profile"
-          className="rounded-lg bg-[#165FCD] px-4 py-2.5 text-[#FFF] active:opacity-90"
+          className="rounded-lg bg-blue-700 px-4 py-2.5 text-blue-soft active:opacity-90  dark:bg-black"
           onClick={() => setIsWelcomeSeen(true)}
         >
           Go to Profile