diff --git a/packages/app/components/auth/acceptRules/AcceptRules.ts b/packages/app/components/auth/acceptRules/AcceptRules.tsx
similarity index 69%
rename from packages/app/components/auth/acceptRules/AcceptRules.ts
rename to packages/app/components/auth/acceptRules/AcceptRules.tsx
index 3d02480..dd98c70 100644
--- a/packages/app/components/auth/acceptRules/AcceptRules.ts
+++ b/packages/app/components/auth/acceptRules/AcceptRules.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './AcceptRulesBody';
 
 const messages = defineMessages({
     title: 'User Agreement',
-    accept: 'Accept',
     declineAndLogout: 'Decline and logout',
 });
 
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'darkBlue',
         autoFocus: true,
-        label: messages.accept,
+        children: <Message key="accept" defaultMessage="Accept" />,
     },
     links: {
         label: messages.declineAndLogout,
diff --git a/packages/app/components/auth/activation/Activation.ts b/packages/app/components/auth/activation/Activation.tsx
similarity index 69%
rename from packages/app/components/auth/activation/Activation.ts
rename to packages/app/components/auth/activation/Activation.tsx
index 48caced..7bab059 100644
--- a/packages/app/components/auth/activation/Activation.ts
+++ b/packages/app/components/auth/activation/Activation.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ActivationBody';
 
 const messages = defineMessages({
     accountActivationTitle: 'Account activation',
-    confirmEmail: 'Confirm E‑mail',
     didNotReceivedEmail: 'Did not received E‑mail?',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.confirmEmail,
+        children: <Message key="confirmEmail" defaultMessage="Confirm E‑mail" />,
     },
     links: {
         label: messages.didNotReceivedEmail,
diff --git a/packages/app/components/auth/chooseAccount/ChooseAccount.ts b/packages/app/components/auth/chooseAccount/ChooseAccount.tsx
similarity index 70%
rename from packages/app/components/auth/chooseAccount/ChooseAccount.ts
rename to packages/app/components/auth/chooseAccount/ChooseAccount.tsx
index 60e9272..d08df16 100644
--- a/packages/app/components/auth/chooseAccount/ChooseAccount.ts
+++ b/packages/app/components/auth/chooseAccount/ChooseAccount.tsx
@@ -1,10 +1,10 @@
-import { defineMessages } from 'react-intl';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ChooseAccountBody';
 
 const messages = defineMessages({
     chooseAccountTitle: 'Choose an account',
-    addAccount: 'Log into another account',
     logoutAll: 'Log out from all accounts',
 });
 
@@ -12,7 +12,7 @@ export default factory({
     title: messages.chooseAccountTitle,
     body: Body,
     footer: {
-        label: messages.addAccount,
+        children: <Message key="addAccount" defaultMessage="Log into another account" />,
     },
     links: [
         {
diff --git a/packages/app/components/auth/factory.tsx b/packages/app/components/auth/factory.tsx
index a8a4395..d78425e 100644
--- a/packages/app/components/auth/factory.tsx
+++ b/packages/app/components/auth/factory.tsx
@@ -1,9 +1,10 @@
 import React, { ComponentProps, ComponentType } from 'react';
+import { MessageDescriptor } from 'react-intl';
+
 import { Button } from 'app/components/ui/form';
 import RejectionLink from 'app/components/auth/RejectionLink';
 import AuthTitle from 'app/components/auth/AuthTitle';
-import { MessageDescriptor } from 'react-intl';
-import { Color } from 'app/components/ui';
+
 import BaseAuthBody from './BaseAuthBody';
 
 export type Factory = () => {
@@ -17,11 +18,7 @@ type RejectionLinkProps = ComponentProps<typeof RejectionLink>;
 interface FactoryParams {
     title: MessageDescriptor;
     body: typeof BaseAuthBody;
-    footer: {
-        color?: Color;
-        label: string | MessageDescriptor;
-        autoFocus?: boolean;
-    };
+    footer: Omit<ComponentProps<typeof Button>, 'type'>;
     links?: RejectionLinkProps | Array<RejectionLinkProps>;
 }
 
diff --git a/packages/app/components/auth/forgotPassword/ForgotPassword.ts b/packages/app/components/auth/forgotPassword/ForgotPassword.tsx
similarity index 69%
rename from packages/app/components/auth/forgotPassword/ForgotPassword.ts
rename to packages/app/components/auth/forgotPassword/ForgotPassword.tsx
index c4013a6..2c08be5 100644
--- a/packages/app/components/auth/forgotPassword/ForgotPassword.ts
+++ b/packages/app/components/auth/forgotPassword/ForgotPassword.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ForgotPasswordBody';
 
 const messages = defineMessages({
     title: 'Forgot password',
-    sendMail: 'Send mail',
     alreadyHaveCode: 'Already have a code',
 });
 
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'lightViolet',
         autoFocus: true,
-        label: messages.sendMail,
+        children: <Message key="sendMail" defaultMessage="Send mail" />,
     },
     links: {
         label: messages.alreadyHaveCode,
diff --git a/packages/app/components/auth/login/Login.ts b/packages/app/components/auth/login/Login.tsx
similarity index 71%
rename from packages/app/components/auth/login/Login.ts
rename to packages/app/components/auth/login/Login.tsx
index e4134e2..2a31d28 100644
--- a/packages/app/components/auth/login/Login.ts
+++ b/packages/app/components/auth/login/Login.tsx
@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './LoginBody';
 
 const messages = defineMessages({
     createNewAccount: 'Create new account',
     loginTitle: 'Sign in',
-    next: 'Next',
 });
 
 export default factory({
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.next,
+        children: <Message key="next" defaultMessage="Next" />,
     },
     links: {
         isAvailable: (context) => !context.user.isGuest,
diff --git a/packages/app/components/auth/mfa/Mfa.tsx b/packages/app/components/auth/mfa/Mfa.tsx
index 350b5d6..fa2e49c 100644
--- a/packages/app/components/auth/mfa/Mfa.tsx
+++ b/packages/app/components/auth/mfa/Mfa.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './MfaBody';
 
 const messages = defineMessages({
     enterTotp: 'Enter code',
-    signInButton: 'Sign in',
 });
 
 export default factory({
@@ -12,6 +13,6 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.signInButton,
+        children: <Message key="signInButton" defaultMessage="Sign in" />,
     },
 });
diff --git a/packages/app/components/auth/password/Password.ts b/packages/app/components/auth/password/Password.tsx
similarity index 67%
rename from packages/app/components/auth/password/Password.ts
rename to packages/app/components/auth/password/Password.tsx
index 3981b18..50c9d77 100644
--- a/packages/app/components/auth/password/Password.ts
+++ b/packages/app/components/auth/password/Password.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './PasswordBody';
 
 const messages = defineMessages({
     passwordTitle: 'Enter password',
-    signInButton: 'Sign in',
     forgotPassword: 'Forgot password',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'green',
-        label: messages.signInButton,
+        children: <Message key="signInButton" defaultMessage="Sign in" />,
     },
     links: {
         label: messages.forgotPassword,
diff --git a/packages/app/components/auth/permissions/Permissions.ts b/packages/app/components/auth/permissions/Permissions.tsx
similarity index 69%
rename from packages/app/components/auth/permissions/Permissions.ts
rename to packages/app/components/auth/permissions/Permissions.tsx
index b90aef3..f44441d 100644
--- a/packages/app/components/auth/permissions/Permissions.ts
+++ b/packages/app/components/auth/permissions/Permissions.tsx
@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './PermissionsBody';
 
 const messages = defineMessages({
     permissionsTitle: 'Application permissions',
     decline: 'Decline',
-    approve: 'Approve',
 });
 
 export default factory({
@@ -14,7 +15,7 @@ export default factory({
     footer: {
         color: 'orange',
         autoFocus: true,
-        label: messages.approve,
+        children: <Message key="approve" defaultMessage="Approve" />,
     },
     links: {
         label: messages.decline,
diff --git a/packages/app/components/auth/recoverPassword/RecoverPassword.ts b/packages/app/components/auth/recoverPassword/RecoverPassword.tsx
similarity index 67%
rename from packages/app/components/auth/recoverPassword/RecoverPassword.ts
rename to packages/app/components/auth/recoverPassword/RecoverPassword.tsx
index aeaaffa..dd0c856 100644
--- a/packages/app/components/auth/recoverPassword/RecoverPassword.ts
+++ b/packages/app/components/auth/recoverPassword/RecoverPassword.tsx
@@ -1,11 +1,12 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './RecoverPasswordBody';
 
 const messages = defineMessages({
     title: 'Restore password',
     contactSupport: 'Contact support',
-    change: 'Change password',
 });
 
 export default factory({
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'lightViolet',
-        label: messages.change,
+        children: <Message key="change" defaultMessage="Change password" />,
     },
     links: {
         label: messages.contactSupport,
diff --git a/packages/app/components/auth/register/Register.ts b/packages/app/components/auth/register/Register.tsx
similarity index 75%
rename from packages/app/components/auth/register/Register.ts
rename to packages/app/components/auth/register/Register.tsx
index 74c66e9..c07623e 100644
--- a/packages/app/components/auth/register/Register.ts
+++ b/packages/app/components/auth/register/Register.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './RegisterBody';
 
 const messages = defineMessages({
     registerTitle: 'Sign Up',
-    signUpButton: 'Register',
     didNotReceivedEmail: 'Did not received E‑mail?',
     alreadyHaveCode: 'Already have a code',
 });
@@ -14,7 +15,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.signUpButton,
+        children: <Message key="signUpButton" defaultMessage="Register" />,
     },
     links: [
         {
diff --git a/packages/app/components/auth/resendActivation/ResendActivation.ts b/packages/app/components/auth/resendActivation/ResendActivation.tsx
similarity index 67%
rename from packages/app/components/auth/resendActivation/ResendActivation.ts
rename to packages/app/components/auth/resendActivation/ResendActivation.tsx
index f283fa5..c5d0656 100644
--- a/packages/app/components/auth/resendActivation/ResendActivation.ts
+++ b/packages/app/components/auth/resendActivation/ResendActivation.tsx
@@ -1,10 +1,11 @@
-import { defineMessages } from 'react-intl';
+import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import factory from '../factory';
 import Body from './ResendActivationBody';
 
 const messages = defineMessages({
     title: 'Did not received an E‑mail',
-    sendNewEmail: 'Send new E‑mail',
     alreadyHaveCode: 'Already have a code',
 });
 
@@ -13,7 +14,7 @@ export default factory({
     body: Body,
     footer: {
         color: 'blue',
-        label: messages.sendNewEmail,
+        children: <Message key="sendNewEmail" defaultMessage="Send new E‑mail" />,
     },
     links: {
         label: messages.alreadyHaveCode,