diff --git a/src/locales/en.json b/src/locales/en.json
index bd995ecb..abc58575 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -20,7 +20,7 @@
   "identities.messages.1010005": "Verify",
   "identities.messages.1010006": "Authentication code",
   "identities.messages.1010007": "Backup recovery code",
-  "identities.messages.1010008": "Use security key",
+  "identities.messages.1010008": "Sign in with hardware key",
   "identities.messages.1010009": "Use Authenticator",
   "identities.messages.1010010": "Use backup recovery code",
   "identities.messages.1010011": "Continue with security key",
@@ -131,7 +131,7 @@
   "identities.messages.4070006": "The verification code is invalid or has already been used. Please try again.",
   "identities.messages.5000001": "{reason}",
   "login.forgot-password": "Forgot password?",
-  "login.logged-in-as-label": "You're logged in as:",
+  "login.logged-in-as-label": "You are using:",
   "login.logout-button": "Logout",
   "login.logout-label": "Something's not working?",
   "login.registration-button": "Sign up",
diff --git a/src/react-components/ory/helpers/user-auth-form.tsx b/src/react-components/ory/helpers/user-auth-form.tsx
index 52990a6f..2d85a3e7 100644
--- a/src/react-components/ory/helpers/user-auth-form.tsx
+++ b/src/react-components/ory/helpers/user-auth-form.tsx
@@ -69,19 +69,9 @@ export const UserAuthForm = ({
   formFilterOverride,
   className,
   ...props
-}: UserAuthFormProps): JSX.Element => (
-  <form
-    className={cn(className, formStyle)}
-    action={flow.ui.action}
-    method={flow.ui.method}
-    onKeyDown={(e) => {
-      if (e.key === "Enter" && !submitOnEnter) {
-        e.stopPropagation()
-        e.preventDefault()
-      }
-    }}
-    {...(onSubmit && {
-      onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+}: UserAuthFormProps): JSX.Element => {
+  const submitHandler = onSubmit
+    ? (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
         const form = event.currentTarget
@@ -108,23 +98,37 @@ export const UserAuthForm = ({
         }
 
         onSubmit({ body, event })
-      },
-    })}
-    {...props}
-  >
-    <>
-      {/*always add csrf token and other hidden fields to form*/}
-      <FilterFlowNodes
-        filter={
-          formFilterOverride ?? {
-            nodes: flow.ui.nodes,
-            groups: "default", // we only want to map hidden default fields here
-            attributes: "hidden",
-          }
+      }
+    : undefined
+
+  return (
+    <form
+      className={cn(className, formStyle)}
+      action={flow.ui.action}
+      method={flow.ui.method}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !submitOnEnter) {
+          e.stopPropagation()
+          e.preventDefault()
         }
-        includeCSRF={true}
-      />
-      {children}
-    </>
-  </form>
-)
+      }}
+      onSubmit={submitHandler}
+      {...props}
+    >
+      <>
+        {/*always add csrf token and other hidden fields to form*/}
+        <FilterFlowNodes
+          filter={
+            formFilterOverride ?? {
+              nodes: flow.ui.nodes,
+              groups: ["default"], // we only want to map hidden default fields here
+              attributes: "hidden",
+            }
+          }
+          includeCSRF={true}
+        />
+        {children}
+      </>
+    </form>
+  )
+}
diff --git a/src/react-components/ory/helpers/utils.ts b/src/react-components/ory/helpers/utils.ts
index 65a91e6d..5aba42c8 100644
--- a/src/react-components/ory/helpers/utils.ts
+++ b/src/react-components/ory/helpers/utils.ts
@@ -8,9 +8,11 @@ export const hasGroup = (group: string) => (nodes: UiNode[]) =>
 
 export const hasOidc = hasGroup("oidc")
 export const hasPassword = hasGroup("password")
+export const hasDefault = hasGroup("default")
 export const hasProfile = hasGroup("profile")
 export const hasWebauthn = hasGroup("webauthn")
 export const hasPasskey = hasGroup("passkey")
+export const hasIdentifierFirst = hasGroup("identifier_first")
 export const hasLookupSecret = hasGroup("lookup_secret")
 export const hasTotp = hasGroup("totp")
 export const hasCode = hasGroup("code")
diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx
index d7f62625..9a9c73ca 100644
--- a/src/react-components/ory/sections/auth-code-section.tsx
+++ b/src/react-components/ory/sections/auth-code-section.tsx
@@ -22,7 +22,7 @@ export const AuthCodeSection = ({
       <FilterFlowNodes
         filter={{
           nodes: nodes,
-          groups: ["code"],
+          groups: ["code", "identifier_first"],
           // we don't want to map the default group twice
           // the form already maps hidden fields under the default group
           // we are only interested in hidden fields that are under the code group
@@ -36,9 +36,9 @@ export const AuthCodeSection = ({
         <FilterFlowNodes
           filter={{
             nodes: nodes,
-            groups: "code",
+            groups: ["code"],
             withoutDefaultAttributes: true,
-            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of default (csrf) hidden fields
+            excludeAttributeTypes: ["hidden", "button", "submit"], // the form will take care of default (csrf) hidden fields
           }}
         />
         {/* include hidden here because we want to have resend support */}
@@ -49,6 +49,7 @@ export const AuthCodeSection = ({
             groups: "code",
             withoutDefaultAttributes: true,
             attributes: ["button", "submit"],
+            excludeAttributeTypes: ["hidden"],
           }}
         />
       </div>
diff --git a/src/react-components/ory/sections/link-section.tsx b/src/react-components/ory/sections/link-section.tsx
index 635b2724..86b77f4c 100644
--- a/src/react-components/ory/sections/link-section.tsx
+++ b/src/react-components/ory/sections/link-section.tsx
@@ -15,22 +15,32 @@ export interface LinkSectionProps {
  * - https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation
  */
 export const LinkSection = ({ nodes }: LinkSectionProps): JSX.Element => (
-  <div className={gridStyle({ gap: 32 })}>
-    <div className={gridStyle({ gap: 16 })}>
+  <>
+    <FilterFlowNodes
+      filter={{
+        nodes: nodes,
+        groups: ["link", "code", "identifier_first"],
+        attributes: ["hidden"],
+      }}
+    />
+    <div className={gridStyle({ gap: 32 })}>
+      <div className={gridStyle({ gap: 16 })}>
+        <FilterFlowNodes
+          filter={{
+            nodes: nodes,
+            groups: ["link", "code"],
+            excludeAttributeTypes: ["submit", "hidden"],
+          }}
+        />
+      </div>
       <FilterFlowNodes
         filter={{
           nodes: nodes,
           groups: ["link", "code"],
-          excludeAttributes: "submit",
+          attributes: "submit",
+          excludeAttributeTypes: ["hidden"],
         }}
       />
     </div>
-    <FilterFlowNodes
-      filter={{
-        nodes: nodes,
-        groups: ["link", "code"],
-        attributes: "submit",
-      }}
-    />
-  </div>
+  </>
 )
diff --git a/src/react-components/ory/sections/logged-info.tsx b/src/react-components/ory/sections/logged-info.tsx
index bac55532..d3306fb7 100644
--- a/src/react-components/ory/sections/logged-info.tsx
+++ b/src/react-components/ory/sections/logged-info.tsx
@@ -24,7 +24,7 @@ export const LoggedInInfo = ({ flow }: IdentifierInfoProps) => {
     <div className={identifierStyle}>
       <FormattedMessage
         id="login.logged-in-as-label"
-        defaultMessage="You're logged in as:"
+        defaultMessage="You are using:"
       />
       <div className={identifierNameStyle}>{identifier.value}</div>
     </div>
diff --git a/src/react-components/ory/sections/login-section.tsx b/src/react-components/ory/sections/login-section.tsx
index 820c679c..f7f73de3 100644
--- a/src/react-components/ory/sections/login-section.tsx
+++ b/src/react-components/ory/sections/login-section.tsx
@@ -5,46 +5,81 @@ import { FormattedMessage } from "react-intl"
 import { gridStyle } from "../../../theme"
 import { ButtonLink, CustomHref } from "../../button-link"
 import { FilterFlowNodes } from "../helpers/filter-flow-nodes"
-import { hasPassword } from "../helpers/utils"
+import { hasPassword, hasIdentifierFirst } from "../helpers/utils"
+import { SelfServiceFlow } from "../helpers/types"
 
 export interface LoginSectionProps {
   nodes: UiNode[]
   forgotPasswordURL?: CustomHref | string
 }
 
+export const IdentifierFirstLoginSection = (
+  flow: SelfServiceFlow,
+): JSX.Element | null => {
+  const nodes = flow.ui.nodes
+  return hasIdentifierFirst(nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <FilterFlowNodes
+        filter={{
+          nodes: nodes,
+          groups: ["default", "identifier_first"],
+          excludeAttributeTypes: ["submit", "hidden"],
+        }}
+      />
+      <FilterFlowNodes
+        filter={{
+          nodes: nodes,
+          groups: ["identifier_first"],
+          attributes: "submit",
+        }}
+      />
+    </div>
+  ) : null
+}
+
 export const LoginSection = ({
   nodes,
   forgotPasswordURL,
 }: LoginSectionProps): JSX.Element | null => {
   return hasPassword(nodes) ? (
-    <div className={gridStyle({ gap: 32 })}>
-      <div className={gridStyle({ gap: 16 })}>
+    <>
+      <FilterFlowNodes
+        filter={{
+          nodes: nodes,
+          groups: ["link", "code", "identifier_first"],
+          attributes: ["hidden"],
+        }}
+      />
+      <div className={gridStyle({ gap: 32 })}>
+        <div className={gridStyle({ gap: 16 })}>
+          <FilterFlowNodes
+            filter={{
+              nodes: nodes,
+              groups: ["default", "password"],
+              excludeAttributeTypes: ["submit", "hidden"],
+            }}
+          />
+          {forgotPasswordURL && (
+            <ButtonLink
+              data-testid="forgot-password-link"
+              href={forgotPasswordURL}
+            >
+              <FormattedMessage
+                id="login.forgot-password"
+                defaultMessage="Forgot password?"
+              />
+            </ButtonLink>
+          )}
+        </div>
         <FilterFlowNodes
           filter={{
             nodes: nodes,
-            groups: ["default", "password"],
-            excludeAttributes: ["submit", "hidden"],
+            groups: ["password"],
+            attributes: "submit",
+            excludeAttributeTypes: ["hidden"],
           }}
         />
-        {forgotPasswordURL && (
-          <ButtonLink
-            data-testid="forgot-password-link"
-            href={forgotPasswordURL}
-          >
-            <FormattedMessage
-              id="login.forgot-password"
-              defaultMessage="Forgot password?"
-            />
-          </ButtonLink>
-        )}
       </div>
-      <FilterFlowNodes
-        filter={{
-          nodes: nodes,
-          groups: ["password"],
-          attributes: "submit",
-        }}
-      />
-    </div>
+    </>
   ) : null
 }
diff --git a/src/react-components/ory/sections/lookup-secret-settings-section.tsx b/src/react-components/ory/sections/lookup-secret-settings-section.tsx
index 123f926f..72fb9be2 100644
--- a/src/react-components/ory/sections/lookup-secret-settings-section.tsx
+++ b/src/react-components/ory/sections/lookup-secret-settings-section.tsx
@@ -21,7 +21,7 @@ export const LookupSecretSettingsSection = ({
   return hasLookupSecret(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "submit,button" }}
       />
       <FilterFlowNodes
         filter={{ ...filter, attributes: "submit,button" }}
diff --git a/src/react-components/ory/sections/oidc-section.tsx b/src/react-components/ory/sections/oidc-section.tsx
index d37cfdf4..4b275762 100644
--- a/src/react-components/ory/sections/oidc-section.tsx
+++ b/src/react-components/ory/sections/oidc-section.tsx
@@ -12,7 +12,7 @@ export const OIDCSection = (flow: SelfServiceFlow): JSX.Element | null => {
       nodes: flow.ui.nodes,
       groups: "oidc",
       withoutDefaultGroup: true,
-      excludeAttributes: "submit",
+      excludeAttributeTypes: "submit",
     }).length > 0
 
   return hasOidc(flow.ui.nodes) ? (
@@ -24,7 +24,7 @@ export const OIDCSection = (flow: SelfServiceFlow): JSX.Element | null => {
               nodes: flow.ui.nodes,
               groups: "oidc",
               withoutDefaultGroup: true,
-              excludeAttributes: "submit",
+              excludeAttributeTypes: ["submit"],
             }}
           />
         </div>
@@ -35,6 +35,7 @@ export const OIDCSection = (flow: SelfServiceFlow): JSX.Element | null => {
           nodes: flow.ui.nodes,
           groups: "oidc",
           attributes: "submit",
+          withoutDefaultGroup: true,
         }}
       />
     </div>
diff --git a/src/react-components/ory/sections/passkey-settings-section.tsx b/src/react-components/ory/sections/passkey-settings-section.tsx
index edea2749..52b48ddd 100644
--- a/src/react-components/ory/sections/passkey-settings-section.tsx
+++ b/src/react-components/ory/sections/passkey-settings-section.tsx
@@ -21,9 +21,8 @@ export const PasskeySettingsSection = ({
   return hasPasskey(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "onclick,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "onclick,button" }}
       />
-
       <FilterFlowNodes
         filter={{ ...filter, attributes: "onclick,button" }}
         buttonOverrideProps={{ fullWidth: false }}
diff --git a/src/react-components/ory/sections/password-settings-section.tsx b/src/react-components/ory/sections/password-settings-section.tsx
index c3a9925f..8044939c 100644
--- a/src/react-components/ory/sections/password-settings-section.tsx
+++ b/src/react-components/ory/sections/password-settings-section.tsx
@@ -20,7 +20,7 @@ export const PasswordSettingsSection = ({
   return hasPassword(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "submit,button" }}
       />
       <FilterFlowNodes
         filter={{ ...filter, attributes: "submit,button" }}
diff --git a/src/react-components/ory/sections/passwordless-section.tsx b/src/react-components/ory/sections/passwordless-section.tsx
index a9ed1343..08a8c093 100644
--- a/src/react-components/ory/sections/passwordless-section.tsx
+++ b/src/react-components/ory/sections/passwordless-section.tsx
@@ -9,53 +9,75 @@ export const PasswordlessSection = (
   flow: SelfServiceFlow,
 ): JSX.Element | null => {
   return hasWebauthn(flow.ui.nodes) ? (
-    <div className={gridStyle({ gap: 32 })}>
-      <div className={gridStyle({ gap: 16 })}>
+    <>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["webauthn", "identifier_first"],
+          withoutDefaultAttributes: true,
+          attributes: ["hidden"], // the form will take care of hidden fields
+        }}
+      />
+      <div className={gridStyle({ gap: 32 })}>
+        <div className={gridStyle({ gap: 16 })} data-testid={"asdf"}>
+          <FilterFlowNodes
+            filter={{
+              nodes: flow.ui.nodes,
+              // we will also map default fields here but not oidc and password fields
+              groups: ["webauthn"],
+              withoutDefaultAttributes: true,
+              excludeAttributeTypes: ["hidden", "button", "submit"],
+            }}
+          />
+        </div>
         <FilterFlowNodes
           filter={{
             nodes: flow.ui.nodes,
-            // we will also map default fields here but not oidc and password fields
             groups: ["webauthn"],
             withoutDefaultAttributes: true,
-            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+            attributes: ["button", "submit"],
+            excludeAttributeTypes: ["hidden"],
           }}
         />
       </div>
+    </>
+  ) : null
+}
+
+export const PasskeySection = (flow: SelfServiceFlow): JSX.Element | null => {
+  return hasPasskey(flow.ui.nodes) ? (
+    <>
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
-          groups: ["webauthn"],
+          groups: ["webauthn", "identifier_first", "passkey"],
           withoutDefaultAttributes: true,
-          attributes: ["button", "submit"],
+          attributes: ["hidden"], // the form will take care of hidden fields
         }}
       />
-    </div>
-  ) : null
-}
-
-export const PasskeySection = (flow: SelfServiceFlow): JSX.Element | null => {
-  return hasPasskey(flow.ui.nodes) ? (
-    <div className={gridStyle({ gap: 32 })}>
-      <div className={gridStyle({ gap: 16 })}>
+      <div className={gridStyle({ gap: 32 })}>
+        <div className={gridStyle({ gap: 16 })}>
+          <FilterFlowNodes
+            filter={{
+              nodes: flow.ui.nodes,
+              // we will also map default fields here but not oidc and password fields
+              groups: ["passkey"],
+              withoutDefaultAttributes: true,
+              excludeAttributeTypes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+            }}
+          />
+        </div>
         <FilterFlowNodes
           filter={{
             nodes: flow.ui.nodes,
-            // we will also map default fields here but not oidc and password fields
             groups: ["passkey"],
             withoutDefaultAttributes: true,
-            excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+            attributes: ["button", "submit"],
+            excludeAttributeTypes: ["hidden"],
           }}
         />
       </div>
-      <FilterFlowNodes
-        filter={{
-          nodes: flow.ui.nodes,
-          groups: ["passkey"],
-          withoutDefaultAttributes: true,
-          attributes: ["button", "submit"],
-        }}
-      />
-    </div>
+    </>
   ) : null
 }
 
@@ -63,16 +85,26 @@ export const PasskeyLoginSection = (
   flow: SelfServiceFlow,
 ): JSX.Element | null => {
   return hasPasskey(flow.ui.nodes) ? (
-    <div className={gridStyle({ gap: 32 })}>
+    <>
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
-          groups: ["passkey"],
+          groups: ["passkey", "identifier_first"],
           withoutDefaultAttributes: true,
-          attributes: ["button", "submit"],
+          attributes: ["hidden"], // the form will take care of hidden fields
         }}
       />
-    </div>
+      <div className={gridStyle({ gap: 32 })}>
+        <FilterFlowNodes
+          filter={{
+            nodes: flow.ui.nodes,
+            groups: ["passkey"],
+            withoutDefaultAttributes: true,
+            attributes: ["button", "submit"],
+          }}
+        />
+      </div>
+    </>
   ) : null
 }
 
@@ -81,27 +113,36 @@ export const PasswordlessLoginSection = (
 ): JSX.Element | null => {
   if (hasWebauthn(flow.ui.nodes)) {
     return (
-      <div className={gridStyle({ gap: 32 })}>
-        <div className={gridStyle({ gap: 16 })}>
+      <>
+        <FilterFlowNodes
+          filter={{
+            nodes: flow.ui.nodes,
+            groups: ["webauthn", "identifier_first"],
+            withoutDefaultAttributes: true,
+            attributes: ["hidden"], // the form will take care of hidden fields
+          }}
+        />
+        <div className={gridStyle({ gap: 32 })}>
           <FilterFlowNodes
             filter={{
               nodes: flow.ui.nodes,
               // we will also map default fields here but not oidc and password fields
               groups: ["webauthn"],
               withoutDefaultAttributes: true,
-              excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+              excludeAttributeTypes: ["hidden", "button", "submit"], // the form will take care of hidden fields
+            }}
+          />
+          <FilterFlowNodes
+            filter={{
+              nodes: flow.ui.nodes,
+              groups: ["webauthn"],
+              withoutDefaultAttributes: true,
+              attributes: ["button", "submit"],
+              excludeAttributeTypes: ["hidden"],
             }}
           />
         </div>
-        <FilterFlowNodes
-          filter={{
-            nodes: flow.ui.nodes,
-            groups: ["webauthn"],
-            withoutDefaultAttributes: true,
-            attributes: ["button", "submit"],
-          }}
-        />
-      </div>
+      </>
     )
   }
 
diff --git a/src/react-components/ory/sections/profile-section.tsx b/src/react-components/ory/sections/profile-section.tsx
index b053664a..6d66ce8d 100644
--- a/src/react-components/ory/sections/profile-section.tsx
+++ b/src/react-components/ory/sections/profile-section.tsx
@@ -17,7 +17,7 @@ export const ProfileSettingsSection = ({
   return (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "submit,button" }}
       />
       <FilterFlowNodes
         filter={{ ...filter, attributes: "submit,button" }}
@@ -36,14 +36,38 @@ export const ProfileRegistrationSection = (
         filter={{
           nodes: flow.ui.nodes,
           groups: ["profile"],
-          excludeAttributes: "submit,hidden",
+          excludeAttributeTypes: "submit,hidden",
         }}
       />
       <FilterFlowNodes
         filter={{
           nodes: flow.ui.nodes,
           groups: ["profile"],
-          excludeAttributes: "hidden",
+          excludeAttributeTypes: "hidden",
+          attributes: "submit",
+        }}
+      />
+    </div>
+  ) : null
+}
+
+export const ProfileLoginSection = (
+  flow: SelfServiceFlow,
+): JSX.Element | null => {
+  return hasProfile(flow.ui.nodes) ? (
+    <div className={gridStyle({ gap: 32 })}>
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          excludeAttributeTypes: "submit,hidden",
+        }}
+      />
+      <FilterFlowNodes
+        filter={{
+          nodes: flow.ui.nodes,
+          groups: ["profile"],
+          excludeAttributeTypes: "hidden",
           attributes: "submit",
         }}
       />
diff --git a/src/react-components/ory/sections/registration-section.tsx b/src/react-components/ory/sections/registration-section.tsx
index 19b9bd3c..0d6ad7b3 100644
--- a/src/react-components/ory/sections/registration-section.tsx
+++ b/src/react-components/ory/sections/registration-section.tsx
@@ -19,7 +19,7 @@ export const RegistrationSection = ({
           filter={{
             nodes: nodes,
             groups: ["password"],
-            excludeAttributes: "submit,hidden",
+            excludeAttributeTypes: "submit,hidden",
           }}
         />
       </div>
@@ -27,7 +27,7 @@ export const RegistrationSection = ({
         filter={{
           nodes: nodes,
           groups: ["password"],
-          excludeAttributes: "hidden",
+          excludeAttributeTypes: "hidden",
           attributes: "submit",
         }}
       />
diff --git a/src/react-components/ory/sections/totp-settings-section.tsx b/src/react-components/ory/sections/totp-settings-section.tsx
index f483f763..ba4a77f2 100644
--- a/src/react-components/ory/sections/totp-settings-section.tsx
+++ b/src/react-components/ory/sections/totp-settings-section.tsx
@@ -21,7 +21,7 @@ export const TOTPSettingsSection = ({
   return hasTotp(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "submit,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "submit,button" }}
       />
       <FilterFlowNodes
         filter={{ ...filter, attributes: "submit,button" }}
diff --git a/src/react-components/ory/sections/webauthn-settings-section.tsx b/src/react-components/ory/sections/webauthn-settings-section.tsx
index 5dd46b52..d7a6bd2b 100644
--- a/src/react-components/ory/sections/webauthn-settings-section.tsx
+++ b/src/react-components/ory/sections/webauthn-settings-section.tsx
@@ -21,7 +21,7 @@ export const WebAuthnSettingsSection = ({
   return hasWebauthn(flow.ui.nodes) ? (
     <div className={gridStyle({ gap: 32 })}>
       <FilterFlowNodes
-        filter={{ ...filter, excludeAttributes: "onclick,button" }}
+        filter={{ ...filter, excludeAttributeTypes: "onclick,button" }}
       />
       <FilterFlowNodes
         filter={{ ...filter, attributes: "onclick,button" }}
diff --git a/src/react-components/ory/user-auth-card.spec.tsx b/src/react-components/ory/user-auth-card.spec.tsx
index 58edf54e..02fde1db 100644
--- a/src/react-components/ory/user-auth-card.spec.tsx
+++ b/src/react-components/ory/user-auth-card.spec.tsx
@@ -248,7 +248,7 @@ test("ory auth card login refresh flow", async ({ mount }) => {
     />,
   )
 
-  await expect(component).toContainText("You're logged in as:")
+  await expect(component).toContainText("You are using:")
   await expect(component).toContainText("johndoe@acme.com")
 })
 
@@ -416,7 +416,5 @@ test("ory auth card login two factor confirmation", async ({ mount }) => {
 
   expect(identifier).not.toBeNull()
   expect(String(identifier.value)).toContain("@ory.sh")
-  await expect(component).toContainText(
-    `You're logged in as:${identifier.value}`,
-  )
+  await expect(component).toContainText(`You are using:${identifier.value}`)
 })
diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx
index fed3aaf1..f679c4fb 100644
--- a/src/react-components/ory/user-auth-card.tsx
+++ b/src/react-components/ory/user-auth-card.tsx
@@ -33,7 +33,10 @@ import {
 import { AuthCodeSection } from "./sections/auth-code-section"
 import { LinkSection } from "./sections/link-section"
 import { LoggedInInfo } from "./sections/logged-info"
-import { LoginSection } from "./sections/login-section"
+import {
+  LoginSection,
+  IdentifierFirstLoginSection,
+} from "./sections/login-section"
 import { OIDCSection } from "./sections/oidc-section"
 import {
   PasskeyLoginSection,
@@ -42,7 +45,10 @@ import {
   PasswordlessSection,
 } from "./sections/passwordless-section"
 import { RegistrationSection } from "./sections/registration-section"
-import { ProfileRegistrationSection } from "./sections/profile-section"
+import {
+  ProfileLoginSection,
+  ProfileRegistrationSection,
+} from "./sections/profile-section"
 
 export interface LoginSectionAdditionalProps {
   forgotPasswordURL?: CustomHref | string
@@ -78,28 +84,29 @@ export type UserAuthCardProps = {
   includeScripts?: boolean
   className?: string
 } & UserAuthFormAdditionalProps &
-  (
-    | {
-        flow: LoginFlow
-        flowType: "login"
-        additionalProps?: LoginSectionAdditionalProps
-      }
-    | {
-        flow: RegistrationFlow
-        flowType: "registration"
-        additionalProps?: RegistrationSectionAdditionalProps
-      }
-    | {
-        flow: RecoveryFlow
-        flowType: "recovery"
-        additionalProps?: RecoverySectionAdditionalProps
-      }
-    | {
-        flow: VerificationFlow
-        flowType: "verification"
-        additionalProps?: VerificationSectionAdditionalProps
-      }
-  )
+  FlowProps
+
+type FlowProps =
+  | {
+      flow: LoginFlow
+      flowType: "login"
+      additionalProps?: LoginSectionAdditionalProps
+    }
+  | {
+      flow: RegistrationFlow
+      flowType: "registration"
+      additionalProps?: RegistrationSectionAdditionalProps
+    }
+  | {
+      flow: RecoveryFlow
+      flowType: "recovery"
+      additionalProps?: RecoverySectionAdditionalProps
+    }
+  | {
+      flow: VerificationFlow
+      flowType: "verification"
+      additionalProps?: VerificationSectionAdditionalProps
+    }
 
 /**
  * UserAuthCard renders a login, registration, verification or recovery flow
@@ -108,31 +115,33 @@ export type UserAuthCardProps = {
  * @returns JSX.Element
  */
 export const UserAuthCard = ({
-  flow,
   title,
   subtitle,
-  flowType,
   additionalProps,
   cardImage,
   onSubmit,
   includeScripts,
   className,
+  flow,
+  flowType,
 }: UserAuthCardProps): JSX.Element => {
+  // Safe, because we know that the props are of the correct type
+  const flowProps = { flow, flowType, additionalProps } as FlowProps
   const intl = useIntl()
 
   if (includeScripts) {
-    useScriptNodes({ nodes: flow.ui.nodes })
+    useScriptNodes({ nodes: flowProps.flow.ui.nodes })
   }
 
   if (!title) {
-    switch (flowType) {
+    switch (flowProps.flowType) {
       case "login":
-        if (flow.refresh) {
+        if (flowProps.flow.refresh) {
           title = intl.formatMessage({
             id: "login.title-refresh",
             defaultMessage: "Confirm it's you",
           })
-        } else if (flow.requested_aal === "aal2") {
+        } else if (flowProps.flow.requested_aal === "aal2") {
           title = intl.formatMessage({
             id: "login.title-aal2",
             defaultMessage: "Two-Factor Authentication",
@@ -165,9 +174,9 @@ export const UserAuthCard = ({
     }
   }
   if (!subtitle) {
-    switch (flowType) {
+    switch (flowProps.flowType) {
       case "login":
-        if (flow.oauth2_login_request) {
+        if (flowProps.flow.oauth2_login_request) {
           subtitle = intl.formatMessage(
             {
               id: "login.subtitle-oauth2",
@@ -175,14 +184,14 @@ export const UserAuthCard = ({
             },
             {
               clientName:
-                flow.oauth2_login_request.client?.client_name ??
-                flow.oauth2_login_request.client?.client_uri,
+                flowProps.flow.oauth2_login_request.client?.client_name ??
+                flowProps.flow.oauth2_login_request.client?.client_uri,
             },
           )
         }
         break
       case "registration":
-        if (flow.oauth2_login_request) {
+        if (flowProps.flow.oauth2_login_request) {
           subtitle = intl.formatMessage(
             {
               id: "registration.subtitle-oauth2",
@@ -190,8 +199,8 @@ export const UserAuthCard = ({
             },
             {
               clientName:
-                flow.oauth2_login_request.client?.client_name ??
-                flow.oauth2_login_request.client?.client_uri,
+                flowProps.flow.oauth2_login_request.client?.client_name ??
+                flowProps.flow.oauth2_login_request.client?.client_uri,
             },
           )
         }
@@ -204,6 +213,7 @@ export const UserAuthCard = ({
   let $code: JSX.Element | null = null
   let $passwordlessWebauthn: JSX.Element | null = null
   let $passkey: JSX.Element | null = null
+  let $twoStep: JSX.Element | null = null
   let $profile: JSX.Element | null = null
   let message: MessageSectionProps | null = null
 
@@ -221,20 +231,20 @@ export const UserAuthCard = ({
   // we want the login section to handle passwordless as well when we have a 2FA screen.
   const canShowPasswordless = () =>
     !!$passwordlessWebauthn &&
-    (!isLoggedIn(flow as LoginFlow) || flowType === "registration")
+    (!isLoggedIn(flow as LoginFlow) || flowProps.flowType === "registration")
 
   // passkey can be shown if the user is not logged in (e.g. exclude 2FA screen) or if the flow is a registration flow.
   // we want the login section to handle passwordless as well when we have a 2FA screen.
   const canShowPasskey = () =>
     !!$passkey &&
-    (!isLoggedIn(flow as LoginFlow) || flowType === "registration")
+    (!isLoggedIn(flow as LoginFlow) || flowProps.flowType === "registration")
 
-  const canShowProfile = () => !!$profile && flowType === "registration"
+  const canShowProfile = () => !!$profile && hasProfile(flow.ui.nodes)
 
   // the current flow is a two factor flow if the user is logged in and has any of the second factor methods enabled.
   const isTwoFactor = () =>
-    flowType === "login" &&
-    isLoggedIn(flow) &&
+    flowProps.flowType === "login" &&
+    isLoggedIn(flowProps.flow) &&
     (hasTotp(flow.ui.nodes) ||
       hasWebauthn(flow.ui.nodes) ||
       hasPasskey(flow.ui.nodes) ||
@@ -307,7 +317,7 @@ export const UserAuthCard = ({
                 nodes: flow.ui.nodes,
                 groups: "totp",
                 withoutDefaultGroup: true,
-                excludeAttributes: "submit",
+                excludeAttributeTypes: "submit",
               }}
             />
             <FilterFlowNodes
@@ -351,11 +361,13 @@ export const UserAuthCard = ({
         </div>
       )) // only map the divider if the index is greater than 0 - more than one flow
 
-  switch (flowType) {
+  switch (flowProps.flowType) {
     case "login":
       $passwordlessWebauthn = PasswordlessLoginSection(flow)
       $passkey = PasskeyLoginSection(flow)
+      $twoStep = IdentifierFirstLoginSection(flow)
       $oidc = OIDCSection(flow)
+      $profile = ProfileLoginSection(flow)
       $code = AuthCodeSection({ nodes: flow.ui.nodes })
 
       $flow = LoginSection({
@@ -363,7 +375,7 @@ export const UserAuthCard = ({
         ...additionalProps,
       })
 
-      if (isLoggedIn(flow) && additionalProps?.logoutURL) {
+      if (isLoggedIn(flowProps.flow) && flowProps.additionalProps?.logoutURL) {
         message = {
           text: intl.formatMessage({
             id: "login.logout-label",
@@ -374,9 +386,9 @@ export const UserAuthCard = ({
             defaultMessage: "Logout",
           }),
           dataTestId: "logout-link",
-          url: additionalProps.logoutURL,
+          url: flowProps.additionalProps.logoutURL,
         }
-      } else if (additionalProps?.signupURL) {
+      } else if (flowProps.additionalProps?.signupURL) {
         message = {
           text: intl.formatMessage({
             id: "login.registration-label",
@@ -386,7 +398,7 @@ export const UserAuthCard = ({
             id: "login.registration-button",
             defaultMessage: "Sign up",
           }),
-          url: additionalProps.signupURL,
+          url: flowProps.additionalProps.signupURL,
           dataTestId: "signup-link",
         }
       }
@@ -400,13 +412,13 @@ export const UserAuthCard = ({
       $flow = RegistrationSection({
         nodes: flow.ui.nodes,
       })
-      if (additionalProps?.loginURL) {
+      if (flowProps.additionalProps?.loginURL) {
         message = {
           text: intl.formatMessage({
             id: "registration.login-label",
             defaultMessage: "Already have an account?",
           }),
-          url: additionalProps.loginURL,
+          url: flowProps.additionalProps.loginURL,
           buttonText: intl.formatMessage({
             id: "registration.login-button",
             defaultMessage: "Sign in",
@@ -420,7 +432,7 @@ export const UserAuthCard = ({
       $flow = LinkSection({
         nodes: flow.ui.nodes,
       })
-      if (additionalProps?.loginURL) {
+      if (flowProps.additionalProps?.loginURL) {
         message = {
           text: intl.formatMessage({
             id: "recovery.login-label",
@@ -430,7 +442,7 @@ export const UserAuthCard = ({
             id: "recovery.login-button",
             defaultMessage: "Sign in",
           }),
-          url: additionalProps.loginURL,
+          url: flowProps.additionalProps.loginURL,
           dataTestId: "cta-link",
         }
       }
@@ -439,7 +451,7 @@ export const UserAuthCard = ({
       $flow = LinkSection({
         nodes: flow.ui.nodes,
       })
-      if (additionalProps?.signupURL) {
+      if (flowProps.additionalProps?.signupURL) {
         message = {
           text: intl.formatMessage({
             id: "verification.registration-label",
@@ -449,7 +461,7 @@ export const UserAuthCard = ({
             id: "verification.registration-button",
             defaultMessage: "Sign up",
           }),
-          url: additionalProps.signupURL,
+          url: flowProps.additionalProps.signupURL,
           dataTestId: "cta-link",
         }
       }
@@ -467,41 +479,73 @@ export const UserAuthCard = ({
         </h2>
       }
       image={cardImage}
-      data-testid={`${flowType}-auth-card`}
+      data-testid={`${flowProps.flowType}-auth-card`}
     >
       <div className={gridStyle({ gap: 32 })}>
         {subtitle && <Message severity="default">{subtitle}</Message>}
         <NodeMessages uiMessages={flow.ui.messages} />
+        <Divider />
+
         {$oidc && (
           <>
-            <Divider />
-            <UserAuthForm flow={flow} data-testid={`${flowType}-flow-oidc`}>
+            <UserAuthForm
+              flow={flow}
+              data-testid={`${flowProps.flowType}-flow-oidc`}
+            >
               {$oidc}
             </UserAuthForm>
+            <Divider />
           </>
         )}
+
+        {$twoStep && (
+          <>
+            <UserAuthForm
+              flow={flow}
+              data-testid={`${flowProps.flowType}-two-step`}
+            >
+              {$twoStep}
+            </UserAuthForm>
+          </>
+        )}
+
+        {canShowPasskey() && (
+          <>
+            <UserAuthForm
+              flow={flow}
+              submitOnEnter={true}
+              onSubmit={onSubmit}
+              data-testid={"passkey-flow"}
+            >
+              {$passkey}
+            </UserAuthForm>
+          </>
+        )}
+
         {$code && (
           <>
-            <Divider />
-            <UserAuthForm flow={flow} data-testid={`${flowType}-flow-code`}>
+            <UserAuthForm
+              flow={flow}
+              data-testid={`${flowProps.flowType}-flow-code`}
+            >
               {$code}
             </UserAuthForm>
           </>
         )}
+
         {$flow && !isTwoFactor() && (
           <>
-            <Divider />
             <UserAuthForm
               flow={flow}
               submitOnEnter={true}
               onSubmit={onSubmit}
-              data-testid={`${flowType}-flow`}
+              data-testid={`${flowProps.flowType}-flow`}
             >
               {$flow}
-              {showLoggedAccount && <LoggedInInfo flow={flow} />}
             </UserAuthForm>
           </>
         )}
+
         {isTwoFactor() && (
           <>
             <NodeMessages
@@ -517,32 +561,11 @@ export const UserAuthCard = ({
               })}
             />
             {twoFactorFlows()}
-            {showLoggedAccount && <LoggedInInfo flow={flow} />}
-          </>
-        )}
-
-        {canShowPasskey() && (
-          <>
-            <Divider />
-            <UserAuthForm
-              flow={flow}
-              submitOnEnter={true}
-              onSubmit={onSubmit}
-              data-testid={"passkey-flow"}
-              formFilterOverride={{
-                nodes: flow.ui.nodes,
-                groups: ["default", "passkey"],
-                attributes: "hidden",
-              }}
-            >
-              {$passkey}
-            </UserAuthForm>
           </>
         )}
 
         {canShowPasswordless() && (
           <>
-            <Divider />
             <UserAuthForm
               flow={flow}
               submitOnEnter={true}
@@ -559,15 +582,19 @@ export const UserAuthCard = ({
           </>
         )}
 
-        {$profile && (
+        {canShowProfile() && (
           <>
-            <Divider />
-            <UserAuthForm flow={flow} data-testid={`${flowType}-flow-profile`}>
+            <UserAuthForm
+              flow={flow}
+              data-testid={`${flowProps.flowType}-flow-profile`}
+            >
               {$profile}
             </UserAuthForm>
           </>
         )}
 
+        {showLoggedAccount && <LoggedInInfo flow={flow} />}
+
         {message && MessageSection(message)}
       </div>
     </Card>
diff --git a/src/react-components/tests/translations.spec.ts b/src/react-components/tests/translations.spec.ts
index 924c0d7d..c794e5ba 100644
--- a/src/react-components/tests/translations.spec.ts
+++ b/src/react-components/tests/translations.spec.ts
@@ -35,11 +35,9 @@ test("language keys and templates match", async ({ templates }) => {
   }
 
   await test.step("Checking template strings", () => {
-    Object.entries(supportedLanguages).forEach(([language, translation]) => {
-      console.log(`Checking ${language} template strings`)
+    Object.entries(supportedLanguages).forEach(([, translation]) => {
       Object.entries(templates).forEach(([key, templateStrings]) => {
         for (const templateString of templateStrings) {
-          console.log(`Checking ${language} ${key} ${templateString}`)
           expect(
             translation[key as keyof typeof supportedLanguages.en],
           ).toContain(templateString)
diff --git a/src/ui/index.test.ts b/src/ui/index.test.ts
index d6d396cd..ad7c448a 100644
--- a/src/ui/index.test.ts
+++ b/src/ui/index.test.ts
@@ -251,7 +251,7 @@ describe("generic helpers", () => {
       opts: {
         groups: "webauthn",
         withoutDefaultGroup: true,
-        excludeAttributes: "script",
+        excludeAttributeTypes: "script",
       },
       expected: [
         {
diff --git a/src/ui/index.ts b/src/ui/index.ts
index c86286df..94f1a5c5 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -125,7 +125,8 @@ export interface FilterNodesByGroups {
   withoutDefaultGroup?: boolean
   attributes?: string[] | string
   withoutDefaultAttributes?: boolean
-  excludeAttributes?: string[] | string
+  excludeAttributeTypes?: string[] | string
+  excludeAttributeValues?: string[] | string
 }
 
 /**
@@ -146,14 +147,15 @@ export const filterNodesByGroups = ({
   withoutDefaultGroup,
   attributes,
   withoutDefaultAttributes,
-  excludeAttributes,
+  excludeAttributeTypes,
+  excludeAttributeValues,
 }: FilterNodesByGroups) => {
   const search = (s: string[] | string | undefined) =>
     typeof s === "string" ? s.split(",") : s
 
   return nodes.filter(({ group, attributes: attr }) => {
     // if we have not specified any group or attribute filters, return all nodes
-    if (!groups && !attributes && !excludeAttributes) return true
+    if (!groups && !attributes && !excludeAttributeTypes) return true
 
     const g = search(groups) ?? []
     if (!withoutDefaultGroup) {
@@ -174,16 +176,33 @@ export const filterNodesByGroups = ({
     }
 
     // filter the attributes to exclude
-    const ea = search(excludeAttributes) ?? []
+    const eat = search(excludeAttributeTypes) ?? []
+    const eav = search(excludeAttributeValues) ?? []
 
     const filterGroup = groups ? g.includes(group) : true
     const filterAttributes = attributes
       ? a.includes(getNodeInputType(attr))
       : true
-    const filterExcludeAttributes = excludeAttributes
-      ? !ea.includes(getNodeInputType(attr))
+    const filterExcludeAttributeTypes = excludeAttributeTypes
+      ? !eat.includes(getNodeInputType(attr))
+      : true
+    const filterExcludeAttributeValue = excludeAttributeValues
+      ? !eav.includes(getNodeInputValue(attr))
       : true
 
-    return filterGroup && filterAttributes && filterExcludeAttributes
+    return (
+      filterGroup &&
+      filterAttributes &&
+      filterExcludeAttributeTypes &&
+      filterExcludeAttributeValue
+    )
   })
 }
+
+export const getNodeInputValue = (attr?: UiNodeAttributes) => {
+  if (!attr) return ""
+  if (isUiNodeInputAttributes(attr)) {
+    return String(attr.value)
+  }
+  return ""
+}