diff --git a/src/webui/components/AutoComplete/index.js b/src/webui/components/AutoComplete/index.js
index 6b69a2eaa..917006d1a 100644
--- a/src/webui/components/AutoComplete/index.js
+++ b/src/webui/components/AutoComplete/index.js
@@ -43,11 +43,11 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): Node => {
       <div>
         {parts.map((part, index) => {
           return part.highlight ? (
-            <span href={ suggestion.link } key={ String(index) } style={ { fontWeight: fontWeight.semiBold } }>
+            <span href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.semiBold }}>
               {part.text}
             </span>
           ) : (
-            <span href={ suggestion.link } key={ String(index) } style={ { fontWeight: fontWeight.light } }>
+            <span href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.light }}>
               {part.text}
             </span>
           );
@@ -100,7 +100,7 @@ const AutoComplete = ({
     <Wrapper>
       <Autosuggest
         {...autosuggestProps}
-        inputProps={ {
+        inputProps={{
           value,
           onChange,
           placeholder,
@@ -109,16 +109,16 @@ const AutoComplete = ({
           color,
           onKeyDown,
           onBlur,
-        } }
-        onSuggestionSelected={ onClick }
-        renderSuggestionsContainer={ ({ containerProps, children, query }) => (
-          <Paper { ...containerProps } square={true}>
+        }}
+        onSuggestionSelected={onClick}
+        renderSuggestionsContainer={({ containerProps, children, query }) => (
+          <Paper {...containerProps} square={true}>
             {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
             {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
             {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
             {children}
           </Paper>
-        ) }
+        )}
       />
     </Wrapper>
   );
diff --git a/src/webui/components/Footer/index.js b/src/webui/components/Footer/index.js
index cb2ae90d8..12d8da1f7 100644
--- a/src/webui/components/Footer/index.js
+++ b/src/webui/components/Footer/index.js
@@ -17,15 +17,15 @@ const Footer = (): Element<Wrapper> => (
         <Love>♥</Love>
         on
         <ToolTip>
-          <Earth name={ 'earth' } size={ 'md' } />
+          <Earth name={'earth'} size={'md'} />
           <Flags>
-            <Flag name={ 'spain' } size={ 'md' } />
-            <Flag name={ 'nicaragua' } size={ 'md' } />
-            <Flag name={ 'india' } size={ 'md' } />
-            <Flag name={ 'brazil' } size={ 'md' } />
-            <Flag name={ 'pakistan' } size={ 'md' } />
-            <Flag name={ 'china' } size={ 'md' } />
-            <Flag name={ 'austria' } size={ 'md' } />
+            <Flag name={'spain'} size={'md'} />
+            <Flag name={'nicaragua'} size={'md'} />
+            <Flag name={'india'} size={'md'} />
+            <Flag name={'brazil'} size={'md'} />
+            <Flag name={'pakistan'} size={'md'} />
+            <Flag name={'china'} size={'md'} />
+            <Flag name={'austria'} size={'md'} />
           </Flags>
         </ToolTip>
       </Left>
diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js
index 0add4c7bf..ebf4c4e25 100644
--- a/src/webui/components/Header/index.js
+++ b/src/webui/components/Header/index.js
@@ -184,8 +184,7 @@ class Header extends Component<IProps, IState> {
           transformOrigin={{
             vertical: 'top',
             horizontal: 'right',
-          }}
-        >
+          }}>
           <MenuItem disabled={true}>
             <Greetings>{`Hi,`}</Greetings>
             <Label capitalize={true} limit={140} text={username} weight={'bold'} />
diff --git a/src/webui/components/Help/index.js b/src/webui/components/Help/index.js
index 6fd60da07..ac3a50cae 100644
--- a/src/webui/components/Help/index.js
+++ b/src/webui/components/Help/index.js
@@ -17,9 +17,7 @@ import { CardStyled as Card, HelpTitle } from './styles';
 function renderHeadingClipboardSegments(title: string, text: string): Node {
   return (
     <Fragment>
-      <Typography variant={ 'body2' }>
-{title}
-</Typography>
+      <Typography variant={'body2'}>{title}</Typography>
       <CopyToClipBoard text={text} />
     </Fragment>
   );
@@ -29,17 +27,17 @@ const Help = (): Node => {
   const registryUrl = getRegistryURL();
 
   return (
-    <Card id={ 'help-card' }>
+    <Card id={'help-card'}>
       <CardContent>
         <Typography component={'h2'} gutterBottom={true} id={'help-card__title'} variant={'headline'}>
           No Package Published Yet.
         </Typography>
-        <HelpTitle color={ 'textSecondary' } gutterBottom={ true }>
+        <HelpTitle color={'textSecondary'} gutterBottom={true}>
           To publish your first package just:
         </HelpTitle>
         {renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
         {renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
-        <Typography variant={ 'body2' }>3. Refresh this page.</Typography>
+        <Typography variant={'body2'}>3. Refresh this page.</Typography>
       </CardContent>
       <CardActions>
         <Button color={'primary'} href={'https://verdaccio.org/docs/en/installation'} size={'small'} target={'_blank'}>
diff --git a/src/webui/components/Icon/index.js b/src/webui/components/Icon/index.js
index 5fdb2654c..cb58be2e4 100644
--- a/src/webui/components/Icon/index.js
+++ b/src/webui/components/Icon/index.js
@@ -40,11 +40,11 @@ export const Icons: $Shape<IIconsMap> = {
 const Icon = ({ className, name, size = 'sm', img = false, pointer = false, ...props }: IProps): Node => {
   const title = capitalize(name);
   return img ? (
-    <ImgWrapper className={ className } pointer={ pointer } size={ size } title={ title } {...props}>
-      <Img alt={ title } src={ Icons[name] } />
+    <ImgWrapper className={className} pointer={pointer} size={size} title={title} {...props}>
+      <Img alt={title} src={Icons[name]} />
     </ImgWrapper>
   ) : (
-    <SVG className={ className } pointer={ pointer } size={ size } {...props}>
+    <SVG className={className} pointer={pointer} size={size} {...props}>
       <title>{title}</title>
       <use xlinkHref={`${Icons[name]}#${name}`} />
     </SVG>
diff --git a/src/webui/components/Label/index.js b/src/webui/components/Label/index.js
index 449919887..7d0354f42 100644
--- a/src/webui/components/Label/index.js
+++ b/src/webui/components/Label/index.js
@@ -18,7 +18,7 @@ const Wrapper = styled.div`
 
 const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => {
   return (
-    <Wrapper capitalize={ capitalize } weight={ weight } {...props}>
+    <Wrapper capitalize={capitalize} weight={weight} {...props}>
       {text}
     </Wrapper>
   );
diff --git a/src/webui/components/Loading/index.js b/src/webui/components/Loading/index.js
index 8d1354df1..94c4f2db1 100644
--- a/src/webui/components/Loading/index.js
+++ b/src/webui/components/Loading/index.js
@@ -14,7 +14,7 @@ import { Wrapper, Badge } from './styles';
 const Loading = (): Node => (
   <Wrapper>
     <Badge>
-      <Logo md={ true } />
+      <Logo md={true} />
     </Badge>
     <Spinner />
   </Wrapper>
diff --git a/src/webui/components/Package/index.js b/src/webui/components/Package/index.js
index 8b681710f..8b795cbca 100644
--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@@ -52,8 +52,7 @@ const Package = ({ name: label, version, time, author: { name, avatar }, descrip
           </OverviewItem>
         )}
         <OverviewItem>
-          <Icon name={'time'}
-                pointer={ true } />
+          <Icon name={'time'} pointer={true} />
           <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
           {`${formatDateDistance(time)} ago`}
         </OverviewItem>
diff --git a/src/webui/components/Readme/index.js b/src/webui/components/Readme/index.js
index 9dc3d9dd6..eac8a1e7e 100644
--- a/src/webui/components/Readme/index.js
+++ b/src/webui/components/Readme/index.js
@@ -8,6 +8,6 @@ import 'github-markdown-css';
 
 import { IProps } from './types';
 
-const Readme = ({ description }: IProps) => <div className={ 'markdown-body' } dangerouslySetInnerHTML={ { __html: description } } />;
+const Readme = ({ description }: IProps) => <div className={'markdown-body'} dangerouslySetInnerHTML={{ __html: description }} />;
 
 export default Readme;
diff --git a/src/webui/components/RegistryInfoDialog/index.js b/src/webui/components/RegistryInfoDialog/index.js
index da02b076a..79e0a7535 100644
--- a/src/webui/components/RegistryInfoDialog/index.js
+++ b/src/webui/components/RegistryInfoDialog/index.js
@@ -1,28 +1,28 @@
-/**
- * @prettier
- * @flow
- */
-
-import React from 'react';
-import Dialog from '@material-ui/core/Dialog/index';
-import DialogActions from '@material-ui/core/DialogActions/index';
-import Button from '@material-ui/core/Button/index';
-import { Title, Content } from './styles';
-
-import type { Node } from 'react';
-
-import { IProps } from './types';
-
-const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
-  <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
-    <Title disableTypography={ true }>Register Info</Title>
-    <Content>{children}</Content>
-    <DialogActions>
-      <Button autoFocus={true} color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
-        CLOSE
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
-
-export default RegistryInfoDialog;
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog/index';
+import DialogActions from '@material-ui/core/DialogActions/index';
+import Button from '@material-ui/core/Button/index';
+import { Title, Content } from './styles';
+
+import type { Node } from 'react';
+
+import { IProps } from './types';
+
+const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
+  <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
+    <Title disableTypography={true}>Register Info</Title>
+    <Content>{children}</Content>
+    <DialogActions>
+      <Button color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
+        CLOSE
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
+export default RegistryInfoDialog;
diff --git a/src/webui/components/Tag/index.js b/src/webui/components/Tag/index.js
index 33c3bd94d..359d5bdbb 100644
--- a/src/webui/components/Tag/index.js
+++ b/src/webui/components/Tag/index.js
@@ -9,8 +9,6 @@ import type { Element } from 'react';
 import { IProps } from './types';
 import { Wrapper } from './styles';
 
-const Tag = ({ children }: IProps): Element<Wrapper> => (<Wrapper>
-{children}
-</Wrapper>);
+const Tag = ({ children }: IProps): Element<Wrapper> => <Wrapper>{children}</Wrapper>;
 
 export default Tag;
diff --git a/src/webui/router.js b/src/webui/router.js
index d172e603b..471b7776b 100644
--- a/src/webui/router.js
+++ b/src/webui/router.js
@@ -24,9 +24,9 @@ class RouterApp extends Component<IProps, IState> {
     return (
       <Router>
         <Switch>
-          <Route exact={ true } path={ '/' } render={ () => <HomePage isUserLoggedIn={ isUserLoggedIn } packages={ packages } /> } />
-          <Route exact={ true } path={ '/detail/@:scope/:package' } render={ props => <DetailPackage { ...props } isUserLoggedIn={ isUserLoggedIn } /> } />
-          <Route exact={ true } path={ '/detail/:package' } render={ props => <DetailPackage { ...props } isUserLoggedIn={ isUserLoggedIn } /> } />
+          <Route exact={true} path={'/'} render={() => <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />} />
+          <Route exact={true} path={'/detail/@:scope/:package'} render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
+          <Route exact={true} path={'/detail/:package'} render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
         </Switch>
       </Router>
     );