diff --git a/apps/web-client/src/app/(auth)/forgot-password/page.tsx b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
index c5c8c7bb..08113a63 100644
--- a/apps/web-client/src/app/(auth)/forgot-password/page.tsx
+++ b/apps/web-client/src/app/(auth)/forgot-password/page.tsx
@@ -10,6 +10,7 @@ import { Button } from '@/features/shared/components/ui/button';
 import { Input } from '@/features/shared/components/ui/input';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
 import { useTranslations } from 'next-intl';
+import { AuthControls } from '@/features/shared/components/layout/auth-controls';
 
 /**
  * EN: Create forgot password schema with translated messages
@@ -108,159 +109,162 @@ export default function ForgotPasswordPage() {
   return (
     // EN: Centered forgot password form layout with dark mode background
     // VI: Layout form quên mật khẩu được căn giữa với nền dark mode
-    <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
-      <Card className="w-full max-w-md" hover={false} bordered>
-        <CardHeader className="text-center">
-          <CardTitle className="text-2xl font-semibold">
-            {t('auth.forgotPassword.title')}
-          </CardTitle>
-          <CardDescription className="mt-2">
-            {isSuccess
-              ? t('auth.forgotPassword.checkEmail')
-              : t('auth.forgotPassword.description')}
-          </CardDescription>
-        </CardHeader>
+    <>
+      <AuthControls />
+      <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
+        <Card className="w-full max-w-md" hover={false} bordered>
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl font-semibold">
+              {t('auth.forgotPassword.title')}
+            </CardTitle>
+            <CardDescription className="mt-2">
+              {isSuccess
+                ? t('auth.forgotPassword.checkEmail')
+                : t('auth.forgotPassword.description')}
+            </CardDescription>
+          </CardHeader>
 
-        {isSuccess ? (
-          // EN: Success state - show confirmation message
-          // VI: Trạng thái thành công - hiển thị thông báo xác nhận
-          <CardContent className="space-y-4">
-            {/* EN: Success icon and message / VI: Icon và thông báo thành công */}
-            <div
-              className="p-4 rounded-lg bg-bg-tertiary border border-accent-success text-accent-success flex items-center gap-3"
-              role="alert"
-            >
-              <svg
-                className="h-5 w-5 flex-shrink-0"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              <span className="text-sm font-medium">
-                {t('auth.forgotPassword.resetLinkSent')}
-              </span>
-            </div>
-
-            {/* EN: Detailed success message / VI: Thông báo thành công chi tiết */}
-            <div className="space-y-3 text-sm text-text-secondary">
-              <p>
-                {t('auth.forgotPassword.resetLinkSentDetail', { email: submittedEmail })}
-              </p>
-              <div className="pt-2 border-t border-border-primary">
-                <p className="text-text-tertiary">
-                  {t('auth.forgotPassword.checkInbox')}
-                </p>
-              </div>
-            </div>
-
-            {/* EN: Additional action buttons / VI: Các nút hành động bổ sung */}
-            <div className="pt-2 space-y-2">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="w-full"
-                onClick={() => {
-                  setIsSuccess(false);
-                  setSubmittedEmail('');
-                }}
-              >
-                {t('auth.forgotPassword.sendToAnotherEmail')}
-              </Button>
-            </div>
-          </CardContent>
-        ) : (
-          // EN: Form state - email input and submit
-          // VI: Trạng thái form - input email và submit
-          <form onSubmit={handleSubmit(onSubmit)}>
+          {isSuccess ? (
+            // EN: Success state - show confirmation message
+            // VI: Trạng thái thành công - hiển thị thông báo xác nhận
             <CardContent className="space-y-4">
-              {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
-              {apiError && (
-                <div
-                  className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
-                  role="alert"
-                >
-                  <svg
-                    className="h-4 w-4 flex-shrink-0"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  <span>{apiError}</span>
-                </div>
-              )}
-
-              {/* EN: Email input field / VI: Trường nhập email */}
-              <Input
-                type="email"
-                label={t('auth.forgotPassword.email')}
-                placeholder="you@example.com"
-                isInvalid={!!errors.email}
-                errorMessage={errors.email?.message}
-                name="email"
-                value={watch('email')}
-                onChange={(value) => setValue('email', value)}
-                onBlur={register('email').onBlur}
-                autoComplete="email"
-                autoFocus
-                aria-required="true"
-              />
-            </CardContent>
-
-            <CardFooter className="flex flex-col gap-4">
-              {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
-              <Button
-                type="submit"
-                variant="primary"
-                size="lg"
-                className="w-full"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
+              {/* EN: Success icon and message / VI: Icon và thông báo thành công */}
+              <div
+                className="p-4 rounded-lg bg-bg-tertiary border border-accent-success text-accent-success flex items-center gap-3"
+                role="alert"
               >
-                {isSubmitting
-                  ? t('auth.forgotPassword.sending')
-                  : t('auth.forgotPassword.sendResetLink')}
-              </Button>
-            </CardFooter>
-          </form>
-        )}
+                <svg
+                  className="h-5 w-5 flex-shrink-0"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+                <span className="text-sm font-medium">
+                  {t('auth.forgotPassword.resetLinkSent')}
+                </span>
+              </div>
 
-        <CardFooter className="flex flex-col gap-2 pt-4">
-          {/* EN: Back to login link / VI: Link quay lại đăng nhập */}
-          <Link
-            href="/login"
-            className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
-          >
-            ← {t('auth.forgotPassword.backToLogin')}
-          </Link>
+              {/* EN: Detailed success message / VI: Thông báo thành công chi tiết */}
+              <div className="space-y-3 text-sm text-text-secondary">
+                <p>
+                  {t('auth.forgotPassword.resetLinkSentDetail', { email: submittedEmail })}
+                </p>
+                <div className="pt-2 border-t border-border-primary">
+                  <p className="text-text-tertiary">
+                    {t('auth.forgotPassword.checkInbox')}
+                  </p>
+                </div>
+              </div>
 
-          {/* EN: Sign up link / VI: Link đăng ký */}
-          <p className="text-sm text-center text-text-tertiary">
-            {t('auth.forgotPassword.noAccount')}{' '}
+              {/* EN: Additional action buttons / VI: Các nút hành động bổ sung */}
+              <div className="pt-2 space-y-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => {
+                    setIsSuccess(false);
+                    setSubmittedEmail('');
+                  }}
+                >
+                  {t('auth.forgotPassword.sendToAnotherEmail')}
+                </Button>
+              </div>
+            </CardContent>
+          ) : (
+            // EN: Form state - email input and submit
+            // VI: Trạng thái form - input email và submit
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <CardContent className="space-y-4">
+                {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
+                {apiError && (
+                  <div
+                    className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
+                    role="alert"
+                  >
+                    <svg
+                      className="h-4 w-4 flex-shrink-0"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span>{apiError}</span>
+                  </div>
+                )}
+
+                {/* EN: Email input field / VI: Trường nhập email */}
+                <Input
+                  type="email"
+                  label={t('auth.forgotPassword.email')}
+                  placeholder="you@example.com"
+                  isInvalid={!!errors.email}
+                  errorMessage={errors.email?.message}
+                  name="email"
+                  value={watch('email')}
+                  onChange={(value) => setValue('email', value)}
+                  onBlur={register('email').onBlur}
+                  autoComplete="email"
+                  autoFocus
+                  aria-required="true"
+                />
+              </CardContent>
+
+              <CardFooter className="flex flex-col gap-4">
+                {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
+                <Button
+                  type="submit"
+                  variant="primary"
+                  size="lg"
+                  className="w-full"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  {isSubmitting
+                    ? t('auth.forgotPassword.sending')
+                    : t('auth.forgotPassword.sendResetLink')}
+                </Button>
+              </CardFooter>
+            </form>
+          )}
+
+          <CardFooter className="flex flex-col gap-2 pt-4">
+            {/* EN: Back to login link / VI: Link quay lại đăng nhập */}
             <Link
-              href="/register"
-              className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+              href="/login"
+              className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
             >
-              {t('auth.forgotPassword.signUp')}
+              ← {t('auth.forgotPassword.backToLogin')}
             </Link>
-          </p>
-        </CardFooter>
-      </Card>
-    </div>
+
+            {/* EN: Sign up link / VI: Link đăng ký */}
+            <p className="text-sm text-center text-text-tertiary">
+              {t('auth.forgotPassword.noAccount')}{' '}
+              <Link
+                href="/register"
+                className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+              >
+                {t('auth.forgotPassword.signUp')}
+              </Link>
+            </p>
+          </CardFooter>
+        </Card>
+      </div>
+    </>
   );
 }
