diff --git a/package.json b/package.json
index 7e51a02..e9ea5df 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "@patternfly/react-core": "5.0.0-alpha.72",
     "@patternfly/react-styles": "5.0.0-alpha.7",
     "@patternfly/react-icons": "5.0.0-alpha.10",
-    "@patternfly/react-table": "^4.113.0",
+    "@patternfly/react-tokens": "5.0.0-alpha.9",
+    "@patternfly/react-table": "5.0.0-alpha.74",
     "buffer": "^6.0.3",
     "comment-json": "^4.2.3",
     "date-fns": "^2.29.3",
diff --git a/src/config.jsx b/src/config.jsx
index 3a135fa..d866a47 100644
--- a/src/config.jsx
+++ b/src/config.jsx
@@ -36,10 +36,9 @@ import {
     Bullseye,
     EmptyState,
     EmptyStateIcon,
-    Title,
     EmptyStateBody,
     EmptyStateVariant,
-    Page, PageSection,
+    Page, PageSection, EmptyStateHeader,
 } from "@patternfly/react-core";
 import { ExclamationCircleIcon } from "@patternfly/react-icons";
 import { global_danger_color_200 } from "@patternfly/react-tokens";
@@ -53,6 +52,7 @@ class GeneralConfig extends React.Component {
     constructor(props) {
         super(props);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
         this.setConfig = this.setConfig.bind(this);
         this.fileReadFailed = this.fileReadFailed.bind(this);
         this.readConfig = this.readConfig.bind(this);
@@ -191,6 +191,12 @@ class GeneralConfig extends React.Component {
         this.readConfig();
     }
 
+    handleInputChange(name, value) {
+        const state = {};
+        state[name] = value;
+        this.setState(state);
+    }
+
     render() {
         const form =
             (this.state.config_loaded === false && this.state.file_error === false)
@@ -202,14 +208,14 @@ class GeneralConfig extends React.Component {
                                 <TextInput
                                     id="shell"
                                     value={this.state.shell}
-                                    onChange={shell => this.setState({ shell })}
+                                    onChange={(_event, value) => this.handleInputChange("shell", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Notice")}>
                                 <TextInput
                                     id="notice"
                                     value={this.state.notice}
-                                    onChange={notice => this.setState({ notice })}
+                                    onChange={(_event, value) => this.handleInputChange("notice", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Latency")}>
@@ -218,7 +224,7 @@ class GeneralConfig extends React.Component {
                                     type="number"
                                     step="1"
                                     value={this.state.latency}
-                                    onChange={latency => this.setState({ latency })}
+                                    onChange={(_event, value) => this.handleInputChange("latency", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Payload Size, bytes")}>
@@ -227,26 +233,26 @@ class GeneralConfig extends React.Component {
                                     type="number"
                                     step="1"
                                     value={this.state.payload}
-                                    onChange={payload => this.setState({ payload })}
+                                    onChange={(_event, value) => this.handleInputChange("payload", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Logging")}>
                                 <Checkbox
                                     id="log_input"
                                     isChecked={this.state.log_input}
-                                    onChange={log_input => this.setState({ log_input })}
+                                    onChange={(_event, log_input) => this.setState({ log_input })}
                                     label={_("User's Input")}
                                 />
                                 <Checkbox
                                     id="log_output"
                                     isChecked={this.state.log_output}
-                                    onChange={log_output => this.setState({ log_output })}
+                                    onChange={(_event, log_output) => this.setState({ log_output })}
                                     label={_("User's Output")}
                                 />
                                 <Checkbox
                                     id="log_window"
                                     isChecked={this.state.log_window}
-                                    onChange={log_window => this.setState({ log_window })}
+                                    onChange={(_event, log_window) => this.setState({ log_window })}
                                     label={_("Window Resize")}
                                 />
                             </FormGroup>
@@ -256,7 +262,7 @@ class GeneralConfig extends React.Component {
                                     type="number"
                                     step="1"
                                     value={this.state.limit_rate}
-                                    onChange={limit_rate => this.setState({ limit_rate })}
+                                    onChange={(_event, value) => this.handleInputChange("limit_rate", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Burst, bytes")}>
@@ -265,14 +271,14 @@ class GeneralConfig extends React.Component {
                                     type="number"
                                     step="1"
                                     value={this.state.limit_burst}
-                                    onChange={limit_burst => this.setState({ limit_burst })}
+                                    onChange={(_event, value) => this.handleInputChange("limit_burst", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Logging Limit Action")}>
                                 <FormSelect
                                     id="limit_action"
                                     value={this.state.limit_action}
-                                    onChange={limit_action => this.setState({ limit_action })}
+                                    onChange={(_event, value) => this.handleInputChange("limit_action", _event, value)}
                                 >
                                     {[
                                         { value: "", label: "" },
@@ -292,23 +298,22 @@ class GeneralConfig extends React.Component {
                                 <TextInput
                                     id="file_path"
                                     value={this.state.file_path}
-                                    onChange={file_path => this.setState({ file_path })}
+                                    onChange={(_event, value) => this.handleInputChange("file_path", _event, value)}
                                 />
                             </FormGroup>
                             <FormGroup label={_("Syslog Facility")}>
                                 <TextInput
                                     id="syslog_facility"
                                     value={this.state.syslog_facility}
-                                    onChange={syslog_facility =>
-                                        this.setState({ syslog_facility })}
+                                    onChange={(_event, value) => this.handleInputChange("syslog_facility", _event, value)}
+
                                 />
                             </FormGroup>
                             <FormGroup label={_("Syslog Priority")}>
                                 <FormSelect
                                     id="syslog_priority"
                                     value={this.state.syslog_priority}
-                                    onChange={syslog_priority =>
-                                        this.setState({ syslog_priority })}
+                                    onChange={(_event, value) => this.handleInputChange("syslog_priority", _event, value)}
                                 >
                                     {[
                                         { value: "", label: "" },
@@ -326,8 +331,8 @@ class GeneralConfig extends React.Component {
                                 <FormSelect
                                     id="journal_priority"
                                     value={this.state.journal_priority}
-                                    onChange={journal_priority =>
-                                        this.setState({ journal_priority })}
+                                    onChange={(_event, value) => this.handleInputChange("journal_priority", _event, value)}
+
                                 >
                                     {[
                                         { value: "", label: "" },
@@ -345,8 +350,7 @@ class GeneralConfig extends React.Component {
                                 <Checkbox
                                     id="journal_augment"
                                     isChecked={this.state.journal_augment}
-                                    onChange={journal_augment =>
-                                        this.setState({ journal_augment })}
+                                    onChange={(_event, journal_augment) => this.setState({ journal_augment })}
                                     label={_("Augment")}
                                 />
                             </FormGroup>
@@ -354,8 +358,7 @@ class GeneralConfig extends React.Component {
                                 <FormSelect
                                     id="writer"
                                     value={this.state.writer}
-                                    onChange={writer =>
-                                        this.setState({ writer })}
+                                    onChange={(_event, value) => this.handleInputChange("writer", _event, value)}
                                 >
                                     {[
                                         { value: "", label: "" },
@@ -385,17 +388,17 @@ class GeneralConfig extends React.Component {
                     )
                     : (
                         <Bullseye>
-                            <EmptyState variant={EmptyStateVariant.small}>
-                                <EmptyStateIcon
+                            <EmptyState variant={EmptyStateVariant.sm}>
+                                <EmptyStateHeader
+                                titleText={<>{_("There is no configuration file of tlog present in your system.")}</>}
+                                icon={
+                                    <EmptyStateIcon
                                 icon={ExclamationCircleIcon}
                                 color={global_danger_color_200.value}
+                                    />
+                                } headingLevel="h4"
                                 />
-                                <Title headingLevel="h4" size="lg">
-                                    {_("There is no configuration file of tlog present in your system.")}
-                                </Title>
-                                <Title headingLevel="h4" size="lg">
-                                    {_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}
-                                </Title>
+                                <EmptyStateHeader titleText={<>{_("Please, check the /etc/tlog/tlog-rec-session.conf or if tlog is installed.")}</>} headingLevel="h4" />
                                 <EmptyStateBody>
                                     {this.state.file_error}
                                 </EmptyStateBody>
@@ -416,6 +419,7 @@ class SssdConfig extends React.Component {
     constructor(props) {
         super(props);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleInputChange = this.handleInputChange.bind(this);
         this.confSave = this.confSave.bind(this);
         this.restartSSSD = this.restartSSSD.bind(this);
         this.file = null;
@@ -543,6 +547,12 @@ class SssdConfig extends React.Component {
         e.preventDefault();
     }
 
+    handleInputChange(name, value) {
+        const state = {};
+        state[name] = value;
+        this.setState(state);
+    }
+
     render() {
         const form = (
             <Form isHorizontal>
@@ -550,7 +560,7 @@ class SssdConfig extends React.Component {
                     <FormSelect
                         id="scope"
                         value={this.state.scope}
-                        onChange={scope => this.setState({ scope })}
+                        onChange={(_event, value) => this.handleInputChange("scope", _event, value)}
                     >
                         {[
                             { value: "none", label: _("None") },
@@ -571,14 +581,14 @@ class SssdConfig extends React.Component {
                         <TextInput
                             id="users"
                             value={this.state.users}
-                            onChange={users => this.setState({ users })}
+                            onChange={(_event, value) => this.handleInputChange("users", _event, value)}
                         />
                     </FormGroup>
                     <FormGroup label={_("Groups")}>
                         <TextInput
                             id="groups"
                             value={this.state.groups}
-                            onChange={groups => this.setState({ groups })}
+                            onChange={(_event, value) => this.handleInputChange("groups", _event, value)}
                         />
                     </FormGroup>
                 </>}
@@ -588,14 +598,14 @@ class SssdConfig extends React.Component {
                         <TextInput
                             id="exclude_users"
                             value={this.state.exclude_users}
-                            onChange={exclude_users => this.setState({ exclude_users })}
+                            onChange={(_event, value) => this.handleInputChange("exclude_users", _event, value)}
                         />
                     </FormGroup>
                     <FormGroup label={_("Exclude Groups")}>
                         <TextInput
                             id="exclude_groups"
                             value={this.state.exclude_groups}
-                            onChange={exclude_groups => this.setState({ exclude_groups })}
+                            onChange={(_event, value) => this.handleInputChange("exclude_groups", _event, value)}
                         />
                     </FormGroup>
                 </>}
diff --git a/src/player.jsx b/src/player.jsx
index 956d4b3..70bbf16 100644
--- a/src/player.jsx
+++ b/src/player.jsx
@@ -692,7 +692,7 @@ class Search extends React.Component {
                         id="search_rec"
                         type="search"
                         value={this.state.search}
-                        onChange={value => this.handleInputChange("search", value)}
+                        onChange={(_event, value) => this.handleInputChange("search", value)}
                     />
                     <Button
                         variant="control"
@@ -1357,7 +1357,7 @@ export class Player extends React.Component {
         );
 
         const visualControls = (
-            <ToolbarGroup variant="icon-button-group" alignment={{ default: 'alignRight' }}>
+            <ToolbarGroup variant="icon-button-group" align={{ default: 'alignRight' }}>
                 <ToolbarItem>
                     <Button
                     variant="plain"
diff --git a/src/recordings.jsx b/src/recordings.jsx
index d101d52..6f10c44 100644
--- a/src/recordings.jsx
+++ b/src/recordings.jsx
@@ -35,20 +35,14 @@ import {
     ExpandableSection,
     Page, PageSection, PageSectionVariants,
     Spinner,
-    Title,
     TextInput,
     Toolbar,
     ToolbarContent,
     ToolbarItem,
-    ToolbarGroup,
+    ToolbarGroup, EmptyStateHeader,
 } from "@patternfly/react-core";
-import {
-    sortable,
-    SortByDirection,
-    Table,
-    TableHeader,
-    TableBody
-} from "@patternfly/react-table";
+import { sortable, SortByDirection } from '@patternfly/react-table';
+import { TableHeader, TableBody, Table as TableDeprecated } from '@patternfly/react-table/deprecated';
 import {
     CogIcon,
     ExclamationCircleIcon,
@@ -321,11 +315,9 @@ class Logs extends React.Component {
         if (r == null) {
             return (
                 <Bullseye>
-                    <EmptyState variant={EmptyStateVariant.small}>
+                    <EmptyState variant={EmptyStateVariant.sm}>
                         <Spinner />
-                        <Title headingLevel="h2" size="lg">
-                            {_("Loading...")}
-                        </Title>
+                        <EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
                     </EmptyState>
                 </Bullseye>
             );
@@ -410,11 +402,9 @@ class Recording extends React.Component {
         if (r == null) {
             return (
                 <Bullseye>
-                    <EmptyState variant={EmptyStateVariant.small}>
+                    <EmptyState variant={EmptyStateVariant.sm}>
                         <Spinner />
-                        <Title headingLevel="h2" size="lg">
-                            {_("Loading...")}
-                        </Title>
+                        <EmptyStateHeader titleText={<>{_("Loading...")}</>} headingLevel="h2" />
                     </EmptyState>
                 </Bullseye>
             );
@@ -527,7 +517,7 @@ class RecordingList extends React.Component {
 
         return (
             <>
-                <Table
+                <TableDeprecated
                     aria-label={_("Recordings")}
                     cells={columnTitles}
                     rows={rows}
@@ -536,13 +526,10 @@ class RecordingList extends React.Component {
                 >
                     <TableHeader />
                     <TableBody onRowClick={this.handleRowClick} />
-                </Table>
+                </TableDeprecated>
                 {!rows.length &&
-                    <EmptyState variant={EmptyStateVariant.small}>
-                        <EmptyStateIcon icon={SearchIcon} />
-                        <Title headingLevel="h2" size="lg">
-                            {_("No recordings found")}
-                        </Title>
+                    <EmptyState variant={EmptyStateVariant.sm}>
+                        <EmptyStateHeader titleText={<>{_("No recordings found")}</>} icon={<EmptyStateIcon icon={SearchIcon} />} headingLevel="h2" />
                         <EmptyStateBody>
                             {_("No recordings matched the filter criteria.")}
                         </EmptyStateBody>
@@ -847,14 +834,16 @@ export default class View extends React.Component {
         } else if (this.state.error_tlog_user === true) {
             return (
                 <Bullseye>
-                    <EmptyState variant={EmptyStateVariant.small}>
-                        <EmptyStateIcon
-                            icon={ExclamationCircleIcon}
-                            color={global_danger_color_200.value}
+                    <EmptyState variant={EmptyStateVariant.sm}>
+                        <EmptyStateHeader
+                            titleText={<>{_("Error")}</>}
+                            icon={
+                                <EmptyStateIcon
+                                icon={ExclamationCircleIcon}
+                                color={global_danger_color_200.value}
+                                />
+                            } headingLevel="h2"
                         />
-                        <Title headingLevel="h2" size="lg">
-                            {_("Error")}
-                        </Title>
                         <EmptyStateBody>
                             {_("Unable to retrieve tlog user from system.")}
                         </EmptyStateBody>
@@ -872,7 +861,7 @@ export default class View extends React.Component {
                                 placeholder={_("Filter since")}
                                 value={this.state.date_since}
                                 type="search"
-                                onChange={value => this.handleInputChange("date_since", value)}
+                                onChange={(_event, value) => this.handleInputChange("date_since", _event, value)}
                             />
                         </ToolbarItem>
                     </ToolbarGroup>
@@ -884,7 +873,7 @@ export default class View extends React.Component {
                                 placeholder={_("Filter until")}
                                 value={this.state.date_until}
                                 type="search"
-                                onChange={value => this.handleInputChange("date_until", value)}
+                                onChange={(_event, value) => this.handleInputChange("date_until", _event, value)}
                             />
                         </ToolbarItem>
                     </ToolbarGroup>
@@ -896,7 +885,7 @@ export default class View extends React.Component {
                                 placeholder={_("Filter by content")}
                                 value={this.state.search}
                                 type="search"
-                                onChange={value => this.handleInputChange("search", value)}
+                                onChange={(_event, value) => this.handleInputChange("search", _event, value)}
                             />
                         </ToolbarItem>
                     </ToolbarGroup>
@@ -908,7 +897,7 @@ export default class View extends React.Component {
                                 placeholder={_("Filter by username")}
                                 value={this.state.username}
                                 type="search"
-                                onChange={value => this.handleInputChange("username", value)}
+                                onChange={(_event, value) => this.handleInputChange("username", _event, value)}
                             />
                         </ToolbarItem>
                     </ToolbarGroup>
@@ -921,7 +910,7 @@ export default class View extends React.Component {
                                 placeholder={_("Filter by hostname")}
                                 value={this.state.hostname}
                                 type="search"
-                                onChange={value => this.handleInputChange("hostname", value)}
+                                onChange={(_event, value) => this.handleInputChange("hostname", _event, value)}
                             />
                         </ToolbarItem>
                     </ToolbarGroup>}