diff --git a/src/app/AccessManagement/AccessManager.tsx b/src/app/AccessManagement/AccessManager.tsx
index 9f1474f6..d87a5b6c 100644
--- a/src/app/AccessManagement/AccessManager.tsx
+++ b/src/app/AccessManagement/AccessManager.tsx
@@ -99,10 +99,12 @@ const AccessManager = () => {
           shouldFocusToggleOnSelect
         >
           <DropdownList>
-            <DropdownItem value={0}
-                          key="flushCacheAction"
-                          data-cy="flushCacheAction"
-                          onClick={() => setIsFlushCache(true)}>
+            <DropdownItem
+              value={0}
+              key="flushCacheAction"
+              data-cy="flushCacheAction"
+              onClick={() => setIsFlushCache(true)}
+            >
               {t('access-management.flush-cache-action')}
             </DropdownItem>
           </DropdownList>
@@ -131,11 +133,13 @@ const AccessManager = () => {
       </PageSection>
       <PageSection variant={PageSectionVariants.default}>
         {buildSelectedContent}
-        <FlushRoleCacheModal isModalOpen={isFlushCache}
-                             closeModal={() => setIsFlushCache(false)}
-                             submitModal={() => {
-                               setIsFlushCache(false);
-                             }}/>
+        <FlushRoleCacheModal
+          isModalOpen={isFlushCache}
+          closeModal={() => setIsFlushCache(false)}
+          submitModal={() => {
+            setIsFlushCache(false);
+          }}
+        />
       </PageSection>
     </React.Fragment>
   );
diff --git a/src/app/AccessManagement/FlushRoleCacheModal.tsx b/src/app/AccessManagement/FlushRoleCacheModal.tsx
index 68d81d7e..93c1024e 100644
--- a/src/app/AccessManagement/FlushRoleCacheModal.tsx
+++ b/src/app/AccessManagement/FlushRoleCacheModal.tsx
@@ -29,20 +29,13 @@ const FlushRoleCacheModal = (props: { isModalOpen: boolean; submitModal: () => v
         >
           {t('access-management.flush-cache-action')}
         </Button>,
-        <Button
-          key={'Cancel'}
-          aria-label={'Cancel'}
-          variant={ButtonVariant.link}
-          onClick={props.closeModal}
-        >
+        <Button key={'Cancel'} aria-label={'Cancel'} variant={ButtonVariant.link} onClick={props.closeModal}>
           {t('common.actions.cancel')}
         </Button>
       ]}
     >
       <TextContent>
-        <Text>
-          {t('access-management.modal-flush-cache-description')}
-        </Text>
+        <Text>{t('access-management.modal-flush-cache-description')}</Text>
       </TextContent>
     </Modal>
   );
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index 267f5199..835f12e7 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -26,15 +26,11 @@ import {
   ToolbarItem,
   Tooltip,
   PageSidebarBody,
-  Switch
+  Switch,
+  MenuToggleElement,
+  MenuToggle
 } from '@patternfly/react-core';
