diff --git a/packages/plugins/ui-theme/src/App/App.tsx b/packages/plugins/ui-theme/src/App/App.tsx
index d46da5d4e..0ed5c5360 100644
--- a/packages/plugins/ui-theme/src/App/App.tsx
+++ b/packages/plugins/ui-theme/src/App/App.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-max-depth */
 import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
 import React, { Suspense, useEffect } from 'react';
 import { Router } from 'react-router-dom';
-import Box from 'verdaccio-ui/components/Box';
 import Loading from 'verdaccio-ui/components/Loading';
 import StyleBaseline from 'verdaccio-ui/design-tokens/StyleBaseline';
 import loadDayJSLocale from 'verdaccio-ui/design-tokens/load-dayjs-locale';
diff --git a/packages/plugins/ui-theme/src/App/Header/Header.tsx b/packages/plugins/ui-theme/src/App/Header/Header.tsx
index b9b04a00f..b1868bc02 100644
--- a/packages/plugins/ui-theme/src/App/Header/Header.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/Header.tsx
@@ -1,7 +1,7 @@
+import Button from '@mui/material/Button';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import Button from 'verdaccio-ui/components/Button';
 import { useConfig } from 'verdaccio-ui/providers/config';
 
 import { Dispatch, RootState } from '../../store/store';
diff --git a/packages/plugins/ui-theme/src/App/Header/HeaderMenu.tsx b/packages/plugins/ui-theme/src/App/Header/HeaderMenu.tsx
index f3b38502a..0686bcbec 100644
--- a/packages/plugins/ui-theme/src/App/Header/HeaderMenu.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/HeaderMenu.tsx
@@ -1,8 +1,8 @@
 import AccountCircle from '@mui/icons-material/AccountCircle';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import IconButton from 'verdaccio-ui/components/IconButton';
-import Menu from 'verdaccio-ui/components/Menu';
 import MenuItem from 'verdaccio-ui/components/MenuItem';
 
 import HeaderGreetings from './HeaderGreetings';
