diff --git a/web/sdk/client/components/auth-oidc-button/auth-oidc-button.module.css b/web/sdk/client/components/auth-oidc-button/auth-oidc-button.module.css
index 85c7d8fa2..47cce6e61 100644
--- a/web/sdk/client/components/auth-oidc-button/auth-oidc-button.module.css
+++ b/web/sdk/client/components/auth-oidc-button/auth-oidc-button.module.css
@@ -1,7 +1,3 @@
 .button {
   width: 100%;
 }
-
-.logo {
-  margin-right: var(--rs-space-2);
-}
diff --git a/web/sdk/client/components/auth-oidc-button/auth-oidc-button.tsx b/web/sdk/client/components/auth-oidc-button/auth-oidc-button.tsx
index f89eefda3..fd905e9ec 100644
--- a/web/sdk/client/components/auth-oidc-button/auth-oidc-button.tsx
+++ b/web/sdk/client/components/auth-oidc-button/auth-oidc-button.tsx
@@ -1,4 +1,4 @@
-import { Button, Text } from '@raystack/apsara';
+import { Button } from '@raystack/apsara';
 import { HTMLProps } from 'react';
 import GoogleLogo from '~/client/assets/logos/google-logo.svg';
 import { capitalize } from '~/utils';
@@ -17,15 +17,15 @@ export const AuthOIDCButton = ({ onClick, provider }: AuthOIDCButtonProps) => (
     className={styles.button}
     onClick={onClick}
     data-test-id="frontier-sdk-oidc-logo-btn"
-  >
-    {oidcLogoMap.has(provider) ? (
-      // eslint-disable-next-line @next/next/no-img-element
+    leadingIcon={
+oidcLogoMap.has(provider) ? (
       <img
         src={oidcLogoMap.get(provider) as unknown as string}
         alt={provider + '-logo'}
-        className={styles.logo}
       />
-    ) : null}
-    <Text size="regular">Continue with {capitalize(provider)}</Text>
+    ) : null
+    }
+  >
+    Continue with {capitalize(provider)}
   </Button>
 );