diff --git a/apps/dev/app/api/auth/[...nextauth]/route.ts b/apps/dev/app/api/auth/[...nextauth]/route.ts
index 9f185ac98c..02dfa0a1a4 100644
--- a/apps/dev/app/api/auth/[...nextauth]/route.ts
+++ b/apps/dev/app/api/auth/[...nextauth]/route.ts
@@ -1,12 +1,207 @@
 import NextAuth, { type NextAuthOptions } from "next-auth"
-import GitHub from "next-auth/providers/github"
 // import { NextRequest } from "next/server"
 
+// Providers
+import Apple from "next-auth/providers/apple"
+import Auth0 from "next-auth/providers/auth0"
+import AzureAD from "next-auth/providers/azure-ad"
+import AzureB2C from "next-auth/providers/azure-ad-b2c"
+import BoxyHQSAML from "next-auth/providers/boxyhq-saml"
+// import Cognito from "next-auth/providers/cognito"
+import Credentials from "next-auth/providers/credentials"
+import Discord from "next-auth/providers/discord"
+import DuendeIDS6 from "next-auth/providers/duende-identity-server6"
+// import Email from "next-auth/providers/email"
+import Facebook from "next-auth/providers/facebook"
+import Foursquare from "next-auth/providers/foursquare"
+import Freshbooks from "next-auth/providers/freshbooks"
+import GitHub from "next-auth/providers/github"
+import Gitlab from "next-auth/providers/gitlab"
+import Google from "next-auth/providers/google"
+// import IDS4 from "next-auth/providers/identity-server4"
+import Instagram from "next-auth/providers/instagram"
+// import Keycloak from "next-auth/providers/keycloak"
+import Line from "next-auth/providers/line"
+import LinkedIn from "next-auth/providers/linkedin"
+import Mailchimp from "next-auth/providers/mailchimp"
+// import Okta from "next-auth/providers/okta"
+import Osu from "next-auth/providers/osu"
+import Patreon from "next-auth/providers/patreon"
+import Slack from "next-auth/providers/slack"
+import Spotify from "next-auth/providers/spotify"
+import Trakt from "next-auth/providers/trakt"
+import Twitch from "next-auth/providers/twitch"
+import Twitter from "next-auth/providers/twitter"
+import Vk from "next-auth/providers/vk"
+import Wikimedia from "next-auth/providers/wikimedia"
+import WorkOS from "next-auth/providers/workos"
+
+// // Prisma
+// import { PrismaClient } from "@prisma/client"
+// import { PrismaAdapter } from "@next-auth/prisma-adapter"
+// const client = globalThis.prisma || new PrismaClient()
+// if (process.env.NODE_ENV !== "production") globalThis.prisma = client
+// const adapter = PrismaAdapter(client)
+
+// // Fauna
+// import { Client as FaunaClient } from "faunadb"
+// import { FaunaAdapter } from "@next-auth/fauna-adapter"
+// const opts = { secret: process.env.FAUNA_SECRET, domain: process.env.FAUNA_DOMAIN }
+// const client = globalThis.fauna || new FaunaClient(opts)
+// if (process.env.NODE_ENV !== "production") globalThis.fauna = client
+// const adapter = FaunaAdapter(client)
+
+// // TypeORM
+// import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
+// const adapter = TypeORMLegacyAdapter({
+//   type: "sqlite",
+//   name: "next-auth-test-memory",
+//   database: "./typeorm/dev.db",
+//   synchronize: true,
+// })
+
+// // Supabase
+// import { SupabaseAdapter } from "@next-auth/supabase-adapter"
+// const adapter = SupabaseAdapter({
+//   url: process.env.NEXT_PUBLIC_SUPABASE_URL,
+//   secret: process.env.SUPABASE_SERVICE_ROLE_KEY,
+// })
+
 export const authOptions: NextAuthOptions = {
+  // adapter,
+  // debug: process.env.NODE_ENV !== "production",
+  theme: {
+    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
+    brandColor: "#1786fb",
+  },
   providers: [
+    Credentials({
+      credentials: { password: { label: "Password", type: "password" } },
+      async authorize(credentials) {
+        if (credentials.password !== "pw") return null
+        return {
+          name: "Fill Murray",
+          email: "bill@fillmurray.com",
+          image: "https://www.fillmurray.com/64/64",
+          id: "1",
+          foo: "",
+        }
+      },
+    }),
+    Apple({
+      clientId: process.env.APPLE_ID,
+      clientSecret: process.env.APPLE_SECRET,
+    }),
+    Auth0({
+      clientId: process.env.AUTH0_ID,
+      clientSecret: process.env.AUTH0_SECRET,
+      issuer: process.env.AUTH0_ISSUER,
+    }),
+    AzureAD({
+      clientId: process.env.AZURE_AD_CLIENT_ID,
+      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
+      tenantId: process.env.AZURE_AD_TENANT_ID,
+    }),
+    AzureB2C({
+      clientId: process.env.AZURE_B2C_ID,
+      clientSecret: process.env.AZURE_B2C_SECRET,
+      issuer: process.env.AZURE_B2C_ISSUER,
+    }),
+    BoxyHQSAML({
+      issuer: "https://jackson-demo.boxyhq.com",
+      clientId: "tenant=boxyhq.com&product=saml-demo.boxyhq.com",
+      clientSecret: "dummy",
+    }),
+    // Cognito({ clientId: process.env.COGNITO_ID, clientSecret: process.env.COGNITO_SECRET, issuer: process.env.COGNITO_ISSUER }),
+    Discord({
+      clientId: process.env.DISCORD_ID,
+      clientSecret: process.env.DISCORD_SECRET,
+    }),
+    DuendeIDS6({
+      clientId: "interactive.confidential",
+      clientSecret: "secret",
+      issuer: "https://demo.duendesoftware.com",
+    }),
+    Facebook({
+      clientId: process.env.FACEBOOK_ID,
+      clientSecret: process.env.FACEBOOK_SECRET,
+    }),
+    Foursquare({
+      clientId: process.env.FOURSQUARE_ID,
+      clientSecret: process.env.FOURSQUARE_SECRET,
+    }),
+    Freshbooks({
+      clientId: process.env.FRESHBOOKS_ID,
+      clientSecret: process.env.FRESHBOOKS_SECRET,
+    }),
     GitHub({
-      clientId: process.env.GITHUB_ID as string,
-      clientSecret: process.env.GITHUB_SECRET as string,
+      clientId: process.env.GITHUB_ID,
+      clientSecret: process.env.GITHUB_SECRET,
+    }),
+    Gitlab({
+      clientId: process.env.GITLAB_ID,
+      clientSecret: process.env.GITLAB_SECRET,
+    }),
+    Google({
+      clientId: process.env.GOOGLE_ID,
+      clientSecret: process.env.GOOGLE_SECRET,
+    }),
+    // IDS4({ clientId: process.env.IDS4_ID, clientSecret: process.env.IDS4_SECRET, issuer: process.env.IDS4_ISSUER }),
+    Instagram({
+      clientId: process.env.INSTAGRAM_ID,
+      clientSecret: process.env.INSTAGRAM_SECRET,
+    }),
+    // Keycloak({ clientId: process.env.KEYCLOAK_ID, clientSecret: process.env.KEYCLOAK_SECRET, issuer: process.env.KEYCLOAK_ISSUER }),
+    Line({
+      clientId: process.env.LINE_ID,
+      clientSecret: process.env.LINE_SECRET,
+    }),
+    LinkedIn({
+      clientId: process.env.LINKEDIN_ID,
+      clientSecret: process.env.LINKEDIN_SECRET,
+    }),
+    Mailchimp({
+      clientId: process.env.MAILCHIMP_ID,
+      clientSecret: process.env.MAILCHIMP_SECRET,
+    }),
+    // Okta({ clientId: process.env.OKTA_ID, clientSecret: process.env.OKTA_SECRET, issuer: process.env.OKTA_ISSUER }),
+    Osu({
+      clientId: process.env.OSU_CLIENT_ID,
+      clientSecret: process.env.OSU_CLIENT_SECRET,
+    }),
+    Patreon({
+      clientId: process.env.PATREON_ID,
+      clientSecret: process.env.PATREON_SECRET,
+    }),
+    Slack({
+      clientId: process.env.SLACK_ID,
+      clientSecret: process.env.SLACK_SECRET,
+    }),
+    Spotify({
+      clientId: process.env.SPOTIFY_ID,
+      clientSecret: process.env.SPOTIFY_SECRET,
+    }),
+    Trakt({
+      clientId: process.env.TRAKT_ID,
+      clientSecret: process.env.TRAKT_SECRET,
+    }),
+    Twitch({
+      clientId: process.env.TWITCH_ID,
+      clientSecret: process.env.TWITCH_SECRET,
+    }),
+    Twitter({
+      clientId: process.env.TWITTER_ID,
+      clientSecret: process.env.TWITTER_SECRET,
+    }),
+    // TwitterLegacy({ clientId: process.env.TWITTER_LEGACY_ID, clientSecret: process.env.TWITTER_LEGACY_SECRET }),
+    Vk({ clientId: process.env.VK_ID, clientSecret: process.env.VK_SECRET }),
+    Wikimedia({
+      clientId: process.env.WIKIMEDIA_ID,
+      clientSecret: process.env.WIKIMEDIA_SECRET,
+    }),
+    WorkOS({
+      clientId: process.env.WORKOS_ID,
+      clientSecret: process.env.WORKOS_SECRET,
     }),
   ],
 }
