diff --git a/src/components/overlays/Modal.tsx b/src/components/overlays/Modal.tsx
index fc2c97f4..08abdbba 100644
--- a/src/components/overlays/Modal.tsx
+++ b/src/components/overlays/Modal.tsx
@@ -19,7 +19,7 @@ export function useModal(id: string) {
 export function ModalCard(props: { children?: ReactNode }) {
   return (
     <div className="w-full max-w-[30rem] m-4">
-      <div className="w-full bg-dropdown-background rounded-xl p-8 pointer-events-auto">
+      <div className="w-full bg-modal-background rounded-xl p-8 pointer-events-auto">
         {props.children}
       </div>
     </div>
diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx
index 0d1e5a06..f5bf1758 100644
--- a/src/pages/onboarding/Onboarding.tsx
+++ b/src/pages/onboarding/Onboarding.tsx
@@ -31,18 +31,20 @@ export function OnboardingPage() {
       <PageTitle subpage k="global.pages.onboarding" />
       <Modal id={skipModal.id}>
         <ModalCard>
-          <ModalCard>
-            <Heading1 className="!mt-0">
-              {t("onboarding.defaultConfirm.title")}
-            </Heading1>
-            <Paragraph>{t("onboarding.defaultConfirm.description")}</Paragraph>
+          <Heading1 className="!mt-0 !mb-4 !text-2xl">
+            {t("onboarding.defaultConfirm.title")}
+          </Heading1>
+          <Paragraph className="!mt-1 !mb-12">
+            {t("onboarding.defaultConfirm.description")}
+          </Paragraph>
+          <div className="flex items-end justify-between">
             <Button theme="secondary" onClick={skipModal.hide}>
               {t("onboarding.defaultConfirm.cancel")}
             </Button>
-            <Button theme="danger" onClick={() => completeAndRedirect()}>
+            <Button theme="purple" onClick={() => completeAndRedirect()}>
               {t("onboarding.defaultConfirm.confirm")}
             </Button>
-          </ModalCard>
+          </div>
         </ModalCard>
       </Modal>
       <CenterContainer>
diff --git a/themes/default.ts b/themes/default.ts
index bf2510ff..dfda2d86 100644
--- a/themes/default.ts
+++ b/themes/default.ts
@@ -137,6 +137,11 @@ export const defaultTheme = {
         accentA: tokens.purple.c500,
         accentB: tokens.blue.c500,
       },
+
+      // Modals
+      modal: {
+        background: tokens.shade.c800,
+      },
       
       // typography
       type: {
diff --git a/themes/list/blue.ts b/themes/list/blue.ts
index e5b73409..e10592dc 100644
--- a/themes/list/blue.ts
+++ b/themes/list/blue.ts
@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,
diff --git a/themes/list/gray.ts b/themes/list/gray.ts
index a0b9b742..c0c434e8 100644
--- a/themes/list/gray.ts
+++ b/themes/list/gray.ts
@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,
diff --git a/themes/list/red.ts b/themes/list/red.ts
index 89614632..b42b935f 100644
--- a/themes/list/red.ts
+++ b/themes/list/red.ts
@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,
diff --git a/themes/list/teal.ts b/themes/list/teal.ts
index cbae4748..742f4a32 100644
--- a/themes/list/teal.ts
+++ b/themes/list/teal.ts
@@ -95,6 +95,10 @@ export default createTheme({
         accentB: tokens.blue.c500
       },
 
+      modal: {
+        background: tokens.shade.c800,
+      },
+
       type: {
         logo: tokens.purple.c100,
         text: tokens.shade.c50,