diff --git a/src/App/App.tsx b/src/App/App.tsx
index f9cca35..65ac3e0 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -29,16 +29,14 @@ export interface AppStateInterface {
   scope: string;
   showLoginModal: boolean;
   isUserLoggedIn: boolean;
-  packages: [];
+  packages: any[];
   isLoading: boolean;
 }
 export default class App extends Component<{}, AppStateInterface> {
   public state: AppStateInterface = {
-    // @ts-ignore
     logoUrl: window.VERDACCIO_LOGO,
     user: {},
-    // @ts-ignore
-    scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '',
+    scope: window.VERDACCIO_SCOPE || '',
     showLoginModal: false,
     isUserLoggedIn: false,
     packages: [],
@@ -64,7 +62,6 @@ export default class App extends Component<{}, AppStateInterface> {
     const context = { isUserLoggedIn, packages, logoUrl, user, scope };
 
     return (
-      // @ts-ignore
       <Container isLoading={isLoading}>
         {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
         {this.renderLoginModal()}
@@ -88,11 +85,9 @@ export default class App extends Component<{}, AppStateInterface> {
 
   public loadOnHandler = async () => {
     try {
-      // @ts-ignore
-      this.req = await API.request('packages', 'GET');
+      const packages = await API.request<any[]>('packages', 'GET');
       this.setState({
-        // @ts-ignore
-        packages: this.req,
+        packages,
         isLoading: false,
       });
     } catch (error) {
@@ -116,7 +111,6 @@ export default class App extends Component<{}, AppStateInterface> {
    */
   public handleToggleLoginModal = () => {
     this.setState(prevState => ({
-      // @ts-ignore
       showLoginModal: !prevState.showLoginModal,
     }));
   };
@@ -126,7 +120,6 @@ export default class App extends Component<{}, AppStateInterface> {
    * Required by: <Header />
    */
   public handleDoLogin = async (usernameValue, passwordValue) => {
-    // @ts-ignore
     const { username, token, error } = await makeLogin(usernameValue, passwordValue);
 
     if (username && token) {
@@ -187,7 +180,6 @@ export default class App extends Component<{}, AppStateInterface> {
   public renderHeader = (): ReactElement<HTMLElement> => {
     const {
       logoUrl,
-      // @ts-ignore
       user: { username },
       scope,
     } = this.state;
diff --git a/src/components/ActionBar/ActionBar.test.tsx b/src/components/ActionBar/ActionBar.test.tsx
index fac80e0..b77c026 100644
--- a/src/components/ActionBar/ActionBar.test.tsx
+++ b/src/components/ActionBar/ActionBar.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { ActionBar } from './ActionBar';
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -32,7 +32,6 @@ describe('<ActionBar /> component', () => {
   });
 
   test('when there is no action bar data', () => {
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => ({
       latest: {},
     }));
@@ -44,7 +43,6 @@ describe('<ActionBar /> component', () => {
   });
 
   test('when there is a button to download a tarball', () => {
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => ({
       latest: {
         dist: {
diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx
index bee45ec..79db693 100644
--- a/src/components/ActionBar/ActionBar.tsx
+++ b/src/components/ActionBar/ActionBar.tsx
@@ -70,7 +70,6 @@ class ActionBar extends Component {
   }
 
   private renderActionBar = ({ packageMeta }) => {
-    // @ts-ignore
     const { latest } = packageMeta;
 
     if (!latest) {
@@ -107,7 +106,6 @@ class ActionBar extends Component {
         } else {
           const fab = <Fab size={'small'}>{actionItem['icon']}</Fab>;
           component.push(
-            // @ts-ignore
             <Tooltip key={key} title={actionItem['title']}>
               <>{this.renderIconsWithLink(link, fab)}</>
             </Tooltip>
diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx
index 4f78649..ca3ad84 100644
--- a/src/components/Dependencies/Dependencies.tsx
+++ b/src/components/Dependencies/Dependencies.tsx
@@ -96,14 +96,16 @@ class Dependencies extends Component {
 
     const dependencyMap = { dependencies, devDependencies, peerDependencies };
 
-    const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
-      const selectedDepndency = dependencyMap[value];
-      if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
-        // @ts-ignore
-        result.push(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
-      }
-      return result;
-    }, []);
+    const dependencyList = Object.keys(dependencyMap).reduce(
+      (result, value, key) => {
+        const selectedDepndency = dependencyMap[value];
+        if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
+          result.push(<DependencyBlock dependencies={selectedDepndency} key={key} title={value} />);
+        }
+        return result;
+      },
+      [] as JSX.Element[]
+    );
 
     if (dependencyList.length) {
       return <Fragment>{dependencyList}</Fragment>;
diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx
index 2fd3e31..69a1ea6 100644
--- a/src/components/Developers/Developers.tsx
+++ b/src/components/Developers/Developers.tsx
@@ -18,7 +18,7 @@ const Developers: FC<Props> = ({ type, visibleMax }) => {
   const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
   const { packageMeta } = React.useContext(DetailContext);
 
-  const handleLoadMore = () => {
+  const handleLoadMore = (): void => {
     setVisibleDevs(visibleDevs + VISIBLE_MAX);
   };
 
diff --git a/src/components/Engines/Engines.test.tsx b/src/components/Engines/Engines.test.tsx
index 4756588..c59bb8b 100644
--- a/src/components/Engines/Engines.test.tsx
+++ b/src/components/Engines/Engines.test.tsx
@@ -5,7 +5,7 @@ import Engine from './Engines';
 jest.mock('./img/node.png', () => '');
 jest.mock('../Install/img/npm.svg', () => '');
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -38,7 +38,6 @@ describe('<Engines /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);
@@ -50,7 +49,6 @@ describe('<Engines /> component', () => {
       latest: {},
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);
@@ -64,7 +62,6 @@ describe('<Engines /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);
diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx
index b91efcc..d8f9240 100644
--- a/src/components/Footer/Footer.test.tsx
+++ b/src/components/Footer/Footer.test.tsx
@@ -10,10 +10,8 @@ jest.mock('../../../package.json', () => ({
 describe('<Footer /> component', () => {
   let wrapper;
   beforeEach(() => {
-    // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
     window.VERDACCIO_VERSION = 'v.1.0.0';
     wrapper = mount(<Footer />);
-    // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
     delete window.VERDACCIO_VERSION;
   });
 
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index fe1c4cf..7a6e5d0 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -21,7 +21,6 @@ const MADEWITH_LABEL = ' Made with';
 const ON_LABEL = 'on';
 const HEARTH_EMOJI = '♥';
 
-// @ts-ignore
 const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
   return (
     <Right>
diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
index 5207935..0396a03 100644
--- a/src/components/Footer/styles.ts
+++ b/src/components/Footer/styles.ts
@@ -20,7 +20,6 @@ export const Inner = styled('div')`
     justify-content: flex-end;
     width: 100%;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         min-width: 400px;
         max-width: 800px;
@@ -29,7 +28,6 @@ export const Inner = styled('div')`
       `);
     }};
     ${() => {
-      // @ts-ignore
       return mq.large(css`
         max-width: 1240px;
       `);
@@ -42,7 +40,6 @@ export const Left = styled('div')`
     align-items: center;
     display: none;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         display: flex;
       `);
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 97b7ea6..dc556a1 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -184,7 +184,6 @@ class Header extends Component<Props, State> {
     switch (type) {
       case 'help':
         content = (
-          // @ts-ignore
           <StyledExternalLink blank={true} to={'https://verdaccio.org/docs/en/installation'}>
             <IconButton color={'inherit'}>
               <Help />
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index dcbc49a..79cc50e 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)`
     min-height: 60px;
     display: flex;
     justify-content: center;
-    ${() => {
-      // @ts-ignore
-      return mq.medium(css`
+    ${() =>
+      mq.medium(css`
         ${SearchWrapper} {
           display: flex;
         }
@@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)`
         ${MobileNavBar} {
           display: none;
         }
-      `);
-    }};
-    ${() => {
-      // @ts-ignore
-      return mq.large(css`
+      `)};
+    ${() =>
+      mq.large(css`
         ${InnerNavBar} {
           padding: 0 20px;
         }
-      `);
-    }};
-    ${() => {
-      // @ts-ignore
-      return mq.xlarge(css`
+      `)};
+    ${() =>
+      mq.xlarge(css`
         ${InnerNavBar} {
           max-width: 1240px;
           width: 100%;
           margin: 0 auto;
         }
-      `);
-    }};
+      `)};
   }
 `;
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 4c603c9..4bcefb7 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -65,14 +65,12 @@ export interface Props {
 }
 
 const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {
-  // @ts-ignore
-  const title = capitalize(name);
+  const title = capitalize(name.toString());
   return img ? (
     <ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
       <Img alt={title} src={Icons[name]} />
     </ImgWrapper>
   ) : (
-    // @ts-ignore
     <Svg className={className} pointer={pointer} size={size} {...props}>
       <title>{title}</title>
       <use xlinkHref={`${Icons[name]}#${name}`} />
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 95fa878..a9a4fd0 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -9,18 +9,20 @@ interface Props {
   modifiers?: null | undefined;
 }
 
+interface WrapperProps {
+  capitalize: boolean;
+  weight: string;
+  modifiers?: null;
+}
+
 const Wrapper = styled('div')`
-  font-weight: ${({ weight }) => {
-    // @ts-ignore
-    return fontWeight[weight];
-  }};
-  text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')};
-  ${({ modifiers }: Props) => modifiers && modifiers};
+  font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
+  text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};
+  ${({ modifiers }: WrapperProps) => modifiers};
 `;
 
 const Label: React.FC<Props> = ({ text = '', capitalize = false, weight = 'regular', ...props }) => {
   return (
-    // @ts-ignore
     <Wrapper capitalize={capitalize} weight={weight} {...props}>
       {text}
     </Wrapper>
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 968e78f..8f2fd91 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -11,15 +11,18 @@ export const Content = styled('div')({
   },
 });
 
+interface ContainerProps {
+  isLoading: boolean;
+}
+
 export const Container = styled('div')`
   && {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     overflow: hidden;
-    ${props =>
-      // @ts-ignore
-      props.isLoading &&
+    ${({ isLoading }: ContainerProps) =>
+      isLoading &&
       css`
         ${Content} {
           background-color: #f5f6f8;
diff --git a/src/components/Package/Package.tsx b/src/components/Package/Package.tsx
index bcbb4a5..be749ba 100644
--- a/src/components/Package/Package.tsx
+++ b/src/components/Package/Package.tsx
@@ -150,7 +150,6 @@ const Package: React.FC<PackageInterface> = ({
   };
 
   const renderSecondaryComponent = (): React.ReactNode => {
-    // @ts-ignore
     const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
     return (
       <>
diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts
index 09acf2f..5ae899b 100644
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -48,7 +48,6 @@ export const Published = styled('span')({
   },
 });
 
-// @ts-ignore
 export const Text = styled(Label)({
   '&&': {
     fontSize: '12px',
diff --git a/src/components/Repository/Repository.test.tsx b/src/components/Repository/Repository.test.tsx
index fafdf7b..ca9204a 100644
--- a/src/components/Repository/Repository.test.tsx
+++ b/src/components/Repository/Repository.test.tsx
@@ -4,7 +4,7 @@ import Repository from './Repository';
 
 jest.mock('./img/git.png', () => '');
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -37,7 +37,6 @@ describe('<Repository /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);
@@ -49,7 +48,6 @@ describe('<Repository /> component', () => {
       latest: {},
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);
@@ -66,7 +64,6 @@ describe('<Repository /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
index db4a917..9c59470 100644
--- a/src/components/Spinner/Spinner.tsx
+++ b/src/components/Spinner/Spinner.tsx
@@ -8,7 +8,6 @@ interface Props {
 }
 
 const Spinner: React.FC<Props> = ({ size = 50, centered = false }) => (
-  // @ts-ignore
   <Wrapper centered={centered}>
     <Circular size={size} />
   </Wrapper>
diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts
index c342171..29fcaae 100644
--- a/src/components/Spinner/styles.ts
+++ b/src/components/Spinner/styles.ts
@@ -3,13 +3,16 @@ import styled, { css } from 'react-emotion';
 
 import colors from '../../utils/styles/colors';
 
+interface WrapperProps {
+  centered: boolean;
+}
+
 export const Wrapper = styled('div')`
   && {
     display: flex;
     align-items: center;
     justify-content: center;
-    ${props =>
-      // @ts-ignore
+    ${(props: WrapperProps) =>
       props.centered &&
       css`
         position: absolute;
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 1dd45a4..61bfd4c 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -43,7 +43,6 @@ class API {
     }
 
     if (!['http://', 'https://', '//'].some(prefix => url.startsWith(prefix))) {
-      // @ts-ignore
       url = window.VERDACCIO_API_URL + url;
     }
 
diff --git a/src/utils/styles/colors.ts b/src/utils/styles/colors.ts
index b4497f2..16f5c30 100644
--- a/src/utils/styles/colors.ts
+++ b/src/utils/styles/colors.ts
@@ -30,7 +30,6 @@ const colors = {
   // Main colors
   // -------------------------
 
-  // @ts-ignore
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
 };
diff --git a/src/utils/styles/media.ts b/src/utils/styles/media.ts
index 7c3114e..a626014 100644
--- a/src/utils/styles/media.ts
+++ b/src/utils/styles/media.ts
@@ -8,16 +8,26 @@ export const breakpoints = {
   xlarge: 1275,
 };
 
-const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
-  const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
-  const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
-  accumulator[label] = cls =>
-    css`
-      @media (${prefix + breakpoints[label] + suffix}) {
-        ${cls};
-      }
-    `;
-  return accumulator;
-}, {});
+type Sizes = keyof typeof breakpoints;
+
+type MediaQuery = {
+  [key in Sizes]: (cls: any) => string;
+};
+
+const mq: MediaQuery = Object.keys(breakpoints).reduce(
+  (accumulator, label) => {
+    const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
+    const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
+    accumulator[label] = cls =>
+      css`
+        @media (${prefix + breakpoints[label] + suffix}) {
+          ${cls};
+        }
+      `;
+    return accumulator;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+  {} as MediaQuery
+);
 
 export default mq;
diff --git a/types/index.ts b/types/index.ts
index 68c79cb..d19b664 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -7,6 +7,10 @@ export interface VerdaccioOptions {
 declare global {
   interface Window {
     __VERDACCIO_BASENAME_UI_OPTIONS: VerdaccioOptions;
+    VERDACCIO_PRIMARY_COLOR: string;
+    VERDACCIO_LOGO: string;
+    VERDACCIO_SCOPE: string;
+    VERDACCIO_VERSION: string;
     VERDACCIO_API_URL: string;
   }
 }