diff --git a/packages/plugins/ui-theme/src/App/Header/HeaderRight.tsx b/packages/plugins/ui-theme/src/App/Header/HeaderRight.tsx
index f213ab5a0..e47cfa134 100644
--- a/packages/plugins/ui-theme/src/App/Header/HeaderRight.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/HeaderRight.tsx
@@ -1,6 +1,6 @@
+import Button from '@mui/material/Button';
 import React, { MouseEvent, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from 'verdaccio-ui/components/Button';
 import ThemeContext from 'verdaccio-ui/design-tokens/ThemeContext';
 
 import HeaderMenu from './HeaderMenu';
diff --git a/packages/plugins/ui-theme/src/App/Header/HeaderToolTipIcon.tsx b/packages/plugins/ui-theme/src/App/Header/HeaderToolTipIcon.tsx
index e8d4520fe..b3d57b6ed 100644
--- a/packages/plugins/ui-theme/src/App/Header/HeaderToolTipIcon.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/HeaderToolTipIcon.tsx
@@ -3,8 +3,8 @@ import Info from '@mui/icons-material/Info';
 import NightsStay from '@mui/icons-material/NightsStay';
 import Search from '@mui/icons-material/Search';
 import WbSunny from '@mui/icons-material/WbSunny';
+import IconButton from '@mui/material/IconButton';
 import React, { forwardRef } from 'react';
-import IconButton from 'verdaccio-ui/components/IconButton';
 
 import { IconSearchButton, StyledLink } from './styles';
 
diff --git a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialog.tsx b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialog.tsx
index c651274ee..03b93e3a3 100644
--- a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialog.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialog.tsx
@@ -1,9 +1,9 @@
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
 import i18next from 'i18next';
 import isEmpty from 'lodash/isEmpty';
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Dialog from 'verdaccio-ui/components/Dialog';
-import DialogContent from 'verdaccio-ui/components/DialogContent';
 
 import { LoginBody } from '../../../store/models/login';
 import { Dispatch, RootState } from '../../../store/store';
diff --git a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogCloseButton.tsx b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogCloseButton.tsx
index 288e68f10..7201f436d 100644
--- a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogCloseButton.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogCloseButton.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import CloseIcon from '@mui/icons-material/Close';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import DialogTitle from 'verdaccio-ui/components/DialogTitle';
-import IconButton from 'verdaccio-ui/components/IconButton';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 const StyledIconButton = styled(IconButton)<{ theme?: Theme }>(({ theme }) => ({
diff --git a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogForm.tsx b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogForm.tsx
index 7694c9b74..73797dff2 100644
--- a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogForm.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogForm.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable verdaccio/jsx-spread */
 import styled from '@emotion/styled';
+import Button from '@mui/material/Button';
 import React, { memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import Button from 'verdaccio-ui/components/Button';
 import TextField from 'verdaccio-ui/components/TextField';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { LoginError } from 'verdaccio-ui/utils/login';
diff --git a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogFormError.tsx b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogFormError.tsx
index 1accab0db..236a8cac1 100644
--- a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogFormError.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogFormError.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import Error from '@mui/icons-material/Error';
+import Box from '@mui/material/Box';
+import SnackbarContent from '@mui/material/SnackbarContent';
 import React, { memo } from 'react';
-import Box from 'verdaccio-ui/components/Box';
-import SnackbarContent from 'verdaccio-ui/components/SnackbarContent';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { LoginError } from 'verdaccio-ui/utils/login';
 
diff --git a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogHeader.tsx b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogHeader.tsx
index f1ecbff42..02e1d19b8 100644
--- a/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogHeader.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/LoginDialog/LoginDialogHeader.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 import CloseIcon from '@mui/icons-material/Close';
 import LockOutlined from '@mui/icons-material/LockOutlined';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Avatar from 'verdaccio-ui/components/Avatar';
-import Box from 'verdaccio-ui/components/Box';
 import Heading from 'verdaccio-ui/components/Heading';
-import IconButton from 'verdaccio-ui/components/IconButton';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 interface Props {
diff --git a/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/RegistryInfoDialog.tsx b/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/RegistryInfoDialog.tsx
index 8096dc696..7ffc7a37b 100644
--- a/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/RegistryInfoDialog.tsx
+++ b/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/RegistryInfoDialog.tsx
@@ -1,8 +1,8 @@
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from 'verdaccio-ui/components/Button';
-import Dialog from 'verdaccio-ui/components/Dialog';
-import DialogActions from 'verdaccio-ui/components/DialogActions';
 
 import { Content, Title } from './styles';
 import { Props } from './types';
diff --git a/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/styles.ts b/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/styles.ts
index 6a201ce37..0020e715e 100644
--- a/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/styles.ts
+++ b/packages/plugins/ui-theme/src/App/Header/RegistryInfoDialog/styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import DialogContent from 'verdaccio-ui/components/DialogContent';
-import DialogTitle from 'verdaccio-ui/components/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
diff --git a/packages/plugins/ui-theme/src/App/Header/styles.ts b/packages/plugins/ui-theme/src/App/Header/styles.ts
index 53c70992e..57e1a648e 100644
--- a/packages/plugins/ui-theme/src/App/Header/styles.ts
+++ b/packages/plugins/ui-theme/src/App/Header/styles.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import IconButton from '@mui/material/IconButton';
 import AppBar from 'verdaccio-ui/components/AppBar';
-import IconButton from 'verdaccio-ui/components/IconButton';
 import Link from 'verdaccio-ui/components/Link';
 import Toolbar from 'verdaccio-ui/components/Toolbar';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
diff --git a/packages/plugins/ui-theme/src/components/ActionBar/ActionBar.tsx b/packages/plugins/ui-theme/src/components/ActionBar/ActionBar.tsx
index cdb328f52..b04ac2c54 100644
--- a/packages/plugins/ui-theme/src/components/ActionBar/ActionBar.tsx
+++ b/packages/plugins/ui-theme/src/components/ActionBar/ActionBar.tsx
@@ -1,8 +1,8 @@
+import Box from '@mui/material/Box';
 import React from 'react';
 import { isURL } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../pages/Version';
-import Box from '../Box';
 import ActionBarAction, { ActionBarActionProps } from './ActionBarAction';
 
 /* eslint-disable verdaccio/jsx-spread */
diff --git a/packages/plugins/ui-theme/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/packages/plugins/ui-theme/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
index 9fcac8f4a..207d07eb8 100644
--- a/packages/plugins/ui-theme/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<ActionBar /> component should render the component in default state 1`
   font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
   font-weight: 400;
   font-size: 1rem;
-  line-height: 1.75;
+  line-height: 1.5;
 }
 
 .emotion-3 {
@@ -162,8 +162,8 @@ exports[`<ActionBar /> component should render the component in default state 1`
     rel="noopener noreferrer"
     target="_blank"
   >
-    <span
-      class="MuiTypography-root MuiTypography-subtitle1 emotion-1"
+    <p
+      class="MuiTypography-root MuiTypography-body1 emotion-1"
     >
       <button
         class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall emotion-2 emotion-3"
@@ -186,7 +186,7 @@ exports[`<ActionBar /> component should render the component in default state 1`
           class="MuiTouchRipple-root emotion-5"
         />
       </button>
-    </span>
+    </p>
   </a>
   <a
     aria-label="Open an issue"
@@ -196,8 +196,8 @@ exports[`<ActionBar /> component should render the component in default state 1`
     rel="noopener noreferrer"
     target="_blank"
   >
-    <span
-      class="MuiTypography-root MuiTypography-subtitle1 emotion-1"
+    <p
+      class="MuiTypography-root MuiTypography-body1 emotion-1"
     >
       <button
         class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall emotion-2 emotion-3"
@@ -220,7 +220,7 @@ exports[`<ActionBar /> component should render the component in default state 1`
           class="MuiTouchRipple-root emotion-5"
         />
       </button>
-    </span>
+    </p>
   </a>
   <button
     aria-label="Download tarball"
diff --git a/packages/plugins/ui-theme/src/components/AppBar.tsx b/packages/plugins/ui-theme/src/components/AppBar.tsx
index 61b57cebb..dcaaa6de8 100644
--- a/packages/plugins/ui-theme/src/components/AppBar.tsx
+++ b/packages/plugins/ui-theme/src/components/AppBar.tsx
@@ -1,10 +1,3 @@
-import { AppBarProps, default as MaterialUIAppBar } from '@mui/material/AppBar';
-import React, { forwardRef } from 'react';
+import { default as MaterialUIAppBar } from '@mui/material/AppBar';
 
-type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const AppBar = forwardRef<AppBarRef, AppBarProps>(function AppBar(props, ref) {
-  return <MaterialUIAppBar {...props} ref={ref} />;
-});
-
-export default AppBar;
+export default MaterialUIAppBar;
diff --git a/packages/plugins/ui-theme/src/components/Author/Author.tsx b/packages/plugins/ui-theme/src/components/Author/Author.tsx
index 152852e05..a5fd4966c 100644
--- a/packages/plugins/ui-theme/src/components/Author/Author.tsx
+++ b/packages/plugins/ui-theme/src/components/Author/Author.tsx
@@ -1,11 +1,11 @@
 import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getAuthorName } from 'verdaccio-ui/utils/package';
 import { isEmail } from 'verdaccio-ui/utils/url';
 
 import { DetailContext } from '../../pages/Version';
-import List from '../List';
 import { AuthorListItem, AuthorListItemText, StyledText } from './styles';
 
 const Author: FC = () => {
diff --git a/packages/plugins/ui-theme/src/components/Author/__snapshots__/Author.test.tsx.snap b/packages/plugins/ui-theme/src/components/Author/__snapshots__/Author.test.tsx.snap
index e950af2d0..021d13a9d 100644
--- a/packages/plugins/ui-theme/src/components/Author/__snapshots__/Author.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/components/Author/__snapshots__/Author.test.tsx.snap
@@ -215,11 +215,11 @@ Object {
       <ul
         class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
       >
-        <span
+        <h6
           class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
         >
           Author
-        </span>
+        </h6>
         <div
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
           role="button"
@@ -466,11 +466,11 @@ Object {
     <ul
       class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
     >
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
       >
         Author
-      </span>
+      </h6>
       <div
         class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
         role="button"
@@ -774,11 +774,11 @@ Object {
       <ul
         class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
       >
-        <span
+        <h6
           class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
         >
           Author
-        </span>
+        </h6>
         <div
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
           role="button"
@@ -1020,11 +1020,11 @@ Object {
     <ul
       class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
     >
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
       >
         Author
-      </span>
+      </h6>
       <div
         class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
         role="button"
diff --git a/packages/plugins/ui-theme/src/components/Author/styles.ts b/packages/plugins/ui-theme/src/components/Author/styles.ts
index aba430440..e01e54cf4 100644
--- a/packages/plugins/ui-theme/src/components/Author/styles.ts
+++ b/packages/plugins/ui-theme/src/components/Author/styles.ts
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
-import ListItem from '../ListItem';
-import ListItemText from '../ListItemText';
 import Text from '../Text';
 
 export const StyledText = styled(Text)<{ theme?: Theme }>((props) => ({
diff --git a/packages/plugins/ui-theme/src/components/Avatar.tsx b/packages/plugins/ui-theme/src/components/Avatar.tsx
deleted file mode 100644
index 4f6af3279..000000000
--- a/packages/plugins/ui-theme/src/components/Avatar.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { default as MaterialUIAvatar } from '@mui/material/Avatar';
-
-export default MaterialUIAvatar;
diff --git a/packages/plugins/ui-theme/src/components/Box.tsx b/packages/plugins/ui-theme/src/components/Box.tsx
deleted file mode 100644
index 019caeff3..000000000
--- a/packages/plugins/ui-theme/src/components/Box.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { BoxProps, default as MaterialUIBox } from '@mui/material/Box';
-import React from 'react';
-
-function Box(props: BoxProps) {
-  return <MaterialUIBox {...props} />;
-}
-
-export default Box;
diff --git a/packages/plugins/ui-theme/src/components/Button.tsx b/packages/plugins/ui-theme/src/components/Button.tsx
deleted file mode 100644
index 93f43bb5b..000000000
--- a/packages/plugins/ui-theme/src/components/Button.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ButtonProps, default as MaterialUIButton } from '@mui/material/Button';
-import React, { forwardRef } from 'react';
-
-type ButtonRef = HTMLButtonElement;
-
-const Button = forwardRef<ButtonRef, ButtonProps>(function Button(props, ref) {
-  return <MaterialUIButton {...props} ref={ref} />;
-});
-
-export default Button;
diff --git a/packages/plugins/ui-theme/src/components/Card.tsx b/packages/plugins/ui-theme/src/components/Card.tsx
deleted file mode 100644
index 5f68d14f1..000000000
--- a/packages/plugins/ui-theme/src/components/Card.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CardProps, default as MaterialUICard } from '@mui/material/Card';
-import React, { forwardRef } from 'react';
-
-type CardRef = HTMLDivElement;
-
-const Card = forwardRef<CardRef, CardProps>(function Card(props, ref) {
-  return <MaterialUICard {...props} ref={ref} />;
-});
-
-export default Card;
diff --git a/packages/plugins/ui-theme/src/components/CardActions.tsx b/packages/plugins/ui-theme/src/components/CardActions.tsx
deleted file mode 100644
index 3c6e1cb8d..000000000
--- a/packages/plugins/ui-theme/src/components/CardActions.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CardActionsProps, default as MaterialUICardActions } from '@mui/material/CardActions';
-import React, { forwardRef } from 'react';
-
-type CardActionsRef = HTMLDivElement;
-
-const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(
-  props,
-  ref
-) {
-  return <MaterialUICardActions {...props} innerRef={ref} />;
-});
-
-export default CardActions;
diff --git a/packages/plugins/ui-theme/src/components/CardContent.tsx b/packages/plugins/ui-theme/src/components/CardContent.tsx
deleted file mode 100644
index 4f2b9fb73..000000000
--- a/packages/plugins/ui-theme/src/components/CardContent.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CardContentProps, default as MaterialUICardContent } from '@mui/material/CardContent';
-import React, { forwardRef } from 'react';
-
-type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const CardContent = forwardRef<CardContentRef, CardContentProps>(function CardContent(props) {
-  return <MaterialUICardContent {...props} />;
-});
-
-export default CardContent;
diff --git a/packages/plugins/ui-theme/src/components/Chip.tsx b/packages/plugins/ui-theme/src/components/Chip.tsx
deleted file mode 100644
index b5f3095e2..000000000
--- a/packages/plugins/ui-theme/src/components/Chip.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ChipProps, default as MaterialUIChip } from '@mui/material/Chip';
-import React, { forwardRef } from 'react';
-
-type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const Chip = forwardRef<ChipRef, ChipProps>(function Chip(props) {
-  return <MaterialUIChip {...props} />;
-});
-
-export default Chip;
diff --git a/packages/plugins/ui-theme/src/components/CircularProgress.tsx b/packages/plugins/ui-theme/src/components/CircularProgress.tsx
deleted file mode 100644
index b9691caff..000000000
--- a/packages/plugins/ui-theme/src/components/CircularProgress.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {
-  CircularProgressProps,
-  default as MaterialUICircularProgress,
-} from '@mui/material/CircularProgress';
-import React, { forwardRef } from 'react';
-
-type CircularProgressRef = HTMLDivElement;
-
-const CircularProgress = forwardRef<CircularProgressRef, CircularProgressProps>(
-  function CircularProgress(props, ref) {
-    return <MaterialUICircularProgress {...props} ref={ref} />;
-  }
-);
-
-export default CircularProgress;
diff --git a/packages/plugins/ui-theme/src/components/CopyToClipBoard.tsx b/packages/plugins/ui-theme/src/components/CopyToClipBoard.tsx
index f6f582129..d497ba27e 100644
--- a/packages/plugins/ui-theme/src/components/CopyToClipBoard.tsx
+++ b/packages/plugins/ui-theme/src/components/CopyToClipBoard.tsx
@@ -1,12 +1,11 @@
 import styled from '@emotion/styled';
 import FileCopy from '@mui/icons-material/FileCopy';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyToClipBoardUtility } from 'verdaccio-ui/utils/cli-utils';
 
-import IconButton from './IconButton';
-import Tooltip from './Tooltip';
-
 interface Props {
   text: string;
   children?: React.ReactNode;
diff --git a/packages/plugins/ui-theme/src/components/Dialog.tsx b/packages/plugins/ui-theme/src/components/Dialog.tsx
deleted file mode 100644
index 38d74577d..000000000
--- a/packages/plugins/ui-theme/src/components/Dialog.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { DialogProps, default as MaterialUIDialog } from '@mui/material/Dialog';
-import React, { forwardRef } from 'react';
-
-type DialogRef = HTMLDivElement;
-
-const Dialog = forwardRef<DialogRef, DialogProps>(function Dialog(props, ref) {
-  return <MaterialUIDialog {...props} ref={ref} />;
-});
-
-export default Dialog;
diff --git a/packages/plugins/ui-theme/src/components/DialogActions.tsx b/packages/plugins/ui-theme/src/components/DialogActions.tsx
deleted file mode 100644
index d116102dc..000000000
--- a/packages/plugins/ui-theme/src/components/DialogActions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  DialogActionsProps,
-  default as MaterialUIDialogActions,
-} from '@mui/material/DialogActions';
-import React, { forwardRef } from 'react';
-
-type DialogActionsRef = HTMLDivElement;
-
-const DialogActions = forwardRef<DialogActionsRef, DialogActionsProps>(function DialogActions(
-  props,
-  ref
-) {
-  return <MaterialUIDialogActions {...props} ref={ref} />;
-});
-
-export default DialogActions;
diff --git a/packages/plugins/ui-theme/src/components/DialogContent.tsx b/packages/plugins/ui-theme/src/components/DialogContent.tsx
deleted file mode 100644
index c9c299889..000000000
--- a/packages/plugins/ui-theme/src/components/DialogContent.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  DialogContentProps,
-  default as MaterialUIDialogContent,
-} from '@mui/material/DialogContent';
-import React, { forwardRef } from 'react';
-
-type DialogContentRef = HTMLDivElement;
-
-const DialogContent = forwardRef<DialogContentRef, DialogContentProps>(function DialogContent(
-  props,
-  ref
-) {
-  return <MaterialUIDialogContent {...props} ref={ref} />;
-});
-
-export default DialogContent;
diff --git a/packages/plugins/ui-theme/src/components/DialogTitle.tsx b/packages/plugins/ui-theme/src/components/DialogTitle.tsx
deleted file mode 100644
index 2b6827cd6..000000000
--- a/packages/plugins/ui-theme/src/components/DialogTitle.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { DialogTitleProps, default as MaterialUIDialogTitle } from '@mui/material/DialogTitle';
-import React, { forwardRef } from 'react';
-
-type DialogTitleRef = HTMLDivElement;
-
-const DialogTitle = forwardRef<DialogTitleRef, DialogTitleProps>(function DialogTitle(props, ref) {
-  return <MaterialUIDialogTitle {...props} ref={ref} />;
-});
-
-export default DialogTitle;
diff --git a/packages/plugins/ui-theme/src/components/Divider.tsx b/packages/plugins/ui-theme/src/components/Divider.tsx
deleted file mode 100644
index ec3f45951..000000000
--- a/packages/plugins/ui-theme/src/components/Divider.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { DividerProps, default as MaterialUIDivider } from '@mui/material/Divider';
-import React, { forwardRef } from 'react';
-
-type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
-  return <MaterialUIDivider {...props} innerRef={ref} />;
-});
-
-export default Divider;
diff --git a/packages/plugins/ui-theme/src/components/FloatingActionButton.tsx b/packages/plugins/ui-theme/src/components/FloatingActionButton.tsx
index ae51d0f99..5cc91d0b4 100644
--- a/packages/plugins/ui-theme/src/components/FloatingActionButton.tsx
+++ b/packages/plugins/ui-theme/src/components/FloatingActionButton.tsx
@@ -1,12 +1,8 @@
-import { FabProps, default as MaterialUIFab } from '@mui/material/Fab';
-import React, { forwardRef } from 'react';
+import Fab from '@mui/material/Fab';
+import React from 'react';
 
-type FloatingActionButtonRef = HTMLButtonElement;
-
-const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(
-  function FloatingActionButton(props, ref) {
-    return <MaterialUIFab {...props} ref={ref} data-testid="fab" />;
-  }
-);
+const FloatingActionButton = (props) => {
+  return <Fab {...props} data-testid="fab" />;
+};
 
 export default FloatingActionButton;
diff --git a/packages/plugins/ui-theme/src/components/FormControl.tsx b/packages/plugins/ui-theme/src/components/FormControl.tsx
deleted file mode 100644
index b86c96628..000000000
--- a/packages/plugins/ui-theme/src/components/FormControl.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FormControlProps, default as MaterialUIFormControl } from '@mui/material/FormControl';
-import React, { forwardRef } from 'react';
-
-type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const FormControl = forwardRef<FormControlRef, FormControlProps>(function FormControl(props, ref) {
-  return <MaterialUIFormControl {...props} innerRef={ref} />;
-});
-
-export default FormControl;
diff --git a/packages/plugins/ui-theme/src/components/FormHelperText.tsx b/packages/plugins/ui-theme/src/components/FormHelperText.tsx
index a5940100b..0356a28ab 100644
--- a/packages/plugins/ui-theme/src/components/FormHelperText.tsx
+++ b/packages/plugins/ui-theme/src/components/FormHelperText.tsx
@@ -1,16 +1,3 @@
-import {
-  FormHelperTextProps,
-  default as MaterialUIFormHelperText,
-} from '@mui/material/FormHelperText';
-import React, { forwardRef } from 'react';
+import { default as MaterialUIFormHelperText } from '@mui/material/FormHelperText';
 
-type FormHelperTextRef = HTMLParagraphElement;
-
-const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(function FormHelperText(
-  props,
-  ref
-) {
-  return <MaterialUIFormHelperText {...props} ref={ref} />;
-});
-
-export default FormHelperText;
+export default MaterialUIFormHelperText;
diff --git a/packages/plugins/ui-theme/src/components/Grid.tsx b/packages/plugins/ui-theme/src/components/Grid.tsx
deleted file mode 100644
index 557d2ea0c..000000000
--- a/packages/plugins/ui-theme/src/components/Grid.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { GridProps, default as MaterialUIGrid } from '@mui/material/Grid';
-import React, { forwardRef } from 'react';
-
-type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const Grid = forwardRef<GridRef, GridProps>(function Grid(props, ref) {
-  return <MaterialUIGrid {...props} innerRef={ref} />;
-});
-
-export default Grid;
diff --git a/packages/plugins/ui-theme/src/components/IconButton.tsx b/packages/plugins/ui-theme/src/components/IconButton.tsx
deleted file mode 100644
index ac96e4e78..000000000
--- a/packages/plugins/ui-theme/src/components/IconButton.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { IconButtonProps, default as MaterialUIIconButton } from '@mui/material/IconButton';
-import React, { forwardRef } from 'react';
-
-type IconButtonRef = HTMLButtonElement;
-
-const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
-  return <MaterialUIIconButton {...props} ref={ref} />;
-});
-
-export default IconButton;
diff --git a/packages/plugins/ui-theme/src/components/Input.tsx b/packages/plugins/ui-theme/src/components/Input.tsx
index a69b0ec2e..b6d6125cf 100644
--- a/packages/plugins/ui-theme/src/components/Input.tsx
+++ b/packages/plugins/ui-theme/src/components/Input.tsx
@@ -1,10 +1,3 @@
-import { InputProps, default as MaterialUIInput } from '@mui/material/Input';
-import React, { forwardRef } from 'react';
+import { default as MaterialUIInput } from '@mui/material/Input';
 
-type InputRef = HTMLDivElement;
-
-const Input = forwardRef<InputRef, InputProps>(function Input(props, ref) {
-  return <MaterialUIInput {...props} ref={ref} />;
-});
-
-export default Input;
+export default MaterialUIInput;
diff --git a/packages/plugins/ui-theme/src/components/InputAdornment/InputAdornment.tsx b/packages/plugins/ui-theme/src/components/InputAdornment/InputAdornment.tsx
deleted file mode 100644
index a8caf86b9..000000000
--- a/packages/plugins/ui-theme/src/components/InputAdornment/InputAdornment.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  InputAdornmentProps,
-  default as MaterialUIInputAdornment,
-} from '@mui/material/InputAdornment';
-import React, { forwardRef } from 'react';
-
-type InputAdornmentRef = HTMLDivElement;
-
-const InputAdornment = forwardRef<InputAdornmentRef, InputAdornmentProps>(function InputAdornment(
-  props,
-  ref
-) {
-  return <MaterialUIInputAdornment {...props} ref={ref} />;
-});
-
-export default InputAdornment;
diff --git a/packages/plugins/ui-theme/src/components/InputAdornment/index.ts b/packages/plugins/ui-theme/src/components/InputAdornment/index.ts
deleted file mode 100644
index 78893bf86..000000000
--- a/packages/plugins/ui-theme/src/components/InputAdornment/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './InputAdornment';
diff --git a/packages/plugins/ui-theme/src/components/InputLabel.tsx b/packages/plugins/ui-theme/src/components/InputLabel.tsx
deleted file mode 100644
index 088f9e2e7..000000000
--- a/packages/plugins/ui-theme/src/components/InputLabel.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { InputLabelProps, default as MaterialUIInputLabel } from '@mui/material/InputLabel';
-import React, { forwardRef } from 'react';
-
-type InputLabelRef = HTMLLabelElement;
-
-const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
-  return <MaterialUIInputLabel {...props} ref={ref} />;
-});
-
-export default InputLabel;
diff --git a/packages/plugins/ui-theme/src/components/List.tsx b/packages/plugins/ui-theme/src/components/List.tsx
deleted file mode 100644
index 69e121cb9..000000000
--- a/packages/plugins/ui-theme/src/components/List.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ListProps, default as MaterialUIList } from '@mui/material/List';
-import React, { forwardRef } from 'react';
-
-type ListRef = HTMLUListElement;
-
-const List = forwardRef<ListRef, ListProps>(function List(props, ref) {
-  return <MaterialUIList {...props} ref={ref} />;
-});
-
-export default List;
diff --git a/packages/plugins/ui-theme/src/components/ListItem.tsx b/packages/plugins/ui-theme/src/components/ListItem.tsx
deleted file mode 100644
index 30515d995..000000000
--- a/packages/plugins/ui-theme/src/components/ListItem.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ListItemProps, default as MaterialUIListItem } from '@mui/material/ListItem';
-import React, { forwardRef } from 'react';
-
-type ListItemRef<T extends boolean = false> = T extends true ? HTMLDivElement : HTMLLIElement;
-
-interface Props<T extends boolean = false> extends Omit<ListItemProps, 'button'> {
-  button?: T;
-}
-
-const ListItem = forwardRef(function ListItem<T extends boolean>(
-  { button, ...props }: Props<T>,
-  ref: React.Ref<ListItemRef<T>>
-) {
-  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return <MaterialUIListItem {...props} button={button as any} innerRef={ref} />;
-});
-
-ListItem.defaultProps = {
-  button: false,
-};
-
-export default ListItem;
diff --git a/packages/plugins/ui-theme/src/components/ListItemText.tsx b/packages/plugins/ui-theme/src/components/ListItemText.tsx
deleted file mode 100644
index c9859b3b5..000000000
--- a/packages/plugins/ui-theme/src/components/ListItemText.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ListItemTextProps, default as MaterialUIListItemText } from '@mui/material/ListItemText';
-import React, { forwardRef } from 'react';
-
-type ListItemTextRef = HTMLDivElement;
-
-const ListItemText = forwardRef<ListItemTextRef, ListItemTextProps>(function ListItemText(
-  props,
-  ref
-) {
-  return <MaterialUIListItemText {...props} ref={ref} />;
-});
-
-export default ListItemText;
diff --git a/packages/plugins/ui-theme/src/components/Loading/Spinner/Spinner.tsx b/packages/plugins/ui-theme/src/components/Loading/Spinner/Spinner.tsx
index 9fdd5fe68..8674ffc42 100644
--- a/packages/plugins/ui-theme/src/components/Loading/Spinner/Spinner.tsx
+++ b/packages/plugins/ui-theme/src/components/Loading/Spinner/Spinner.tsx
@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
+import CircularProgress from '@mui/material/CircularProgress';
 import React from 'react';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
-import CircularProgress from '../../CircularProgress';
-
 interface Props {
   size?: number;
   centered?: boolean;
diff --git a/packages/plugins/ui-theme/src/components/Menu.tsx b/packages/plugins/ui-theme/src/components/Menu.tsx
deleted file mode 100644
index 734b95bdb..000000000
--- a/packages/plugins/ui-theme/src/components/Menu.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { default as MaterialUIMenu, MenuProps } from '@mui/material/Menu';
-import React, { forwardRef } from 'react';
-
-type MenuRef = HTMLDivElement;
-
-const Menu = forwardRef<MenuRef, MenuProps>(function Menu(props, ref) {
-  return <MaterialUIMenu {...props} ref={ref} />;
-});
-
-export default Menu;
diff --git a/packages/plugins/ui-theme/src/components/NotFound/NotFound.tsx b/packages/plugins/ui-theme/src/components/NotFound/NotFound.tsx
index 2d4497548..21a7239b7 100644
--- a/packages/plugins/ui-theme/src/components/NotFound/NotFound.tsx
+++ b/packages/plugins/ui-theme/src/components/NotFound/NotFound.tsx
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
-import Box from '../Box';
-import Button from '../Button';
 import Heading from '../Heading';
 import PackageImg from './img/package.svg';
 
diff --git a/packages/plugins/ui-theme/src/components/NotFound/styles.ts b/packages/plugins/ui-theme/src/components/NotFound/styles.ts
index 3042c746d..6d36e26cf 100644
--- a/packages/plugins/ui-theme/src/components/NotFound/styles.ts
+++ b/packages/plugins/ui-theme/src/components/NotFound/styles.ts
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import List from '@mui/material/List';
 import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
 
 import { default as MuiCard } from '../Card';
 import { default as Typography } from '../Heading';
-import List from '../List';
 
 export const Wrapper = styled('div')({
   display: 'flex',
diff --git a/packages/plugins/ui-theme/src/components/Paper.tsx b/packages/plugins/ui-theme/src/components/Paper.tsx
index f1171b54d..0d896078c 100644
--- a/packages/plugins/ui-theme/src/components/Paper.tsx
+++ b/packages/plugins/ui-theme/src/components/Paper.tsx
@@ -1,10 +1,3 @@
-import { default as MaterialUIPaper, PaperProps } from '@mui/material/Paper';
-import React, { forwardRef } from 'react';
+import { default as MaterialUIPaper } from '@mui/material/Paper';
 
-type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-const Paper = forwardRef<PaperRef, PaperProps>(function Paper(props, ref) {
-  return <MaterialUIPaper {...props} ref={ref} />;
-});
-
-export default Paper;
+export default MaterialUIPaper;
diff --git a/packages/plugins/ui-theme/src/components/SnackbarContent.tsx b/packages/plugins/ui-theme/src/components/SnackbarContent.tsx
deleted file mode 100644
index 87c7c40c2..000000000
--- a/packages/plugins/ui-theme/src/components/SnackbarContent.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import {
-  default as MaterialUISnackbarContent,
-  SnackbarContentProps,
-} from '@mui/material/SnackbarContent';
-import React, { forwardRef } from 'react';
-
-type SnackbarContentRef = HTMLDivElement;
-
-const SnackbarContent = forwardRef<SnackbarContentRef, SnackbarContentProps>(
-  function SnackbarContent(props, ref) {
-    return <MaterialUISnackbarContent {...props} ref={ref} />;
-  }
-);
-
-export default SnackbarContent;
diff --git a/packages/plugins/ui-theme/src/components/Tab.tsx b/packages/plugins/ui-theme/src/components/Tab.tsx
deleted file mode 100644
index e87878639..000000000
--- a/packages/plugins/ui-theme/src/components/Tab.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { default as MaterialUITab, TabProps } from '@mui/material/Tab';
-import React, { forwardRef } from 'react';
-
-type TabRef = HTMLButtonElement;
-
-const Tab = forwardRef<TabRef, TabProps>(function Tab(props, ref) {
-  return <MaterialUITab {...props} innerRef={ref} />;
-});
-
-export default Tab;
diff --git a/packages/plugins/ui-theme/src/components/Tabs.tsx b/packages/plugins/ui-theme/src/components/Tabs.tsx
deleted file mode 100644
index 714fa18a2..000000000
--- a/packages/plugins/ui-theme/src/components/Tabs.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { default as MaterialUITabs, TabsProps } from '@mui/material/Tabs';
-import React, { forwardRef } from 'react';
-
-type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-interface Props extends Omit<TabsProps, 'onChange'> {
-  onChange: (event: React.ChangeEvent<{}>, value: number) => void;
-}
-
-const Tabs = forwardRef<TabsRef, Props>(function Tabs(props, ref) {
-  return <MaterialUITabs {...props} innerRef={ref} />;
-});
-
-export default Tabs;
diff --git a/packages/plugins/ui-theme/src/components/Text/Text.tsx b/packages/plugins/ui-theme/src/components/Text/Text.tsx
index ee4cd6c2b..438fbecf5 100644
--- a/packages/plugins/ui-theme/src/components/Text/Text.tsx
+++ b/packages/plugins/ui-theme/src/components/Text/Text.tsx
@@ -1,17 +1,3 @@
 import { default as MaterialUITypography } from '@mui/material/Typography';
-import React, { forwardRef } from 'react';
 
-import { TextProps } from './TextConfig';
-
-type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
-
-// The reference is already from type of the Component, so the any below is not a problem
-const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
-  return <MaterialUITypography {...props} component="span" ref={ref} />;
-});
-
-Text.defaultProps = {
-  variant: 'subtitle1',
-};
-
-export default Text;
+export default MaterialUITypography;
diff --git a/packages/plugins/ui-theme/src/components/Text/TextConfig.ts b/packages/plugins/ui-theme/src/components/Text/TextConfig.ts
deleted file mode 100644
index 5bc137909..000000000
--- a/packages/plugins/ui-theme/src/components/Text/TextConfig.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { TypographyProps } from '@mui/material/Typography';
-
-type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
-
-export interface TextProps extends Omit<TypographyProps, 'variant'> {
-  variant?: TextType;
-}
diff --git a/packages/plugins/ui-theme/src/components/Text/index.ts b/packages/plugins/ui-theme/src/components/Text/index.ts
index b0b7dac87..ae48b2970 100644
--- a/packages/plugins/ui-theme/src/components/Text/index.ts
+++ b/packages/plugins/ui-theme/src/components/Text/index.ts
@@ -1,2 +1 @@
 export { default } from './Text';
-export { TextProps } from './TextConfig';
diff --git a/packages/plugins/ui-theme/src/components/Toolbar.tsx b/packages/plugins/ui-theme/src/components/Toolbar.tsx
index 419bb181c..b76f59042 100644
--- a/packages/plugins/ui-theme/src/components/Toolbar.tsx
+++ b/packages/plugins/ui-theme/src/components/Toolbar.tsx
@@ -1,10 +1,3 @@
-import { default as MaterialUIToolbar, ToolbarProps } from '@mui/material/Toolbar';
-import React, { forwardRef } from 'react';
+import { default as MaterialUIToolbar } from '@mui/material/Toolbar';
 
-type ToolbarRef = HTMLDivElement;
-
-const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(props, ref) {
-  return <MaterialUIToolbar {...props} ref={ref} />;
-});
-
-export default Toolbar;
+export default MaterialUIToolbar;
diff --git a/packages/plugins/ui-theme/src/components/Tooltip.tsx b/packages/plugins/ui-theme/src/components/Tooltip.tsx
deleted file mode 100644
index d534ebfc8..000000000
--- a/packages/plugins/ui-theme/src/components/Tooltip.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { default as MaterialUITooltip, TooltipProps } from '@mui/material/Tooltip';
-import { TFunctionResult } from 'i18next';
-import React, { forwardRef } from 'react';
-
-// The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
-type TooltipRef = HTMLDivElement;
-
-// Returning only the children in case of undefined title was necessary as the Tooltip component no longer accepts this type
-// You can read more about this in this issue https://github.com/mui-org/material-ui/issues/20701
-type Props = Omit<TooltipProps, 'title'> & {
-  title: TFunctionResult;
-};
-
-const Tooltip = forwardRef<TooltipRef, Props>(function ToolTip({ title, children, ...props }) {
-  if (!title) {
-    return children;
-  }
-  return (
-    <MaterialUITooltip {...props} title={title}>
-      {children}
-    </MaterialUITooltip>
-  );
-});
-
-export default Tooltip;
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/Dependencies.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/Dependencies.tsx
index 5fba611b6..23f47f2b8 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/Dependencies.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/Dependencies.tsx
@@ -1,7 +1,7 @@
+import CardContent from '@mui/material/CardContent';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import CardContent from 'verdaccio-ui/components/CardContent';
 
 import { PackageDependencies } from '../../../../../types/packageMeta';
 import { DetailContext } from '../../context';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/styles.ts b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/styles.ts
index a1e313b4b..a4d66c0d8 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Dependencies/styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import Card from 'verdaccio-ui/components/Card';
-import Chip from 'verdaccio-ui/components/Chip';
+import Card from '@mui/material/Card';
+import Chip from '@mui/material/Chip';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.tsx
index f0c4280a9..f66cbf6b6 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainer.tsx
@@ -1,5 +1,5 @@
+import Box from '@mui/material/Box';
 import React, { useContext, useState } from 'react';
-import Box from 'verdaccio-ui/components/Box';
 
 import { DetailContext } from '../context';
 import Deprecated from './Deprecated';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerTabs.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerTabs.tsx
index bf4d658f5..2c6bae90f 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerTabs.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/DetailContainerTabs.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import Tab from '@mui/material/Tab';
+import { default as MuiTabs } from '@mui/material/Tabs';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Tab from 'verdaccio-ui/components/Tab';
-import { default as MuiTabs } from 'verdaccio-ui/components/Tabs';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 interface Props {
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/NoItems/__snapshots__/Noitems.test.tsx.snap b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/NoItems/__snapshots__/Noitems.test.tsx.snap
index ff734dc4c..4d6229a09 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/NoItems/__snapshots__/Noitems.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/NoItems/__snapshots__/Noitems.test.tsx.snap
@@ -10,9 +10,9 @@ exports[`<NoItem /> component should load the component in default state 1`] = `
   margin-bottom: 0.35em;
 }
 
-<span
+<h6
   class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
 >
   test
-</span>
+</h6>
 `;
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/UpLinks.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/UpLinks.tsx
index 433bd6ec8..633541c41 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/UpLinks.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/UpLinks.tsx
@@ -1,7 +1,7 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import List from 'verdaccio-ui/components/List';
-import ListItem from 'verdaccio-ui/components/ListItem';
 import { formatDateDistance } from 'verdaccio-ui/utils/package';
 
 import { DetailContext } from '../..';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/__snapshots__/UpLinks.test.tsx.snap b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/__snapshots__/UpLinks.test.tsx.snap
index 3acf1a7b2..5fa36169f 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/__snapshots__/UpLinks.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/__snapshots__/UpLinks.test.tsx.snap
@@ -14,11 +14,11 @@ Object {
 
 <body>
     <div>
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
       >
         verdaccio has no uplinks.
-      </span>
+      </h6>
     </div>
   </body>,
   "container": .emotion-0 {
@@ -31,11 +31,11 @@ Object {
 }
 
 <div>
-    <span
+    <h6
       class="MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom emotion-0"
     >
       verdaccio has no uplinks.
-    </span>
+    </h6>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -187,11 +187,11 @@ Object {
 
 <body>
     <div>
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Uplinks
-      </span>
+      </h6>
       <ul
         class="MuiList-root MuiList-padding emotion-2"
       >
@@ -315,11 +315,11 @@ Object {
 }
 
 <div>
-    <span
+    <h6
       class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Uplinks
-    </span>
+    </h6>
     <ul
       class="MuiList-root MuiList-padding emotion-2"
     >
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/styles.ts b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/styles.ts
index 8a974497b..68b5eb57a 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/UpLinks/styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { default as MuiListItemText } from 'verdaccio-ui/components/ListItemText';
+import { default as MuiListItemText } from '@mui/material/ListItemText';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
index dfb9679b9..e7371ac74 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsHistoryList.tsx
@@ -1,7 +1,7 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import List from 'verdaccio-ui/components/List';
-import ListItem from 'verdaccio-ui/components/ListItem';
 import { formatDateDistance } from 'verdaccio-ui/utils/package';
 
 import { Time, Versions } from '../../../../../types/packageMeta';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx
index db7789beb..f31119655 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/VersionsTagList.tsx
@@ -1,6 +1,6 @@
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import React from 'react';
-import List from 'verdaccio-ui/components/List';
-import ListItem from 'verdaccio-ui/components/ListItem';
 
 import { DistTags } from '../../../../../types/packageMeta';
 import { ListItemText, Spacer } from './styles';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/styles.ts b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/styles.ts
index fb1a88825..f92528706 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailContainer/Versions/styles.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { default as MuiListItemText } from '@mui/material/ListItemText';
 import Link from 'verdaccio-ui/components/Link';
-import { default as MuiListItemText } from 'verdaccio-ui/components/ListItemText';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx
index bbbdad7de..0997f9130 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarFundButton.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import Favorite from '@mui/icons-material/Favorite';
+import Button from '@mui/material/Button';
 import React, { useContext } from 'react';
 import { Trans } from 'react-i18next';
-import Button from 'verdaccio-ui/components/Button';
 import Link from 'verdaccio-ui/components/Link';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { isURL } from 'verdaccio-ui/utils/url';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
index b7892b3da..1c55d9121 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/DetailSidebarTitle.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ModuleType } from 'types/packageMeta';
-import Box from 'verdaccio-ui/components/Box';
 import Heading from 'verdaccio-ui/components/Heading';
 import { CommonJS, ES6Modules, TypeScript } from 'verdaccio-ui/components/Icons';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/Developers.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/Developers.tsx
index d7628ed63..44df5f6ef 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/Developers.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/Developers.tsx
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
 import Add from '@mui/icons-material/Add';
 import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Box from 'verdaccio-ui/components/Box';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
-import Tooltip from 'verdaccio-ui/components/Tooltip';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
 import { DetailContext } from '../..';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap
index 93f97f6d2..7b77e6e60 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Developers/__snapshots__/Developers.test.tsx.snap
@@ -82,11 +82,11 @@ Object {
 
 <body>
     <div>
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Contributors
-      </span>
+      </h6>
       <div
         class="emotion-2 MuiBox-root emotion-3"
       >
@@ -205,11 +205,11 @@ Object {
 }
 
 <div>
-    <span
+    <h6
       class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Contributors
-    </span>
+    </h6>
     <div
       class="emotion-2 MuiBox-root emotion-3"
     >
@@ -385,11 +385,11 @@ Object {
 
 <body>
     <div>
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
       >
         Maintainers
-      </span>
+      </h6>
       <div
         class="emotion-2 MuiBox-root emotion-3"
       >
@@ -508,11 +508,11 @@ Object {
 }
 
 <div>
-    <span
+    <h6
       class="MuiTypography-root MuiTypography-subtitle1 emotion-0 emotion-1"
     >
       Maintainers
-    </span>
+    </h6>
     <div
       class="emotion-2 MuiBox-root emotion-3"
     >
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/Dist.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/Dist.tsx
index c18219b86..723be034e 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/Dist.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/Dist.tsx
@@ -1,6 +1,6 @@
+import List from '@mui/material/List';
 import React, { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import List from 'verdaccio-ui/components/List';
 import fileSizeSI from 'verdaccio-ui/utils/file-size';
 import { formatLicense } from 'verdaccio-ui/utils/package';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/__snapshots__/Dist.test.tsx.snap b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/__snapshots__/Dist.test.tsx.snap
index 31ec8c9ce..53140d661 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/__snapshots__/Dist.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/__snapshots__/Dist.test.tsx.snap
@@ -251,11 +251,11 @@ Object {
       <ul
         class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
       >
-        <span
+        <h6
           class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
         >
           Latest Distribution
-        </span>
+        </h6>
         <div
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
           role="button"
@@ -541,11 +541,11 @@ Object {
     <ul
       class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
     >
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
       >
         Latest Distribution
-      </span>
+      </h6>
       <div
         class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
         role="button"
@@ -888,11 +888,11 @@ Object {
       <ul
         class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
       >
-        <span
+        <h6
           class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
         >
           Latest Distribution
-        </span>
+        </h6>
         <div
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
           role="button"
@@ -1191,11 +1191,11 @@ Object {
     <ul
       class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
     >
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
       >
         Latest Distribution
-      </span>
+      </h6>
       <div
         class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
         role="button"
@@ -1551,11 +1551,11 @@ Object {
       <ul
         class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
       >
-        <span
+        <h6
           class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
         >
           Latest Distribution
-        </span>
+        </h6>
         <div
           class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
           role="button"
@@ -1854,11 +1854,11 @@ Object {
     <ul
       class="MuiList-root MuiList-padding MuiList-subheader emotion-0"
     >
-      <span
+      <h6
         class="MuiTypography-root MuiTypography-subtitle1 emotion-1 emotion-2"
       >
         Latest Distribution
-      </span>
+      </h6>
       <div
         class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-padding MuiListItem-button emotion-3 emotion-4"
         role="button"
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/styles.ts b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/styles.ts
index 888067241..9751a8932 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Dist/styles.ts
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import Chip from 'verdaccio-ui/components/Chip';
+import Chip from '@mui/material/Chip';
+import ListItem from '@mui/material/ListItem';
 import FloatingActionButton from 'verdaccio-ui/components/FloatingActionButton';
-import ListItem from 'verdaccio-ui/components/ListItem';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/Engines.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/Engines.tsx
index ea4412629..65be01be7 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/Engines.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/Engines.tsx
@@ -1,9 +1,9 @@
+import Avatar from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import Avatar from 'verdaccio-ui/components/Avatar';
-import Grid from 'verdaccio-ui/components/Grid';
-import List from 'verdaccio-ui/components/List';
-import ListItemText from 'verdaccio-ui/components/ListItemText';
 
 import { DetailContext } from '../../context';
 import npm from '../Install/img/npm.svg';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/styles.ts b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/styles.ts
index fae45da54..fa41831cf 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Engines/styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import ListItem from 'verdaccio-ui/components/ListItem';
+import ListItem from '@mui/material/ListItem';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.tsx
index b8283bf23..811b9d3fa 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/Install.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import List from '@mui/material/List';
 import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import List from 'verdaccio-ui/components/List';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx
index 2719b98f4..015e29b4b 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Install/InstallListItem.tsx
@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
+import Avatar from '@mui/material/Avatar';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
-import ListItem from 'verdaccio-ui/components/ListItem';
-import ListItemText from 'verdaccio-ui/components/ListItemText';
 
 // logos of package managers
 import npmLogo from './img/npm.svg';
diff --git a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Repository/Repository.tsx b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Repository/Repository.tsx
index c86889259..190720056 100644
--- a/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Repository/Repository.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/DetailSidebar/Repository/Repository.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
+import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import Avatar from 'verdaccio-ui/components/Avatar';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import Link from 'verdaccio-ui/components/Link';
-import List from 'verdaccio-ui/components/List';
-import ListItem from 'verdaccio-ui/components/ListItem';
-import ListItemText from 'verdaccio-ui/components/ListItemText';
 import Text from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { isURL } from 'verdaccio-ui/utils/url';
diff --git a/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx b/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
index 0775ca4b2..35ae03856 100644
--- a/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/Version.test.tsx
@@ -9,7 +9,7 @@ import data from './__partials__/data.json';
 import { DetailContext } from './context';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
-jest.mock('verdaccio-ui/components/Avatar');
+jest.mock('@mui/material/Avatar');
 
 const detailContextValue = {
   packageName: 'foo',
diff --git a/packages/plugins/ui-theme/src/pages/Version/Version.tsx b/packages/plugins/ui-theme/src/pages/Version/Version.tsx
index 00166a152..9e54a1d17 100644
--- a/packages/plugins/ui-theme/src/pages/Version/Version.tsx
+++ b/packages/plugins/ui-theme/src/pages/Version/Version.tsx
@@ -1,29 +1,14 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import Loading from 'verdaccio-ui/components/Loading';
 import NotFound from 'verdaccio-ui/components/NotFound';
 
-import { Dispatch, RootState } from '../../store/store';
+import { RootState } from '../../store/store';
 import VersionLayout from './VersionLayout';
-import getRouterPackageName from './get-route-package-name';
-
-interface Params {
-  scope?: string;
-  package: string;
-  version?: string;
-}
 
 const Version: React.FC = () => {
-  const { version: packageVersion, package: pkgName, scope } = useParams<Params>();
   const manifestStore = useSelector((state: RootState) => state.manifest);
   const isLoading = useSelector((state: RootState) => state?.loading?.models.manifest);
-  const dispatch = useDispatch<Dispatch>();
-
-  useEffect(() => {
-    const packageName = getRouterPackageName(pkgName, scope);
-    dispatch.manifest.getManifest({ packageName, packageVersion });
-  }, [dispatch, pkgName, scope, packageVersion]);
 
   if (isLoading) {
     return <Loading />;
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/Help.tsx b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/Help.tsx
index 6c877b614..aacb482f0 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/Help.tsx
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/Help.tsx
@@ -1,8 +1,8 @@
+import Button from '@mui/material/Button';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
 import React, { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from 'verdaccio-ui/components/Button';
-import CardActions from 'verdaccio-ui/components/CardActions';
-import CardContent from 'verdaccio-ui/components/CardContent';
 import CopyToClipBoard from 'verdaccio-ui/components/CopyToClipBoard';
 import { default as Typography } from 'verdaccio-ui/components/Heading';
 import Text from 'verdaccio-ui/components/Text';
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap
index 30acfdd45..53ef7a678 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/__snapshots__/Help.test.tsx.snap
@@ -300,11 +300,11 @@ exports[`<Help /> component should load the component in default state 1`] = `
     >
       To publish your first package just:
     </h6>
-    <span
+    <p
       class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       1. Login
-    </span>
+    </p>
     <div
       class="emotion-7 emotion-8"
     >
@@ -337,11 +337,11 @@ exports[`<Help /> component should load the component in default state 1`] = `
         />
       </button>
     </div>
-    <span
+    <p
       class="MuiTypography-root MuiTypography-body1 emotion-6"
     >
       2. Publish
-    </span>
+    </p>
     <div
       class="emotion-7 emotion-8"
     >
@@ -374,11 +374,11 @@ exports[`<Help /> component should load the component in default state 1`] = `
         />
       </button>
     </div>
-    <span
+    <p
       class="MuiTypography-root MuiTypography-body2 emotion-22"
     >
       3. Refresh this page
-    </span>
+    </p>
   </div>
   <div
     class="MuiCardActions-root MuiCardActions-spacing emotion-23"
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts
index ac9f9a824..c54d59c92 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Help/styles.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import Card from 'verdaccio-ui/components/Card';
+import Card from '@mui/material/Card';
 import { default as Typography } from 'verdaccio-ui/components/Heading';
 
 export const CardStyled = styled(Card)({
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Package/Package.tsx b/packages/plugins/ui-theme/src/pages/home/PackageList/Package/Package.tsx
index 03db83542..f17e255da 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/Package/Package.tsx
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Package/Package.tsx
@@ -3,14 +3,14 @@ import styled from '@emotion/styled';
 import BugReport from '@mui/icons-material/BugReport';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import HomeIcon from '@mui/icons-material/Home';
+import Grid from '@mui/material/Grid';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import Grid from 'verdaccio-ui/components/Grid';
 import { FileBinary, Law, Time, Version } from 'verdaccio-ui/components/Icons';
 import Link from 'verdaccio-ui/components/Link';
-import ListItem from 'verdaccio-ui/components/ListItem';
-import Tooltip from 'verdaccio-ui/components/Tooltip';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import fileSizeSI from 'verdaccio-ui/utils/file-size';
 import { formatDate, formatDateDistance, getAuthorName } from 'verdaccio-ui/utils/package';
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/Package/styles.ts b/packages/plugins/ui-theme/src/pages/home/PackageList/Package/styles.ts
index b627ca764..6c74fc06a 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/Package/styles.ts
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/Package/styles.ts
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
+import { default as Photo } from '@mui/material/Avatar';
+import Grid from '@mui/material/Grid';
+import { default as MuiIconButton } from '@mui/material/IconButton';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
 import { Link } from 'react-router-dom';
-import { default as Photo } from 'verdaccio-ui/components/Avatar';
-import Grid from 'verdaccio-ui/components/Grid';
-import { default as MuiIconButton } from 'verdaccio-ui/components/IconButton';
 import Label from 'verdaccio-ui/components/Label';
-import List from 'verdaccio-ui/components/List';
-import ListItemText from 'verdaccio-ui/components/ListItemText';
 import { default as MuiText } from 'verdaccio-ui/components/Text';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 
diff --git a/packages/plugins/ui-theme/src/pages/home/PackageList/PackageList.tsx b/packages/plugins/ui-theme/src/pages/home/PackageList/PackageList.tsx
index c701ec8b8..3b39a1243 100644
--- a/packages/plugins/ui-theme/src/pages/home/PackageList/PackageList.tsx
+++ b/packages/plugins/ui-theme/src/pages/home/PackageList/PackageList.tsx
@@ -1,9 +1,9 @@
+import Divider from '@mui/material/Divider';
 import React from 'react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List, ListRowProps } from 'react-virtualized/dist/commonjs/List';
 import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
-import Divider from 'verdaccio-ui/components/Divider';
 import { formatLicense } from 'verdaccio-ui/utils/package';
 
 import Help from './Help';
diff --git a/packages/plugins/ui-theme/tools/_verdaccio.config.yaml b/packages/plugins/ui-theme/tools/_verdaccio.config.yaml
index fd8ff73a5..1b666f650 100644
--- a/packages/plugins/ui-theme/tools/_verdaccio.config.yaml
+++ b/packages/plugins/ui-theme/tools/_verdaccio.config.yaml
@@ -2,7 +2,7 @@ web:
   title: Verdaccio Local Dev
   sort_packages: asc
   primary_color: #CCC
-  login: false
+  login: true
   pkgManagers:
     - npm
     - yarn