diff --git a/asab-webui b/asab-webui
index 9fc06df..f2e7345 160000
--- a/asab-webui
+++ b/asab-webui
@@ -1 +1 @@
-Subproject commit 9fc06df046dcb114262cfd04506fb0dcef22325b
+Subproject commit f2e73455030f94c7154974211a93e639de039822
diff --git a/package.json b/package.json
index e4bbf75..c35f996 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
 	"dependencies": {
 		"@vectopus/atlas-icons": "^0.0.7",
 		"axios": "^0.21.1",
-		"bootstrap": "4.6.0",
+		"bootstrap": "^5",
 		"core-js": "3",
 		"date-fns": "^2.28.0",
 		"i18next": "^19.7.0",
@@ -63,7 +63,7 @@
 		"react-redux": "^7.2.0",
 		"react-router-dom": "^5.1.2",
 		"react-simple-tree-menu": "^1.1.18",
-		"reactstrap": "^8.4.1",
+		"reactstrap": "^9.2.0",
 		"redux": "^4.0.1"
 	}
 }
diff --git a/src/modules/auth/containers/AcceptInvitationCard.js b/src/modules/auth/containers/AcceptInvitationCard.js
index de87b12..1abf5b8 100644
--- a/src/modules/auth/containers/AcceptInvitationCard.js
+++ b/src/modules/auth/containers/AcceptInvitationCard.js
@@ -108,7 +108,7 @@ function AcceptInvitationCard(props) {
 			<CardBody>
 				<Row className="justify-content-center">
 					<h5>
-						<Label for="acceptas" style={{display: "block"}}>
+						<Label for="acceptas" style={{display: "block"}} className='form-label'>
 							{t(`AcceptInvitationCard|Accept invitation as`)}
 							<span className="primary-span">{props.credentials}</span>
 						</Label>
diff --git a/src/modules/auth/containers/FormFields.js b/src/modules/auth/containers/FormFields.js
index 8cbf916..78148c9 100644
--- a/src/modules/auth/containers/FormFields.js
+++ b/src/modules/auth/containers/FormFields.js
@@ -1,7 +1,7 @@
-import React, { useState }  from 'react';
+import React from 'react';
 import {
-	FormGroup, Input, Label,
-	Button, InputGroupAddon, InputGroup, FormFeedback, FormText
+	Input, Label,
+	InputGroup, FormFeedback, FormText
 } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -22,8 +22,8 @@ export function PhoneField(props) {
 		}
 	);
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="phone">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="phone" className='form-label'>
 				{t("FormFields|Phone")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -61,8 +61,8 @@ export function EmailField(props) {
 	);
 
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="email">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="email" className='form-label'>
 				{t("FormFields|Email")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -102,8 +102,8 @@ export function UserNameField(props) {
 	}
 
 	return (
-		<FormGroup>
-			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="username">
+		<FormGroup className="mb-3">
+			<Label title={props.content?.required ? t("FormFields|Required field") : undefined} for="username" className='form-label'>
 				{t("FormFields|Username")}{props.content?.required && '*'}
 			</Label>
 			<Input
@@ -155,10 +155,11 @@ export function PasswordField(props) {
 
 	return(
 		<>
-			<FormGroup>
+			<FormGroup className="mb-3">
 				<Label
 					title={props.content?.required ? t("FormFields|Required field") : undefined}
 					for="password"
+					className='form-label'
 				>
 					{t("FormFields|Password")}{props.content?.required && (props.content?.set == false) && '*'}
 				</Label>
@@ -177,7 +178,7 @@ export function PasswordField(props) {
 				</InputGroup>
 			</FormGroup>
 
-			<FormGroup>
+			<FormGroup className="mb-3">
 				<Label for="password2">{t("FormFields|Re-enter Password")}</Label>
 				<InputGroup>
 					<Input
diff --git a/src/modules/auth/containers/LoginCard.js b/src/modules/auth/containers/LoginCard.js
index 2d84db7..bc6924c 100644
--- a/src/modules/auth/containers/LoginCard.js
+++ b/src/modules/auth/containers/LoginCard.js
@@ -7,9 +7,10 @@ import {
 	Row, Col,
 	Card, CardHeader, CardTitle,
 	CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText,
+	Form, FormText,
 	Label, Input, CustomInput,
-	Collapse, Button, Progress, ButtonGroup
+	Collapse, Button, Progress, ButtonGroup,
+	FormGroup
 } from 'reactstrap';
 
 import publicKeyValuesToJSON from "../webauthn/publicKeyValuesToJSON";
@@ -326,7 +327,7 @@ function LoginCard(props) {
 					{/* ident */}
 					<FormGroup tag="fieldset" disabled={isSubmitting || isOnClickSubmitting} className="text-center">
 						<h5>
-							<Label for="username" style={{display: "block"}}>
+							<Label for="username" style={{display: "block"}} className='form-label'>
 								{t('LoginCard|Username, email or phone')}
 							</Label>
 						</h5>
@@ -515,7 +516,7 @@ function PasswordField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Password')}
 				</Label>
 			</h5>
@@ -540,7 +541,7 @@ function KeyoteField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Login with mobile application')}
 				</Label>
 			</h5>
@@ -559,7 +560,7 @@ function YubiKeyField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Yubikey')}
 				</Label>
 			</h5>
@@ -585,7 +586,7 @@ function TOTPField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|OTP Code')}
 				</Label>
 			</h5>
@@ -786,8 +787,8 @@ function WebAuthnField(props) {
 	return(
 		<div className="text-center">
 			<h6>
-				<Label for={props.factor.type} style={{display: "block"}}>
-					<span className="at-shield-star-win pr-1" />{t('LoginCard|You will be prompted to login with FIDO2/WebAuthn')}
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
+					<span className="at-shield-star-win pe-1" />{t('LoginCard|You will be prompted to login with FIDO2/WebAuthn')}
 				</Label>
 			</h6>
 
@@ -858,7 +859,7 @@ function SMSLoginField(props) {
 		return(
 			<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 				<h5>
-					<Label for={props.factor.type} style={{display: "block"}}>
+					<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 						{t('LoginCard|Code from SMS')}
 					</Label>
 				</h5>
@@ -881,7 +882,7 @@ function SMSLoginField(props) {
 	return(
 		<FormGroup tag="fieldset" disabled={props.isSubmitting} className="text-center">
 			<h5>
-				<Label for={props.factor.type} style={{display: "block"}}>
+				<Label for={props.factor.type} style={{display: "block"}} className='form-label'>
 					{t('LoginCard|Login by SMS code')}
 				</Label>
 			</h5>
diff --git a/src/modules/auth/containers/RegisterScreen.js b/src/modules/auth/containers/RegisterScreen.js
index 809a28c..0ee0111 100644
--- a/src/modules/auth/containers/RegisterScreen.js
+++ b/src/modules/auth/containers/RegisterScreen.js
@@ -200,12 +200,12 @@ function RegisterScreen(props) {
 										{(userinfo == undefined) ?
 											t("RegisterScreen|You have been invited to")
 										:
-											<>{t(`RegisterScreen|Hello`)}<span className="primary-span pr-0">{credentials}</span>, {t(`RegisterScreen|you have been invited to`)}</>
+											<>{t(`RegisterScreen|Hello`)}<span className="primary-span pe-0">{credentials}</span>, {t(`RegisterScreen|you have been invited to`)}</>
 										}
 									</p>
 									{registerFeatures && registerFeatures?.tenants && registerFeatures?.tenants.map((tenant, i) => (
 											(registerFeatures.tenants.length != i+1) ?
-												<span key={i} className="primary-span pr-0">{tenant},</span>
+												<span key={i} className="primary-span pe-0">{tenant},</span>
 											:
 												<span key={i} className="primary-span">{tenant}</span>
 										))
diff --git a/src/modules/auth/email/EmailScreen.js b/src/modules/auth/email/EmailScreen.js
index e3d6fb2..ef03aee 100644
--- a/src/modules/auth/email/EmailScreen.js
+++ b/src/modules/auth/email/EmailScreen.js
@@ -7,7 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormFeedback, Input, Button
+	Form, FormFeedback, FormGroup, Input, Button
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
@@ -160,7 +160,6 @@ function ManageEmail(props) {
 					</CardSubtitle>
 				</div>
 			</CardHeader>
-
 			<CardBody className="text-center pb-1">
 				<FormGroup tag="fieldset" disabled={props.isSubmitting}>
 					<Input
diff --git a/src/modules/auth/home/HomeScreen.js b/src/modules/auth/home/HomeScreen.js
index 235814b..a5184a9 100644
--- a/src/modules/auth/home/HomeScreen.js
+++ b/src/modules/auth/home/HomeScreen.js
@@ -7,7 +7,7 @@ import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle,
 	CardSubtitle, CardBody, ListGroup,
-	ListGroupItem, CustomInput
+	ListGroupItem, Input, FormGroup
 } from 'reactstrap';
 
 import { DateTime } from 'asab-webui';
@@ -223,9 +223,9 @@ function HomeScreen(props) {
 											<Col sm={6}>{t('HomeScreen|Created')}</Col>
 											<Col sm={6}>
 												{userinfo?.created_at ?
-													<div className="float-right"><DateTime value={userinfo?.created_at}/></div>
+													<div className="float-end"><DateTime value={userinfo?.created_at}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
@@ -233,9 +233,9 @@ function HomeScreen(props) {
 											<Col sm={6}>{t('HomeScreen|Last successful login')}</Col>
 											<Col sm={6}>
 												{lastLogin?.sat ?
-													<div className="float-right"><DateTime value={lastLogin?.sat}/></div>
+													<div className="float-end"><DateTime value={lastLogin?.sat}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
@@ -243,9 +243,9 @@ function HomeScreen(props) {
 											<Col sm={6}>{t('HomeScreen|Last failed login')}</Col>
 											<Col sm={6}>
 												{lastLogin?.fat ?
-													<div className="float-right"><DateTime value={lastLogin?.fat}/></div>
+													<div className="float-end"><DateTime value={lastLogin?.fat}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
@@ -253,9 +253,9 @@ function HomeScreen(props) {
 											<Col sm={6}>{t('HomeScreen|Session expiration')}</Col>
 											<Col sm={6}>
 												{userinfo?.exp ?
-													<div className="float-right"><DateTime value={userinfo?.exp}/></div>
+													<div className="float-end"><DateTime value={userinfo?.exp}/></div>
 												:
-													<div className="float-right">N/A</div>
+													<div className="float-end">N/A</div>
 												}
 											</Col>
 										</Row>
@@ -274,13 +274,15 @@ function HomeScreen(props) {
 													</a>
 												</Col>
 												<Col sm={6}>
-													<CustomInput
-														id={`${item.label.replace(/[^\w\s]/gi, '-')}`}
-														className="float-right"
-														type="switch"
-														defaultChecked={isConnected}
-														onClick={() => externalServiceOnChange({ item, isConnected })}
-													/>
+													<FormGroup className="p-0" switch>
+														<Input
+															id={`${item?.label?.replace(/[^\w\s]/gi, '-')}`}
+															className="float-end"
+															defaultChecked={isConnected}
+															type="switch"
+															onClick={() => externalServiceOnChange({ item, isConnected })}
+														/>
+													</FormGroup>
 												</Col>
 											</Row>
 										</ListGroupItem>
@@ -308,7 +310,7 @@ function HomeScreen(props) {
 										</Col>
 										<Col sm={7}>
 											<div
-												className="float-right char-limit char-limit-text"
+												className="float-end char-limit char-limit-text"
 												id="emailAddress"
 												name="emailAddress"
 												title={userinfo?.email ?? "" }
@@ -338,7 +340,7 @@ function HomeScreen(props) {
 										</Col>
 										<Col sm={6}>
 											<div
-												className="float-right text-muted pointer char-limit char-limit-number"
+												className="float-end text-muted pointer char-limit char-limit-number"
 												id="phoneNumber"
 												name="phoneNumber"
 												title={userinfo?.phone ?? ""}
@@ -361,7 +363,7 @@ function HomeScreen(props) {
 											</Link>
 										</Col>
 										<Col sm={6}>
-											<div className="float-right text-muted pointer" id="webauthn" name="webauthn">
+											<div className="float-end text-muted pointer" id="webauthn" name="webauthn">
 												<div
 													className={((userinfo?.available_factors) && (userinfo.available_factors.indexOf("totp") != -1)) ?
 														`status-circle status-active`
@@ -385,7 +387,7 @@ function HomeScreen(props) {
 											</Link>
 										</Col>
 										<Col sm={6}>
-											<div className="float-right text-muted pointer" id="webauthn" name="webauthn">
+											<div className="float-end text-muted pointer" id="webauthn" name="webauthn">
 												<div
 													className={((userinfo?.available_factors) && (userinfo.available_factors.indexOf("webauthn") != -1)) ?
 														`status-circle status-active`
diff --git a/src/modules/auth/number/PhoneNumberScreen.js b/src/modules/auth/number/PhoneNumberScreen.js
index ccf88ec..1d94bf1 100644
--- a/src/modules/auth/number/PhoneNumberScreen.js
+++ b/src/modules/auth/number/PhoneNumberScreen.js
@@ -7,7 +7,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormFeedback, Label, Input, Button
+	Form, FormFeedback, FormGroup, Label, Input, Button
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
diff --git a/src/modules/auth/otp/TOTPScreen.js b/src/modules/auth/otp/TOTPScreen.js
index 408d83c..6f9d0fa 100644
--- a/src/modules/auth/otp/TOTPScreen.js
+++ b/src/modules/auth/otp/TOTPScreen.js
@@ -8,7 +8,7 @@ import QRCode from "react-qr-code";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText, Label, Input, Button, FormFeedback
+	Form, FormText, Input, Button, FormFeedback, FormGroup
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
@@ -222,7 +222,6 @@ function ActivateTOTP(props) {
 						<code>{props.secret}</code>
 					</Col>
 				</Row>
-
 				<FormGroup tag="fieldset" disabled={props.isSubmitting} style={{textAlign: "center"}}>
 					<Input
 						autoFocus
@@ -242,10 +241,9 @@ function ActivateTOTP(props) {
 						:
 						<FormText style={{paddingBottom: "1em"}}>{t('TOTPScreen|Enter the code from authenticator app')}</FormText>
 					}
-
 					<Button
 						block
-						className="justify-content-center"
+						className="justify-content-center my-2"
 						color="primary"
 						type="submit"
 					>
diff --git a/src/modules/auth/passwd/ChangePwdScreen.js b/src/modules/auth/passwd/ChangePwdScreen.js
index 69a3e58..d400407 100644
--- a/src/modules/auth/passwd/ChangePwdScreen.js
+++ b/src/modules/auth/passwd/ChangePwdScreen.js
@@ -6,7 +6,7 @@ import { Link, useHistory, useLocation } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText, FormFeedback, Label, Input, Button
+	Form, FormText, FormFeedback, FormGroup, Label, Input, Button
 } from 'reactstrap';
 
 import { factorChaining } from "../utils/factorChaining";
@@ -119,7 +119,7 @@ function ChangePwdCard(props) {
 				<CardBody className="pb-1">
 					<FormGroup tag="fieldset" disabled={isSubmitting} className="text-center">
 						<h5>
-							<Label for="oldpassword" style={{display: "block"}}>
+							<Label for="oldpassword" className="d-block form-label">
 								{t('ChangePwdScreen|Current Password')}
 							</Label>
 						</h5>
@@ -138,7 +138,7 @@ function ChangePwdCard(props) {
 
 					<FormGroup tag="fieldset" disabled={isSubmitting} className="text-center">
 						<h5>
-							<Label for="newpassword" style={{display: "block"}}>
+							<Label for="newpassword" className="d-block form-label">
 								{t('ChangePwdScreen|New Password')}
 							</Label>
 						</h5>
@@ -158,7 +158,7 @@ function ChangePwdCard(props) {
 
 					<FormGroup tag="fieldset" disabled={isSubmitting} className="text-center">
 						<h5>
-							<Label for="newpassword2" style={{display: "block"}}>
+							<Label for="newpassword2" className="d-block form-label">
 								{t('ChangePwdScreen|Re-enter Password')}
 							</Label>
 						</h5>
diff --git a/src/modules/auth/passwd/ForgetPwdScreen.js b/src/modules/auth/passwd/ForgetPwdScreen.js
index 7261844..f0b1b8a 100644
--- a/src/modules/auth/passwd/ForgetPwdScreen.js
+++ b/src/modules/auth/passwd/ForgetPwdScreen.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useForm } from 'react-hook-form';
 import { useHistory } from "react-router-dom";
@@ -147,7 +147,7 @@ function ForgetPwdCard(props) {
 					{/* ident */}
 					<FormGroup tag="fieldset" disabled={isSubmitting} className="text-center">
 						<h5>
-							<Label for="username" style={{display: "block"}}>
+							<Label className='form-label d-block' for="username">
 								{t('ForgetPwdScreen|Username, email or phone')}
 							</Label>
 						</h5>
diff --git a/src/modules/auth/passwd/ResetPwdScreen.js b/src/modules/auth/passwd/ResetPwdScreen.js
index b7c74aa..24d9595 100644
--- a/src/modules/auth/passwd/ResetPwdScreen.js
+++ b/src/modules/auth/passwd/ResetPwdScreen.js
@@ -6,7 +6,7 @@ import { Link, useHistory } from "react-router-dom";
 import {
 	Container, Row, Col,
 	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
-	Form, FormGroup, FormText, Label, Input, Button, FormFeedback
+	Form, FormText, FormGroup, Label, Input, Button, FormFeedback
 } from 'reactstrap';
 
 function ResetPwdScreen(props) {
@@ -158,7 +158,7 @@ function ResetPwdCard(props) {
 				<CardBody className="pb-1">
 					<FormGroup tag="fieldset" disabled={isSubmitting} style={{textAlign: "center"}}>
 						<h5>
-							<Label for="newpassword" style={{display: "block"}}>
+							<Label for="newpassword" className='form-label d-block'>
 								{t('ResetPwdScreen|New Password')}
 							</Label>
 						</h5>
@@ -179,7 +179,7 @@ function ResetPwdCard(props) {
 
 					<FormGroup tag="fieldset" disabled={isSubmitting} style={{textAlign: "center"}}>
 						<h5>
-							<Label for="newpassword2" style={{display: "block"}}>
+							<Label for="newpassword2" className='form-label d-block'>
 								{t('ResetPwdScreen|Re-enter Password')}
 							</Label>
 						</h5>
diff --git a/src/modules/auth/webauthn/WebAuthnScreen.js b/src/modules/auth/webauthn/WebAuthnScreen.js
index 92b928a..b7eddf3 100644
--- a/src/modules/auth/webauthn/WebAuthnScreen.js
+++ b/src/modules/auth/webauthn/WebAuthnScreen.js
@@ -9,7 +9,8 @@ import publicKeyValuesToJSON from "./publicKeyValuesToJSON";
 
 import {
 	Container, Row, Col,
-	Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter,
+	Card, CardHeader, CardTitle,
+	CardSubtitle, CardBody, CardFooter,
 	Input, Button, ButtonGroup,
 	Table, Form, FormFeedback
 } from 'reactstrap';
@@ -371,7 +372,7 @@ function TableRow (props) {
 					</>
 				:
 					<div className="div-key-wordwrap" title={obj?.name}>
-						<span className="at-shield-star-win pr-1" />{obj?.name}
+						<span className="at-shield-star-win pe-1" />{obj?.name}
 					</div>
 				}
 			</td>
@@ -381,7 +382,7 @@ function TableRow (props) {
 			<td className="p-2 td-not-display align-middle">
 				<DateTime value={obj?.last_login}/>
 			</td>
-			<td className="p-2 align-middle text-right">
+			<td className="p-2 align-middle text-end">
 				<ButtonGroup className="table-button-group">
 					{(localEditMode && props.globalEditMode && (obj?.id == props.getValues("id"))) ?
 						<>
@@ -424,7 +425,7 @@ function TableRow (props) {
 								color="danger"
 								type="button"
 								title={t("WebAuthnScreen|Unregister authenticator")}
-								className="float-right"
+								className="float-end"
 								onClick={(e) => {props.confirmWebAuthnUnregister(obj?.id), e.preventDefault()}}
 								disabled={props.isSubmitting || (props.globalEditMode == true)}
 							>
@@ -437,4 +438,3 @@ function TableRow (props) {
 		</tr>
 	)
 }
-