diff --git a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
index f30bd58e540..38acc645912 100644
--- a/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
+++ b/packages/zitadel-react/src/components/SignInWithAzureAD.tsx
@@ -2,15 +2,11 @@
 
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithAzureAD = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-p-[10px] ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" className="w-full h-full">
           <path fill="#f25022" d="M1 1H10V10H1z"></path>
diff --git a/packages/zitadel-react/src/components/SignInWithGithub.tsx b/packages/zitadel-react/src/components/SignInWithGithub.tsx
index 28a19829235..435459def55 100644
--- a/packages/zitadel-react/src/components/SignInWithGithub.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGithub.tsx
@@ -2,15 +2,11 @@
 
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGithub = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-h-[50px] ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-8 ztdl-w-8 ztdl-mx-2 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
index 6ec0941f871..ffb1d09c49c 100644
--- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx
@@ -1,14 +1,10 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGitlab = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" width={25} height={24} fill="none">
           <path
diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
index d3d9d0f8b7d..af2dc40d26d 100644
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -1,14 +1,10 @@
 import { ReactNode, forwardRef } from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
+import { IdpButtonClasses } from "./classes";
 
 export const SignInWithGoogle = forwardRef<HTMLButtonElement, SignInWithIdentityProviderProps>(
   ({ children, className = "", name = "", ...props }, ref): ReactNode => (
-    <button
-      type="button"
-      ref={ref}
-      className={`ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${className}`}
-      {...props}
-    >
+    <button type="button" ref={ref} className={`${IdpButtonClasses} ${className}`} {...props}>
       <div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" id="Capa_1" viewBox="0 0 150 150">
           <style>
diff --git a/packages/zitadel-react/src/components/classes.ts b/packages/zitadel-react/src/components/classes.ts
new file mode 100644
index 00000000000..11216a561c4
--- /dev/null
+++ b/packages/zitadel-react/src/components/classes.ts
@@ -0,0 +1,2 @@
+export const IdpButtonClasses =
+  "transition-all ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";