diff --git a/apps/login/app/(login)/register/idp/page.tsx b/apps/login/app/(login)/register/idp/page.tsx
index 25ea471103c..7313e33eced 100644
--- a/apps/login/app/(login)/register/idp/page.tsx
+++ b/apps/login/app/(login)/register/idp/page.tsx
@@ -1,6 +1,5 @@
 import { getLegalAndSupportSettings, server } from "#/lib/zitadel";
-
-import { SignInWithIDP } from "@zitadel/next";
+import { SignInWithIDP } from "#/ui/SignInWithIDP";
 
 export default async function Page({
   searchParams,
@@ -9,6 +8,8 @@ export default async function Page({
 }) {
   const legal = await getLegalAndSupportSettings(server);
 
+  console.log(server);
+
   return (
     <div className="flex flex-col items-center space-y-4">
       <h1>Register</h1>
diff --git a/apps/login/lib/zitadel.ts b/apps/login/lib/zitadel.ts
index a4cf4701ed5..94d0268c0a8 100644
--- a/apps/login/lib/zitadel.ts
+++ b/apps/login/lib/zitadel.ts
@@ -25,6 +25,8 @@ import {
   LoginSettings,
   GetLoginSettingsResponse,
   ListAuthenticationMethodTypesResponse,
+  StartIdentityProviderFlowRequest,
+  StartIdentityProviderFlowResponse,
 } from "@zitadel/server";
 
 export const zitadelConfig: ZitadelServerOptions = {
@@ -195,6 +197,19 @@ export async function addHumanUser(
     });
 }
 
+export async function startIdentityProviderFlow(
+  server: ZitadelServer,
+  { idpId, successUrl, failureUrl }: StartIdentityProviderFlowRequest
+): Promise<StartIdentityProviderFlowResponse> {
+  const userService = user.getUser(server);
+
+  return userService.startIdentityProviderFlow({
+    idpId,
+    successUrl,
+    failureUrl,
+  });
+}
+
 export async function verifyEmail(
   server: ZitadelServer,
   userId: string,
diff --git a/apps/login/ui/Button.tsx b/apps/login/ui/Button.tsx
index 73e97116187..cdfa91f0cfc 100644
--- a/apps/login/ui/Button.tsx
+++ b/apps/login/ui/Button.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
 import React, {
   ButtonHTMLAttributes,
   DetailedHTMLProps,
+  ReactNode,
   forwardRef,
 } from "react";
 
@@ -65,16 +66,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...props
     },
     ref
-  ) => {
-    return (
-      <button
-        type="button"
-        ref={ref}
-        className={`${getButtonClasses(size, variant, color)} ${className}`}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
+  ): ReactNode => (
+    <button
+      type="button"
+      ref={ref}
+      className={`${getButtonClasses(size, variant, color)} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  )
 );
diff --git a/packages/zitadel-next/src/components/SignInWithIDP.tsx b/apps/login/ui/SignInWithIDP.tsx
similarity index 77%
rename from packages/zitadel-next/src/components/SignInWithIDP.tsx
rename to apps/login/ui/SignInWithIDP.tsx
index bf5c48dbabc..cca46862456 100644
--- a/packages/zitadel-next/src/components/SignInWithIDP.tsx
+++ b/apps/login/ui/SignInWithIDP.tsx
@@ -1,4 +1,3 @@
-"use server";
 import { ReactNode } from "react";
 
 import {
@@ -8,12 +7,13 @@ import {
   IdentityProvider,
   IdentityProviderType,
 } from "@zitadel/server";
-// import {
-//   SignInWithGitlab,
-//   SignInWithAzureAD,
-//   SignInWithGoogle,
-//   SignInWithGithub,
-// } from "@zitadel/react";
+import {
+  SignInWithGitlab,
+  SignInWithAzureAD,
+  SignInWithGoogle,
+  SignInWithGithub,
+} from "@zitadel/react";
+import { server, startIdentityProviderFlow } from "#/lib/zitadel";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -37,18 +37,26 @@ function getIdentityProviders(
     });
 }
 
-export function SignInWithIDP(props: SignInWithIDPProps) {
+export async function SignInWithIDP(props: SignInWithIDPProps) {
   console.log(props.server);
-  // const identityProviders = await getIdentityProviders(
-  //   props.server,
-  //   props.orgId
-  // );
+  const identityProviders = await getIdentityProviders(
+    props.server,
+    props.orgId
+  );
 
-  // console.log(identityProviders);
+  console.log(identityProviders);
+
+  function startFlow(idp: IdentityProvider) {
+    return startIdentityProviderFlow(server, {
+      idpId: idp.id,
+      successUrl: "",
+      failureUrl: "",
+    }).then(() => {});
+  }
 
   return (
-    <div className="ztdl-next-flex ztdl-next-flex-col ztdl-next-w-full ztdl-next-space-y-2 ztdl-next-text-sm">
-      {/* {identityProviders &&
+    <div className="flex flex-col w-full space-y-2 text-sm">
+      {identityProviders &&
         identityProviders.map((idp, i) => {
           switch (idp.type) {
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
@@ -77,6 +85,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
                 <SignInWithGoogle
                   key={`idp-${i}`}
                   name={idp.name}
+                  onClick={() => startFlow(idp)}
                 ></SignInWithGoogle>
               );
             case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
@@ -96,8 +105,7 @@ export function SignInWithIDP(props: SignInWithIDPProps) {
             default:
               return <div>{idp.name}</div>;
           }
-        })} */}
-      {props.children}
+        })}
     </div>
   );
 }
diff --git a/packages/zitadel-next/package.json b/packages/zitadel-next/package.json
index 54df90caa23..4515bd92f84 100644
--- a/packages/zitadel-next/package.json
+++ b/packages/zitadel-next/package.json
@@ -32,7 +32,8 @@
     "typescript": "^4.9.3",
     "tailwindcss": "3.2.4",
     "postcss": "8.4.21",
-    "zitadel-tailwind-config": "workspace:*"
+    "zitadel-tailwind-config": "workspace:*",
+    "@zitadel/server": "workspace:*"
   },
   "peerDependencies": {
     "@zitadel/react": "workspace:*",
diff --git a/packages/zitadel-next/src/index.tsx b/packages/zitadel-next/src/index.tsx
index ac1ee0b1a55..1754b0ee482 100644
--- a/packages/zitadel-next/src/index.tsx
+++ b/packages/zitadel-next/src/index.tsx
@@ -1,10 +1,5 @@
 import "./styles.css";
 
-export {
-  SignInWithIDP,
-  type SignInWithIDPProps,
-} from "./components/SignInWithIDP";
-
 export {
   ZitadelNextProvider,
   type ZitadelNextProps,
diff --git a/packages/zitadel-react/src/components/SignInWithGoogle.tsx b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
index a318c5fc25f..0af8840e363 100644
--- a/packages/zitadel-react/src/components/SignInWithGoogle.tsx
+++ b/packages/zitadel-react/src/components/SignInWithGoogle.tsx
@@ -1,21 +1,37 @@
+"use client";
+
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  ReactNode,
+  forwardRef,
+} from "react";
 import { SignInWithIdentityProviderProps } from "./SignInWith";
 
-export interface SignInWithGoogleProps
-  extends SignInWithIdentityProviderProps {}
+type SignInWithGoogleProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  name?: string;
+};
 
-export function SignInWithGoogle(props: SignInWithGoogleProps) {
-  return (
-    <div className="ztdl-w-full ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
+export const SignInWithGoogle = forwardRef<
+  HTMLButtonElement,
+  SignInWithGoogleProps
+>(
+  ({ 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 ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm ${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"
-          //   style={{
-          //     enableBackground: "new 0 0 150 150",
-          //   }}
           viewBox="0 0 150 150"
-          {...props}
         >
           <style>
             {
@@ -48,11 +64,13 @@ export function SignInWithGoogle(props: SignInWithGoogleProps) {
           />
         </svg>
       </div>
-      <span className="ztdl-ml-4">
-        {props.name ? props.name : "Sign in with Google"}
-      </span>
-    </div>
-  );
-}
+      {children ? (
+        children
+      ) : (
+        <span className="ztdl-ml-4">{name ? name : "Sign in with Google"}</span>
+      )}
+    </button>
+  )
+);
 
 SignInWithGoogle.displayName = "SignInWithGoogle";
diff --git a/packages/zitadel-react/src/index.tsx b/packages/zitadel-react/src/index.tsx
index 47077a343a5..01519318659 100644
--- a/packages/zitadel-react/src/index.tsx
+++ b/packages/zitadel-react/src/index.tsx
@@ -1,9 +1,6 @@
 import "./styles.css";
 
-export {
-  SignInWithGoogle,
-  type SignInWithGoogleProps,
-} from "./components/SignInWithGoogle";
+export { SignInWithGoogle } from "./components/SignInWithGoogle";
 
 export {
   SignInWithGitlab,
diff --git a/packages/zitadel-server/src/index.ts b/packages/zitadel-server/src/index.ts
index 7cc5a7ef25e..4a9e0314b51 100644
--- a/packages/zitadel-server/src/index.ts
+++ b/packages/zitadel-server/src/index.ts
@@ -57,6 +57,8 @@ export {
   ListAuthenticationMethodTypesResponse,
   ListAuthenticationMethodTypesRequest,
   AuthenticationMethodType,
+  StartIdentityProviderFlowRequest,
+  StartIdentityProviderFlowResponse,
 } from "./proto/server/zitadel/user/v2alpha/user_service";
 export {
   SetHumanPasswordResponse,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d145fcec23..a8fc6939176 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -259,9 +259,6 @@ importers:
       '@zitadel/react':
         specifier: workspace:*
         version: link:../zitadel-react
-      '@zitadel/server':
-        specifier: workspace:*
-        version: link:../zitadel-server
       next:
         specifier: ^13.4.10
         version: 13.4.10(@babel/core@7.22.1)(react-dom@18.2.0)(react@18.2.0)
@@ -275,6 +272,9 @@ importers:
       '@types/react':
         specifier: ^17.0.13
         version: 17.0.52
+      '@zitadel/server':
+        specifier: workspace:*
+        version: link:../zitadel-server
       '@zitadel/tsconfig':
         specifier: workspace:*
         version: link:../zitadel-tsconfig