diff --git a/apps/web-client/src/app/(auth)/login/page.tsx b/apps/web-client/src/app/(auth)/login/page.tsx
index f8e66dc3..10137828 100644
--- a/apps/web-client/src/app/(auth)/login/page.tsx
+++ b/apps/web-client/src/app/(auth)/login/page.tsx
@@ -11,6 +11,7 @@ import { Button } from '@/features/shared/components/ui/button';
 import { Input } from '@/features/shared/components/ui/input';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
 import { useTranslations } from 'next-intl';
+import { AuthControls } from '@/features/shared/components/layout/auth-controls';
 
 /**
  * EN: Create login schema with translated messages
@@ -110,124 +111,125 @@ export default function LoginPage() {
     // EN: Centered login form layout with dark mode background
     // VI: Layout form đăng nhập được căn giữa với nền dark mode
     <main role="main" aria-label={t('auth.login.pageLabel')}>
-    <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
-      <Card className="w-full max-w-md" hover={false} bordered>
-        <CardHeader className="text-center">
-          <CardTitle className="text-2xl font-semibold">
-            {t('auth.login.title')}
-          </CardTitle>
-          <CardDescription className="mt-2">
-            {t('auth.login.description')}
-          </CardDescription>
-        </CardHeader>
+      <AuthControls />
+      <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
+        <Card className="w-full max-w-md" hover={false} bordered>
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl font-semibold">
+              {t('auth.login.title')}
+            </CardTitle>
+            <CardDescription className="mt-2">
+              {t('auth.login.description')}
+            </CardDescription>
+          </CardHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <CardContent className="space-y-4">
-            {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
-            {apiError && (
-              <div
-                className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
-                role="alert"
-              >
-                <svg
-                  className="h-4 w-4 flex-shrink-0"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <CardContent className="space-y-4">
+              {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
+              {apiError && (
+                <div
+                  className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
+                  role="alert"
                 >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  <svg
+                    className="h-4 w-4 flex-shrink-0"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <span>{apiError}</span>
+                </div>
+              )}
+
+              {/* EN: Email input field / VI: Trường nhập email */}
+              <Input
+                type="email"
+                label={t('auth.login.email')}
+                placeholder="you@example.com"
+                isInvalid={!!errors.email}
+                errorMessage={errors.email?.message}
+                name="email"
+                value={watch('email')}
+                onChange={(value) => setValue('email', value)}
+                onBlur={register('email').onBlur}
+                autoComplete="email"
+                aria-required="true"
+              />
+
+              {/* EN: Password input field / VI: Trường nhập mật khẩu */}
+              <Input
+                type="password"
+                label={t('auth.login.password')}
+                placeholder={t('auth.login.password')}
+                isInvalid={!!errors.password}
+                errorMessage={errors.password?.message}
+                name="password"
+                value={watch('password')}
+                onChange={(value) => setValue('password', value)}
+                onBlur={register('password').onBlur}
+                autoComplete="current-password"
+                aria-required="true"
+              />
+
+              {/* EN: Remember me and forgot password row / VI: Hàng nhớ đăng nhập và quên mật khẩu */}
+              <div className="flex items-center justify-between">
+                <label className="flex items-center gap-2 cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    {...register('rememberMe')}
+                    className="w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer"
                   />