-import {
-  Dropdown,
-  DropdownGroup,
-  DropdownItem,
-  DropdownToggle,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
+import { Dropdown, DropdownGroup, DropdownItem } from '@patternfly/react-core';
 import icon from '!!url-loader!@app/assets/images/brand.svg';
 import { Link, NavLink, Redirect } from 'react-router-dom';
 import { IAppRoute, routes } from '@app/routes';
@@ -61,7 +57,7 @@ interface IAppLayout {
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
-  const {theme,toggleTheme} = useContext(ThemeContext);
+  const { theme, toggleTheme } = useContext(ThemeContext);
 
   const history = useHistory();
   const { connectedUser } = useConnectedUser();
@@ -95,40 +91,46 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
     </Flex>
   );
 
-  const userDropdownItems = [
-    <DropdownGroup key="user-action-group">
-      <DropdownItem
-        key="user-action-group-1 logout"
-        onClick={() => {
-          if (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated()) {
-            KeycloakService.Instance.logout(ConsoleServices.landing());
-          } else {
-            ConsoleServices.authentication().logOutLink();
-            history.push('/welcome');
-            window.location.reload();
-          }
-        }}
-      >
-        Logout
-      </DropdownItem>
-    </DropdownGroup>
-  ];
-
   const userActions = () => {
     const chromeAgent = navigator.userAgent.toString().indexOf('Chrome') > -1;
     if (chromeAgent || (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated())) {
       return (
-        <ToolbarItem>
-          <Dropdown
-            isFullHeight
-            onSelect={() => setIsDropdownOpen(!isDropdownOpen)}
-            isOpen={isDropdownOpen}
-            toggle={
-              <DropdownToggle onToggle={() => setIsDropdownOpen(!isDropdownOpen)}>{connectedUser.name}</DropdownToggle>
-            }
-            dropdownItems={userDropdownItems}
-          />
-        </ToolbarItem>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Dropdown
+              onSelect={() => setIsDropdownOpen(!isDropdownOpen)}
+              isOpen={isDropdownOpen}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isFullHeight
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  isExpanded={isDropdownOpen}
+                >
+                  {connectedUser.name}
+                </MenuToggle>
+              )}
+              shouldFocusToggleOnSelect
+            >
+              <DropdownGroup key="user-action-group">
+                <DropdownItem
+                  key="user-action-group-1 logout"
+                  onClick={() => {
+                    if (KeycloakService.Instance.isInitialized() && KeycloakService.Instance.authenticated()) {
+                      KeycloakService.Instance.logout(ConsoleServices.landing());
+                    } else {
+                      ConsoleServices.authentication().logOutLink();
+                      history.push('/welcome');
+                      window.location.reload();
+                    }
+                  }}
+                >
+                  {t('layout.logout')}
+                </DropdownItem>
+              </DropdownGroup>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarGroup>
       );
     }
     return (
@@ -143,19 +145,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
     );
   };
 
-  const helpDropdownItems = [
-    <DropdownItem
-      onClick={() => window.open(t('brandname.documentation-link'), '_blank')}
-      key="documentation"
-      icon={<ExternalLinkAltIcon />}
-    >
-      {t('layout.documentation-name')}
-    </DropdownItem>,
-    <DropdownItem onClick={() => setIsAboutOpen(!isAboutOpen)} key="about" component="button">
-      {t('layout.about-name')}
-    </DropdownItem>
-  ];
-
   const headerToolbar = (
     <Toolbar id="toolbar" isFullHeight isStatic>
       <ToolbarContent>
@@ -164,29 +153,46 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ init, children }) => {
           align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
-          <Switch
-            id="darkThemeSwitch"
-            isChecked={theme === 'dark'}
-            onChange={toggleTheme}
-            ouiaId="DarkThemeOuiaId"
-            label={t('layout.dark-theme')}
-            className="darkThemeSwitch"
-          />
+          <ToolbarItem>
+            <Switch
+              id="darkThemeSwitch"
+              isChecked={theme === 'dark'}
+              onChange={toggleTheme}
+              ouiaId="DarkThemeOuiaId"
+              label={t('layout.dark-theme')}
+              className="darkThemeSwitch"
+            />
+          </ToolbarItem>
           <ToolbarItem>
             <Dropdown
-              data-cy="aboutInfoQuestionMark"
               id="aboutInfoQuestionMark"
-              position={DropdownPosition.right}
-              isPlain
               onSelect={() => setIsHelpOpen(!isHelpOpen)}
               isOpen={isHelpOpen}
-              toggle={
-                <DropdownToggle toggleIndicator={null} onToggle={() => setIsHelpOpen(!isHelpOpen)}>
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  data-cy="aboutInfoQuestionMark"
+                  variant={'plain'}
+                  ref={toggleRef}
+                  isFullHeight
+                  onClick={() => setIsHelpOpen(!isHelpOpen)}
+                  isExpanded={isHelpOpen}
+                >
                   <QuestionCircleIcon />
-                </DropdownToggle>
-              }
-              dropdownItems={helpDropdownItems}
-            />
+                </MenuToggle>
+              )}
+            >
+              <DropdownItem
+                onClick={() => window.open(t('brandname.documentation-link'), '_blank')}
+                key="documentation"
+                icon={<ExternalLinkAltIcon />}
+              >
+                {t('layout.documentation-name')}
+              </DropdownItem>
+              ,
+              <DropdownItem onClick={() => setIsAboutOpen(!isAboutOpen)} key="about" component="button">
+                {t('layout.about-name')}
+              </DropdownItem>
+            </Dropdown>
           </ToolbarItem>
         </ToolbarGroup>
         {!ConsoleServices.authentication().isNotSecured() && userActions()}
diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx
index 8494fca5..57907805 100644
--- a/src/app/Caches/Configuration/CacheConfiguration.tsx
+++ b/src/app/Caches/Configuration/CacheConfiguration.tsx
@@ -1,4 +1,4 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import {
   Alert,
   AlertActionLink,
@@ -23,9 +23,9 @@ import { global_BackgroundColor_100 } from '@patternfly/react-tokens';
 
 const CacheConfiguration = (props: { cacheName: string; editable: boolean; config: string }) => {
   const { t } = useTranslation();
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const encodingDocs = t('brandname.encoding-docs-link');
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
   const yamlConfig = useFetchConfigurationYAML(props.cacheName);
   const xmlConfig = useFetchConfigurationXML(props.cacheName);
 
@@ -70,7 +70,12 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
           <ClipboardCopy isReadOnly isCode variant={ClipboardCopyVariant.inline}>
             {config}
           </ClipboardCopy>
-          <SyntaxHighlighter wrapLines={false} style={syntaxHighLighterTheme} useInlineStyles={true} showLineNumbers={true}>
+          <SyntaxHighlighter
+            wrapLines={false}
+            style={syntaxHighLighterTheme}
+            useInlineStyles={true}
+            showLineNumbers={true}
+          >
             {config}
           </SyntaxHighlighter>
         </CardBody>
@@ -80,7 +85,7 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
 
   return (
     <React.Fragment>
-      <Tabs defaultActiveKey={0} style={theme === 'dark'? {} : { backgroundColor: global_BackgroundColor_100.value }}>
+      <Tabs defaultActiveKey={0} style={theme === 'dark' ? {} : { backgroundColor: global_BackgroundColor_100.value }}>
         <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>} tabContentId="tab1" tabContentRef={contentRef1} />
         <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>} tabContentId="tab2" tabContentRef={contentRef2} />
         <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>} tabContentId="tab3" tabContentRef={contentRef3} />
