diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index 12b355b3eb0..ed95f51168b 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignInProps } from '@clerk/types'
+import type { SignInButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -22,7 +22,7 @@ const {
   signUpFallbackRedirectUrl,
   signUpForceRedirectUrl,
   mode,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signInOptions = {
@@ -44,20 +44,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign in</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signInOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn(signInOptions);
+      return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignIn({
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index e0a69a5661a..b855ed37fc3 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -4,7 +4,7 @@ import type { SignOutOptions, Without } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & Without<ButtonProps<Tag>, 'mode'>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal'
 
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index a88b65b817d..3576892b1b8 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignUpProps } from '@clerk/types'
+import type { SignUpButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types'
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -23,7 +23,7 @@ const {
   signInForceRedirectUrl,
   mode,
   unsafeMetadata,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signUpOptions = {
@@ -46,20 +46,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign up</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp(signUpOptions);
+      return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({
diff --git a/packages/astro/src/types.ts b/packages/astro/src/types.ts
index bbc326975b5..49054017e2c 100644
--- a/packages/astro/src/types.ts
+++ b/packages/astro/src/types.ts
@@ -82,5 +82,4 @@ export type ButtonProps<Tag> = {
    */
   as: Tag;
   asChild?: boolean;
-  mode?: 'redirect' | 'modal';
 };