-                </svg>
-                <span>{apiError}</span>
+                  <span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
+                    {t('auth.login.rememberMe')}
+                  </span>
+                </label>
+
+                <Link
+                  href="/forgot-password"
+                  className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+                >
+                  {t('auth.login.forgotPassword')}
+                </Link>
               </div>
-            )}
+            </CardContent>
 
-            {/* EN: Email input field / VI: Trường nhập email */}
-            <Input
-              type="email"
-              label={t('auth.login.email')}
-              placeholder="you@example.com"
-              isInvalid={!!errors.email}
-              errorMessage={errors.email?.message}
-              name="email"
-              value={watch('email')}
-              onChange={(value) => setValue('email', value)}
-              onBlur={register('email').onBlur}
-              autoComplete="email"
-              aria-required="true"
-            />
-
-            {/* EN: Password input field / VI: Trường nhập mật khẩu */}
-            <Input
-              type="password"
-              label={t('auth.login.password')}
-              placeholder={t('auth.login.password')}
-              isInvalid={!!errors.password}
-              errorMessage={errors.password?.message}
-              name="password"
-              value={watch('password')}
-              onChange={(value) => setValue('password', value)}
-              onBlur={register('password').onBlur}
-              autoComplete="current-password"
-              aria-required="true"
-            />
-
-            {/* EN: Remember me and forgot password row / VI: Hàng nhớ đăng nhập và quên mật khẩu */}
-            <div className="flex items-center justify-between">
-              <label className="flex items-center gap-2 cursor-pointer group">
-                <input
-                  type="checkbox"
-                  {...register('rememberMe')}
-                  className="w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer"
-                />
-                <span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
-                  {t('auth.login.rememberMe')}
-                </span>
-              </label>
-
-              <Link
-                href="/forgot-password"
-                className="text-sm text-accent-primary hover:brightness-110 transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+            <CardFooter className="flex flex-col gap-4">
+              {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                className="w-full"
+                isLoading={isLoading || isSubmitting}
+                isDisabled={isLoading || isSubmitting}
               >
-                {t('auth.login.forgotPassword')}
-              </Link>
-            </div>
-          </CardContent>
+                {isLoading || isSubmitting
+                  ? t('auth.login.signingIn')
+                  : t('auth.login.title')}
+              </Button>
 
-          <CardFooter className="flex flex-col gap-4">
-            {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
-            <Button
-              type="submit"
-              variant="primary"
-              size="lg"
-              className="w-full"
-              isLoading={isLoading || isSubmitting}
-              isDisabled={isLoading || isSubmitting}
-            >
-              {isLoading || isSubmitting
-                ? t('auth.login.signingIn')
-                : t('auth.login.title')}
-            </Button>
-
-            {/* EN: Sign up link / VI: Link đăng ký */}
-            <p className="text-sm text-center text-text-tertiary">
-              {t('auth.login.noAccount')}{' '}
-              <Link
-                href="/register"
-                className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
-              >
-                {t('auth.login.signUp')}
-              </Link>
-            </p>
-          </CardFooter>
-        </form>
-      </Card>
-    </div>
+              {/* EN: Sign up link / VI: Link đăng ký */}
+              <p className="text-sm text-center text-text-tertiary">
+                {t('auth.login.noAccount')}{' '}
+                <Link
+                  href="/register"
+                  className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+                >
+                  {t('auth.login.signUp')}
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
     </main>
   );
 }
