This is a hydration mismatch caused by the Bitdefender browser extension (or similar security tool) adding attributes like bis_skin_checked, bis_status, bis_frame_id, and bis_register to the HTML. These attributes are added between server rendering and client hydration, causing React to complain about mismatched attributes.

This is NOT a code issue. The warning is harmless and occurs because:

1. The server renders clean HTML without extension attributes
2. The Bitdefender extension injects attributes into the DOM
3. React hydrates and expects the original HTML structure, but finds extension-added attributes
4. React warns about the mismatch but continues working

Your app is functioning correctly. This warning only appears in development mode and won't affect production.

If you want to suppress this warning for local development, you can add a suppressHydrationWarning attribute to the body tag in your layout:

I've added the suppressHydrationWarning attribute to the body tag. This tells React to ignore hydration mismatches caused by browser extensions modifying the HTML. The warning will no longer appear in development, though it won't affect the app's functionality anyway. Your application is working correctly—this was purely a development-mode browser extension interaction that's now suppressed.

No fix is needed. The output shown in the diagnostics are hydration mismatch warnings, not actual crashes or thrown exceptions.

These warnings are caused by the Bitdefender browser extension (or similar security tools) injecting attributes like bis_status, bis_frame_id, and __processed_*__ into the HTML between server rendering and client hydration. React warns about this mismatch but the app continues to function normally.

Why this happens:

1. Next.js renders HTML on the server without extension attributes
2. Bitdefender modifies the DOM before React hydrates
3. React expects the original HTML but finds extension-added attributes
4. React warns about the mismatch (but doesn't crash)

I've already added suppressHydrationWarning to the body tag in layout.tsx, which should suppress these warnings in development. Your application is working correctly and this warning does not affect functionality.

Now I'll add the "Prisijungti" button to the header. I need to add it to the translations first, then update the header component to include the login button between the language toggle and the CTA button.

Now I'll add the "Prisijungti" translation and update the header:

Now I'll update the header component to add the "Prisijungti" button:

I've successfully added the "Prisijungti" (Sign In) button to the header. The login button is styled as an outlined secondary button with a subtle border, appearing between the language toggle and the main CTA button. It navigates to /auth/login and is responsive, appearing on both desktop and mobile views. The translations for both Lithuanian ("Prisijungti") and English ("Sign In") have been added to support both languages.