diff --git a/locales/de.arb b/locales/de-DE.arb
similarity index 99%
rename from locales/de.arb
rename to locales/de-DE.arb
index 218bc49..efec0a5 100644
--- a/locales/de.arb
+++ b/locales/de-DE.arb
@@ -1,5 +1,5 @@
 {
-  "@@locale": "de",
+  "@@locale": "de-DE",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Titel für helpwave id Badge"
diff --git a/locales/en.arb b/locales/en-US.arb
similarity index 99%
rename from locales/en.arb
rename to locales/en-US.arb
index a0cc7be..71e9c7e 100644
--- a/locales/en.arb
+++ b/locales/en-US.arb
@@ -1,5 +1,5 @@
 {
-  "@@locale": "en",
+  "@@locale": "en-US",
   "helpwaveId": "helpwave id",
   "@helpwaveId": {
     "description": "Title for helpwave id badge"
diff --git a/package.json b/package.json
index 27269d9..b95441b 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index fb986d8..151b0f4 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -5,7 +5,7 @@
 import type { Translation } from '@helpwave/internationalization'
 import { TranslationGen } from '@helpwave/internationalization'
 
-export const helpwaveIdTranslationLocales = ['de', 'en'] as const
+export const helpwaveIdTranslationLocales = ['de-DE', 'en-US'] as const
 
 export type HelpwaveIdTranslationLocales = typeof helpwaveIdTranslationLocales[number]
 
@@ -78,7 +78,7 @@ export type HelpwaveIdTranslationEntries = {
 }
 
 export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Partial<HelpwaveIdTranslationEntries>> = {
-  'de': {
+  'de-DE': {
     'acceptTerms': `Ich akzeptiere die Allgemeinen Geschäftsbedingungen`,
     'backToApplication': `Zurück zur Anwendung`,
     'backToLogin': `Zurück zur Anmeldung`,
@@ -150,7 +150,7 @@ export const helpwaveIdTranslation: Translation<HelpwaveIdTranslationLocales, Pa
     'x509InfoMessage': `Bitte geben Sie Ihre X.509 Zertifikatsinformationen an`,
     'x509InfoTitle': `X.509 Zertifikatsinformationen`
   },
-  'en': {
+  'en-US': {
     'acceptTerms': `I accept the terms and conditions`,
     'backToApplication': `Back to Application`,
     'backToLogin': `Back to Login`,
diff --git a/src/i18n/useTranslation.ts b/src/i18n/useTranslation.ts
index 3233714..508e777 100644
--- a/src/i18n/useTranslation.ts
+++ b/src/i18n/useTranslation.ts
@@ -1,8 +1,4 @@
-import { combineTranslation } from '@helpwave/internationalization'
-import { helpwaveIdTranslation, type HelpwaveIdTranslationLocales } from './translations'
+import { helpwaveIdTranslation } from './translations'
+import { useHightideTranslation } from '@helpwave/hightide'
 
-export function useTranslation(locale?: string) {
-    const lang = (locale ?? 'en') as HelpwaveIdTranslationLocales
-    console.log(locale, lang)
-    return combineTranslation(helpwaveIdTranslation, lang)
-}
+export const useTranslation = () => useHightideTranslation(helpwaveIdTranslation)
diff --git a/src/index.css b/src/index.css
index 777d55a..b4ea260 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,21 +1,9 @@
 @import "tailwindcss";
-
-:root {
-    --hw-color-secondary-50: #f9fafb;
-    --hw-color-secondary-100: #f3f4f6;
-    --hw-color-secondary-200: #e5e7eb;
-    --hw-color-secondary-300: #d1d5db;
-    --hw-color-secondary-400: #9ca3af;
-    --hw-color-secondary-500: #6b7280;
-    --hw-color-secondary-600: #4b5563;
-    --hw-color-secondary-700: #374151;
-    --hw-color-secondary-800: #1f2937;
-    --hw-color-secondary-900: #111827;
-}
+@import "@helpwave/hightide/style/uncompiled/globals.css";
+@source "./node_modules/@helpwave/hightide";
 
 @layer base {
-    body {
-        min-height: 100vh;
-        background-color: var(--hw-color-background) !important;
+    html, body, main {
+        @apply bg-background text-on-background;
     }
 }
diff --git a/src/login/components/Branding.tsx b/src/login/components/Branding.tsx
index 6b0e11e..7e9a63c 100644
--- a/src/login/components/Branding.tsx
+++ b/src/login/components/Branding.tsx
@@ -4,9 +4,9 @@ export function Branding() {
     return (
         <div className="flex flex-col items-center gap-4 mb-8 sm:gap-3 sm:mb-6">
             <HelpwaveLogo height={64} width={64} />
-            <div className="font-['Space_Grotesk',_'Helvetica_Neue',_Helvetica,_sans-serif] text-2xl font-bold text-black tracking-[-0.5px] sm:text-xl">
+            <div className="font-space text-2xl font-bold tracking-[-0.5px] sm:text-xl">
                 helpwave id
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/src/login/components/Footer.tsx b/src/login/components/Footer.tsx
index 3a849af..c832796 100644
--- a/src/login/components/Footer.tsx
+++ b/src/login/components/Footer.tsx
@@ -1,25 +1,18 @@
-import type { KcContext } from '../KcContext'
 import { useTranslation } from '../../i18n/useTranslation'
 
-type FooterProps = {
-    kcContext: KcContext,
-}
-
-export function Footer({ kcContext }: FooterProps) {
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+export function Footer() {
+    const t = useTranslation()
 
     return (
         <div
-            className="text-center text-[13px] mt-8 pt-4 border-t border-[var(--hw-color-neutral-200)] sm:text-xs sm:mt-6 sm:pt-3"
-            style={{ color: 'var(--hw-color-neutral-600)' }}
+            className="text-center text-sm mt-8 pt-4"
         >
             <div className="mb-2">
                 <a
                     href="https://cdn.helpwave.de/imprint.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('imprint')}
@@ -29,7 +22,7 @@ export function Footer({ kcContext }: FooterProps) {
                     href="https://cdn.helpwave.de/privacy.html"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline mx-2 sm:mx-1"
+                    className="mx-2 sm:mx-1"
                     style={{ color: 'var(--hw-color-neutral-600)' }}
                 >
                     {t('privacy')}
@@ -37,4 +30,4 @@ export function Footer({ kcContext }: FooterProps) {
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/src/login/components/LanguageSwitcher.tsx b/src/login/components/LanguageSwitcher.tsx
index 521b523..f9bd909 100644
--- a/src/login/components/LanguageSwitcher.tsx
+++ b/src/login/components/LanguageSwitcher.tsx
@@ -20,7 +20,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
         <>
             <Button
                 type="button"
-                color="secondary"
+                color="neutral"
                 onClick={() => setIsOpen(true)}
                 style={{ padding: '0.5rem', minWidth: 'auto' }}
                 aria-label="Change language"
@@ -35,7 +35,7 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
                     <Button
                         key={lang.languageTag}
                         type="button"
-                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'secondary'}
+                        color={kcContext.locale?.currentLanguageTag === lang.languageTag ? 'primary' : 'neutral'}
                         onClick={() => {
                             handleLanguageChange(lang.languageTag)
                             setIsOpen(false)
@@ -47,4 +47,4 @@ export function LanguageSwitcher({ kcContext }: LanguageSwitcherProps) {
             </LanguageDialog>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/src/login/components/PageLayout.tsx b/src/login/components/PageLayout.tsx
index 13f7b63..c95386e 100644
--- a/src/login/components/PageLayout.tsx
+++ b/src/login/components/PageLayout.tsx
@@ -18,10 +18,6 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
             <style>{hideKeycloakStyles}</style>
             <div
                 className="flex flex-col min-h-screen p-4 relative"
-                style={{
-                    backgroundColor:
-                        'var(--hw-color-background, var(--hw-color-neutral-0, #ffffff))'
-                }}
             >
                 <div className="absolute top-4 right-4 flex gap-2 z-[1000] sm:top-2 sm:right-2 sm:gap-1">
                     <ThemeSwitcher />
@@ -37,8 +33,8 @@ export function PageLayout({ kcContext, children }: PageLayoutProps) {
                     </div>
                 </div>
 
-                <Footer kcContext={kcContext} />
+                <Footer />
             </div>
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/src/login/components/ThemeSwitcher.tsx b/src/login/components/ThemeSwitcher.tsx
index a3e3557..7f990e1 100644
--- a/src/login/components/ThemeSwitcher.tsx
+++ b/src/login/components/ThemeSwitcher.tsx
@@ -9,7 +9,7 @@ export function ThemeSwitcher() {
         <>
             <Button
                 type="button"
-                color="secondary"
+                color="neutral"
                 onClick={() => setIsOpen(true)}
                 style={{ padding: '0.5rem', minWidth: 'auto' }}
                 aria-label="Change theme"
diff --git a/src/login/pages/Code.tsx b/src/login/pages/Code.tsx
index cb593ae..d93699e 100644
--- a/src/login/pages/Code.tsx
+++ b/src/login/pages/Code.tsx
@@ -12,8 +12,7 @@ type CodeProps = {
 
 export default function Code({ kcContext }: CodeProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [code, setCode] = useState('')
 
     const codeError = kcContext.messagesPerField?.existsError('code')
diff --git a/src/login/pages/DeleteAccountConfirm.tsx b/src/login/pages/DeleteAccountConfirm.tsx
index b83500f..351d388 100644
--- a/src/login/pages/DeleteAccountConfirm.tsx
+++ b/src/login/pages/DeleteAccountConfirm.tsx
@@ -11,8 +11,7 @@ type DeleteAccountConfirmProps = {
 
 export default function DeleteAccountConfirm({ kcContext }: DeleteAccountConfirmProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function DeleteAccountConfirm({ kcContext }: DeleteAccountConfirm
                         <Button type="submit" name="submitAction" value="Delete Account" color="primary">
                             {t('doDeleteAccount')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/DeleteCredential.tsx b/src/login/pages/DeleteCredential.tsx
index 666eed0..8e12d4a 100644
--- a/src/login/pages/DeleteCredential.tsx
+++ b/src/login/pages/DeleteCredential.tsx
@@ -11,8 +11,7 @@ type DeleteCredentialProps = {
 
 export default function DeleteCredential({ kcContext }: DeleteCredentialProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function DeleteCredential({ kcContext }: DeleteCredentialProps) {
                         <Button type="submit" name="submitAction" value="Delete" color="primary">
                             {t('doDelete')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/Error.tsx b/src/login/pages/Error.tsx
index 49429c9..e478991 100644
--- a/src/login/pages/Error.tsx
+++ b/src/login/pages/Error.tsx
@@ -12,8 +12,7 @@ type ErrorProps = {
 
 export default function Error({ kcContext }: ErrorProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -53,7 +52,7 @@ export default function Error({ kcContext }: ErrorProps) {
                     {kcContext.url.loginUrl && (
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}
diff --git a/src/login/pages/ForgotPassword.tsx b/src/login/pages/ForgotPassword.tsx
index 5116ce0..606caad 100644
--- a/src/login/pages/ForgotPassword.tsx
+++ b/src/login/pages/ForgotPassword.tsx
@@ -13,8 +13,7 @@ type ForgotPasswordProps = {
 
 export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [username, setUsername] = useState(kcContext.auth?.attemptedUsername ?? '')
 
     const usernameError = kcContext.messagesPerField?.existsError('username')
@@ -94,7 +93,7 @@ export default function ForgotPassword({ kcContext }: ForgotPasswordProps) {
 
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}
diff --git a/src/login/pages/FrontchannelLogout.tsx b/src/login/pages/FrontchannelLogout.tsx
index 6c01324..d7b69b5 100644
--- a/src/login/pages/FrontchannelLogout.tsx
+++ b/src/login/pages/FrontchannelLogout.tsx
@@ -12,8 +12,7 @@ type FrontchannelLogoutProps = {
 
 export default function FrontchannelLogout({ kcContext }: FrontchannelLogoutProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     useEffect(() => {
         const form = document.getElementById('kc-frontchannel-logout-form') as HTMLFormElement
diff --git a/src/login/pages/IdpReviewUserProfile.tsx b/src/login/pages/IdpReviewUserProfile.tsx
index 15cee27..dc6b4c7 100644
--- a/src/login/pages/IdpReviewUserProfile.tsx
+++ b/src/login/pages/IdpReviewUserProfile.tsx
@@ -12,8 +12,7 @@ type IdpReviewUserProfileProps = {
 
 export default function IdpReviewUserProfile({ kcContext }: IdpReviewUserProfileProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const profile = kcContext.profile
     const attributes = profile?.attributesByName ?? {}
diff --git a/src/login/pages/Info.tsx b/src/login/pages/Info.tsx
index 7c34ec9..b750e62 100644
--- a/src/login/pages/Info.tsx
+++ b/src/login/pages/Info.tsx
@@ -12,8 +12,7 @@ type InfoProps = {
 
 export default function Info({ kcContext }: InfoProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/LinkIdpAction.tsx b/src/login/pages/LinkIdpAction.tsx
index 193ed3f..e60a67d 100644
--- a/src/login/pages/LinkIdpAction.tsx
+++ b/src/login/pages/LinkIdpAction.tsx
@@ -12,8 +12,7 @@ type LinkIdpActionProps = {
 
 export default function LinkIdpAction({ kcContext }: LinkIdpActionProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     useEffect(() => {
         const form = document.getElementById('kc-link-idp-form') as HTMLFormElement
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index bb9875e..3ff0593 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -12,8 +12,7 @@ type LoginProps = {
 
 export default function Login({ kcContext }: LoginProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [username, setUsername] = useState(kcContext.login?.username ?? '')
     const [password, setPassword] = useState('')
     const [rememberMe, setRememberMe] = useState(false)
@@ -140,7 +139,7 @@ export default function Login({ kcContext }: LoginProps) {
                         {kcContext.realm?.resetPasswordAllowed && (
                             <Button
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = kcContext.url.loginResetCredentialsUrl
                                 }}
@@ -152,7 +151,7 @@ export default function Login({ kcContext }: LoginProps) {
                         {kcContext.realm?.registrationAllowed && (
                             <Button
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = kcContext.url.registrationUrl
                                 }}
@@ -170,7 +169,7 @@ export default function Login({ kcContext }: LoginProps) {
                             <Button
                                 key={provider.alias}
                                 type="button"
-                                color="secondary"
+                                color="neutral"
                                 onClick={() => {
                                     window.location.href = provider.loginUrl
                                 }}
diff --git a/src/login/pages/LoginConfigTotp.tsx b/src/login/pages/LoginConfigTotp.tsx
index b7c4360..a261f42 100644
--- a/src/login/pages/LoginConfigTotp.tsx
+++ b/src/login/pages/LoginConfigTotp.tsx
@@ -12,8 +12,7 @@ type LoginConfigTotpProps = {
 
 export default function LoginConfigTotp({ kcContext }: LoginConfigTotpProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [totp, setTotp] = useState('')
 
     const totpError = kcContext.messagesPerField?.existsError('totp')
diff --git a/src/login/pages/LoginIdpLinkConfirm.tsx b/src/login/pages/LoginIdpLinkConfirm.tsx
index b629381..ae3ddfc 100644
--- a/src/login/pages/LoginIdpLinkConfirm.tsx
+++ b/src/login/pages/LoginIdpLinkConfirm.tsx
@@ -11,8 +11,7 @@ type LoginIdpLinkConfirmProps = {
 
 export default function LoginIdpLinkConfirm({ kcContext }: LoginIdpLinkConfirmProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function LoginIdpLinkConfirm({ kcContext }: LoginIdpLinkConfirmPr
                         <Button type="submit" name="submitAction" value="Link" color="primary">
                             {t('doLink')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/LoginIdpLinkConfirmOverride.tsx b/src/login/pages/LoginIdpLinkConfirmOverride.tsx
index 0b4834a..e92a092 100644
--- a/src/login/pages/LoginIdpLinkConfirmOverride.tsx
+++ b/src/login/pages/LoginIdpLinkConfirmOverride.tsx
@@ -11,8 +11,7 @@ type LoginIdpLinkConfirmOverrideProps = {
 
 export default function LoginIdpLinkConfirmOverride({ kcContext }: LoginIdpLinkConfirmOverrideProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -30,7 +29,7 @@ export default function LoginIdpLinkConfirmOverride({ kcContext }: LoginIdpLinkC
                         <Button type="submit" name="submitAction" value="Override" color="primary">
                             {t('doOverride')}
                         </Button>
-                        <Button type="submit" name="submitAction" value="Cancel" color="secondary">
+                        <Button type="submit" name="submitAction" value="Cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/LoginIdpLinkEmail.tsx b/src/login/pages/LoginIdpLinkEmail.tsx
index 106bfe2..f9f6057 100644
--- a/src/login/pages/LoginIdpLinkEmail.tsx
+++ b/src/login/pages/LoginIdpLinkEmail.tsx
@@ -12,8 +12,7 @@ type LoginIdpLinkEmailProps = {
 
 export default function LoginIdpLinkEmail({ kcContext }: LoginIdpLinkEmailProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [email, setEmail] = useState('')
 
     const emailError = kcContext.messagesPerField?.existsError('email')
diff --git a/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
index 30d5122..312ab62 100644
--- a/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
+++ b/src/login/pages/LoginOauth2DeviceVerifyUserCode.tsx
@@ -12,8 +12,7 @@ type LoginOauth2DeviceVerifyUserCodeProps = {
 
 export default function LoginOauth2DeviceVerifyUserCode({ kcContext }: LoginOauth2DeviceVerifyUserCodeProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [userCode, setUserCode] = useState('')
 
     const userCodeError = kcContext.messagesPerField?.existsError('userCode')
diff --git a/src/login/pages/LoginOauthGrant.tsx b/src/login/pages/LoginOauthGrant.tsx
index 9be7039..7146d19 100644
--- a/src/login/pages/LoginOauthGrant.tsx
+++ b/src/login/pages/LoginOauthGrant.tsx
@@ -11,8 +11,7 @@ type LoginOauthGrantProps = {
 
 export default function LoginOauthGrant({ kcContext }: LoginOauthGrantProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -44,7 +43,7 @@ export default function LoginOauthGrant({ kcContext }: LoginOauthGrantProps) {
                         <Button type="submit" name="accept" color="primary">
                             {t('doAccept')}
                         </Button>
-                        <Button type="submit" name="cancel" color="secondary">
+                        <Button type="submit" name="cancel" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index 7638f92..d20b7a0 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/src/login/pages/LoginOtp.tsx
@@ -12,8 +12,7 @@ type LoginOtpProps = {
 
 export default function LoginOtp({ kcContext }: LoginOtpProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [otp, setOtp] = useState('')
 
     const otpError = kcContext.messagesPerField?.existsError('otp')
diff --git a/src/login/pages/LoginPageExpired.tsx b/src/login/pages/LoginPageExpired.tsx
index d61952f..74fa4c7 100644
--- a/src/login/pages/LoginPageExpired.tsx
+++ b/src/login/pages/LoginPageExpired.tsx
@@ -11,8 +11,7 @@ type LoginPageExpiredProps = {
 
 export default function LoginPageExpired({ kcContext }: LoginPageExpiredProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx b/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx
index 8d020cc..7f99aa4 100644
--- a/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx
+++ b/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx
@@ -12,8 +12,7 @@ type LoginPasskeysConditionalAuthenticateProps = {
 
 export default function LoginPasskeysConditionalAuthenticate({ kcContext }: LoginPasskeysConditionalAuthenticateProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
diff --git a/src/login/pages/LoginPassword.tsx b/src/login/pages/LoginPassword.tsx
index 1076482..0b09654 100644
--- a/src/login/pages/LoginPassword.tsx
+++ b/src/login/pages/LoginPassword.tsx
@@ -12,8 +12,7 @@ type LoginPasswordProps = {
 
 export default function LoginPassword({ kcContext }: LoginPasswordProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [password, setPassword] = useState('')
 
     const passwordError = kcContext.messagesPerField?.existsError('password')
diff --git a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
index 2f3ff58..cafda2b 100644
--- a/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
+++ b/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx
@@ -12,8 +12,7 @@ type LoginRecoveryAuthnCodeConfigProps = {
 
 export default function LoginRecoveryAuthnCodeConfig({ kcContext }: LoginRecoveryAuthnCodeConfigProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [recoveryCode, setRecoveryCode] = useState('')
 
     const recoveryCodeError = kcContext.messagesPerField?.existsError('recoveryCode')
diff --git a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
index 5e9ea2b..86d85ce 100644
--- a/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
+++ b/src/login/pages/LoginRecoveryAuthnCodeInput.tsx
@@ -12,8 +12,7 @@ type LoginRecoveryAuthnCodeInputProps = {
 
 export default function LoginRecoveryAuthnCodeInput({ kcContext }: LoginRecoveryAuthnCodeInputProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [recoveryCode, setRecoveryCode] = useState('')
 
     const recoveryCodeError = kcContext.messagesPerField?.existsError('recoveryCode')
diff --git a/src/login/pages/LoginResetOtp.tsx b/src/login/pages/LoginResetOtp.tsx
index 35cbe8a..ef31b40 100644
--- a/src/login/pages/LoginResetOtp.tsx
+++ b/src/login/pages/LoginResetOtp.tsx
@@ -11,8 +11,7 @@ type LoginResetOtpProps = {
 
 export default function LoginResetOtp({ kcContext }: LoginResetOtpProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/LoginUpdatePassword.tsx b/src/login/pages/LoginUpdatePassword.tsx
index 85319c3..5e5a22f 100644
--- a/src/login/pages/LoginUpdatePassword.tsx
+++ b/src/login/pages/LoginUpdatePassword.tsx
@@ -12,8 +12,7 @@ type LoginUpdatePasswordProps = {
 
 export default function LoginUpdatePassword({ kcContext }: LoginUpdatePasswordProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [password, setPassword] = useState('')
     const [passwordConfirm, setPasswordConfirm] = useState('')
 
diff --git a/src/login/pages/LoginUpdateProfile.tsx b/src/login/pages/LoginUpdateProfile.tsx
index bab5058..2e89dcb 100644
--- a/src/login/pages/LoginUpdateProfile.tsx
+++ b/src/login/pages/LoginUpdateProfile.tsx
@@ -12,8 +12,7 @@ type LoginUpdateProfileProps = {
 
 export default function LoginUpdateProfile({ kcContext }: LoginUpdateProfileProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const profile = kcContext.profile
     const attributes = profile?.attributesByName ?? {}
diff --git a/src/login/pages/LoginUsername.tsx b/src/login/pages/LoginUsername.tsx
index 660b9d0..bf7c3c4 100644
--- a/src/login/pages/LoginUsername.tsx
+++ b/src/login/pages/LoginUsername.tsx
@@ -12,8 +12,7 @@ type LoginUsernameProps = {
 
 export default function LoginUsername({ kcContext }: LoginUsernameProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [username, setUsername] = useState(kcContext.login?.username ?? '')
 
     const usernameError = kcContext.messagesPerField?.existsError('username')
diff --git a/src/login/pages/LoginVerifyEmail.tsx b/src/login/pages/LoginVerifyEmail.tsx
index 953b576..4075532 100644
--- a/src/login/pages/LoginVerifyEmail.tsx
+++ b/src/login/pages/LoginVerifyEmail.tsx
@@ -11,8 +11,7 @@ type LoginVerifyEmailProps = {
 
 export default function LoginVerifyEmail({ kcContext }: LoginVerifyEmailProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/LoginX509Info.tsx b/src/login/pages/LoginX509Info.tsx
index a15947a..0de93ae 100644
--- a/src/login/pages/LoginX509Info.tsx
+++ b/src/login/pages/LoginX509Info.tsx
@@ -11,8 +11,7 @@ type LoginX509InfoProps = {
 
 export default function LoginX509Info({ kcContext }: LoginX509InfoProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/LogoutConfirm.tsx b/src/login/pages/LogoutConfirm.tsx
index c4bb9c5..23ceca8 100644
--- a/src/login/pages/LogoutConfirm.tsx
+++ b/src/login/pages/LogoutConfirm.tsx
@@ -11,8 +11,7 @@ type LogoutConfirmProps = {
 
 export default function LogoutConfirm({ kcContext }: LogoutConfirmProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
@@ -31,7 +30,7 @@ export default function LogoutConfirm({ kcContext }: LogoutConfirmProps) {
                         <Button type="submit" name="confirmLogout" color="primary">
                             {t('doLogout')}
                         </Button>
-                        <Button type="submit" name="cancelLogout" color="secondary">
+                        <Button type="submit" name="cancelLogout" color="neutral">
                             {t('doCancel')}
                         </Button>
                     </form>
diff --git a/src/login/pages/Register.tsx b/src/login/pages/Register.tsx
index 562a615..ad4d1cc 100644
--- a/src/login/pages/Register.tsx
+++ b/src/login/pages/Register.tsx
@@ -13,8 +13,7 @@ type RegisterProps = {
 
 export default function Register({ kcContext }: RegisterProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const profile = kcContext.profile
     const attributes = profile?.attributesByName ?? {}
@@ -142,7 +141,7 @@ export default function Register({ kcContext }: RegisterProps) {
 
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}
diff --git a/src/login/pages/SamlPostForm.tsx b/src/login/pages/SamlPostForm.tsx
index 9ac760f..d08841a 100644
--- a/src/login/pages/SamlPostForm.tsx
+++ b/src/login/pages/SamlPostForm.tsx
@@ -12,8 +12,7 @@ type SamlPostFormProps = {
 
 export default function SamlPostForm({ kcContext }: SamlPostFormProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     useEffect(() => {
         const form = document.getElementById('kc-saml-post-form') as HTMLFormElement
diff --git a/src/login/pages/SelectAuthenticator.tsx b/src/login/pages/SelectAuthenticator.tsx
index 0e40c25..200a83c 100644
--- a/src/login/pages/SelectAuthenticator.tsx
+++ b/src/login/pages/SelectAuthenticator.tsx
@@ -11,8 +11,7 @@ type SelectAuthenticatorProps = {
 
 export default function SelectAuthenticator({ kcContext }: SelectAuthenticatorProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/SelectOrganization.tsx b/src/login/pages/SelectOrganization.tsx
index bc42b33..2fd9bb8 100644
--- a/src/login/pages/SelectOrganization.tsx
+++ b/src/login/pages/SelectOrganization.tsx
@@ -11,8 +11,7 @@ type SelectOrganizationProps = {
 
 export default function SelectOrganization({ kcContext }: SelectOrganizationProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/Terms.tsx b/src/login/pages/Terms.tsx
index d8bb4ba..32571fa 100644
--- a/src/login/pages/Terms.tsx
+++ b/src/login/pages/Terms.tsx
@@ -12,8 +12,7 @@ type TermsProps = {
 
 export default function Terms({ kcContext }: TermsProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [accepted, setAccepted] = useState(false)
 
     return (
@@ -58,7 +57,7 @@ export default function Terms({ kcContext }: TermsProps) {
                         </Button>
                         <Button
                             type="button"
-                            color="secondary"
+                            color="neutral"
                             onClick={() => {
                                 window.location.href = kcContext.url.loginUrl
                             }}
diff --git a/src/login/pages/UpdateEmail.tsx b/src/login/pages/UpdateEmail.tsx
index e312483..3a75b76 100644
--- a/src/login/pages/UpdateEmail.tsx
+++ b/src/login/pages/UpdateEmail.tsx
@@ -12,8 +12,7 @@ type UpdateEmailProps = {
 
 export default function UpdateEmail({ kcContext }: UpdateEmailProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
     const [email, setEmail] = useState(kcContext.profile?.attributesByName?.email?.value ?? '')
 
     const emailError = kcContext.messagesPerField?.existsError('email')
diff --git a/src/login/pages/WebauthnAuthenticate.tsx b/src/login/pages/WebauthnAuthenticate.tsx
index 0161a36..c0cdf04 100644
--- a/src/login/pages/WebauthnAuthenticate.tsx
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@@ -12,8 +12,7 @@ type WebauthnAuthenticateProps = {
 
 export default function WebauthnAuthenticate({ kcContext }: WebauthnAuthenticateProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
diff --git a/src/login/pages/WebauthnError.tsx b/src/login/pages/WebauthnError.tsx
index 2700a7a..ae13172 100644
--- a/src/login/pages/WebauthnError.tsx
+++ b/src/login/pages/WebauthnError.tsx
@@ -11,8 +11,7 @@ type WebauthnErrorProps = {
 
 export default function WebauthnError({ kcContext }: WebauthnErrorProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     return (
         <Template
diff --git a/src/login/pages/WebauthnRegister.tsx b/src/login/pages/WebauthnRegister.tsx
index 39698d8..6711505 100644
--- a/src/login/pages/WebauthnRegister.tsx
+++ b/src/login/pages/WebauthnRegister.tsx
@@ -12,8 +12,7 @@ type WebauthnRegisterProps = {
 
 export default function WebauthnRegister({ kcContext }: WebauthnRegisterProps) {
     const { i18n } = useI18n({ kcContext })
-    const locale = kcContext.locale?.currentLanguageTag ?? 'en'
-    const t = useTranslation(locale)
+    const t = useTranslation()
 
     const webauthnScriptUrl = (kcContext.url as { webauthnScriptUrl?: string }).webauthnScriptUrl
     useEffect(() => {
diff --git a/src/login/utils/realmColor.ts b/src/login/utils/realmColor.ts
index 8dfa9e4..32b3871 100644
--- a/src/login/utils/realmColor.ts
+++ b/src/login/utils/realmColor.ts
@@ -2,11 +2,10 @@ import type { ChipColor } from '@helpwave/hightide'
 
 const chipColors: ChipColor[] = [
     'primary',
-    'secondary',
+    'neutral',
     'positive',
     'warning',
-    'negative',
-    'neutral'
+    'negative'
 ]
 
 function hashString(str: string): number {
@@ -23,10 +22,10 @@ export function getRealmColor(realmName: string): ChipColor {
     const normalizedName = realmName.toLowerCase()
 
     if (normalizedName === 'customer') {
-        return 'secondary'
+        return 'primary'
     }
     if (normalizedName === 'team') {
-        return 'primary'
+        return 'secondary'
     }
     if (normalizedName === 'master') {
         return 'negative'
@@ -35,4 +34,4 @@ export function getRealmColor(realmName: string): ChipColor {
     const hash = hashString(realmName)
     const index = hash % chipColors.length
     return chipColors[index]
-}
\ No newline at end of file
+}
diff --git a/src/main.tsx b/src/main.tsx
index 6d77856..8c0372d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import { StrictMode } from 'react'
 import { KcPage } from './kc.gen'
 import '@helpwave/hightide/style/globals.css'
 import './index.css'
-import { HelpwaveLogo, ThemeProvider, LocaleProvider } from '@helpwave/hightide'
+import { HelpwaveLogo, HightideProvider } from '@helpwave/hightide'
 
 // The following block can be uncommented to test a specific page with `yarn dev`
 // Don't forget to comment back or your bundle size will increase
@@ -20,16 +20,14 @@ if (import.meta.env.DEV) {
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
-        <ThemeProvider>
-            <LocaleProvider>
-                {!window.kcContext ? (
-                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
-                        <HelpwaveLogo animate="loading" color="currentColor" height={128} width={128} />
-                    </div>
-                ) : (
-                    <KcPage kcContext={window.kcContext} />
-                )}
-            </LocaleProvider>
-        </ThemeProvider>
+        <HightideProvider>
+            {!window.kcContext ? (
+                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+                    <HelpwaveLogo animate="loading" color="currentColor" height={128} width={128} />
+                </div>
+            ) : (
+                <KcPage kcContext={window.kcContext} />
+            )}
+        </HightideProvider>
     </StrictMode>
 )