diff --git a/src/app/Caches/Configuration/DetailConfigurations.tsx b/src/app/Caches/Configuration/DetailConfigurations.tsx
index dab8bc26..1649dddc 100644
--- a/src/app/Caches/Configuration/DetailConfigurations.tsx
+++ b/src/app/Caches/Configuration/DetailConfigurations.tsx
@@ -49,7 +49,7 @@ const DetailConfigurations: React.FunctionComponent<any> = (props) => {
     perPage: 10
   });
 
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
 
   useEffect(() => {
     setFilteredTemplates(cacheTemplates);
diff --git a/src/app/Caches/Create/CacheConfigEditor.tsx b/src/app/Caches/Create/CacheConfigEditor.tsx
index fe869484..52e362c3 100644
--- a/src/app/Caches/Create/CacheConfigEditor.tsx
+++ b/src/app/Caches/Create/CacheConfigEditor.tsx
@@ -28,7 +28,7 @@ const CacheConfigEditor = (props: {
   cacheEditorModifier: (CacheEditorStep) => void;
   setReviewConfig: (string) => void;
 }) => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const sampleConfig =
     '{\n' +
     '  "distributed-cache": {\n' +
diff --git a/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx b/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx
index c3813f47..a22b169a 100644
--- a/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx
+++ b/src/app/Caches/Create/Features/PersistentCacheConfigurator.tsx
@@ -28,7 +28,7 @@ import { global_spacer_md } from '@patternfly/react-tokens';
 import { ThemeContext } from '@app/providers/ThemeProvider';
 
 const PersistentCacheConfigurator = () => {
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const { configuration, setConfiguration } = useCreateCache();
   const { t } = useTranslation();
   const brandname = t('brandname.brandname');
diff --git a/src/app/Caches/Create/ReviewCacheConfig.tsx b/src/app/Caches/Create/ReviewCacheConfig.tsx
index 6b7c32d2..02edfac9 100644
--- a/src/app/Caches/Create/ReviewCacheConfig.tsx
+++ b/src/app/Caches/Create/ReviewCacheConfig.tsx
@@ -10,7 +10,7 @@ const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
   const { configuration } = useCreateCache();
   const { t } = useTranslation();
   const [config, setConfig] = useState(CacheConfigUtils.createCacheConfigFromData(configuration));
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
     const jsonFormatConfig = CacheConfigUtils.createCacheConfigFromData(configuration);
diff --git a/src/app/Caches/DetailCache.tsx b/src/app/Caches/DetailCache.tsx
index 6ba8cf31..7b41abb1 100644
--- a/src/app/Caches/DetailCache.tsx
+++ b/src/app/Caches/DetailCache.tsx
@@ -7,7 +7,8 @@ import {
   Button,
   ButtonVariant,
   Card,
-  CardBody, Divider,
+  CardBody,
+  Divider,
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
@@ -62,7 +63,7 @@ import { ThemeContext } from '@app/providers/ThemeProvider';
 const DetailCache = (props: { cacheName: string }) => {
   const cacheName = props.cacheName;
   const { t } = useTranslation();
-  const {theme} = useContext(ThemeContext);
+  const { theme } = useContext(ThemeContext);
   const brandname = t('brandname.brandname');
   const encodingDocs = t('brandname.encoding-docs-link');
   const { connectedUser } = useConnectedUser();
@@ -146,7 +147,7 @@ const DetailCache = (props: { cacheName: string }) => {
         activeKey={activeTabKey2}
         aria-label="Entries tab"
         component={TabsComponent.nav}
-        style={theme === 'dark'? {} : { backgroundColor: global_BackgroundColor_100.value }}
+        style={theme === 'dark' ? {} : { backgroundColor: global_BackgroundColor_100.value }}
         onSelect={(event, tabIndex) => setActiveTabKey2(tabIndex)}
       >
         <Tab
@@ -252,19 +253,17 @@ const DetailCache = (props: { cacheName: string }) => {
       return;
     }
     return (
-        <ToolbarItem>
-          <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }}/>
-          <Link
-            to={{
-              pathname: encodeURIComponent(cacheName) + '/backups',
-              search: location.search
-            }}
-          >
-            <Button variant={ButtonVariant.link}>
-              {t('caches.actions.action-manage-backups')}
-            </Button>
-          </Link>
-        </ToolbarItem>
+      <ToolbarItem>
+        <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }} />
+        <Link
+          to={{
+            pathname: encodeURIComponent(cacheName) + '/backups',
+            search: location.search
+          }}
+        >
+          <Button variant={ButtonVariant.link}>{t('caches.actions.action-manage-backups')}</Button>
+        </Link>
+      </ToolbarItem>
     );
   };
 
@@ -275,8 +274,8 @@ const DetailCache = (props: { cacheName: string }) => {
 
     return (
       <ToolbarItem>
-        <Spinner size={"md"} isInline />
-        <Alert variant="warning" isInline isPlain title={t('caches.rebuilding-index')}/>
+        <Spinner size={'md'} isInline />
+        <Alert variant="warning" isInline isPlain title={t('caches.rebuilding-index')} />
       </ToolbarItem>
     );
   };
@@ -284,19 +283,19 @@ const DetailCache = (props: { cacheName: string }) => {
   const buildIndexManage = () => {
     if (!cache?.features.indexed) return;
     return (
-        <ToolbarItem>
-          <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }}/>
-          <Link
-            to={{
-              pathname: encodeURIComponent(cacheName) + '/indexing',
-              search: location.search
-            }}
-          >
-            <Button data-cy="manageIndexesLink" variant={ButtonVariant.link}>
-              {t('caches.actions.action-manage-indexes')}
-            </Button>
-          </Link>
-        </ToolbarItem>
+      <ToolbarItem>
+        <Divider orientation={{ default: 'vertical' }} inset={{ default: 'insetMd' }} />
+        <Link
+          to={{
+            pathname: encodeURIComponent(cacheName) + '/indexing',
+            search: location.search
+          }}
+        >
+          <Button data-cy="manageIndexesLink" variant={ButtonVariant.link}>
+            {t('caches.actions.action-manage-indexes')}
+          </Button>
+        </Link>
+      </ToolbarItem>
     );
   };
 
