From 4d690dd0e9a0f2fe0ff5e7be9083b2320b12effa Mon Sep 17 00:00:00 2001
From: Yordis Prieto <yordis.prieto@gmail.com>
Date: Thu, 26 Sep 2024 22:50:55 -0400
Subject: [PATCH] chore: follow adrs

---
 apps/login/src/app/(login)/accounts/page.tsx  |  4 ++--
 apps/login/src/app/(login)/error.tsx          |  8 +++----
 .../(login)/idp/[provider]/failure/page.tsx   |  2 +-
 .../(login)/idp/[provider]/success/page.tsx   |  6 ++---
 apps/login/src/app/(login)/idp/page.tsx       |  8 +++----
 apps/login/src/app/(login)/loginname/page.tsx | 10 ++++----
 .../app/(login)/me/change-password/page.tsx   |  8 +++----
 apps/login/src/app/(login)/mfa/page.tsx       | 10 ++++----
 apps/login/src/app/(login)/mfa/set/page.tsx   | 10 ++++----
 .../src/app/(login)/otp/[method]/page.tsx     |  8 +++----
 .../src/app/(login)/otp/[method]/set/page.tsx | 16 ++++++-------
 apps/login/src/app/(login)/passkey/page.tsx   |  8 +++----
 .../src/app/(login)/passkey/set/page.tsx      |  8 +++----
 apps/login/src/app/(login)/password/page.tsx  |  8 +++----
 apps/login/src/app/(login)/register/page.tsx  |  6 ++---
 apps/login/src/app/(login)/signedin/page.tsx  |  6 ++---
 apps/login/src/app/(login)/u2f/page.tsx       |  8 +++----
 apps/login/src/app/(login)/u2f/set/page.tsx   | 10 ++++----
 apps/login/src/app/(login)/verify/page.tsx    |  6 ++---
 apps/login/src/app/layout.tsx                 | 12 ++++++----
 apps/login/src/app/login/route.ts             | 17 +++++++-------
 .../address-bar.tsx}                          |  6 ++---
 .../{ui/Alert.tsx => components/alert.tsx}    |  7 +++---
 .../auth-methods.tsx}                         |  4 ++--
 .../authentication-method-radio.tsx}          |  2 +-
 .../{ui/Avatar.tsx => components/avatar.tsx}  |  2 +-
 .../back-button.tsx}                          |  4 ++--
 .../Boundary.tsx => components/boundary.tsx}  |  8 +++----
 .../{ui/Button.tsx => components/button.tsx}  |  2 +-
 .../change-password-form.tsx}                 | 18 +++++++--------
 .../Checkbox.tsx => components/checkbox.tsx}  |  0
 .../choose-second-factor-to-setup.tsx}        |  4 ++--
 .../choose-second-factor.tsx}                 |  4 ++--
 .../copy-to-clipboard.tsx}                    |  2 +-
 .../default-tags.tsx}                         |  0
 .../dynamic-theme.tsx}                        | 10 ++++----
 .../external-link.tsx}                        |  3 ++-
 .../global-nav.tsx}                           |  6 ++---
 .../idp-signin.tsx}                           |  6 ++---
 .../src/{ui => components}/idps/classes.tsx   |  4 ++--
 .../idps/sign-in-with-apple.tsx}              |  0
 .../idps/sign-in-with-azure-ad.tsx}           |  4 ++--
 .../idps/sign-in-with-generic.tsx}            |  0
 .../idps/sign-in-with-github.tsx}             |  0
 .../idps/sign-in-with-gitlab.test.tsx}        |  2 +-
 .../idps/sign-in-with-gitlab.tsx}             |  0
 .../idps/sign-in-with-google.test.tsx}        |  2 +-
 .../idps/sign-in-with-google.tsx}             |  0
 .../{ui/Input.tsx => components/input.tsx}    |  2 +-
 .../layout-providers.tsx}                     |  3 ++-
 .../LoginOTP.tsx => components/login-otp.tsx} | 12 +++++-----
 .../login-passkey.tsx}                        | 12 +++++-----
 .../src/{ui/Logo.tsx => components/logo.tsx}  |  0
 .../mobile-nav-toggle.tsx}                    | 23 ++++++++++++-------
 .../password-complexity.test.tsx}             |  2 +-
 .../password-complexity.tsx}                  |  4 ++--
 .../password-form.tsx}                        | 12 +++++-----
 .../privacy-policy-checkboxes.tsx}            |  2 +-
 .../register-form-without-password.tsx}       | 19 +++++++--------
 .../register-passkey.tsx}                     | 12 +++++-----
 .../register-u2f.tsx}                         | 12 +++++-----
 .../self-service-menu.tsx}                    |  2 +-
 .../session-item.tsx}                         |  4 ++--
 .../sessions-list.tsx}                        |  6 ++---
 .../set-password-form.tsx}                    | 18 +++++++--------
 .../sign-in-with-idp.tsx}                     | 22 +++++++++---------
 .../skeleton-card.tsx}                        |  2 +-
 .../Spinner.tsx => components/spinner.tsx}    |  0
 .../state-badge.tsx}                          |  2 +-
 .../TabGroup.tsx => components/tab-group.tsx} |  2 +-
 .../src/{ui/Tab.tsx => components/tab.tsx}    |  4 ++--
 .../theme-provider.tsx}                       |  2 +-
 .../theme-wrapper.tsx}                        |  6 ++---
 .../{ui/Theme.tsx => components/theme.tsx}    |  4 +---
 .../totp-register.tsx}                        | 12 +++++-----
 .../user-avatar.tsx}                          |  4 ++--
 .../username-form.tsx}                        | 12 +++++-----
 .../verify-email-form.tsx}                    | 10 ++++----
 .../zitadel-logo-dark.tsx}                    |  0
 .../zitadel-logo-light.tsx}                   |  0
 .../zitadel-logo.tsx}                         |  0
 apps/login/src/{utils => helpers}/base64.ts   |  0
 apps/login/src/{utils => helpers}/colors.ts   |  0
 .../src/{utils => helpers}/validators.ts      |  0
 packages/eslint-config-zitadel/index.js       |  5 ----
 85 files changed, 257 insertions(+), 254 deletions(-)
 rename apps/login/src/{ui/AddressBar.tsx => components/address-bar.tsx} (93%)
 rename apps/login/src/{ui/Alert.tsx => components/alert.tsx} (88%)
 rename apps/login/src/{ui/AuthMethods.tsx => components/auth-methods.tsx} (98%)
 rename apps/login/src/{ui/AuthenticationMethodRadio.tsx => components/authentication-method-radio.tsx} (98%)
 rename apps/login/src/{ui/Avatar.tsx => components/avatar.tsx} (97%)
 rename apps/login/src/{ui/BackButton.tsx => components/back-button.tsx} (73%)
 rename apps/login/src/{ui/Boundary.tsx => components/boundary.tsx} (95%)
 rename apps/login/src/{ui/Button.tsx => components/button.tsx} (99%)
 rename apps/login/src/{ui/ChangePasswordForm.tsx => components/change-password-form.tsx} (92%)
 rename apps/login/src/{ui/Checkbox.tsx => components/checkbox.tsx} (100%)
 rename apps/login/src/{ui/ChooseSecondFactorToSetup.tsx => components/choose-second-factor-to-setup.tsx} (95%)
 rename apps/login/src/{ui/ChooseSecondFactor.tsx => components/choose-second-factor.tsx} (93%)
 rename apps/login/src/{ui/CopyToClipboard.tsx => components/copy-to-clipboard.tsx} (93%)
 rename apps/login/src/{ui/DefaultTags.tsx => components/default-tags.tsx} (100%)
 rename apps/login/src/{ui/DynamicTheme.tsx => components/dynamic-theme.tsx} (85%)
 rename apps/login/src/{ui/ExternalLink.tsx => components/external-link.tsx} (87%)
 rename apps/login/src/{ui/GlobalNav.tsx => components/global-nav.tsx} (96%)
 rename apps/login/src/{ui/IdpSignin.tsx => components/idp-signin.tsx} (94%)
 rename apps/login/src/{ui => components}/idps/classes.tsx (86%)
 rename apps/login/src/{ui/idps/SignInWithApple.tsx => components/idps/sign-in-with-apple.tsx} (100%)
 rename apps/login/src/{ui/idps/SignInWithAzureAD.tsx => components/idps/sign-in-with-azure-ad.tsx} (91%)
 rename apps/login/src/{ui/idps/SignInWithGeneric.tsx => components/idps/sign-in-with-generic.tsx} (100%)
 rename apps/login/src/{ui/idps/SignInWithGithub.tsx => components/idps/sign-in-with-github.tsx} (100%)
 rename apps/login/src/{ui/idps/SignInWithGitlab.test.tsx => components/idps/sign-in-with-gitlab.test.tsx} (92%)
 rename apps/login/src/{ui/idps/SignInWithGitlab.tsx => components/idps/sign-in-with-gitlab.tsx} (100%)
 rename apps/login/src/{ui/idps/SignInWithGoogle.test.tsx => components/idps/sign-in-with-google.test.tsx} (92%)
 rename apps/login/src/{ui/idps/SignInWithGoogle.tsx => components/idps/sign-in-with-google.tsx} (100%)
 rename apps/login/src/{ui/Input.tsx => components/input.tsx} (99%)
 rename apps/login/src/{ui/LayoutProviders.tsx => components/layout-providers.tsx} (84%)
 rename apps/login/src/{ui/LoginOTP.tsx => components/login-otp.tsx} (96%)
 rename apps/login/src/{ui/LoginPasskey.tsx => components/login-passkey.tsx} (96%)
 rename apps/login/src/{ui/Logo.tsx => components/logo.tsx} (100%)
 rename apps/login/src/{ui/MobileNavToggle.tsx => components/mobile-nav-toggle.tsx} (75%)
 rename apps/login/src/{ui/PasswordComplexity.test.tsx => components/password-complexity.test.tsx} (97%)
 rename apps/login/src/{ui/PasswordComplexity.tsx => components/password-complexity.tsx} (97%)
 rename apps/login/src/{ui/PasswordForm.tsx => components/password-form.tsx} (96%)
 rename apps/login/src/{ui/PrivacyPolicyCheckboxes.tsx => components/privacy-policy-checkboxes.tsx} (98%)
 rename apps/login/src/{ui/RegisterFormWithoutPassword.tsx => components/register-form-without-password.tsx} (92%)
 rename apps/login/src/{ui/RegisterPasskey.tsx => components/register-passkey.tsx} (94%)
 rename apps/login/src/{ui/RegisterU2F.tsx => components/register-u2f.tsx} (95%)
 rename apps/login/src/{ui/SelfServiceMenu.tsx => components/self-service-menu.tsx} (92%)
 rename apps/login/src/{ui/SessionItem.tsx => components/session-item.tsx} (98%)
 rename apps/login/src/{ui/SessionsList.tsx => components/sessions-list.tsx} (84%)
 rename apps/login/src/{ui/SetPasswordForm.tsx => components/set-password-form.tsx} (94%)
 rename apps/login/src/{ui/SignInWithIDP.tsx => components/sign-in-with-idp.tsx} (90%)
 rename apps/login/src/{ui/SkeletonCard.tsx => components/skeleton-card.tsx} (95%)
 rename apps/login/src/{ui/Spinner.tsx => components/spinner.tsx} (100%)
 rename apps/login/src/{ui/StateBadge.tsx => components/state-badge.tsx} (98%)
 rename apps/login/src/{ui/TabGroup.tsx => components/tab-group.tsx} (89%)
 rename apps/login/src/{ui/Tab.tsx => components/tab.tsx} (90%)
 rename apps/login/src/{ui/ThemeProvider.tsx => components/theme-provider.tsx} (78%)
 rename apps/login/src/{ui/ThemeWrapper.tsx => components/theme-wrapper.tsx} (77%)
 rename apps/login/src/{ui/Theme.tsx => components/theme.tsx} (96%)
 rename apps/login/src/{ui/TOTPRegister.tsx => components/totp-register.tsx} (94%)
 rename apps/login/src/{ui/UserAvatar.tsx => components/user-avatar.tsx} (95%)
 rename apps/login/src/{ui/UsernameForm.tsx => components/username-form.tsx} (93%)
 rename apps/login/src/{ui/VerifyEmailForm.tsx => components/verify-email-form.tsx} (94%)
 rename apps/login/src/{ui/ZitadelLogoDark.tsx => components/zitadel-logo-dark.tsx} (100%)
 rename apps/login/src/{ui/ZitadelLogoLight.tsx => components/zitadel-logo-light.tsx} (100%)
 rename apps/login/src/{ui/ZitadelLogo.tsx => components/zitadel-logo.tsx} (100%)
 rename apps/login/src/{utils => helpers}/base64.ts (100%)
 rename apps/login/src/{utils => helpers}/colors.ts (100%)
 rename apps/login/src/{utils => helpers}/validators.ts (100%)