diff --git a/apps/example-nextjs/pages/api/auth/[...nextauth].ts b/apps/example-nextjs/pages/api/auth/[...nextauth].ts
index 57d83d4db2..0ffa0120da 100644
--- a/apps/example-nextjs/pages/api/auth/[...nextauth].ts
+++ b/apps/example-nextjs/pages/api/auth/[...nextauth].ts
@@ -53,6 +53,7 @@ export const authOptions: NextAuthOptions = {
   ],
   theme: {
     colorScheme: "light",
+    logo: "https://next-auth.js.org/img/logo/logo-sm.png",
   },
   callbacks: {
     async jwt({ token }) {
diff --git a/packages/next-auth/src/core/pages/error.tsx b/packages/next-auth/src/core/pages/error.tsx
index ee78e4586d..c6f82078e6 100644
--- a/packages/next-auth/src/core/pages/error.tsx
+++ b/packages/next-auth/src/core/pages/error.tsx
@@ -75,11 +75,9 @@ export default function ErrorPage(props: ErrorProps) {
         </div>
       ),
       signin: (
-        <p>
-          <a className="button" href={signinPageUrl}>
-            Sign in
-          </a>
-        </p>
+        <a className="button" href={signinPageUrl}>
+          Sign in
+        </a>
       ),
     },
   }
diff --git a/packages/next-auth/src/core/pages/signin.tsx b/packages/next-auth/src/core/pages/signin.tsx
index 2ad59a7288..c6aa83c4ba 100644
--- a/packages/next-auth/src/core/pages/signin.tsx
+++ b/packages/next-auth/src/core/pages/signin.tsx
@@ -27,6 +27,33 @@ export interface SignInServerPageParams {
   theme: Theme
 }
 