@@ -322,15 +321,15 @@ const DetailCache = (props: { cacheName: string }) => {
   const buildFeaturesChip = () => {
     if (!cache?.features) return;
     return (
-        <ToolbarItem>
-          <LabelGroup categoryName={t('caches.info.features')} numLabels={8}>
-            {displayUtils.createFeaturesChipGroup(cache.features).map((feature) => (
-              <Label isCompact icon={<InfoCircleIcon />} key={feature}>
-                {feature}
-              </Label>
-            ))}
-          </LabelGroup>
-        </ToolbarItem>
+      <ToolbarItem>
+        <LabelGroup categoryName={t('caches.info.features')} numLabels={8}>
+          {displayUtils.createFeaturesChipGroup(cache.features).map((feature) => (
+            <Label isCompact icon={<InfoCircleIcon />} key={feature}>
+              {feature}
+            </Label>
+          ))}
+        </LabelGroup>
+      </ToolbarItem>
     );
   };
 
@@ -342,9 +341,7 @@ const DetailCache = (props: { cacheName: string }) => {
             <RebalancingCache />
             {buildDisplayReindexing()}
           </ToolbarGroup>
-          <ToolbarGroup variant={'filter-group'}>
-            {buildFeaturesChip()}
-          </ToolbarGroup>
+          <ToolbarGroup variant={'filter-group'}>{buildFeaturesChip()}</ToolbarGroup>
           <ToolbarGroup variant={'button-group'}>
             {buildBackupsManage()}
             {buildIndexManage()}
diff --git a/src/app/Caches/Entries/CacheEntries.tsx b/src/app/Caches/Entries/CacheEntries.tsx
index 98b71e0b..7d756e76 100644
--- a/src/app/Caches/Entries/CacheEntries.tsx
+++ b/src/app/Caches/Entries/CacheEntries.tsx
@@ -64,7 +64,7 @@ const CacheEntries = (props: { cacheName: string }) => {
     perPage: 10
   });
 
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
 
   useEffect(() => {
     if (cache.encoding.key == EncodingType.Protobuf) {
diff --git a/src/app/Caches/Query/QueryEntries.tsx b/src/app/Caches/Query/QueryEntries.tsx
index 4609d55e..6b679742 100644
--- a/src/app/Caches/Query/QueryEntries.tsx
+++ b/src/app/Caches/Query/QueryEntries.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect,useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import {
   Bullseye,
   Button,
@@ -41,8 +41,7 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: (
     total: 0
   });
 
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
-
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
 
   const columnNames = {
     value: 'Value'
@@ -171,11 +170,17 @@ const QueryEntries = (props: { cacheName: string; indexed: boolean; changeTab: (
           <Popover
             headerContent={t('caches.query.ickle-query')}
             bodyContent={t('caches.query.ickle-query-tooltip', { brandname: brandname })}
-            footerContent={<Button variant={'link'}
-                                   style={{paddingLeft: 0}}
-                                   iconPosition={'start'}
-                                   icon={<ExternalLinkSquareAltIcon/>}
-                                   onClick={() => window.open(t('brandname.ickle-query-docs-link'), '_blank')}>{t('caches.query.ickle-query-docs')}</Button>}
+            footerContent={
+              <Button
+                variant={'link'}
+                style={{ paddingLeft: 0 }}
+                iconPosition={'start'}
+                icon={<ExternalLinkSquareAltIcon />}
+                onClick={() => window.open(t('brandname.ickle-query-docs-link'), '_blank')}
+              >
+                {t('caches.query.ickle-query-docs')}
+              </Button>
+            }
           >
             <Button
               variant="plain"
diff --git a/src/app/Common/Health.tsx b/src/app/Common/Health.tsx
index a026db97..cc5d39f4 100644
--- a/src/app/Common/Health.tsx
+++ b/src/app/Common/Health.tsx
@@ -1,4 +1,4 @@
-import React,{useContext} from 'react';
+import React, { useContext } from 'react';
 import { Flex, FlexItem, Text, TextContent } from '@patternfly/react-core';
 import { AlertIcon } from '@patternfly/react-core/dist/js/components/Alert/AlertIcon';
 import displayUtils from '@services/displayUtils';
@@ -9,14 +9,12 @@ import { chart_global_label_Fill, global_Color_light_100 } from '@patternfly/rea
 const Health = (props: { health: string; displayIcon?: boolean; cacheName?: string }) => {
   const health = ComponentHealth[props.health];
   const displayIcon = props.displayIcon == undefined ? true : props.displayIcon;
-  const {theme} = useContext(ThemeContext); 
-  
-  const getHealthLabelColor = ()=>{
+  const { theme } = useContext(ThemeContext);
+
+  const getHealthLabelColor = () => {
     const color = displayUtils.healthColor(health, false);
-    return (theme === 'dark' && color === chart_global_label_Fill.value) 
-          ? global_Color_light_100.value 
-          : color;
-  }
+    return theme === 'dark' && color === chart_global_label_Fill.value ? global_Color_light_100.value : color;
+  };
   return (
     <Flex>
       {displayIcon && (
diff --git a/src/app/Common/Status.tsx b/src/app/Common/Status.tsx
index 60c4c843..20c8ec8b 100644
--- a/src/app/Common/Status.tsx
+++ b/src/app/Common/Status.tsx
@@ -20,9 +20,7 @@ const Status = (props: { status?: Status }) => {
       </FlexItem>
       <FlexItem>
         <TextContent>
-          <Text component={TextVariants.p}>
-            {status.name}
-          </Text>
+          <Text component={TextVariants.p}>{status.name}</Text>
         </TextContent>
       </FlexItem>
     </Flex>
diff --git a/src/app/ProtoSchema/ProtobufSchemasDisplay.tsx b/src/app/ProtoSchema/ProtobufSchemasDisplay.tsx
index cdee08a8..2c43696b 100644
--- a/src/app/ProtoSchema/ProtobufSchemasDisplay.tsx
+++ b/src/app/ProtoSchema/ProtobufSchemasDisplay.tsx
@@ -59,7 +59,7 @@ const ProtobufSchemasDisplay = (props: { setProtoSchemasCount: (number) => void;
     page: 1,
     perPage: 10
   });
-  const {syntaxHighLighterTheme} = useContext(ThemeContext)
+  const { syntaxHighLighterTheme } = useContext(ThemeContext);
 
   const isSchemaExpanded = (row) => expandedSchemaNames.includes(row.name);
 
@@ -218,7 +218,12 @@ const ProtobufSchemasDisplay = (props: { setProtoSchemasCount: (number) => void;
 
     return (
       <ExpandableRowContent>
-        <SyntaxHighlighter wrapLines={false} style={syntaxHighLighterTheme} useInlineStyles={true} showLineNumbers={true}>
+        <SyntaxHighlighter
+          wrapLines={false}
+          style={syntaxHighLighterTheme}
+          useInlineStyles={true}
+          showLineNumbers={true}
+        >
           {schemasContent.get(name)}
         </SyntaxHighlighter>
       </ExpandableRowContent>
diff --git a/src/app/Rebalancing/RebalancingCache.tsx b/src/app/Rebalancing/RebalancingCache.tsx
index 1046b495..c72160b1 100644
--- a/src/app/Rebalancing/RebalancingCache.tsx
+++ b/src/app/Rebalancing/RebalancingCache.tsx
@@ -35,8 +35,8 @@ const RebalancingCache = () => {
   if (cache?.rehash_in_progress) {
     return (
       <ToolbarItem>
-        <Spinner size={"md"} isInline />
-        <Alert variant="warning" isInline isPlain title={t('caches.rebalancing.rebalancing')}/>
+        <Spinner size={'md'} isInline />
+        <Alert variant="warning" isInline isPlain title={t('caches.rebalancing.rebalancing')} />
       </ToolbarItem>
     );
   }
@@ -46,7 +46,7 @@ const RebalancingCache = () => {
    */
   if (ConsoleServices.security().hasConsoleACL(ConsoleACL.ADMIN, connectedUser)) {
     return (
-      <ToolbarItem style={{paddingTop: global_spacer_xs.value}}>
+      <ToolbarItem style={{ paddingTop: global_spacer_xs.value }}>
         <Switch
           id="rebalancing-switch"
           label={t('caches.rebalancing.enabled')}
@@ -75,7 +75,7 @@ const RebalancingCache = () => {
 
   return (
     <ToolbarItem>
-      <Label>{cache.rebalancing_enabled? t('caches.rebalancing.rebalanced') : t('caches.rebalancing.disabled')}</Label>
+      <Label>{cache.rebalancing_enabled ? t('caches.rebalancing.rebalanced') : t('caches.rebalancing.disabled')}</Label>
     </ToolbarItem>
   );
 };
diff --git a/src/app/assets/languages/en.json b/src/app/assets/languages/en.json
index fae4bf78..32097f44 100644
--- a/src/app/assets/languages/en.json
+++ b/src/app/assets/languages/en.json
@@ -22,7 +22,8 @@
     "about-name": "About",
     "documentation-name": "Documentation",
     "close-browser-message": "Close the browser or open an incognito window to log again.",
-    "dark-theme": "Dark theme"
+    "dark-theme": "Dark theme",
+    "logout": "Logout"
   },
   "welcome-page": {
     "welcome-title": "Welcome to {{brandname}} Server",
diff --git a/src/app/providers/ThemeProvider.tsx b/src/app/providers/ThemeProvider.tsx
index 55ef48bd..037a28be 100644
--- a/src/app/providers/ThemeProvider.tsx
+++ b/src/app/providers/ThemeProvider.tsx
@@ -3,39 +3,38 @@ import { getInitialTheme } from '@app/utils/themeUtils';
 import { githubGist, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 const initialState = {
-    theme : '',
-    toggleTheme : ()=>{},
-    syntaxHighLighterTheme : ''
-}
+  theme: '',
+  toggleTheme: () => {},
+  syntaxHighLighterTheme: ''
+};
 
 export const ThemeContext = React.createContext(initialState);
 
+const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(getInitialTheme);
+  const syntaxHighLighterTheme = theme === 'dark' ? dracula : githubGist;
 
-const ThemeProvider = ({children})=>{
-    const [theme,setTheme] = useState(getInitialTheme);
-    const syntaxHighLighterTheme = theme === 'dark'? dracula : githubGist;
-
-    useEffect(()=>{
-        if (theme === 'dark') {
-            document.documentElement.classList.add('pf-v5-theme-dark');
-        } else {
-            document.documentElement.classList.remove('pf-v5-theme-dark');
-        }
-
-        if (localStorage) {
-            localStorage.setItem('theme',theme);
-        }
-    },[theme])
-
-    const toggleTheme = ()=>{
-        setTheme((previousTheme)=> previousTheme === 'light'?'dark':'light');
+  useEffect(() => {
+    if (theme === 'dark') {
+      document.documentElement.classList.add('pf-v5-theme-dark');
+    } else {
+      document.documentElement.classList.remove('pf-v5-theme-dark');
     }
-    const themeState = {
-        theme,
-        toggleTheme,
-        syntaxHighLighterTheme
-    }
-    return <ThemeContext.Provider value={themeState} >{children}</ThemeContext.Provider>
-}
 
-export {ThemeProvider}
+    if (localStorage) {
+      localStorage.setItem('theme', theme);
+    }
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((previousTheme) => (previousTheme === 'light' ? 'dark' : 'light'));
+  };
+  const themeState = {
+    theme,
+    toggleTheme,
+    syntaxHighLighterTheme
+  };
+  return <ThemeContext.Provider value={themeState}>{children}</ThemeContext.Provider>;
+};
+
+export { ThemeProvider };
diff --git a/src/app/services/rolesHook.ts b/src/app/services/rolesHook.ts
index 7425c386..3b9e881f 100644
--- a/src/app/services/rolesHook.ts
+++ b/src/app/services/rolesHook.ts
@@ -83,10 +83,7 @@ export function useFlushCache(call: () => void) {
   const { t } = useTranslation();
   const onFlushCache = () => {
     ConsoleServices.security()
-      .flushCache(
-        t('access-management.flush-cache-success'),
-        t('access-management.flush-cache-error')
-      )
+      .flushCache(t('access-management.flush-cache-success'), t('access-management.flush-cache-error'))
       .then((actionResponse) => {
         addAlert(actionResponse);
       })
diff --git a/src/app/utils/themeUtils.ts b/src/app/utils/themeUtils.ts
index 72d5136d..2669a9eb 100644
--- a/src/app/utils/themeUtils.ts
+++ b/src/app/utils/themeUtils.ts
@@ -1,12 +1,9 @@
+export const getInitialTheme = (): string => {
+  // Get theme from local storage cookie
+  if (localStorage && localStorage.getItem('theme')) return localStorage.getItem('theme') || 'light';
 
+  // Check System preferred Theme
+  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-export const getInitialTheme  = () : string => {
-    // Get theme from local storage cookie
-    if(localStorage && localStorage.getItem('theme'))       
-        return localStorage.getItem('theme') || 'light';
-    
-    // Check System preferred Theme
-    const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
-    return prefersDarkTheme? 'dark' :'light';
-}
+  return prefersDarkTheme ? 'dark' : 'light';
+};