diff --git a/apps/web-client/src/app/(auth)/register/page.tsx b/apps/web-client/src/app/(auth)/register/page.tsx
index b713564c..bcd8819f 100644
--- a/apps/web-client/src/app/(auth)/register/page.tsx
+++ b/apps/web-client/src/app/(auth)/register/page.tsx
@@ -11,6 +11,7 @@ import { Button } from '@/features/shared/components/ui/button';
 import { Input } from '@/features/shared/components/ui/input';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/features/shared/components/ui/card';
 import { useTranslations } from 'next-intl';
+import { AuthControls } from '@/features/shared/components/layout/auth-controls';
 
 /**
  * EN: Create register schema with translated messages
@@ -223,166 +224,29 @@ export default function RegisterPage() {
   return (
     // EN: Centered register form layout with dark mode background
     // VI: Layout form đăng ký được căn giữa với nền dark mode
-    <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
-      <Card className="w-full max-w-md" hover={false} bordered>
-        <CardHeader className="text-center">
-          <CardTitle className="text-2xl font-semibold">
-            {t('auth.register.createAccount')}
-          </CardTitle>
-          <CardDescription className="mt-2">
-            {t('auth.register.signUpToStart')}
-          </CardDescription>
-        </CardHeader>
+    <>
+      <AuthControls />
+      <div className="min-h-screen flex items-center justify-center bg-bg-primary px-4 py-12">
+        <Card className="w-full max-w-md" hover={false} bordered>
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl font-semibold">
+              {t('auth.register.createAccount')}
+            </CardTitle>
+            <CardDescription className="mt-2">
+              {t('auth.register.signUpToStart')}
+            </CardDescription>
+          </CardHeader>
 
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <CardContent className="space-y-4">
-            {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
-            {apiError && (
-              <div
-                className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
-                role="alert"
-              >
-                <svg
-                  className="h-4 w-4 flex-shrink-0"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  aria-hidden="true"
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <CardContent className="space-y-4">
+              {/* EN: API Error message display / VI: Hiển thị thông báo lỗi API */}
+              {apiError && (
+                <div
+                  className="p-3 rounded-md bg-bg-tertiary border border-accent-error text-accent-error text-sm flex items-center gap-2"
+                  role="alert"
                 >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-                <span>{apiError}</span>
-              </div>
-            )}
-
-            {/* EN: Full name input field / VI: Trường nhập họ tên */}
-            <Input
-              type="text"
-              label={t('auth.register.fullName')}
-              placeholder="John Doe"
-              isInvalid={!!errors.fullName}
-              errorMessage={errors.fullName?.message}
-              name="fullName"
-              value={watch('fullName')}
-              onChange={(value) => setValue('fullName', value)}
-              onBlur={register('fullName').onBlur}
-              autoComplete="name"
-              aria-required="true"
-            />
-
-            {/* EN: Email input field / VI: Trường nhập email */}
-            <Input
-              type="email"
-              label={t('auth.register.email')}
-              placeholder="you@example.com"
-              isInvalid={!!errors.email}
-              errorMessage={errors.email?.message}
-              name="email"
-              value={watch('email')}
-              onChange={(value) => setValue('email', value)}
-              onBlur={register('email').onBlur}
-              autoComplete="email"
-              aria-required="true"
-            />
-
-            {/* EN: Password input field / VI: Trường nhập mật khẩu */}
-            <div>
-              <Input
-                type="password"
-                label={t('auth.register.password')}
-                placeholder={t('auth.register.createStrongPassword')}
-                isInvalid={!!errors.password}
-                errorMessage={errors.password?.message}
-                name="password"
-                value={watch('password')}
-                onChange={(value) => setValue('password', value)}
-                onBlur={register('password').onBlur}
-                autoComplete="new-password"
-                aria-required="true"
-              />
-
-              {/* EN: Password strength indicator / VI: Chỉ báo độ mạnh mật khẩu */}
-              {password && (
-                <div className="mt-2 space-y-2">
-                  {/* EN: Strength bar / VI: Thanh độ mạnh */}
-                  <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
-                    <div
-                      className={`h-full transition-all duration-300 ${getStrengthColor(
-                        passwordStrength.strength
-                      )}`}
-                      style={{ width: `${passwordStrength.percentage}%` }}
-                      role="progressbar"
-                      aria-valuenow={passwordStrength.percentage}
-                      aria-valuemin={0}
-                      aria-valuemax={100}
-                      aria-label={t('auth.register.passwordStrength', { strength: t(`auth.register.${passwordStrength.feedback}`) })}
-                    />
-                  </div>
-
-                  {/* EN: Strength feedback text / VI: Text phản hồi độ mạnh */}
-                  <p
-                    className={`text-xs font-medium ${
-                      passwordStrength.strength === 'weak'
-                        ? 'text-accent-error'
-                        : passwordStrength.strength === 'fair'
-                        ? 'text-accent-warning'
-                        : passwordStrength.strength === 'good'
-                        ? 'text-accent-warning'
-                        : 'text-accent-success'
-                    }`}
-                  >
-                    {t(`auth.register.${passwordStrength.feedback}`)}
-                  </p>
-                </div>
-              )}
-            </div>
-
-            {/* EN: Confirm password input field / VI: Trường xác nhận mật khẩu */}
-            <Input
-              type="password"
-              label={t('auth.register.confirmPassword')}
-              placeholder={t('auth.register.reEnterPassword')}
-              isInvalid={!!errors.confirmPassword}
-              errorMessage={errors.confirmPassword?.message}
-              name="confirmPassword"
-              value={watch('confirmPassword')}
-              onChange={(value) => setValue('confirmPassword', value)}
-              onBlur={register('confirmPassword').onBlur}
-              autoComplete="new-password"
-              aria-required="true"
-            />
-
-            {/* EN: Terms and conditions checkbox / VI: Checkbox điều khoản và điều kiện */}
-            <div className="space-y-2">
-              <label className="flex items-start gap-2 cursor-pointer group">
-                <input
-                  type="checkbox"
-                  {...register('terms')}
-                  className="mt-1 w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer flex-shrink-0"
-                  aria-required="true"
-                  aria-invalid={errors.terms ? 'true' : 'false'}
-                />
-                <span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
-                  {t('auth.register.agreeToTerms')}{' '}
-                  <Link
-                    href="/terms"
-                    className="text-accent-primary hover:brightness-110 underline focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {t('auth.register.termsAndConditions')}
-                  </Link>
-                </span>
-              </label>
-              {errors.terms && (
-                <p className="text-sm text-accent-error flex items-center gap-1 ml-6" role="alert">
                   <svg
-                    className="h-4 w-4"
+                    className="h-4 w-4 flex-shrink-0"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -395,40 +259,179 @@ export default function RegisterPage() {
                       d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  {errors.terms.message}
-                </p>
+                  <span>{apiError}</span>
+                </div>
               )}
-            </div>
-          </CardContent>
 
-          <CardFooter className="flex flex-col gap-4">
-            {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
-            <Button
-              type="submit"
-              variant="primary"
-              size="lg"
-              className="w-full"
-              isLoading={isLoading || isSubmitting}
-              isDisabled={isLoading || isSubmitting}
-            >
-              {isLoading || isSubmitting
-                ? t('auth.register.creatingAccount')
-                : t('auth.register.createAccount')}
-            </Button>
+              {/* EN: Full name input field / VI: Trường nhập họ tên */}
+              <Input
+                type="text"
+                label={t('auth.register.fullName')}
+                placeholder="John Doe"
+                isInvalid={!!errors.fullName}
+                errorMessage={errors.fullName?.message}
+                name="fullName"
+                value={watch('fullName')}
+                onChange={(value) => setValue('fullName', value)}
+                onBlur={register('fullName').onBlur}
+                autoComplete="name"
+                aria-required="true"
+              />
 
-            {/* EN: Sign in link / VI: Link đăng nhập */}
-            <p className="text-sm text-center text-text-tertiary">
-              {t('auth.register.alreadyHaveAccount')}{' '}
-              <Link
-                href="/login"
-                className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+              {/* EN: Email input field / VI: Trường nhập email */}
+              <Input
+                type="email"
+                label={t('auth.register.email')}
+                placeholder="you@example.com"
+                isInvalid={!!errors.email}
+                errorMessage={errors.email?.message}
+                name="email"
+                value={watch('email')}
+                onChange={(value) => setValue('email', value)}
+                onBlur={register('email').onBlur}
+                autoComplete="email"
+                aria-required="true"
+              />
+
+              {/* EN: Password input field / VI: Trường nhập mật khẩu */}
+              <div>
+                <Input
+                  type="password"
+                  label={t('auth.register.password')}
+                  placeholder={t('auth.register.createStrongPassword')}
+                  isInvalid={!!errors.password}
+                  errorMessage={errors.password?.message}
+                  name="password"
+                  value={watch('password')}
+                  onChange={(value) => setValue('password', value)}
+                  onBlur={register('password').onBlur}
+                  autoComplete="new-password"
+                  aria-required="true"
+                />
+
+                {/* EN: Password strength indicator / VI: Chỉ báo độ mạnh mật khẩu */}
+                {password && (
+                  <div className="mt-2 space-y-2">
+                    {/* EN: Strength bar / VI: Thanh độ mạnh */}
+                    <div className="w-full h-2 bg-bg-tertiary rounded-full overflow-hidden">
+                      <div
+                        className={`h-full transition-all duration-300 ${getStrengthColor(
+                          passwordStrength.strength
+                        )}`}
+                        style={{ width: `${passwordStrength.percentage}%` }}
+                        role="progressbar"
+                        aria-valuenow={passwordStrength.percentage}
+                        aria-valuemin={0}
+                        aria-valuemax={100}
+                        aria-label={t('auth.register.passwordStrength', { strength: t(`auth.register.${passwordStrength.feedback}`) })}
+                      />
+                    </div>
+
+                    {/* EN: Strength feedback text / VI: Text phản hồi độ mạnh */}
+                    <p
+                      className={`text-xs font-medium ${passwordStrength.strength === 'weak'
+                        ? 'text-accent-error'
+                        : passwordStrength.strength === 'fair'
+                          ? 'text-accent-warning'
+                          : passwordStrength.strength === 'good'
+                            ? 'text-accent-warning'
+                            : 'text-accent-success'
+                        }`}
+                    >
+                      {t(`auth.register.${passwordStrength.feedback}`)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* EN: Confirm password input field / VI: Trường xác nhận mật khẩu */}
+              <Input
+                type="password"
+                label={t('auth.register.confirmPassword')}
+                placeholder={t('auth.register.reEnterPassword')}
+                isInvalid={!!errors.confirmPassword}
+                errorMessage={errors.confirmPassword?.message}
+                name="confirmPassword"
+                value={watch('confirmPassword')}
+                onChange={(value) => setValue('confirmPassword', value)}
+                onBlur={register('confirmPassword').onBlur}
+                autoComplete="new-password"
+                aria-required="true"
+              />
+
+              {/* EN: Terms and conditions checkbox / VI: Checkbox điều khoản và điều kiện */}
+              <div className="space-y-2">
+                <label className="flex items-start gap-2 cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    {...register('terms')}
+                    className="mt-1 w-4 h-4 rounded border-border-primary bg-bg-secondary text-accent-primary focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary cursor-pointer flex-shrink-0"
+                    aria-required="true"
+                    aria-invalid={errors.terms ? 'true' : 'false'}
+                  />
+                  <span className="text-sm text-text-secondary group-hover:text-text-primary transition-colors">
+                    {t('auth.register.agreeToTerms')}{' '}
+                    <Link
+                      href="/terms"
+                      className="text-accent-primary hover:brightness-110 underline focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('auth.register.termsAndConditions')}
+                    </Link>
+                  </span>
+                </label>
+                {errors.terms && (
+                  <p className="text-sm text-accent-error flex items-center gap-1 ml-6" role="alert">
+                    <svg
+                      className="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    {errors.terms.message}
+                  </p>
+                )}
+              </div>
+            </CardContent>
+
+            <CardFooter className="flex flex-col gap-4">
+              {/* EN: Submit button with loading state / VI: Nút submit với trạng thái loading */}
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                className="w-full"
+                isLoading={isLoading || isSubmitting}
+                isDisabled={isLoading || isSubmitting}
               >
-                {t('auth.register.signIn')}
-              </Link>
-            </p>
-          </CardFooter>
-        </form>
-      </Card>
-    </div>
+                {isLoading || isSubmitting
+                  ? t('auth.register.creatingAccount')
+                  : t('auth.register.createAccount')}
+              </Button>
+
+              {/* EN: Sign in link / VI: Link đăng nhập */}
+              <p className="text-sm text-center text-text-tertiary">
+                {t('auth.register.alreadyHaveAccount')}{' '}
+                <Link
+                  href="/login"
+                  className="text-accent-primary hover:brightness-110 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-accent-primary focus:ring-offset-2 focus:ring-offset-bg-primary rounded"
+                >
+                  {t('auth.register.signIn')}
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </>
   );
 }
diff --git a/apps/web-client/src/features/shared/components/layout/auth-controls.tsx b/apps/web-client/src/features/shared/components/layout/auth-controls.tsx
new file mode 100644
index 00000000..8bc85e55
--- /dev/null
+++ b/apps/web-client/src/features/shared/components/layout/auth-controls.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { ThemeToggle } from '@/features/theme/components/theme-toggle-enhanced';
+import { LanguageSwitcher } from '@/features/theme/components/language-switcher';
+
+/**
+ * EN: Auth Controls - Theme and Language switchers for auth pages
+ * VI: Auth Controls - Bộ chuyển theme và ngôn ngữ cho trang auth
+ * 
+ * Features:
+ * - Fixed position in top-right corner
+ * - Styled to match "Try Grok" button
+ * - Works on all auth pages (login, register, forgot-password)
+ * 
+ * @example
+ * ```tsx
+ * <AuthControls />
+ * ```
+ */
+export function AuthControls() {
+    return (
+        <div className="fixed top-6 right-6 z-50 flex items-center gap-3">
+            <ThemeToggle />
+            <LanguageSwitcher />
+        </div>
+    );
+}
diff --git a/apps/web-client/src/features/theme/components/language-switcher.tsx b/apps/web-client/src/features/theme/components/language-switcher.tsx
index fb2a8067..6c552017 100644
--- a/apps/web-client/src/features/theme/components/language-switcher.tsx
+++ b/apps/web-client/src/features/theme/components/language-switcher.tsx
@@ -53,9 +53,9 @@ export function LanguageSwitcher() {
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <Button
-                    variant="glass"
-                    size="md"
-                    className="gap-2 min-w-[80px]"
+                    variant="ghost"
+                    size="sm"
+                    className="text-white border border-white/20 hover:bg-white/10 transition-all gap-2"
                     aria-label="Change language"
                 >
                     <span className="font-medium">{currentLanguage.code.toUpperCase()}</span>
diff --git a/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx b/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
index c054ac2e..618f0bae 100644
--- a/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
+++ b/apps/web-client/src/features/theme/components/theme-toggle-enhanced.tsx
@@ -44,9 +44,9 @@ export function ThemeToggle() {
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
                 <Button
-                    variant="glass"
-                    size="md"
-                    className="w-10 h-10 p-0"
+                    variant="ghost"
+                    size="sm"
+                    className="text-white border border-white/20 hover:bg-white/10 transition-all"
                     aria-label="Toggle theme"
                 >
                     <CurrentIcon className="h-5 w-5" />