+function hexToRgba(hex?: string, alpha = 1) {
+  if (!hex) {
+    return
+  }
+  // Remove the "#" character if it's included
+  hex = hex.replace(/^#/, "")
+
+  // Expand 3-digit hex codes to their 6-digit equivalents
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+  }
+
+  // Parse the hex value to separate R, G, and B components
+  const bigint = parseInt(hex, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+
+  // Ensure the alpha value is within the valid range [0, 1]
+  alpha = Math.min(Math.max(alpha, 0), 1)
+
+  // Construct the RGBA string
+  const rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`
+
+  return rgba
+}
+
 export default function SigninPage(props: SignInServerPageParams) {
   const {
     csrfToken,
@@ -81,7 +108,7 @@ export default function SigninPage(props: SignInServerPageParams) {
 
   const error = errorType && (errors[errorType] ?? errors.default)
 
-  const logos = "https://authjs.dev/img/providers"
+  const providerLogoPath = "https://authjs.dev/img/providers"
   return (
     <div className="signin">
       {theme.brandColor && (
@@ -113,109 +140,139 @@ export default function SigninPage(props: SignInServerPageParams) {
             <p>{error}</p>
           </div>
         )}
-        {providersToRender.map((provider, i: number) => (
-          <div key={provider.id} className="provider">
-            {provider.type === "oauth" && (
-              <form action={provider.signinUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                {callbackUrl && (
-                  <input type="hidden" name="callbackUrl" value={callbackUrl} />
-                )}
-                <button
-                  type="submit"
-                  className="button"
-                  style={
-                    // eslint-disable-next-line
-                    {
-                      "--provider-bg": provider.style?.bg ?? "",
-                      "--provider-dark-bg": provider.style?.bgDark ?? "",
-                      "--provider-color": provider.style?.text ?? "",
-                      "--provider-dark-color": provider.style?.textDark ?? "",
-                    } as React.CSSProperties
-                  }
-                >
-                  {provider.style?.logo && (
-                    <img
-                      loading="lazy"
-                      height={24}
-                      width={24}
-                      id="provider-logo"
-                      src={`${
-                        provider.style.logo.startsWith("/") ? logos : ""
-                      }${provider.style.logo}`}
-                    />
-                  )}
-                  {provider.style?.logoDark && (
-                    <img
-                      loading="lazy"
-                      height={24}
-                      width={24}
-                      id="provider-logo-dark"
-                      src={`${
-                        provider.style.logo.startsWith("/") ? logos : ""
-                      }${provider.style.logoDark}`}
+        {providersToRender.map((provider, i: number) => {
+          let bg, text, logo, logoDark, bgDark, textDark
+          if (provider.type === "oauth") {
+            ;({
+              bg = "",
+              text = "",
+              logo = "",
+              bgDark = bg,
+              textDark = text,
+              logoDark = "",
+            } = provider.style ?? {})
+
+            logo = logo.startsWith("/")
+              ? `${providerLogoPath}${logo as string}`
+              : logo
+            logoDark = logoDark.startsWith("/")
+              ? `${providerLogoPath}${logoDark as string}`
+              : logoDark || logo
+
+            logoDark ||= logo
+          }
+          return (
+            <div key={provider.id} className="provider">
+              {provider.type === "oauth" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {callbackUrl && (
+                    <input
+                      type="hidden"
+                      name="callbackUrl"
+                      value={callbackUrl}
                     />
                   )}
-                  <span>Sign in with {provider.name}</span>
-                </button>
-              </form>
-            )}
-            {(provider.type === "email" || provider.type === "credentials") &&
-              i > 0 &&
-              providersToRender[i - 1].type !== "email" &&
-              providersToRender[i - 1].type !== "credentials" && <hr />}
-            {provider.type === "email" && (
-              <form action={provider.signinUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                <label
-                  className="section-header"
-                  htmlFor={`input-email-for-${provider.id}-provider`}
-                >
-                  Email
-                </label>
-                <input
-                  id={`input-email-for-${provider.id}-provider`}
-                  autoFocus
-                  type="email"
-                  name="email"
-                  value={email}
-                  placeholder="email@example.com"
-                  required
-                />
-                <button id="submitButton" type="submit">Sign in with {provider.name}</button>
-              </form>
-            )}
-            {provider.type === "credentials" && (
-              <form action={provider.callbackUrl} method="POST">
-                <input type="hidden" name="csrfToken" value={csrfToken} />
-                {Object.keys(provider.credentials).map((credential) => {
-                  return (
-                    <div key={`input-group-${provider.id}`}>
-                      <label
-                        className="section-header"
-                        htmlFor={`input-${credential}-for-${provider.id}-provider`}
-                      >
-                        {provider.credentials[credential].label ?? credential}
-                      </label>
-                      <input
-                        name={credential}
-                        id={`input-${credential}-for-${provider.id}-provider`}
-                        type={provider.credentials[credential].type ?? "text"}
-                        placeholder={
-                          provider.credentials[credential].placeholder ?? ""
-                        }
-                        {...provider.credentials[credential]}
+                  <button
+                    type="submit"
+                    className="button"
+                    style={
+                      // eslint-disable-next-line
+                      {
+                        "--provider-bg": bg,
+                        "--provider-dark-bg": bgDark,
+                        "--provider-color": text,
+                        "--provider-dark-color": textDark,
+                        "--provider-bg-hover": hexToRgba(bg, 0.8),
+                        "--provider-dark-bg-hover": hexToRgba(bgDark, 0.8),
+                      } as React.CSSProperties
+                    }
+                  >
+                    {logo && (
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo"
+                        src={`${
+                          logo.startsWith("/") ? providerLogoPath : ""
+                        }${logo}`}
                       />
-                    </div>
-                  )
-                })}
-                <button type="submit">Sign in with {provider.name}</button>
-              </form>
-            )}
-            {(provider.type === "email" || provider.type === "credentials") &&
-              i + 1 < providersToRender.length && <hr />}
-          </div>
-        ))}
+                    )}
+                    {logoDark && (
+                      <img
+                        loading="lazy"
+                        height={24}
+                        width={24}
+                        id="provider-logo-dark"
+                        src={`${
+                          logo.startsWith("/") ? providerLogoPath : ""
+                        }${logoDark}`}
+                      />
+                    )}
+                    <span>Sign in with {provider.name}</span>
+                  </button>
+                </form>
+              )}
+              {(provider.type === "email" || provider.type === "credentials") &&
+                i > 0 &&
+                providersToRender[i - 1].type !== "email" &&
+                providersToRender[i - 1].type !== "credentials" && <hr />}
+              {provider.type === "email" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  <label
+                    className="section-header"
+                    htmlFor={`input-email-for-${provider.id}-provider`}
+                  >
+                    Email
+                  </label>
+                  <input
+                    id={`input-email-for-${provider.id}-provider`}
+                    autoFocus
+                    type="email"
+                    name="email"
+                    value={email}
+                    placeholder="email@example.com"
+                    required
+                  />
+                  <button id="submitButton" type="submit">
+                    Sign in with {provider.name}
+                  </button>
+                </form>
+              )}
+              {provider.type === "credentials" && (
+                <form action={provider.callbackUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {Object.keys(provider.credentials).map((credential) => {
+                    return (
+                      <div key={`input-group-${provider.id}`}>
+                        <label
+                          className="section-header"
+                          htmlFor={`input-${credential}-for-${provider.id}-provider`}
+                        >
+                          {provider.credentials[credential].label ?? credential}
+                        </label>
+                        <input
+                          name={credential}
+                          id={`input-${credential}-for-${provider.id}-provider`}
+                          type={provider.credentials[credential].type ?? "text"}
+                          placeholder={
+                            provider.credentials[credential].placeholder ?? ""
+                          }
+                          {...provider.credentials[credential]}
+                        />
+                      </div>
+                    )
+                  })}
+                  <button type="submit">Sign in with {provider.name}</button>
+                </form>
+              )}
+              {(provider.type === "email" || provider.type === "credentials") &&
+                i + 1 < providersToRender.length && <hr />}
+            </div>
+          )
+        })}
       </div>
     </div>
   )
diff --git a/packages/next-auth/src/css/index.css b/packages/next-auth/src/css/index.css
index 7637d5d815..208f32424f 100644
--- a/packages/next-auth/src/css/index.css
+++ b/packages/next-auth/src/css/index.css
@@ -3,43 +3,80 @@
   --border-radius: 0.5rem;
   --color-error: #c94b4b;
   --color-info: #157efb;
+  --color-info-hover: #0f6ddb;
   --color-info-text: #fff;
 }
 
 .__next-auth-theme-auto,
 .__next-auth-theme-light {
   --color-background: #ececec;
+  --color-background-hover: rgba(236, 236, 236, 0.8);
   --color-background-card: #fff;
   --color-text: #000;
   --color-primary: #444;
   --color-control-border: #bbb;
   --color-button-active-background: #f9f9f9;
   --color-button-active-border: #aaa;
-  --color-seperator: #ccc;
+  --color-separator: #ccc;
 }
 
 .__next-auth-theme-dark {
   --color-background: #161b22;
+  --color-background-hover: rgba(22, 27, 34, 0.8);
   --color-background-card: #0d1117;
   --color-text: #fff;
   --color-primary: #ccc;
   --color-control-border: #555;
   --color-button-active-background: #060606;
   --color-button-active-border: #666;
-  --color-seperator: #444;
+  --color-separator: #444;
 }
 
 @media (prefers-color-scheme: dark) {
   .__next-auth-theme-auto {
     --color-background: #161b22;
+    --color-background-hover: rgba(22, 27, 34, 0.8);
     --color-background-card: #0d1117;
     --color-text: #fff;
     --color-primary: #ccc;
     --color-control-border: #555;
     --color-button-active-background: #060606;
     --color-button-active-border: #666;
-    --color-seperator: #444;
+    --color-separator: #444;
   }
+
+  button,
+  a.button {
+    color: var(--provider-dark-color, var(--color-primary));
+    background-color: var(--provider-dark-bg, var(--color-background));
+    &:hover {
+      background-color: var(
+        --provider-dark-bg-hover,
+        var(--color-background-hover)
+      ) !important;
+    }
+  }
+  #provider-logo {
+    display: none !important;
+  }
+  #provider-logo-dark {
+    width: 25px;
+    display: block !important;
+  }
+}
+html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
 }
 
 body {
@@ -52,13 +89,15 @@ body {
 }
 
 h1 {
-  font-weight: 400;
   margin-bottom: 1.5rem;
   padding: 0 1rem;
+  font-weight: 400;
   color: var(--color-text);
 }
 
 p {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
   color: var(--color-text);
 }
 
@@ -92,8 +131,6 @@ input[type] {
 }
 
 p {
-  margin: 0 0 1.5rem 0;
-  padding: 0 1rem;
   font-size: 1.1rem;
   line-height: 2rem;
 }
@@ -115,10 +152,9 @@ button span {
 
 button,
 a.button {
-  margin: 0 0 0.75rem 0;
   padding: 0.75rem 1rem;
   color: var(--provider-color, var(--color-primary));
-  background-color: var(--provider-bg, var(--color-background-card));
+  background-color: var(--provider-bg);
   font-size: 1.1rem;
   min-height: 62px;
   border-color: rgba(0, 0, 0, 0.1);
@@ -130,13 +166,15 @@ a.button {
   align-items: center;
   justify-content: center;
 
-  @media (max-width: 450px) {
-    font-size: 0.9rem;
-  }
-
   &:hover {
+    background-color: var(--provider-bg-hover, var(--color-background-hover));
     cursor: pointer;
   }
+  /* &:focus {
+    outline: none;
+    border: 1px solid;
+    border-color: var(--color-info);
+  } */
   &:active {
     cursor: pointer;
   }
@@ -153,20 +191,12 @@ a.button {
   color: var(--button-text-color, var(--color-info-text));
   background-color: var(--brand-color, var(--color-info));
   width: 100%;
-}
 
-@media (prefers-color-scheme: dark) {
-  button,
-  a.button {
-    color: var(--provider-dark-color, var(--color-primary));
-    background-color: var(--provider-dark-bg, var(--color-background));
-  }
-  #provider-logo {
-    display: none !important;
-  }
-  #provider-logo-dark {
-    width: 25px;
-    display: block !important;
+  &:hover {
+    background-color: var(
+      --button-hover-bg,
+      var(--colo r-info-hover)
+    ) !important;
   }
 }
 
@@ -189,6 +219,7 @@ a.site {
   place-items: center;
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 
   > div {
     text-align: center;
@@ -197,7 +228,6 @@ a.site {
 
 .error {
   a.button {
-    display: inline-block;
     padding-left: 2rem;
     padding-right: 2rem;
     margin-top: 0.5rem;
@@ -218,7 +248,7 @@ a.site {
   hr {
     display: block;
     border: 0;
-    border-top: 1px solid var(--color-seperator);
+    border-top: 1px solid var(--color-separator);
     margin: 2rem auto 1rem auto;
     overflow: visible;
 
@@ -258,30 +288,24 @@ a.site {
     button {
       width: 100%;
     }
+  }
 
-    max-width: 300px;
+  .provider + .provider {
+    margin-top: 1rem;
   }
 }
 
 .logo {
   display: inline-block;
   max-width: 150px;
-  margin-top: 20px;
-  margin-bottom: 25px;
+  margin: 1.25rem 0;
   max-height: 70px;
 }
 
 .card {
-  @media screen and (min-width: 450px) {
-    width: 350px;
-  }
-  @media screen and (max-width: 450px) {
-    width: 200px;
-  }
-  margin: 20px 0 20px 0;
   background-color: var(--color-background-card);
-  border-radius: 30px;
-  padding: 20px 50px;
+  border-radius: 2rem;
+  padding: 1.25rem 2rem;
 
   .header {
     color: var(--color-primary);
@@ -291,3 +315,16 @@ a.site {
 .section-header {
   color: var(--color-text);
 }
+
+@media screen and (min-width: 450px) {
+  .card {
+    margin: 2rem 0;
+    width: 368px;
+  }
+}
+@media screen and (max-width: 450px) {
+  .card {
+    margin: 1rem 0;
+    width: 343px;
+  }
+}
diff --git a/packages/next-auth/src/providers/apple.ts b/packages/next-auth/src/providers/apple.ts
index 5ab1688507..21991f06ae 100644
--- a/packages/next-auth/src/providers/apple.ts
+++ b/packages/next-auth/src/providers/apple.ts
@@ -117,14 +117,7 @@ export default function Apple<P extends AppleProfile>(
       }
     },
     checks: ["pkce"],
-    style: {
-      logo: "/apple.svg",
-      logoDark: "/apple-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/apple.svg", text: "#fff", bg: "#000" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/atlassian.ts b/packages/next-auth/src/providers/atlassian.ts
index 1b18036f71..c9069e0690 100644
--- a/packages/next-auth/src/providers/atlassian.ts
+++ b/packages/next-auth/src/providers/atlassian.ts
@@ -31,14 +31,7 @@ export default function Atlassian<P extends AtlassianProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/atlassian.svg",
-      logoDark: "/atlassian-dark.svg",
-      bg: "#0052cc",
-      text: "#fff",
-      bgDark: "#fff",
-      textDark: "#0052cc",
-    },
+    style: { logo: "/atlassian.svg", bg: "#fff", text: "#0052cc" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/auth0.ts b/packages/next-auth/src/providers/auth0.ts
index 8ad5ead098..9fde8ae641 100644
--- a/packages/next-auth/src/providers/auth0.ts
+++ b/packages/next-auth/src/providers/auth0.ts
@@ -26,14 +26,7 @@ export default function Auth0<P extends Auth0Profile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/auth0.svg",
-      logoDark: "/auth0-dark.svg",
-      bg: "#fff",
-      text: "#EB5424",
-      bgDark: "#EB5424",
-      textDark: "#fff",
-    },
+    style: { logo: "/auth0.svg", text: "#fff", bg: "#EB5424" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/azure-ad-b2c.ts b/packages/next-auth/src/providers/azure-ad-b2c.ts
index fd32be87fc..1475015fc8 100644
--- a/packages/next-auth/src/providers/azure-ad-b2c.ts
+++ b/packages/next-auth/src/providers/azure-ad-b2c.ts
@@ -42,14 +42,7 @@ export default function AzureADB2C<P extends AzureB2CProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/azure-ad.ts b/packages/next-auth/src/providers/azure-ad.ts
index f12b07c987..233880f8c2 100644
--- a/packages/next-auth/src/providers/azure-ad.ts
+++ b/packages/next-auth/src/providers/azure-ad.ts
@@ -56,14 +56,7 @@ export default function AzureAD<P extends AzureADProfile>(
         image: image ?? null,
       }
     },
-    style: {
-      logo: "/azure.svg",
-      logoDark: "/azure-dark.svg",
-      bg: "#fff",
-      text: "#0072c6",
-      bgDark: "#0072c6",
-      textDark: "#fff",
-    },
+    style: { logo: "/azure.svg", text: "#fff", bg: "#0072c6" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/battlenet.ts b/packages/next-auth/src/providers/battlenet.ts
index c921d5dfe6..59e1129260 100644
--- a/packages/next-auth/src/providers/battlenet.ts
+++ b/packages/next-auth/src/providers/battlenet.ts
@@ -26,14 +26,7 @@ export default function BattleNet<P extends BattleNetProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/battlenet.svg",
-      logoDark: "/battlenet-dark.svg",
-      bg: "#fff",
-      text: "#148eff",
-      bgDark: "#148eff",
-      textDark: "#fff",
-    },
+    style: { logo: "/battlenet.svg", bg: "#148eff", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/box.js b/packages/next-auth/src/providers/box.js
index 7d7e85462d..e16c36b62b 100644
--- a/packages/next-auth/src/providers/box.js
+++ b/packages/next-auth/src/providers/box.js
@@ -17,11 +17,8 @@ export default function Box(options) {
     },
     style: {
       logo: "/box.svg",
-      logoDark: "/box-dark.svg",
-      bg: "#fff",
-      text: "#0075C9",
-      bgDark: "#0075C9",
-      textDark: "#fff",
+      bg: "#0075C9",
+      text: "#fff",
     },
     options,
   }
diff --git a/packages/next-auth/src/providers/cognito.ts b/packages/next-auth/src/providers/cognito.ts
index 26b92231c9..7b4de10287 100644
--- a/packages/next-auth/src/providers/cognito.ts
+++ b/packages/next-auth/src/providers/cognito.ts
@@ -24,14 +24,7 @@ export default function Cognito<P extends CognitoProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/cognito.svg",
-      logoDark: "/cognito.svg",
-      bg: "#fff",
-      text: "#C17B9E",
-      bgDark: "#fff",
-      textDark: "#C17B9E",
-    },
+    style: { logo: "/cognito.svg", bg: "#fff", text: "#C17B9E" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/discord.ts b/packages/next-auth/src/providers/discord.ts
index f9f2801bdf..a4c2225438 100644
--- a/packages/next-auth/src/providers/discord.ts
+++ b/packages/next-auth/src/providers/discord.ts
@@ -44,14 +44,7 @@ export default function Discord<P extends DiscordProfile>(
         image: profile.image_url,
       }
     },
-    style: {
-      logo: "/discord.svg",
-      logoDark: "/discord-dark.svg",
-      bg: "#fff",
-      text: "#7289DA",
-      bgDark: "#7289DA",
-      textDark: "#fff",
-    },
+    style: { logo: "/discord.svg", bg: "#5865F2", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/facebook.ts b/packages/next-auth/src/providers/facebook.ts
index a337ecd10d..edba491138 100644
--- a/packages/next-auth/src/providers/facebook.ts
+++ b/packages/next-auth/src/providers/facebook.ts
@@ -41,14 +41,7 @@ export default function Facebook<P extends FacebookProfile>(
         image: profile.picture.data.url,
       }
     },
-    style: {
-      logo: "/facebook.svg",
-      logoDark: "/facebook-dark.svg",
-      bg: "#fff",
-      text: "#006aff",
-      bgDark: "#006aff",
-      textDark: "#fff",
-    },
+    style: { logo: "/facebook.svg", bg: "#006aff", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/foursquare.js b/packages/next-auth/src/providers/foursquare.js
index d5a2068b60..ce652c6dba 100644
--- a/packages/next-auth/src/providers/foursquare.js
+++ b/packages/next-auth/src/providers/foursquare.js
@@ -52,11 +52,8 @@ export default function Foursquare(options) {
     },
     style: {
       logo: "/foursquare.svg",
-      logoDark: "/foursquare-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
+      text: "#fff",
+      bg: "#000",
     },
     options,
   }
diff --git a/packages/next-auth/src/providers/freshbooks.js b/packages/next-auth/src/providers/freshbooks.js
index b253ed38b2..985952e152 100644
--- a/packages/next-auth/src/providers/freshbooks.js
+++ b/packages/next-auth/src/providers/freshbooks.js
@@ -19,11 +19,8 @@ export default function Freshbooks(options) {
     },
     style: {
       logo: "/freshbooks.svg",
-      logoDark: "/freshbooks-dark.svg",
-      bg: "#fff",
-      text: "#0075dd",
-      bgDark: "#0075dd",
-      textDark: "#fff",
+      text: "#fff",
+      bg: "#0075dd",
     },
     ...options,
   }
diff --git a/packages/next-auth/src/providers/github.ts b/packages/next-auth/src/providers/github.ts
index 5591ab0a6c..fb773db731 100644
--- a/packages/next-auth/src/providers/github.ts
+++ b/packages/next-auth/src/providers/github.ts
@@ -98,14 +98,7 @@ export default function Github<P extends GithubProfile>(
         image: profile.avatar_url,
       }
     },
-    style: {
-      logo: "/github.svg",
-      logoDark: "/github-dark.svg",
-      bg: "#fff",
-      bgDark: "#000",
-      text: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/github.svg", bg: "#24292f", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/gitlab.ts b/packages/next-auth/src/providers/gitlab.ts
index 65f0fd8d43..237aac2728 100644
--- a/packages/next-auth/src/providers/gitlab.ts
+++ b/packages/next-auth/src/providers/gitlab.ts
@@ -67,14 +67,7 @@ export default function GitLab<P extends GitLabProfile>(
         image: profile.avatar_url,
       }
     },
-    style: {
-      logo: "/gitlab.svg",
-      logoDark: "/gitlab-dark.svg",
-      bg: "#fff",
-      text: "#FC6D26",
-      bgDark: "#FC6D26",
-      textDark: "#fff",
-    },
+    style: { logo: "/gitlab.svg", bg: "#FC6D26", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/google.ts b/packages/next-auth/src/providers/google.ts
index 49bcf29505..f4766cdf80 100644
--- a/packages/next-auth/src/providers/google.ts
+++ b/packages/next-auth/src/providers/google.ts
@@ -37,14 +37,7 @@ export default function Google<P extends GoogleProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/google.svg",
-      logoDark: "/google.svg",
-      bgDark: "#fff",
-      bg: "#fff",
-      text: "#000",
-      textDark: "#000",
-    },
+    style: { logo: "/google.svg", bg: "#fff", text: "#000" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/hubspot.ts b/packages/next-auth/src/providers/hubspot.ts
index ed5d9b6cbf..b62c159255 100644
--- a/packages/next-auth/src/providers/hubspot.ts
+++ b/packages/next-auth/src/providers/hubspot.ts
@@ -64,14 +64,7 @@ export default function HubSpot<P extends HubSpotProfile>(
         image: null,
       }
     },
-    style: {
-      logo: "/hubspot.svg",
-      logoDark: "/hubspot-dark.svg",
-      bg: "#fff",
-      text: "#ff7a59",
-      bgDark: "#ff7a59",
-      textDark: "#fff",
-    },
+    style: { logo: "/hubspot.svg", bg: "#ff7a59", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/instagram.js b/packages/next-auth/src/providers/instagram.js
index 41b5a79b25..77592b4d09 100644
--- a/packages/next-auth/src/providers/instagram.js
+++ b/packages/next-auth/src/providers/instagram.js
@@ -48,11 +48,8 @@ export default function Instagram(options) {
     },
     style: {
       logo: "/instagram.svg",
-      logoDark: "/instagram.svg",
       bg: "#fff",
       text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
     },
     options,
   }
diff --git a/packages/next-auth/src/providers/keycloak.ts b/packages/next-auth/src/providers/keycloak.ts
index e3cfb5b3e9..462e7831ed 100644
--- a/packages/next-auth/src/providers/keycloak.ts
+++ b/packages/next-auth/src/providers/keycloak.ts
@@ -43,14 +43,7 @@ export default function Keycloak<P extends KeycloakProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/keycloak.svg",
-      logoDark: "/keycloak.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#fff",
-      textDark: "#000",
-    },
+    style: { logo: "/keycloak.svg", bg: "#fff", text: "#000" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/line.ts b/packages/next-auth/src/providers/line.ts
index 417680e78a..3df45b6ba5 100644
--- a/packages/next-auth/src/providers/line.ts
+++ b/packages/next-auth/src/providers/line.ts
@@ -33,14 +33,7 @@ export default function LINE<P extends LineProfile>(
     client: {
       id_token_signed_response_alg: "HS256",
     },
-    style: {
-      logo: "/line.svg",
-      logoDark: "/line.svg",
-      bg: "#fff",
-      text: "#00C300",
-      bgDark: "#00C300",
-      textDark: "#fff",
-    },
+    style: { logo: "/line.svg", bg: "#00C300", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/linkedin.ts b/packages/next-auth/src/providers/linkedin.ts
index deb63cd091..f10e97fe0c 100644
--- a/packages/next-auth/src/providers/linkedin.ts
+++ b/packages/next-auth/src/providers/linkedin.ts
@@ -55,14 +55,7 @@ export default function LinkedIn<P extends LinkedInProfile>(
             ?.identifiers?.[0]?.identifier,
       }
     },
-    style: {
-      logo: "/linkedin.svg",
-      logoDark: "/linkedin-dark.svg",
-      bg: "#fff",
-      text: "#069",
-      bgDark: "#069",
-      textDark: "#fff",
-    },
+    style: { logo: "/linkedin.svg", bg: "#069", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/mailchimp.js b/packages/next-auth/src/providers/mailchimp.js
index 4e4fac041d..66c933286e 100644
--- a/packages/next-auth/src/providers/mailchimp.js
+++ b/packages/next-auth/src/providers/mailchimp.js
@@ -15,14 +15,7 @@ export default function Mailchimp(options) {
         image: null,
       }
     },
-    style: {
-      logo: "/mailchimp.svg",
-      logoDark: "/mailchimp-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/mailchimp.svg", bg: "#000", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/oauth.ts b/packages/next-auth/src/providers/oauth.ts
index b6e8525046..cd8434ed14 100644
--- a/packages/next-auth/src/providers/oauth.ts
+++ b/packages/next-auth/src/providers/oauth.ts
@@ -91,11 +91,11 @@ export type UserinfoEndpointHandler = EndpointHandler<
 
 export interface OAuthProviderButtonStyles {
   logo: string
-  logoDark: string
+  logoDark?: string
   bg: string
-  bgDark: string
+  bgDark?: string
   text: string
-  textDark: string
+  textDark?: string
 }
 
 export interface OAuthConfig<P> extends CommonProviderOptions, PartialIssuer {
diff --git a/packages/next-auth/src/providers/okta.ts b/packages/next-auth/src/providers/okta.ts
index de2f855c7e..d800a0dc29 100644
--- a/packages/next-auth/src/providers/okta.ts
+++ b/packages/next-auth/src/providers/okta.ts
@@ -52,14 +52,7 @@ export default function Okta<P extends OktaProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/okta.svg",
-      logoDark: "/okta-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/okta.svg", bg: "#000", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/patreon.ts b/packages/next-auth/src/providers/patreon.ts
index 63079f5e78..ec5679a1e3 100644
--- a/packages/next-auth/src/providers/patreon.ts
+++ b/packages/next-auth/src/providers/patreon.ts
@@ -29,14 +29,7 @@ export default function Patreon<P extends PatreonProfile>(
         image: profile.data.attributes.image_url,
       }
     },
-    style: {
-      logo: "/patreon.svg",
-      logoDark: "/patreon.svg",
-      bg: "#fff",
-      text: "#e85b46",
-      bgDark: "#000",
-      textDark: "#e85b46",
-    },
+    style: { logo: "/patreon.svg", bg: "#e85b46", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/slack.ts b/packages/next-auth/src/providers/slack.ts
index c1378da538..74ea358bf3 100644
--- a/packages/next-auth/src/providers/slack.ts
+++ b/packages/next-auth/src/providers/slack.ts
@@ -49,14 +49,7 @@ export default function Slack<P extends SlackProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/slack.svg",
-      logoDark: "/slack.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/slack.svg", bg: "#000", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/spotify.ts b/packages/next-auth/src/providers/spotify.ts
index 6a535acbdb..c461ce9e46 100644
--- a/packages/next-auth/src/providers/spotify.ts
+++ b/packages/next-auth/src/providers/spotify.ts
@@ -29,14 +29,7 @@ export default function Spotify<P extends SpotifyProfile>(
         image: profile.images?.[0]?.url,
       }
     },
-    style: {
-      logo: "/spotify.svg",
-      logoDark: "/spotify.svg",
-      bg: "#fff",
-      text: "#2ebd59",
-      bgDark: "#fff",
-      textDark: "#2ebd59",
-    },
+    style: { logo: "/spotify.svg", text: "#fff", bg: "#000" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/todoist.ts b/packages/next-auth/src/providers/todoist.ts
index 576bca392e..0ec5cb8f57 100644
--- a/packages/next-auth/src/providers/todoist.ts
+++ b/packages/next-auth/src/providers/todoist.ts
@@ -53,14 +53,7 @@ export default function TodoistProvider<P extends TodoistProfile>(
         image: profile.avatar_big,
       }
     },
-    style: {
-      logo: "/todoist.svg",
-      logoDark: "/todoist.svg",
-      bg: "#fff",
-      text: "#E44332",
-      bgDark: "#000",
-      textDark: "#E44332",
-    },
+    style: { logo: "/todoist.svg", text: "#000", bg: "#E44332" },
     ...options,
   }
 }
diff --git a/packages/next-auth/src/providers/trakt.ts b/packages/next-auth/src/providers/trakt.ts
index e3b720a7c4..64db5d2f97 100644
--- a/packages/next-auth/src/providers/trakt.ts
+++ b/packages/next-auth/src/providers/trakt.ts
@@ -51,14 +51,7 @@ export default function Trakt<P extends TraktUser>(
         image: profile.images.avatar.full, // trakt does not allow hotlinking
       }
     },
-    style: {
-      logo: "/trakt.svg",
-      logoDark: "/trakt-dark.svg",
-      bg: "#fff",
-      text: "#ED2224",
-      bgDark: "#ED2224",
-      textDark: "#fff",
-    },
+    style: { logo: "/trakt.svg", bg: "#ED2224", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/twitch.ts b/packages/next-auth/src/providers/twitch.ts
index 70fd6c5777..5b790ccca3 100644
--- a/packages/next-auth/src/providers/twitch.ts
+++ b/packages/next-auth/src/providers/twitch.ts
@@ -36,14 +36,7 @@ export default function Twitch<P extends TwitchProfile>(
         image: profile.picture,
       }
     },
-    style: {
-      logo: "/twitch.svg",
-      logoDark: "/twitch-dark.svg",
-      bg: "#fff",
-      text: "#65459B",
-      bgDark: "#65459B",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitch.svg", bg: "#65459B", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/twitter.ts b/packages/next-auth/src/providers/twitter.ts
index ce55c238a8..dfd517e56d 100644
--- a/packages/next-auth/src/providers/twitter.ts
+++ b/packages/next-auth/src/providers/twitter.ts
@@ -119,14 +119,7 @@ export function TwitterLegacy<
         ),
       }
     },
-    style: {
-      logo: "/twitter.svg",
-      logoDark: "/twitter-dark.svg",
-      bg: "#fff",
-      text: "#1da1f2",
-      bgDark: "#1da1f2",
-      textDark: "#fff",
-    },
+    style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
     options,
   }
 }
@@ -214,14 +207,7 @@ export default function Twitter<
         }
       },
       checks: ["pkce", "state"],
-      style: {
-        logo: "/twitter.svg",
-        logoDark: "/twitter-dark.svg",
-        bg: "#fff",
-        text: "#1da1f2",
-        bgDark: "#1da1f2",
-        textDark: "#fff",
-      },
+      style: { logo: "/twitter.svg", bg: "#1da1f2", text: "#fff" },
       options,
     }
   }
diff --git a/packages/next-auth/src/providers/vk.ts b/packages/next-auth/src/providers/vk.ts
index ee6aee9d49..d256d71c15 100644
--- a/packages/next-auth/src/providers/vk.ts
+++ b/packages/next-auth/src/providers/vk.ts
@@ -305,14 +305,7 @@ export default function VK<P extends Record<string, any> = VkProfile>(
         image: profile.photo_100,
       }
     },
-    style: {
-      logo: "/vk.svg",
-      logoDark: "/vk-dark.svg",
-      bg: "#fff",
-      text: "#07F",
-      bgDark: "#07F",
-      textDark: "#fff",
-    },
+    style: { logo: "/vk.svg", bg: "#07F", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/wikimedia.ts b/packages/next-auth/src/providers/wikimedia.ts
index a3666eab88..0ec67f6b7c 100644
--- a/packages/next-auth/src/providers/wikimedia.ts
+++ b/packages/next-auth/src/providers/wikimedia.ts
@@ -180,14 +180,7 @@ export default function Wikimedia<P extends WikimediaProfile>(
         email: profile.email,
       }
     },
-    style: {
-      logo: "/wikimedia.svg",
-      logoDark: "/wikimedia-dark.svg",
-      bg: "#fff",
-      text: "#000",
-      bgDark: "#000",
-      textDark: "#fff",
-    },
+    style: { logo: "/wikimedia.svg", bg: "#000", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/workos.ts b/packages/next-auth/src/providers/workos.ts
index 69e070b5e9..84942aede1 100644
--- a/packages/next-auth/src/providers/workos.ts
+++ b/packages/next-auth/src/providers/workos.ts
@@ -44,14 +44,7 @@ export default function WorkOS<P extends WorkOSProfile>(
         image: profile.raw_attributes.picture ?? null,
       }
     },
-    style: {
-      logo: "/workos.svg",
-      logoDark: "/workos-dark.svg",
-      bg: "#fff",
-      text: "#6363f1",
-      bgDark: "#6363f1",
-      textDark: "#fff",
-    },
+    style: { logo: "/workos.svg", bg: "#6363f1", text: "#fff" },
     options,
   }
 }
diff --git a/packages/next-auth/src/providers/yandex.ts b/packages/next-auth/src/providers/yandex.ts
index 3d84ae8414..ba6b1f97c6 100644
--- a/packages/next-auth/src/providers/yandex.ts
+++ b/packages/next-auth/src/providers/yandex.ts
@@ -144,11 +144,8 @@ export default function Yandex(
     },
     style: {
       logo: "/yandex.svg",
-      logoDark: "/yandex.svg",
       bg: "#ffcc00",
       text: "#000",
-      bgDark: "#ffcc00",
-      textDark: "#000",
     },
     options,
   }