diff --git a/apps/login/src/app/(login)/accounts/page.tsx b/apps/login/src/app/(login)/accounts/page.tsx
index 8ba2e32d89b..fc50d2846bf 100644
--- a/apps/login/src/app/(login)/accounts/page.tsx
+++ b/apps/login/src/app/(login)/accounts/page.tsx
@@ -1,7 +1,7 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SessionsList } from "@/components/sessions-list";
 import { getAllSessionCookieIds } from "@/lib/cookies";
 import { getBrandingSettings, listSessions } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import SessionsList from "@/ui/SessionsList";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
diff --git a/apps/login/src/app/(login)/error.tsx b/apps/login/src/app/(login)/error.tsx
index 47b2e505ce7..0053f6ed71a 100644
--- a/apps/login/src/app/(login)/error.tsx
+++ b/apps/login/src/app/(login)/error.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { Boundary } from "@/ui/Boundary";
-import { Button } from "@/ui/Button";
-import React from "react";
+import { Boundary } from "@/components/boundary";
+import { Button } from "@/components/button";
+import { useEffect } from "react";
 
 export default function Error({ error, reset }: any) {
-  React.useEffect(() => {
+  useEffect(() => {
     console.log("logging error:", error);
   }, [error]);
 
diff --git a/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx b/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx
index 2be2c54b019..237feebecc3 100644
--- a/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx
+++ b/apps/login/src/app/(login)/idp/[provider]/failure/page.tsx
@@ -1,5 +1,5 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
 import { getBrandingSettings } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
 import { IdentityProviderType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 
 // This configuration shows the given name in the respective IDP button as fallback
diff --git a/apps/login/src/app/(login)/idp/[provider]/success/page.tsx b/apps/login/src/app/(login)/idp/[provider]/success/page.tsx
index e8c4f9a2cc2..1c8039def60 100644
--- a/apps/login/src/app/(login)/idp/[provider]/success/page.tsx
+++ b/apps/login/src/app/(login)/idp/[provider]/success/page.tsx
@@ -1,3 +1,6 @@
+import { Alert, AlertType } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { IdpSignin } from "@/components/idp-signin";
 import { idpTypeToIdentityProviderType, PROVIDER_MAPPING } from "@/lib/idp";
 import {
   addIDPLink,
@@ -7,9 +10,6 @@ import {
   listUsers,
   retrieveIDPIntent,
 } from "@/lib/zitadel";
-import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import IdpSignin from "@/ui/IdpSignin";
 import { AutoLinkingOption } from "@zitadel/proto/zitadel/idp/v2/idp_pb";
 
 export default async function Page({
diff --git a/apps/login/src/app/(login)/idp/page.tsx b/apps/login/src/app/(login)/idp/page.tsx
index a41fad781d7..8a2d65f380a 100644
--- a/apps/login/src/app/(login)/idp/page.tsx
+++ b/apps/login/src/app/(login)/idp/page.tsx
@@ -1,6 +1,6 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SignInWithIdp } from "@/components/sign-in-with-idp";
 import { getBrandingSettings, settingsService } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "@/ui/SignInWithIDP";
 import { makeReqCtx } from "@zitadel/client/v2";
 
 function getIdentityProviders(orgId?: string) {
@@ -36,12 +36,12 @@ export default async function Page({
         </p>
 
         {identityProviders && (
-          <SignInWithIDP
+          <SignInWithIdp
             host={host}
             identityProviders={identityProviders}
             authRequestId={authRequestId}
             organization={organization}
-          ></SignInWithIDP>
+          ></SignInWithIdp>
         )}
       </div>
     </DynamicTheme>
diff --git a/apps/login/src/app/(login)/loginname/page.tsx b/apps/login/src/app/(login)/loginname/page.tsx
index 7c87474cd15..e1847cbcf83 100644
--- a/apps/login/src/app/(login)/loginname/page.tsx
+++ b/apps/login/src/app/(login)/loginname/page.tsx
@@ -1,12 +1,12 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SignInWithIdp } from "@/components/sign-in-with-idp";
+import { UsernameForm } from "@/components/username-form";
 import {
   getBrandingSettings,
   getLegalAndSupportSettings,
   getLoginSettings,
   settingsService,
 } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import { SignInWithIDP } from "@/ui/SignInWithIDP";
-import UsernameForm from "@/ui/UsernameForm";
 import { makeReqCtx } from "@zitadel/client/v2";
 
 function getIdentityProviders(orgId?: string) {
@@ -52,12 +52,12 @@ export default async function Page({
           allowRegister={!!loginSettings?.allowRegister}
         >
           {legal && identityProviders && process.env.ZITADEL_API_URL && (
-            <SignInWithIDP
+            <SignInWithIdp
               host={host}
               identityProviders={identityProviders}
               authRequestId={authRequestId}
               organization={organization}
-            ></SignInWithIDP>
+            ></SignInWithIdp>
           )}
         </UsernameForm>
       </div>
diff --git a/apps/login/src/app/(login)/me/change-password/page.tsx b/apps/login/src/app/(login)/me/change-password/page.tsx
index febd9e0b995..d87f184ac99 100644
--- a/apps/login/src/app/(login)/me/change-password/page.tsx
+++ b/apps/login/src/app/(login)/me/change-password/page.tsx
@@ -1,13 +1,13 @@
+import { Alert } from "@/components/alert";
+import { ChangePasswordForm } from "@/components/change-password-form";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import {
   getBrandingSettings,
   getPasswordComplexitySettings,
   getSession,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import ChangePasswordForm from "@/ui/ChangePasswordForm";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/mfa/page.tsx b/apps/login/src/app/(login)/mfa/page.tsx
index f469fbf38b3..4186311fd39 100644
--- a/apps/login/src/app/(login)/mfa/page.tsx
+++ b/apps/login/src/app/(login)/mfa/page.tsx
@@ -1,3 +1,8 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { ChooseSecondFactor } from "@/components/choose-second-factor";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import {
@@ -5,11 +10,6 @@ import {
   getSession,
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import ChooseSecondFactor from "@/ui/ChooseSecondFactor";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/mfa/set/page.tsx b/apps/login/src/app/(login)/mfa/set/page.tsx
index 1e1c13fc9a3..5696c724bd1 100644
--- a/apps/login/src/app/(login)/mfa/set/page.tsx
+++ b/apps/login/src/app/(login)/mfa/set/page.tsx
@@ -1,3 +1,8 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { ChooseSecondFactorToSetup } from "@/components/choose-second-factor-to-setup";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import {
@@ -7,11 +12,6 @@ import {
   getUserByID,
   listAuthenticationMethodTypes,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import ChooseSecondFactorToSetup from "@/ui/ChooseSecondFactorToSetup";
-import DynamicTheme from "@/ui/DynamicTheme";
-import UserAvatar from "@/ui/UserAvatar";
 import { Timestamp, timestampDate } from "@zitadel/client";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 
diff --git a/apps/login/src/app/(login)/otp/[method]/page.tsx b/apps/login/src/app/(login)/otp/[method]/page.tsx
index 55af60f66bb..db1efa2a003 100644
--- a/apps/login/src/app/(login)/otp/[method]/page.tsx
+++ b/apps/login/src/app/(login)/otp/[method]/page.tsx
@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginOTP } from "@/components/login-otp";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginOTP from "@/ui/LoginOTP";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/otp/[method]/set/page.tsx b/apps/login/src/app/(login)/otp/[method]/set/page.tsx
index ee657c5737a..3e1b4dca8b4 100644
--- a/apps/login/src/app/(login)/otp/[method]/set/page.tsx
+++ b/apps/login/src/app/(login)/otp/[method]/set/page.tsx
@@ -1,3 +1,9 @@
+import { Alert } from "@/components/alert";
+import { BackButton } from "@/components/back-button";
+import { Button, ButtonVariants } from "@/components/button";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { TotpRegister } from "@/components/totp-register";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import {
   addOTPEmail,
@@ -5,12 +11,6 @@ import {
   getBrandingSettings,
   registerTOTP,
 } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import BackButton from "@/ui/BackButton";
-import { Button, ButtonVariants } from "@/ui/Button";
-import DynamicTheme from "@/ui/DynamicTheme";
-import TOTPRegister from "@/ui/TOTPRegister";
-import UserAvatar from "@/ui/UserAvatar";
 import { RegisterTOTPResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import Link from "next/link";
 import { redirect } from "next/navigation";
@@ -129,7 +129,7 @@ export default async function Page({
               Scan the QR Code or navigate to the URL manually.
             </p>
             <div>
-              <TOTPRegister
+              <TotpRegister
                 uri={totpResponse.uri as string}
                 secret={totpResponse.secret as string}
                 loginName={loginName}
@@ -137,7 +137,7 @@ export default async function Page({
                 authRequestId={authRequestId}
                 organization={organization}
                 checkAfter={checkAfter === "true"}
-              ></TOTPRegister>
+              ></TotpRegister>
             </div>{" "}
           </>
         ) : (
diff --git a/apps/login/src/app/(login)/passkey/page.tsx b/apps/login/src/app/(login)/passkey/page.tsx
index eec5389f709..6cb3e43b84b 100644
--- a/apps/login/src/app/(login)/passkey/page.tsx
+++ b/apps/login/src/app/(login)/passkey/page.tsx
@@ -1,10 +1,10 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginPasskey } from "@/components/login-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getSession } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 const title = "Authenticate with a passkey";
 const description =
diff --git a/apps/login/src/app/(login)/passkey/set/page.tsx b/apps/login/src/app/(login)/passkey/set/page.tsx
index 15aaa6436a9..140f1d74e29 100644
--- a/apps/login/src/app/(login)/passkey/set/page.tsx
+++ b/apps/login/src/app/(login)/passkey/set/page.tsx
@@ -1,9 +1,9 @@
+import { Alert, AlertType } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterPasskey } from "@/components/register-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert, { AlertType } from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterPasskey from "@/ui/RegisterPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/password/page.tsx b/apps/login/src/app/(login)/password/page.tsx
index 81e6ba240af..5da2bd6016a 100644
--- a/apps/login/src/app/(login)/password/page.tsx
+++ b/apps/login/src/app/(login)/password/page.tsx
@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { PasswordForm } from "@/components/password-form";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import PasswordForm from "@/ui/PasswordForm";
-import UserAvatar from "@/ui/UserAvatar";
 import { PasskeysType } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 
 export default async function Page({
diff --git a/apps/login/src/app/(login)/register/page.tsx b/apps/login/src/app/(login)/register/page.tsx
index 700173e9dc7..ab8a8eddfba 100644
--- a/apps/login/src/app/(login)/register/page.tsx
+++ b/apps/login/src/app/(login)/register/page.tsx
@@ -1,11 +1,11 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterFormWithoutPassword } from "@/components/register-form-without-password";
+import { SetPasswordForm } from "@/components/set-password-form";
 import {
   getBrandingSettings,
   getLegalAndSupportSettings,
   getPasswordComplexitySettings,
 } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterFormWithoutPassword from "@/ui/RegisterFormWithoutPassword";
-import SetPasswordForm from "@/ui/SetPasswordForm";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/signedin/page.tsx b/apps/login/src/app/(login)/signedin/page.tsx
index 13715c2c02f..da65d60eccb 100644
--- a/apps/login/src/app/(login)/signedin/page.tsx
+++ b/apps/login/src/app/(login)/signedin/page.tsx
@@ -1,8 +1,8 @@
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { SelfServiceMenu } from "@/components/self-service-menu";
+import { UserAvatar } from "@/components/user-avatar";
 import { getMostRecentCookieWithLoginname } from "@/lib/cookies";
 import { createCallback, getBrandingSettings, getSession } from "@/lib/zitadel";
-import DynamicTheme from "@/ui/DynamicTheme";
-import SelfServiceMenu from "@/ui/SelfServiceMenu";
-import UserAvatar from "@/ui/UserAvatar";
 import { create } from "@zitadel/client";
 import {
   CreateCallbackRequestSchema,
diff --git a/apps/login/src/app/(login)/u2f/page.tsx b/apps/login/src/app/(login)/u2f/page.tsx
index 0390f1c50f8..77a1e6e9a25 100644
--- a/apps/login/src/app/(login)/u2f/page.tsx
+++ b/apps/login/src/app/(login)/u2f/page.tsx
@@ -1,10 +1,10 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { LoginPasskey } from "@/components/login-passkey";
+import { UserAvatar } from "@/components/user-avatar";
 import { getSessionCookieById } from "@/lib/cookies";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings, getSession } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import LoginPasskey from "@/ui/LoginPasskey";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
diff --git a/apps/login/src/app/(login)/u2f/set/page.tsx b/apps/login/src/app/(login)/u2f/set/page.tsx
index ccd99dcb1bf..97120424e1c 100644
--- a/apps/login/src/app/(login)/u2f/set/page.tsx
+++ b/apps/login/src/app/(login)/u2f/set/page.tsx
@@ -1,9 +1,9 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { RegisterU2f } from "@/components/register-u2f";
+import { UserAvatar } from "@/components/user-avatar";
 import { loadMostRecentSession } from "@/lib/session";
 import { getBrandingSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import RegisterU2F from "@/ui/RegisterU2F";
-import UserAvatar from "@/ui/UserAvatar";
 
 export default async function Page({
   searchParams,
@@ -48,7 +48,7 @@ export default async function Page({
         )}
 
         {sessionFactors?.id && (
-          <RegisterU2F
+          <RegisterU2f
             loginName={loginName}
             sessionId={sessionFactors.id}
             organization={organization}
diff --git a/apps/login/src/app/(login)/verify/page.tsx b/apps/login/src/app/(login)/verify/page.tsx
index de246e0c5e5..746c2719ed0 100644
--- a/apps/login/src/app/(login)/verify/page.tsx
+++ b/apps/login/src/app/(login)/verify/page.tsx
@@ -1,7 +1,7 @@
+import { Alert } from "@/components/alert";
+import { DynamicTheme } from "@/components/dynamic-theme";
+import { VerifyEmailForm } from "@/components/verify-email-form";
 import { getBrandingSettings, getLoginSettings } from "@/lib/zitadel";
-import Alert from "@/ui/Alert";
-import DynamicTheme from "@/ui/DynamicTheme";
-import VerifyEmailForm from "@/ui/VerifyEmailForm";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
 export default async function Page({ searchParams }: { searchParams: any }) {
diff --git a/apps/login/src/app/layout.tsx b/apps/login/src/app/layout.tsx
index ddf4edb30a6..701409fd0f0 100644
--- a/apps/login/src/app/layout.tsx
+++ b/apps/login/src/app/layout.tsx
@@ -1,10 +1,12 @@
 import "@/styles/globals.scss";
-import { AddressBar } from "@/ui/AddressBar";
-import { GlobalNav } from "@/ui/GlobalNav";
-import Theme from "@/ui/Theme";
-import ThemeProvider from "@/ui/ThemeProvider";
+
+import { AddressBar } from "@/components/address-bar";
+import { GlobalNav } from "@/components/global-nav";
+import { Theme } from "@/components/theme";
+import { ThemeProvider } from "@/components/theme-provider";
 import { Analytics } from "@vercel/analytics/react";
 import { Lato } from "next/font/google";
+import { ReactNode } from "react";
 
 const lato = Lato({
   weight: ["400", "700", "900"],
@@ -16,7 +18,7 @@ export const revalidate = 60; // revalidate every minute
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   // later only shown with dev mode enabled
   const showNav = process.env.DEBUG === "true";
diff --git a/apps/login/src/app/login/route.ts b/apps/login/src/app/login/route.ts
index 50460254464..af8a74f54cf 100644
--- a/apps/login/src/app/login/route.ts
+++ b/apps/login/src/app/login/route.ts
@@ -1,12 +1,3 @@
-import {
-  CreateCallbackRequestSchema,
-  SessionSchema,
-} from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
-
-export const dynamic = "force-dynamic";
-export const revalidate = false;
-export const fetchCache = "default-no-store";
-
 import { getAllSessions } from "@/lib/cookies";
 import { idpTypeToSlug } from "@/lib/idp";
 import {
@@ -22,9 +13,17 @@ import {
   AuthRequest,
   Prompt,
 } from "@zitadel/proto/zitadel/oidc/v2/authorization_pb";
+import {
+  CreateCallbackRequestSchema,
+  SessionSchema,
+} from "@zitadel/proto/zitadel/oidc/v2/oidc_service_pb";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { NextRequest, NextResponse } from "next/server";
 
+export const dynamic = "force-dynamic";
+export const revalidate = false;
+export const fetchCache = "default-no-store";
+
 async function loadSessions(ids: string[]): Promise<Session[]> {
   const response = await listSessions(
     ids.filter((id: string | undefined) => !!id),
diff --git a/apps/login/src/ui/AddressBar.tsx b/apps/login/src/components/address-bar.tsx
similarity index 93%
rename from apps/login/src/ui/AddressBar.tsx
rename to apps/login/src/components/address-bar.tsx
index e749bcb67a6..7e7bda6bd05 100644
--- a/apps/login/src/ui/AddressBar.tsx
+++ b/apps/login/src/components/address-bar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import React from "react";
+import { Fragment } from "react";
 
 type Props = {
   domain: string;
@@ -39,7 +39,7 @@ export function AddressBar({ domain }: Props) {
               .filter((s) => !!s)
               .map((segment) => {
                 return (
-                  <React.Fragment key={segment}>
+                  <Fragment key={segment}>
                     <span>
                       <span
                         key={segment}
@@ -50,7 +50,7 @@ export function AddressBar({ domain }: Props) {
                     </span>
 
                     <span className="text-gray-600">/</span>
-                  </React.Fragment>
+                  </Fragment>
                 );
               })}
           </>
diff --git a/apps/login/src/ui/Alert.tsx b/apps/login/src/components/alert.tsx
similarity index 88%
rename from apps/login/src/ui/Alert.tsx
rename to apps/login/src/components/alert.tsx
index b6a093bab02..417e67934eb 100644
--- a/apps/login/src/ui/Alert.tsx
+++ b/apps/login/src/components/alert.tsx
@@ -2,10 +2,11 @@ import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
-import clsx from "clsx";
+import { clsx } from "clsx";
+import { ReactNode } from "react";
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
   type?: AlertType;
 };
 
@@ -21,7 +22,7 @@ const red =
 const neutral =
   "border-divider-light dark:border-divider-dark bg-black/5 text-gray-600 dark:bg-white/10 dark:text-gray-200";
 
-export default function Alert({ children, type = AlertType.ALERT }: Props) {
+export function Alert({ children, type = AlertType.ALERT }: Props) {
   return (
     <div
       className={clsx(
diff --git a/apps/login/src/ui/AuthMethods.tsx b/apps/login/src/components/auth-methods.tsx
similarity index 98%
rename from apps/login/src/ui/AuthMethods.tsx
rename to apps/login/src/components/auth-methods.tsx
index 1ace9b8a2bf..de40ab615b5 100644
--- a/apps/login/src/ui/AuthMethods.tsx
+++ b/apps/login/src/components/auth-methods.tsx
@@ -1,8 +1,8 @@
 import { CheckIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { ReactNode } from "react";
-import { BadgeState, StateBadge } from "./StateBadge";
+import { BadgeState, StateBadge } from "./state-badge";
 
 const cardClasses = (alreadyAdded: boolean) =>
   clsx(
diff --git a/apps/login/src/ui/AuthenticationMethodRadio.tsx b/apps/login/src/components/authentication-method-radio.tsx
similarity index 98%
rename from apps/login/src/ui/AuthenticationMethodRadio.tsx
rename to apps/login/src/components/authentication-method-radio.tsx
index 1eb12ce6685..d5c52068ec7 100644
--- a/apps/login/src/ui/AuthenticationMethodRadio.tsx
+++ b/apps/login/src/components/authentication-method-radio.tsx
@@ -13,7 +13,7 @@ export const methods = [
   },
 ];
 
-export default function AuthenticationMethodRadio({
+export function AuthenticationMethodRadio({
   selected,
   selectionChanged,
 }: {
diff --git a/apps/login/src/ui/Avatar.tsx b/apps/login/src/components/avatar.tsx
similarity index 97%
rename from apps/login/src/ui/Avatar.tsx
rename to apps/login/src/components/avatar.tsx
index e42e6017af7..3f340e09b70 100644
--- a/apps/login/src/ui/Avatar.tsx
+++ b/apps/login/src/components/avatar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ColorShade, getColorHash } from "@/utils/colors";
+import { ColorShade, getColorHash } from "@/helpers/colors";
 import { useTheme } from "next-themes";
 import Image from "next/image";
 
diff --git a/apps/login/src/ui/BackButton.tsx b/apps/login/src/components/back-button.tsx
similarity index 73%
rename from apps/login/src/ui/BackButton.tsx
rename to apps/login/src/components/back-button.tsx
index b2f04ad5844..5697877bd58 100644
--- a/apps/login/src/ui/BackButton.tsx
+++ b/apps/login/src/components/back-button.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { Button, ButtonVariants } from "./Button";
+import { Button, ButtonVariants } from "./button";
 
-export default function BackButton() {
+export function BackButton() {
   const router = useRouter();
   return (
     <Button
diff --git a/apps/login/src/ui/Boundary.tsx b/apps/login/src/components/boundary.tsx
similarity index 95%
rename from apps/login/src/ui/Boundary.tsx
rename to apps/login/src/components/boundary.tsx
index ef06be3fdf3..354d9209607 100644
--- a/apps/login/src/ui/Boundary.tsx
+++ b/apps/login/src/components/boundary.tsx
@@ -1,12 +1,12 @@
-import clsx from "clsx";
-import React from "react";
+import { clsx } from "clsx";
+import { ReactNode } from "react";
 
 const Label = ({
   children,
   animateRerendering,
   color,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   animateRerendering?: boolean;
   color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";
 }) => {
@@ -34,7 +34,7 @@ export const Boundary = ({
   color = "default",
   animateRerendering = true,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   labels?: string[];
   size?: "small" | "default";
   color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange" | "red";
diff --git a/apps/login/src/ui/Button.tsx b/apps/login/src/components/button.tsx
similarity index 99%
rename from apps/login/src/ui/Button.tsx
rename to apps/login/src/components/button.tsx
index 1f1d2061b63..a25a30538a4 100644
--- a/apps/login/src/ui/Button.tsx
+++ b/apps/login/src/components/button.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from "react";
 
 export enum ButtonSizes {
diff --git a/apps/login/src/ui/ChangePasswordForm.tsx b/apps/login/src/components/change-password-form.tsx
similarity index 92%
rename from apps/login/src/ui/ChangePasswordForm.tsx
rename to apps/login/src/components/change-password-form.tsx
index 56bb123ecfb..317a377afa8 100644
--- a/apps/login/src/ui/ChangePasswordForm.tsx
+++ b/apps/login/src/components/change-password-form.tsx
@@ -1,22 +1,22 @@
 "use client";
 
-import { setPassword } from "@/lib/self";
 import {
   lowerCaseValidator,
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
+import { setPassword } from "@/lib/self";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import PasswordComplexity from "./PasswordComplexity";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { PasswordComplexity } from "./password-complexity";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -31,7 +31,7 @@ type Props = {
   sessionId: string;
 };
 
-export default function ChangePasswordForm({
+export function ChangePasswordForm({
   passwordComplexitySettings,
   userId,
   sessionId,
diff --git a/apps/login/src/ui/Checkbox.tsx b/apps/login/src/components/checkbox.tsx
similarity index 100%
rename from apps/login/src/ui/Checkbox.tsx
rename to apps/login/src/components/checkbox.tsx
diff --git a/apps/login/src/ui/ChooseSecondFactorToSetup.tsx b/apps/login/src/components/choose-second-factor-to-setup.tsx
similarity index 95%
rename from apps/login/src/ui/ChooseSecondFactorToSetup.tsx
rename to apps/login/src/components/choose-second-factor-to-setup.tsx
index eb1b47806ee..1502d555a77 100644
--- a/apps/login/src/ui/ChooseSecondFactorToSetup.tsx
+++ b/apps/login/src/components/choose-second-factor-to-setup.tsx
@@ -5,7 +5,7 @@ import {
   SecondFactorType,
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
+import { EMAIL, SMS, TOTP, U2F } from "./auth-methods";
 
 type Props = {
   loginName?: string;
@@ -19,7 +19,7 @@ type Props = {
   emailVerified: boolean;
 };
 
-export default function ChooseSecondFactorToSetup({
+export function ChooseSecondFactorToSetup({
   loginName,
   sessionId,
   authRequestId,
diff --git a/apps/login/src/ui/ChooseSecondFactor.tsx b/apps/login/src/components/choose-second-factor.tsx
similarity index 93%
rename from apps/login/src/ui/ChooseSecondFactor.tsx
rename to apps/login/src/components/choose-second-factor.tsx
index 26aab1b6afc..3acf3e2214c 100644
--- a/apps/login/src/ui/ChooseSecondFactor.tsx
+++ b/apps/login/src/components/choose-second-factor.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
-import { EMAIL, SMS, TOTP, U2F } from "./AuthMethods";
+import { EMAIL, SMS, TOTP, U2F } from "./auth-methods";
 
 type Props = {
   loginName?: string;
@@ -11,7 +11,7 @@ type Props = {
   userMethods: AuthenticationMethodType[];
 };
 
-export default function ChooseSecondFactor({
+export function ChooseSecondFactor({
   loginName,
   sessionId,
   authRequestId,
diff --git a/apps/login/src/ui/CopyToClipboard.tsx b/apps/login/src/components/copy-to-clipboard.tsx
similarity index 93%
rename from apps/login/src/ui/CopyToClipboard.tsx
rename to apps/login/src/components/copy-to-clipboard.tsx
index b77cbdd3ac3..cf0dedc0603 100644
--- a/apps/login/src/ui/CopyToClipboard.tsx
+++ b/apps/login/src/components/copy-to-clipboard.tsx
@@ -11,7 +11,7 @@ type Props = {
   value: string;
 };
 
-export default function CopyToClipboard({ value }: Props) {
+export function CopyToClipboard({ value }: Props) {
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {
diff --git a/apps/login/src/ui/DefaultTags.tsx b/apps/login/src/components/default-tags.tsx
similarity index 100%
rename from apps/login/src/ui/DefaultTags.tsx
rename to apps/login/src/components/default-tags.tsx
diff --git a/apps/login/src/ui/DynamicTheme.tsx b/apps/login/src/components/dynamic-theme.tsx
similarity index 85%
rename from apps/login/src/ui/DynamicTheme.tsx
rename to apps/login/src/components/dynamic-theme.tsx
index bc98d2bbcb7..eb3944b12cb 100644
--- a/apps/login/src/ui/DynamicTheme.tsx
+++ b/apps/login/src/components/dynamic-theme.tsx
@@ -1,15 +1,15 @@
 "use client";
 
-import { Logo } from "@/ui/Logo";
+import { Logo } from "@/components/logo";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
-import React from "react";
-import ThemeWrapper from "./ThemeWrapper";
+import { ReactNode } from "react";
+import { ThemeWrapper } from "./theme-wrapper";
 
-export default function DynamicTheme({
+export function DynamicTheme({
   branding,
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   branding?: BrandingSettings;
 }) {
   return (
diff --git a/apps/login/src/ui/ExternalLink.tsx b/apps/login/src/components/external-link.tsx
similarity index 87%
rename from apps/login/src/ui/ExternalLink.tsx
rename to apps/login/src/components/external-link.tsx
index 0734aff95eb..a52164d35dc 100644
--- a/apps/login/src/ui/ExternalLink.tsx
+++ b/apps/login/src/components/external-link.tsx
@@ -1,10 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import { ReactNode } from "react";
 
 export const ExternalLink = ({
   children,
   href,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   href: string;
 }) => {
   return (
diff --git a/apps/login/src/ui/GlobalNav.tsx b/apps/login/src/components/global-nav.tsx
similarity index 96%
rename from apps/login/src/ui/GlobalNav.tsx
rename to apps/login/src/components/global-nav.tsx
index 69a976f349a..eab2af91a64 100644
--- a/apps/login/src/ui/GlobalNav.tsx
+++ b/apps/login/src/components/global-nav.tsx
@@ -1,13 +1,13 @@
 "use client";
 
+import { ZitadelLogo } from "@/components/zitadel-logo";
 import { demos, type Item } from "@/lib/demos";
-import { ZitadelLogo } from "@/ui/ZitadelLogo";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { usePathname, useSelectedLayoutSegment } from "next/navigation";
 import { useState } from "react";
-import Theme from "./Theme";
+import { Theme } from "./theme";
 
 export function GlobalNav() {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/apps/login/src/ui/IdpSignin.tsx b/apps/login/src/components/idp-signin.tsx
similarity index 94%
rename from apps/login/src/ui/IdpSignin.tsx
rename to apps/login/src/components/idp-signin.tsx
index e186d1c681e..099748cc15d 100644
--- a/apps/login/src/ui/IdpSignin.tsx
+++ b/apps/login/src/components/idp-signin.tsx
@@ -3,8 +3,8 @@
 import { createNewSession } from "@/lib/server/session";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import Alert from "./Alert";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { Spinner } from "./spinner";
 
 type Props = {
   userId: string;
@@ -16,7 +16,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function IdpSignin({
+export function IdpSignin({
   userId,
   idpIntent: { idpIntentId, idpIntentToken },
   authRequestId,
diff --git a/apps/login/src/ui/idps/classes.tsx b/apps/login/src/components/idps/classes.tsx
similarity index 86%
rename from apps/login/src/ui/idps/classes.tsx
rename to apps/login/src/components/idps/classes.tsx
index f0bf32c1ed3..183e4dbd656 100644
--- a/apps/login/src/ui/idps/classes.tsx
+++ b/apps/login/src/components/idps/classes.tsx
@@ -1,10 +1,10 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode } from "react";
 
 export const IdpButtonClasses =
   "transition-all w-full cursor-pointer flex flex-row items-center bg-background-light-400 text-text-light-500 dark:bg-background-dark-500 dark:text-text-dark-500 border border-divider-light hover:border-black dark:border-divider-dark hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500 outline-none rounded-md px-4 text-sm";
 
 export interface SignInWithIDPProps {
-  children?: React.ReactNode;
+  children?: ReactNode;
   orgId?: string;
 }
 
diff --git a/apps/login/src/ui/idps/SignInWithApple.tsx b/apps/login/src/components/idps/sign-in-with-apple.tsx
similarity index 100%
rename from apps/login/src/ui/idps/SignInWithApple.tsx
rename to apps/login/src/components/idps/sign-in-with-apple.tsx
diff --git a/apps/login/src/ui/idps/SignInWithAzureAD.tsx b/apps/login/src/components/idps/sign-in-with-azure-ad.tsx
similarity index 91%
rename from apps/login/src/ui/idps/SignInWithAzureAD.tsx
rename to apps/login/src/components/idps/sign-in-with-azure-ad.tsx
index 38f1b55b109..51d8a47db81 100644
--- a/apps/login/src/ui/idps/SignInWithAzureAD.tsx
+++ b/apps/login/src/components/idps/sign-in-with-azure-ad.tsx
@@ -3,7 +3,7 @@
 import { ReactNode, forwardRef } from "react";
 import { IdpButtonClasses, SignInWithIdentityProviderProps } from "./classes";
 
-export const SignInWithAzureAD = forwardRef<
+export const SignInWithAzureAd = forwardRef<
   HTMLButtonElement,
   SignInWithIdentityProviderProps
 >(
@@ -37,4 +37,4 @@ export const SignInWithAzureAD = forwardRef<
   ),
 );
 
-SignInWithAzureAD.displayName = "SignInWithAzureAD";
+SignInWithAzureAd.displayName = "SignInWithAzureAD";
diff --git a/apps/login/src/ui/idps/SignInWithGeneric.tsx b/apps/login/src/components/idps/sign-in-with-generic.tsx
similarity index 100%
rename from apps/login/src/ui/idps/SignInWithGeneric.tsx
rename to apps/login/src/components/idps/sign-in-with-generic.tsx
diff --git a/apps/login/src/ui/idps/SignInWithGithub.tsx b/apps/login/src/components/idps/sign-in-with-github.tsx
similarity index 100%
rename from apps/login/src/ui/idps/SignInWithGithub.tsx
rename to apps/login/src/components/idps/sign-in-with-github.tsx
diff --git a/apps/login/src/ui/idps/SignInWithGitlab.test.tsx b/apps/login/src/components/idps/sign-in-with-gitlab.test.tsx
similarity index 92%
rename from apps/login/src/ui/idps/SignInWithGitlab.test.tsx
rename to apps/login/src/components/idps/sign-in-with-gitlab.test.tsx
index c24caa84f3a..302251ace21 100644
--- a/apps/login/src/ui/idps/SignInWithGitlab.test.tsx
+++ b/apps/login/src/components/idps/sign-in-with-gitlab.test.tsx
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from "vitest";
 
 import { cleanup, render, screen } from "@testing-library/react";
-import { SignInWithGitlab } from "./SignInWithGitlab";
+import { SignInWithGitlab } from "./sign-in-with-gitlab";
 
 afterEach(cleanup);
 
diff --git a/apps/login/src/ui/idps/SignInWithGitlab.tsx b/apps/login/src/components/idps/sign-in-with-gitlab.tsx
similarity index 100%
rename from apps/login/src/ui/idps/SignInWithGitlab.tsx
rename to apps/login/src/components/idps/sign-in-with-gitlab.tsx
diff --git a/apps/login/src/ui/idps/SignInWithGoogle.test.tsx b/apps/login/src/components/idps/sign-in-with-google.test.tsx
similarity index 92%
rename from apps/login/src/ui/idps/SignInWithGoogle.test.tsx
rename to apps/login/src/components/idps/sign-in-with-google.test.tsx
index d485a1e8389..b67dc004e2c 100644
--- a/apps/login/src/ui/idps/SignInWithGoogle.test.tsx
+++ b/apps/login/src/components/idps/sign-in-with-google.test.tsx
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from "vitest";
 
 import { cleanup, render, screen } from "@testing-library/react";
-import { SignInWithGoogle } from "./SignInWithGoogle";
+import { SignInWithGoogle } from "./sign-in-with-google";
 
 afterEach(cleanup);
 
diff --git a/apps/login/src/ui/idps/SignInWithGoogle.tsx b/apps/login/src/components/idps/sign-in-with-google.tsx
similarity index 100%
rename from apps/login/src/ui/idps/SignInWithGoogle.tsx
rename to apps/login/src/components/idps/sign-in-with-google.tsx
diff --git a/apps/login/src/ui/Input.tsx b/apps/login/src/components/input.tsx
similarity index 99%
rename from apps/login/src/ui/Input.tsx
rename to apps/login/src/components/input.tsx
index 1af7198995f..f1c88a2deeb 100644
--- a/apps/login/src/ui/Input.tsx
+++ b/apps/login/src/components/input.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import {
   ChangeEvent,
   DetailedHTMLProps,
diff --git a/apps/login/src/ui/LayoutProviders.tsx b/apps/login/src/components/layout-providers.tsx
similarity index 84%
rename from apps/login/src/ui/LayoutProviders.tsx
rename to apps/login/src/components/layout-providers.tsx
index 319ba1ef89e..fee93d015e0 100644
--- a/apps/login/src/ui/LayoutProviders.tsx
+++ b/apps/login/src/components/layout-providers.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { ReactNode } from "react";
 
 type Props = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export function LayoutProviders({ children }: Props) {
diff --git a/apps/login/src/ui/LoginOTP.tsx b/apps/login/src/components/login-otp.tsx
similarity index 96%
rename from apps/login/src/ui/LoginOTP.tsx
rename to apps/login/src/components/login-otp.tsx
index f8b00748098..5f113907395 100644
--- a/apps/login/src/ui/LoginOTP.tsx
+++ b/apps/login/src/components/login-otp.tsx
@@ -7,11 +7,11 @@ import { ChecksSchema } from "@zitadel/proto/zitadel/session/v2/session_service_
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert, { AlertType } from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { Spinner } from "./Spinner";
+import { Alert, AlertType } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -27,7 +27,7 @@ type Inputs = {
   code: string;
 };
 
-export default function LoginOTP({
+export function LoginOTP({
   loginName,
   sessionId,
   authRequestId,
diff --git a/apps/login/src/ui/LoginPasskey.tsx b/apps/login/src/components/login-passkey.tsx
similarity index 96%
rename from apps/login/src/ui/LoginPasskey.tsx
rename to apps/login/src/components/login-passkey.tsx
index 77cb47a2211..b1ee32c4bb7 100644
--- a/apps/login/src/ui/LoginPasskey.tsx
+++ b/apps/login/src/components/login-passkey.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { updateSession } from "@/lib/server/session";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { create } from "@zitadel/client";
 import {
   RequestChallengesSchema,
@@ -10,10 +10,10 @@ import {
 import { Checks } from "@zitadel/proto/zitadel/session/v2/session_service_pb";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { Spinner } from "./spinner";
 
 // either loginName or sessionId must be provided
 type Props = {
@@ -25,7 +25,7 @@ type Props = {
   organization?: string;
 };
 
-export default function LoginPasskey({
+export function LoginPasskey({
   loginName,
   sessionId,
   authRequestId,
diff --git a/apps/login/src/ui/Logo.tsx b/apps/login/src/components/logo.tsx
similarity index 100%
rename from apps/login/src/ui/Logo.tsx
rename to apps/login/src/components/logo.tsx
diff --git a/apps/login/src/ui/MobileNavToggle.tsx b/apps/login/src/components/mobile-nav-toggle.tsx
similarity index 75%
rename from apps/login/src/ui/MobileNavToggle.tsx
rename to apps/login/src/components/mobile-nav-toggle.tsx
index fe9290b9e3e..e288237ee15 100644
--- a/apps/login/src/ui/MobileNavToggle.tsx
+++ b/apps/login/src/components/mobile-nav-toggle.tsx
@@ -1,19 +1,26 @@
 "use client";
 
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
-import React from "react";
+import { clsx } from "clsx";
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useState,
+} from "react";
 
-const MobileNavContext = React.createContext<
-  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
+const MobileNavContext = createContext<
+  [boolean, Dispatch<SetStateAction<boolean>>] | undefined
 >(undefined);
 
 export function MobileNavContextProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <MobileNavContext.Provider value={[isOpen, setIsOpen]}>
       {children}
@@ -22,7 +29,7 @@ export function MobileNavContextProvider({
 }
 
 export function useMobileNavToggle() {
-  const context = React.useContext(MobileNavContext);
+  const context = useContext(MobileNavContext);
   if (context === undefined) {
     throw new Error(
       "useMobileNavToggle must be used within a MobileNavContextProvider",
@@ -31,7 +38,7 @@ export function useMobileNavToggle() {
   return context;
 }
 
-export function MobileNavToggle({ children }: { children: React.ReactNode }) {
+export function MobileNavToggle({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useMobileNavToggle();
 
   return (
diff --git a/apps/login/src/ui/PasswordComplexity.test.tsx b/apps/login/src/components/password-complexity.test.tsx
similarity index 97%
rename from apps/login/src/ui/PasswordComplexity.test.tsx
rename to apps/login/src/components/password-complexity.test.tsx
index 7c014704470..090c95d3978 100644
--- a/apps/login/src/ui/PasswordComplexity.test.tsx
+++ b/apps/login/src/components/password-complexity.test.tsx
@@ -6,7 +6,7 @@ import {
   within,
 } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import PasswordComplexity from "./PasswordComplexity";
+import { PasswordComplexity } from "./password-complexity";
 
 const matchesTitle = `Matches`;
 const doesntMatchTitle = `Doesn't match`;
diff --git a/apps/login/src/ui/PasswordComplexity.tsx b/apps/login/src/components/password-complexity.tsx
similarity index 97%
rename from apps/login/src/ui/PasswordComplexity.tsx
rename to apps/login/src/components/password-complexity.tsx
index 3f69e5757a1..617aefda3b1 100644
--- a/apps/login/src/ui/PasswordComplexity.tsx
+++ b/apps/login/src/components/password-complexity.tsx
@@ -3,7 +3,7 @@ import {
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 
 type Props = {
@@ -51,7 +51,7 @@ const cross = (
 const desc =
   "text-14px leading-4 text-input-light-label dark:text-input-dark-label";
 
-export default function PasswordComplexity({
+export function PasswordComplexity({
   passwordComplexitySettings,
   password,
   equals,
diff --git a/apps/login/src/ui/PasswordForm.tsx b/apps/login/src/components/password-form.tsx
similarity index 96%
rename from apps/login/src/ui/PasswordForm.tsx
rename to apps/login/src/components/password-form.tsx
index 9c76561f25b..0aacd0a6a10 100644
--- a/apps/login/src/ui/PasswordForm.tsx
+++ b/apps/login/src/components/password-form.tsx
@@ -8,11 +8,11 @@ import { AuthenticationMethodType } from "@zitadel/proto/zitadel/user/v2/user_se
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert, { AlertType } from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { Spinner } from "./Spinner";
+import { Alert, AlertType } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   password: string;
@@ -27,7 +27,7 @@ type Props = {
   promptPasswordless?: boolean;
 };
 
-export default function PasswordForm({
+export function PasswordForm({
   loginSettings,
   loginName,
   organization,
diff --git a/apps/login/src/ui/PrivacyPolicyCheckboxes.tsx b/apps/login/src/components/privacy-policy-checkboxes.tsx
similarity index 98%
rename from apps/login/src/ui/PrivacyPolicyCheckboxes.tsx
rename to apps/login/src/components/privacy-policy-checkboxes.tsx
index 6f2bf62c06d..77ae92a90bc 100644
--- a/apps/login/src/ui/PrivacyPolicyCheckboxes.tsx
+++ b/apps/login/src/components/privacy-policy-checkboxes.tsx
@@ -2,7 +2,7 @@
 import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/legal_settings_pb";
 import Link from "next/link";
 import { useState } from "react";
-import { Checkbox } from "./Checkbox";
+import { Checkbox } from "./checkbox";
 
 type Props = {
   legal: LegalAndSupportSettings;
diff --git a/apps/login/src/ui/RegisterFormWithoutPassword.tsx b/apps/login/src/components/register-form-without-password.tsx
similarity index 92%
rename from apps/login/src/ui/RegisterFormWithoutPassword.tsx
rename to apps/login/src/components/register-form-without-password.tsx
index 66c3c34045a..517fe06ec53 100644
--- a/apps/login/src/ui/RegisterFormWithoutPassword.tsx
+++ b/apps/login/src/components/register-form-without-password.tsx
@@ -5,15 +5,16 @@ import { LegalAndSupportSettings } from "@zitadel/proto/zitadel/settings/v2/lega
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
-import AuthenticationMethodRadio, {
+import { Alert } from "./alert";
+import {
+  AuthenticationMethodRadio,
   methods,
-} from "./AuthenticationMethodRadio";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { PrivacyPolicyCheckboxes } from "./PrivacyPolicyCheckboxes";
-import { Spinner } from "./Spinner";
+} from "./authentication-method-radio";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { PrivacyPolicyCheckboxes } from "./privacy-policy-checkboxes";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -32,7 +33,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function RegisterFormWithoutPassword({
+export function RegisterFormWithoutPassword({
   legal,
   email,
   firstname,
diff --git a/apps/login/src/ui/RegisterPasskey.tsx b/apps/login/src/components/register-passkey.tsx
similarity index 94%
rename from apps/login/src/ui/RegisterPasskey.tsx
rename to apps/login/src/components/register-passkey.tsx
index afa6c3651b4..18684c23e80 100644
--- a/apps/login/src/ui/RegisterPasskey.tsx
+++ b/apps/login/src/components/register-passkey.tsx
@@ -1,14 +1,14 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { registerPasskeyLink, verifyPasskey } from "@/lib/server/passkeys";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { Spinner } from "./spinner";
 
 type Inputs = {};
 
@@ -19,7 +19,7 @@ type Props = {
   organization?: string;
 };
 
-export default function RegisterPasskey({
+export function RegisterPasskey({
   sessionId,
   isPrompt,
   organization,
diff --git a/apps/login/src/ui/RegisterU2F.tsx b/apps/login/src/components/register-u2f.tsx
similarity index 95%
rename from apps/login/src/ui/RegisterU2F.tsx
rename to apps/login/src/components/register-u2f.tsx
index 1eaa314dfaa..77b54fd855b 100644
--- a/apps/login/src/ui/RegisterU2F.tsx
+++ b/apps/login/src/components/register-u2f.tsx
@@ -1,14 +1,14 @@
 "use client";
 
+import { coerceToArrayBuffer, coerceToBase64Url } from "@/helpers/base64";
 import { addU2F, verifyU2F } from "@/lib/server/u2f";
-import { coerceToArrayBuffer, coerceToBase64Url } from "@/utils/base64";
 import { RegisterU2FResponse } from "@zitadel/proto/zitadel/user/v2/user_service_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { Spinner } from "./spinner";
 
 type Props = {
   loginName?: string;
@@ -18,7 +18,7 @@ type Props = {
   checkAfter: boolean;
 };
 
-export default function RegisterU2F({
+export function RegisterU2f({
   loginName,
   sessionId,
   organization,
diff --git a/apps/login/src/ui/SelfServiceMenu.tsx b/apps/login/src/components/self-service-menu.tsx
similarity index 92%
rename from apps/login/src/ui/SelfServiceMenu.tsx
rename to apps/login/src/components/self-service-menu.tsx
index 308ee05a351..449c1dda1fe 100644
--- a/apps/login/src/ui/SelfServiceMenu.tsx
+++ b/apps/login/src/components/self-service-menu.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-export default function SelfServiceMenu({ sessionId }: { sessionId: string }) {
+export function SelfServiceMenu({ sessionId }: { sessionId: string }) {
   const list: any[] = [];
 
   // if (!!config.selfservice.change_password.enabled) {
diff --git a/apps/login/src/ui/SessionItem.tsx b/apps/login/src/components/session-item.tsx
similarity index 98%
rename from apps/login/src/ui/SessionItem.tsx
rename to apps/login/src/components/session-item.tsx
index 9bd08f922a0..a2abfd897a6 100644
--- a/apps/login/src/ui/SessionItem.tsx
+++ b/apps/login/src/components/session-item.tsx
@@ -7,7 +7,7 @@ import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import moment from "moment";
 import Link from "next/link";
 import { useState } from "react";
-import { Avatar } from "./Avatar";
+import { Avatar } from "./avatar";
 
 export function isSessionValid(session: Partial<Session>): {
   valid: boolean;
@@ -25,7 +25,7 @@ export function isSessionValid(session: Partial<Session>): {
   return { valid, verifiedAt };
 }
 
-export default function SessionItem({
+export function SessionItem({
   session,
   reload,
   authRequestId,
diff --git a/apps/login/src/ui/SessionsList.tsx b/apps/login/src/components/sessions-list.tsx
similarity index 84%
rename from apps/login/src/ui/SessionsList.tsx
rename to apps/login/src/components/sessions-list.tsx
index f1923256c4f..a1a971fc9ca 100644
--- a/apps/login/src/ui/SessionsList.tsx
+++ b/apps/login/src/components/sessions-list.tsx
@@ -2,15 +2,15 @@
 
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { useState } from "react";
-import Alert from "./Alert";
-import SessionItem from "./SessionItem";
+import { Alert } from "./alert";
+import { SessionItem } from "./session-item";
 
 type Props = {
   sessions: Session[];
   authRequestId?: string;
 };
 
-export default function SessionsList({ sessions, authRequestId }: Props) {
+export function SessionsList({ sessions, authRequestId }: Props) {
   const [list, setList] = useState<Session[]>(sessions);
   return sessions ? (
     <div className="flex flex-col space-y-2">
diff --git a/apps/login/src/ui/SetPasswordForm.tsx b/apps/login/src/components/set-password-form.tsx
similarity index 94%
rename from apps/login/src/ui/SetPasswordForm.tsx
rename to apps/login/src/components/set-password-form.tsx
index 84dce18a312..e2717192310 100644
--- a/apps/login/src/ui/SetPasswordForm.tsx
+++ b/apps/login/src/components/set-password-form.tsx
@@ -1,22 +1,22 @@
 "use client";
 
-import { registerUser, RegisterUserResponse } from "@/lib/server/register";
 import {
   lowerCaseValidator,
   numberValidator,
   symbolValidator,
   upperCaseValidator,
-} from "@/utils/validators";
+} from "@/helpers/validators";
+import { registerUser, RegisterUserResponse } from "@/lib/server/register";
 import { PasswordComplexitySettings } from "@zitadel/proto/zitadel/settings/v2/password_settings_pb";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FieldValues, useForm } from "react-hook-form";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import PasswordComplexity from "./PasswordComplexity";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { PasswordComplexity } from "./password-complexity";
+import { Spinner } from "./spinner";
 
 type Inputs =
   | {
@@ -34,7 +34,7 @@ type Props = {
   authRequestId?: string;
 };
 
-export default function SetPasswordForm({
+export function SetPasswordForm({
   passwordComplexitySettings,
   email,
   firstname,
diff --git a/apps/login/src/ui/SignInWithIDP.tsx b/apps/login/src/components/sign-in-with-idp.tsx
similarity index 90%
rename from apps/login/src/ui/SignInWithIDP.tsx
rename to apps/login/src/components/sign-in-with-idp.tsx
index c279ee36046..df5b13afe4f 100644
--- a/apps/login/src/ui/SignInWithIDP.tsx
+++ b/apps/login/src/components/sign-in-with-idp.tsx
@@ -8,13 +8,13 @@ import {
 } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useRouter } from "next/navigation";
 import { ReactNode, useState } from "react";
-import Alert from "./Alert";
-import { SignInWithApple } from "./idps/SignInWithApple";
-import { SignInWithAzureAD } from "./idps/SignInWithAzureAD";
-import { SignInWithGeneric } from "./idps/SignInWithGeneric";
-import { SignInWithGithub } from "./idps/SignInWithGithub";
-import { SignInWithGitlab } from "./idps/SignInWithGitlab";
-import { SignInWithGoogle } from "./idps/SignInWithGoogle";
+import { Alert } from "./alert";
+import { SignInWithApple } from "./idps/sign-in-with-apple";
+import { SignInWithAzureAd } from "./idps/sign-in-with-azure-ad";
+import { SignInWithGeneric } from "./idps/sign-in-with-generic";
+import { SignInWithGithub } from "./idps/sign-in-with-github";
+import { SignInWithGitlab } from "./idps/sign-in-with-gitlab";
+import { SignInWithGoogle } from "./idps/sign-in-with-google";
 
 export interface SignInWithIDPProps {
   children?: ReactNode;
@@ -24,7 +24,7 @@ export interface SignInWithIDPProps {
   organization?: string;
 }
 
-export function SignInWithIDP({
+export function SignInWithIdp({
   host,
   identityProviders,
   authRequestId,
@@ -130,13 +130,13 @@ export function SignInWithIDP({
               );
             case IdentityProviderType.AZURE_AD:
               return (
-                <SignInWithAzureAD
+                <SignInWithAzureAd
                   key={`idp-${i}`}
                   name={idp.name}
                   onClick={() =>
                     navigateToAuthUrl(idp.id, IdentityProviderType.AZURE_AD)
                   }
-                ></SignInWithAzureAD>
+                ></SignInWithAzureAd>
               );
             case IdentityProviderType.GOOGLE:
               return (
@@ -185,4 +185,4 @@ export function SignInWithIDP({
   );
 }
 
-SignInWithIDP.displayName = "SignInWithIDP";
+SignInWithIdp.displayName = "SignInWithIDP";
diff --git a/apps/login/src/ui/SkeletonCard.tsx b/apps/login/src/components/skeleton-card.tsx
similarity index 95%
rename from apps/login/src/ui/SkeletonCard.tsx
rename to apps/login/src/components/skeleton-card.tsx
index fe40f40830c..80b3793e8f1 100644
--- a/apps/login/src/ui/SkeletonCard.tsx
+++ b/apps/login/src/components/skeleton-card.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 
 export const SkeletonCard = ({ isLoading }: { isLoading?: boolean }) => (
   <div
diff --git a/apps/login/src/ui/Spinner.tsx b/apps/login/src/components/spinner.tsx
similarity index 100%
rename from apps/login/src/ui/Spinner.tsx
rename to apps/login/src/components/spinner.tsx
diff --git a/apps/login/src/ui/StateBadge.tsx b/apps/login/src/components/state-badge.tsx
similarity index 98%
rename from apps/login/src/ui/StateBadge.tsx
rename to apps/login/src/components/state-badge.tsx
index d5b862bfa82..00151390bf4 100644
--- a/apps/login/src/ui/StateBadge.tsx
+++ b/apps/login/src/components/state-badge.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { ReactNode } from "react";
 
 export enum BadgeState {
diff --git a/apps/login/src/ui/TabGroup.tsx b/apps/login/src/components/tab-group.tsx
similarity index 89%
rename from apps/login/src/ui/TabGroup.tsx
rename to apps/login/src/components/tab-group.tsx
index 9afd6927f69..afa625d3459 100644
--- a/apps/login/src/ui/TabGroup.tsx
+++ b/apps/login/src/components/tab-group.tsx
@@ -1,4 +1,4 @@
-import { Tab } from "@/ui/Tab";
+import { Tab } from "@/components/tab";
 
 export type Item = {
   text: string;
diff --git a/apps/login/src/ui/Tab.tsx b/apps/login/src/components/tab.tsx
similarity index 90%
rename from apps/login/src/ui/Tab.tsx
rename to apps/login/src/components/tab.tsx
index 48980cb28f7..bd82931b5a9 100644
--- a/apps/login/src/ui/Tab.tsx
+++ b/apps/login/src/components/tab.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import type { Item } from "@/ui/TabGroup";
-import clsx from "clsx";
+import type { Item } from "@/components/tab-group";
+import { clsx } from "clsx";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
 
diff --git a/apps/login/src/ui/ThemeProvider.tsx b/apps/login/src/components/theme-provider.tsx
similarity index 78%
rename from apps/login/src/ui/ThemeProvider.tsx
rename to apps/login/src/components/theme-provider.tsx
index ab5eeea64fb..a8a72f86a6c 100644
--- a/apps/login/src/ui/ThemeProvider.tsx
+++ b/apps/login/src/components/theme-provider.tsx
@@ -2,7 +2,7 @@
 import { ThemeProvider as ThemeP } from "next-themes";
 import { ReactNode } from "react";
 
-export default function ThemeProvider({ children }: { children: ReactNode }) {
+export function ThemeProvider({ children }: { children: ReactNode }) {
   return (
     <ThemeP
       attribute="class"
diff --git a/apps/login/src/ui/ThemeWrapper.tsx b/apps/login/src/components/theme-wrapper.tsx
similarity index 77%
rename from apps/login/src/ui/ThemeWrapper.tsx
rename to apps/login/src/components/theme-wrapper.tsx
index 14b85de94f0..1ece18880ff 100644
--- a/apps/login/src/ui/ThemeWrapper.tsx
+++ b/apps/login/src/components/theme-wrapper.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { setTheme } from "@/utils/colors";
+import { setTheme } from "@/helpers/colors";
 import { BrandingSettings } from "@zitadel/proto/zitadel/settings/v2/branding_settings_pb";
 import { ReactNode, useEffect } from "react";
 
@@ -9,7 +9,7 @@ type Props = {
   children: ReactNode;
 };
 
-const ThemeWrapper = ({ children, branding }: Props) => {
+export const ThemeWrapper = ({ children, branding }: Props) => {
   useEffect(() => {
     setTheme(document, branding);
   }, []);
@@ -18,5 +18,3 @@ const ThemeWrapper = ({ children, branding }: Props) => {
 
   return <div className={defaultClasses}>{children}</div>;
 };
-
-export default ThemeWrapper;
diff --git a/apps/login/src/ui/Theme.tsx b/apps/login/src/components/theme.tsx
similarity index 96%
rename from apps/login/src/ui/Theme.tsx
rename to apps/login/src/components/theme.tsx
index bea22025293..3d70f5ef5b9 100644
--- a/apps/login/src/ui/Theme.tsx
+++ b/apps/login/src/components/theme.tsx
@@ -4,7 +4,7 @@ import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
-function Theme() {
+export function Theme() {
   const { resolvedTheme, setTheme } = useTheme();
   const [mounted, setMounted] = useState<boolean>(false);
 
@@ -42,5 +42,3 @@ function Theme() {
     </div>
   );
 }
-
-export default Theme;
diff --git a/apps/login/src/ui/TOTPRegister.tsx b/apps/login/src/components/totp-register.tsx
similarity index 94%
rename from apps/login/src/ui/TOTPRegister.tsx
rename to apps/login/src/components/totp-register.tsx
index ba66d73b573..7bcb697b222 100644
--- a/apps/login/src/ui/TOTPRegister.tsx
+++ b/apps/login/src/components/totp-register.tsx
@@ -5,11 +5,11 @@ import { useRouter } from "next/navigation";
 import { QRCodeSVG } from "qrcode.react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
-import { Button, ButtonVariants } from "./Button";
-import CopyToClipboard from "./CopyToClipboard";
-import { TextInput } from "./Input";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { Button, ButtonVariants } from "./button";
+import { CopyToClipboard } from "./copy-to-clipboard";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   code: string;
@@ -24,7 +24,7 @@ type Props = {
   organization?: string;
   checkAfter?: boolean;
 };
-export default function TOTPRegister({
+export function TotpRegister({
   uri,
   secret,
   loginName,
diff --git a/apps/login/src/ui/UserAvatar.tsx b/apps/login/src/components/user-avatar.tsx
similarity index 95%
rename from apps/login/src/ui/UserAvatar.tsx
rename to apps/login/src/components/user-avatar.tsx
index 7af6cc58b38..5875ca9d8f3 100644
--- a/apps/login/src/ui/UserAvatar.tsx
+++ b/apps/login/src/components/user-avatar.tsx
@@ -1,4 +1,4 @@
-import { Avatar } from "@/ui/Avatar";
+import { Avatar } from "@/components/avatar";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
@@ -9,7 +9,7 @@ type Props = {
   searchParams?: Record<string | number | symbol, string | undefined>;
 };
 
-export default function UserAvatar({
+export function UserAvatar({
   loginName,
   displayName,
   showDropdown,
diff --git a/apps/login/src/ui/UsernameForm.tsx b/apps/login/src/components/username-form.tsx
similarity index 93%
rename from apps/login/src/ui/UsernameForm.tsx
rename to apps/login/src/components/username-form.tsx
index 852d05f06b1..28469cd2018 100644
--- a/apps/login/src/ui/UsernameForm.tsx
+++ b/apps/login/src/components/username-form.tsx
@@ -4,11 +4,11 @@ import { sendLoginname } from "@/lib/server/loginname";
 import { useRouter } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import Alert from "./Alert";
-import BackButton from "./BackButton";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { Spinner } from "./Spinner";
+import { Alert } from "./alert";
+import { BackButton } from "./back-button";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   loginName: string;
@@ -23,7 +23,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function UsernameForm({
+export function UsernameForm({
   loginName,
   authRequestId,
   organization,
diff --git a/apps/login/src/ui/VerifyEmailForm.tsx b/apps/login/src/components/verify-email-form.tsx
similarity index 94%
rename from apps/login/src/ui/VerifyEmailForm.tsx
rename to apps/login/src/components/verify-email-form.tsx
index 7a55989e836..cbc66b1980c 100644
--- a/apps/login/src/ui/VerifyEmailForm.tsx
+++ b/apps/login/src/components/verify-email-form.tsx
@@ -1,14 +1,14 @@
 "use client";
 
+import { Alert } from "@/components/alert";
 import { resendVerifyEmail, verifyUserByEmail } from "@/lib/server/email";
-import Alert from "@/ui/Alert";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, ButtonVariants } from "./Button";
-import { TextInput } from "./Input";
-import { Spinner } from "./Spinner";
+import { Button, ButtonVariants } from "./button";
+import { TextInput } from "./input";
+import { Spinner } from "./spinner";
 
 type Inputs = {
   code: string;
@@ -25,7 +25,7 @@ type Props = {
   loginSettings?: LoginSettings;
 };
 
-export default function VerifyEmailForm({
+export function VerifyEmailForm({
   userId,
   loginName,
   code,
diff --git a/apps/login/src/ui/ZitadelLogoDark.tsx b/apps/login/src/components/zitadel-logo-dark.tsx
similarity index 100%
rename from apps/login/src/ui/ZitadelLogoDark.tsx
rename to apps/login/src/components/zitadel-logo-dark.tsx
diff --git a/apps/login/src/ui/ZitadelLogoLight.tsx b/apps/login/src/components/zitadel-logo-light.tsx
similarity index 100%
rename from apps/login/src/ui/ZitadelLogoLight.tsx
rename to apps/login/src/components/zitadel-logo-light.tsx
diff --git a/apps/login/src/ui/ZitadelLogo.tsx b/apps/login/src/components/zitadel-logo.tsx
similarity index 100%
rename from apps/login/src/ui/ZitadelLogo.tsx
rename to apps/login/src/components/zitadel-logo.tsx
diff --git a/apps/login/src/utils/base64.ts b/apps/login/src/helpers/base64.ts
similarity index 100%
rename from apps/login/src/utils/base64.ts
rename to apps/login/src/helpers/base64.ts
diff --git a/apps/login/src/utils/colors.ts b/apps/login/src/helpers/colors.ts
similarity index 100%
rename from apps/login/src/utils/colors.ts
rename to apps/login/src/helpers/colors.ts
diff --git a/apps/login/src/utils/validators.ts b/apps/login/src/helpers/validators.ts
similarity index 100%
rename from apps/login/src/utils/validators.ts
rename to apps/login/src/helpers/validators.ts
diff --git a/packages/eslint-config-zitadel/index.js b/packages/eslint-config-zitadel/index.js
index c9523f13cde..6024e8d6351 100644
--- a/packages/eslint-config-zitadel/index.js
+++ b/packages/eslint-config-zitadel/index.js
@@ -3,9 +3,4 @@ module.exports = {
   rules: {
     "@next/next/no-html-link-for-pages": "off",
   },
-  parserOptions: {
-    babelOptions: {
-      presets: [require.resolve("next/babel")],
-    },
-  },
 };