diff --git a/src/App/App.tsx b/src/App/App.tsx
index 7ee8c8e0f..c2ba2194f 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -5,11 +5,9 @@ import { Router } from 'react-router-dom';
 
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
-import API from '../utils/api';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import Box from '../muiComponents/Box';
-import Loading from '../components/Loading';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
 
@@ -33,11 +31,9 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
   const [user, setUser] = useState();
-  const [packages, setPackages] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
 
   /**
-   * Logouts user
+   * Logout user
    * Required by: <Header />
    */
   const logout = () => {
@@ -59,46 +55,26 @@ const App: React.FC = () => {
     setUser({ username });
   };
 
-  const loadOnHandler = async () => {
-    try {
-      const packages = await API.request('packages', 'GET');
-      // FIXME add correct type for package
-      setPackages(packages as never[]);
-    } catch (error) {
-      // FIXME: add dialog
-      console.error({
-        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`,
-      });
-    }
-
-    setIsLoading(false);
-  };
-
   useEffect(() => {
     checkUserAlreadyLoggedIn();
-    loadOnHandler();
   }, []);
 
   return (
     <>
       <StyleBaseline />
       <StyledBox display="flex" flexDirection="column" height="100%">
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <>
-            <Router history={history}>
-              <AppContextProvider packages={packages} user={user}>
-                <Header />
-                <StyledBoxContent flexGrow={1}>
-                  <AppRoute />
-                </StyledBoxContent>
-              </AppContextProvider>
-            </Router>
-            <Footer />
-          </>
-        )}
+        <>
+          <Router history={history}>
+            <AppContextProvider user={user}>
+              <Header />
+              <StyledBoxContent flexGrow={1}>
+                {/* eslint-disable-next-line react/jsx-max-depth */}
+                <AppRoute />
+              </StyledBoxContent>
+            </AppContextProvider>
+          </Router>
+          <Footer />
+        </>
       </StyledBox>
     </>
   );
diff --git a/src/App/AppContext.ts b/src/App/AppContext.ts
index 70da7781b..a8837ab52 100644
--- a/src/App/AppContext.ts
+++ b/src/App/AppContext.ts
@@ -3,7 +3,6 @@ import { createContext } from 'react';
 export interface AppProps {
   user?: User;
   scope: string;
-  packages: any[];
 }
 
 export interface User {
diff --git a/src/App/AppContextProvider.tsx b/src/App/AppContextProvider.tsx
index 92805fe88..6422891ac 100644
--- a/src/App/AppContextProvider.tsx
+++ b/src/App/AppContextProvider.tsx
@@ -3,15 +3,13 @@ import React, { useState, useEffect } from 'react';
 import AppContext, { AppProps, User } from './AppContext';
 
 interface Props {
-  packages: any[];
   user?: User;
 }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+const AppContextProvider: React.FC<Props> = ({ children, user }) => {
   const [state, setState] = useState<AppProps>({
     scope: window.VERDACCIO_SCOPE || '',
-    packages,
     user,
   });
 
@@ -22,13 +20,6 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
     });
   }, [user]);
 
-  useEffect(() => {
-    setState({
-      ...state,
-      packages,
-    });
-  }, [packages]);
-
   const setUser = (user?: User) => {
     setState({
       ...state,
diff --git a/src/App/AppRoute.tsx b/src/App/AppRoute.tsx
index 4f64a1314..0fce9f059 100644
--- a/src/App/AppRoute.tsx
+++ b/src/App/AppRoute.tsx
@@ -30,7 +30,7 @@ const AppRoute: React.FC = () => {
     throw Error('The app Context was not correct used');
   }
 
-  const { user, packages } = appContext;
+  const { user } = appContext;
 
   const isUserLoggedIn = user && user.username;
 
@@ -39,7 +39,7 @@ const AppRoute: React.FC = () => {
       <Suspense fallback={<Loading />}>
         <Switch>
           <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
           </ReactRouterDomRoute>
           <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
             <VersionContextProvider>
diff --git a/src/App/__snapshots__/App.test.tsx.snap b/src/App/__snapshots__/App.test.tsx.snap
index d54ae2609..ae9c1ddd4 100644
--- a/src/App/__snapshots__/App.test.tsx.snap
+++ b/src/App/__snapshots__/App.test.tsx.snap
@@ -1,11 +1,158 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<App /> should display the Header component  1`] = `
-.emotion-10 {
+.emotion-78 {
   background-color: #fff;
 }
 
+.emotion-24 {
+  background-color: #4b5e40;
+  min-height: 60px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+@media (min-width:768px) {
+  .emotion-24 .emotion-13 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-24 .emotion-17 {
+    display: none;
+  }
+
+  .emotion-24 .e1jf5lit4 {
+    display: none;
+  }
+}
+
+@media (min-width:1024px) {
+  .emotion-24 .emotion-23 {
+    padding: 0 20px;
+  }
+
+@media (min-width:1275px) {
+    .emotion-24 .emotion-23 {
+      max-width: 1240px;
+      width: 100%;
+      margin: 0 auto;
+    }
+}
+}
+
+.emotion-22 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-2 {
+  margin-right: 1em;
+}
+
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+}
+
+.emotion-12 {
+  display: none;
+  max-width: 393px;
+  width: 100%;
+}
+
+.emotion-10 {
+  width: 100%;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.emotion-6 .MuiInputBase-root:before {
+  content: '';
+  border: none;
+}
+
+.emotion-6 .MuiInputBase-root:after {
+  border-color: #fff;
+}
+
+.emotion-6 .MuiInputBase-root:hover:before {
+  content: none;
+}
+
+.emotion-6 .MuiInputBase-input {
+  color: #fff;
+}
+
+.emotion-4 {
+  color: #fff;
+}
+
 .emotion-8 {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.emotion-20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+}
+
+.emotion-16 {
+  display: block;
+}
+
+.emotion-18 {
+  color: #fff;
+}
+
+@media screen and (min-width:1240px) {
+  .emotion-36 {
+    max-width: 1240px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-34 {
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
@@ -14,14 +161,14 @@ exports[`<App /> should display the Header component  1`] = `
   position: absolute;
 }
 
-.emotion-2 {
+.emotion-28 {
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
   background: #f7f8f6;
 }
 
-.emotion-0 {
+.emotion-26 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -33,7 +180,7 @@ exports[`<App /> should display the Header component  1`] = `
   height: 90px;
 }
 
-.emotion-6 {
+.emotion-32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -48,45 +195,504 @@ exports[`<App /> should display the Header component  1`] = `
   justify-content: center;
 }
 
-.emotion-4 {
+.emotion-30 {
   color: #4b5e40;
 }
 
+.emotion-76 {
+  background: #f9f9f9;
+  border-top: 1px solid #e3e3e3;
+  color: #999999;
+  font-size: 14px;
+  padding: 20px;
+}
+
+.emotion-74 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+@media (min-width:768px) {
+  .emotion-74 {
+    min-width: 400px;
+    max-width: 800px;
+    margin: auto;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width:1024px) {
+  .emotion-74 {
+    max-width: 1240px;
+  }
+}
+
+.emotion-65 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+}
+
+@media (min-width:768px) {
+  .emotion-65 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-38 {
+  color: #e25555;
+  padding: 0 5px;
+}
+
+.emotion-63 {
+  position: relative;
+  height: 18px;
+}
+
+.emotion-63:hover .emotion-62 {
+  visibility: visible;
+}
+
+.emotion-41 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: default;
+  width: 18px;
+  height: 18px;
+  padding: 0 10px;
+}
+
+.emotion-61 {
+  position: absolute;
+  background: #d3dddd;
+  padding: 1px 4px;
+  border-radius: 3px;
+  height: 20px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  visibility: hidden;
+  top: -2px;
+}
+
+.emotion-61:before {
+  content: '';
+  position: absolute;
+  top: 29%;
+  left: -4px;
+  margin-left: -5px;
+  border: 5px solid;
+  border-color: #d3dddd transparent transparent transparent;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.emotion-44 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: default;
+  width: 18px;
+  height: 18px;
+  padding: 0 5px;
+}
+
+.emotion-72 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@media (min-width:768px) {
+  .emotion-72 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-70 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  padding: 0 5px;
+}
+
+.emotion-67 {
+  width: 100%;
+  height: auto;
+}
+
 <div
-  class="MuiBox-root MuiBox-root-219 emotion-10 emotion-11"
+  class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
 >
+  <header
+    class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+    data-testid="header"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
+    >
+      <div
+        class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
+      >
+        <a
+          class="emotion-2 emotion-3"
+          href="/"
+        >
+          <div
+            class="emotion-0 emotion-1"
+          />
+        </a>
+        <div
+          class="emotion-12 emotion-13"
+        >
+          <div
+            class="emotion-10 emotion-11"
+          >
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="react-autowhatever-1"
+              class="react-autosuggest__container"
+              role="combobox"
+            >
+              <div
+                aria-autocomplete="list"
+                aria-controls="react-autowhatever-1"
+                class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
+              >
+                <div
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
+                >
+                  <div
+                    class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                      />
+                    </svg>
+                  </div>
+                  <input
+                    aria-invalid="false"
+                    autocomplete="off"
+                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
+                    placeholder="Search Packages"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
+                id="react-autowhatever-1"
+                role="listbox"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+        data-testid="header-right"
+      >
+        <button
+          class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <a
+          class="emotion-18 emotion-19"
+          data-testid="header--tooltip-documentation"
+          href="https://verdaccio.org/docs/en/installation"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-subtitle1"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </h6>
+        </a>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          data-testid="header--tooltip-info"
+          id="header--button-registryInfo"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+          data-testid="header--button-login"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Login
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+  </header>
   <div
-    class="emotion-8 emotion-9"
-    data-testid="loading"
+    class="MuiBox-root MuiBox-root-412 emotion-36 emotion-37"
   >
     <div
-      class="emotion-2 emotion-3"
+      class="container content"
     >
       <div
-        class="emotion-0 emotion-1"
-      />
+        class="emotion-34 emotion-35"
+        data-testid="loading"
+      >
+        <div
+          class="emotion-28 emotion-29"
+        >
+          <div
+            class="emotion-26 emotion-1"
+          />
+        </div>
+        <div
+          class="emotion-32 emotion-33"
+        >
+          <div
+            class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+            role="progressbar"
+            style="width: 50px; height: 50px;"
+          >
+            <svg
+              class="MuiCircularProgress-svg"
+              viewBox="22 22 44 44"
+            >
+              <circle
+                class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+                cx="44"
+                cy="44"
+                fill="none"
+                r="20.2"
+                stroke-width="3.6"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
+  <div
+    class="emotion-76 emotion-77"
+  >
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-74 emotion-75"
     >
       <div
-        class="MuiCircularProgress-root emotion-4 emotion-5 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
-        role="progressbar"
-        style="width: 50px; height: 50px;"
+        class="emotion-65 emotion-66"
+      >
+         Made with
+        <span
+          class="emotion-38 emotion-39"
+        >
+          ♥
+        </span>
+        on
+        <span
+          class="emotion-63 emotion-64"
+        >
+          <svg
+            class="emotion-40 emotion-41 emotion-42"
+          >
+            <title>
+              Earth
+            </title>
+            <use
+              xlink:href="[object Object]#earth"
+            />
+          </svg>
+          <span
+            class="emotion-61 emotion-62"
+          >
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Spain
+              </title>
+              <use
+                xlink:href="[object Object]#spain"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Nicaragua
+              </title>
+              <use
+                xlink:href="[object Object]#nicaragua"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                India
+              </title>
+              <use
+                xlink:href="[object Object]#india"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Brazil
+              </title>
+              <use
+                xlink:href="[object Object]#brazil"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                China
+              </title>
+              <use
+                xlink:href="[object Object]#china"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Austria
+              </title>
+              <use
+                xlink:href="[object Object]#austria"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="emotion-72 emotion-73"
       >
-        <svg
-          class="MuiCircularProgress-svg"
-          viewBox="22 22 44 44"
-        >
-          <circle
-            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
-            cx="44"
-            cy="44"
-            fill="none"
-            r="20.2"
-            stroke-width="3.6"
+        Powered by
+        <span
+          class="emotion-43 emotion-70 emotion-71"
+          title="Verdaccio"
+        >
+          <img
+            alt="Verdaccio"
+            class="emotion-67 emotion-68"
+            src="[object Object]"
           />
-        </svg>
+        </span>
+        / undefined
       </div>
     </div>
   </div>
@@ -94,11 +700,158 @@ exports[`<App /> should display the Header component  1`] = `
 `;
 
 exports[`<App /> should display the Loading component at the beginning  1`] = `
-.emotion-10 {
+.emotion-78 {
   background-color: #fff;
 }
 
+.emotion-24 {
+  background-color: #4b5e40;
+  min-height: 60px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+@media (min-width:768px) {
+  .emotion-24 .emotion-13 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+
+  .emotion-24 .emotion-17 {
+    display: none;
+  }
+
+  .emotion-24 .e1jf5lit4 {
+    display: none;
+  }
+}
+
+@media (min-width:1024px) {
+  .emotion-24 .emotion-23 {
+    padding: 0 20px;
+  }
+
+@media (min-width:1275px) {
+    .emotion-24 .emotion-23 {
+      max-width: 1240px;
+      width: 100%;
+      margin: 0 auto;
+    }
+}
+}
+
+.emotion-22 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 15px;
+}
+
+.emotion-14 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-2 {
+  margin-right: 1em;
+}
+
+.emotion-0 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+}
+
+.emotion-12 {
+  display: none;
+  max-width: 393px;
+  width: 100%;
+}
+
+.emotion-10 {
+  width: 100%;
+  height: 32px;
+  position: relative;
+  z-index: 1;
+}
+
+.emotion-6 .MuiInputBase-root:before {
+  content: '';
+  border: none;
+}
+
+.emotion-6 .MuiInputBase-root:after {
+  border-color: #fff;
+}
+
+.emotion-6 .MuiInputBase-root:hover:before {
+  content: none;
+}
+
+.emotion-6 .MuiInputBase-input {
+  color: #fff;
+}
+
+.emotion-4 {
+  color: #fff;
+}
+
 .emotion-8 {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.emotion-20 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+}
+
+.emotion-16 {
+  display: block;
+}
+
+.emotion-18 {
+  color: #fff;
+}
+
+@media screen and (min-width:1240px) {
+  .emotion-36 {
+    max-width: 1240px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.emotion-34 {
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
@@ -107,14 +860,14 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   position: absolute;
 }
 
-.emotion-2 {
+.emotion-28 {
   margin: 0 0 30px 0;
   border-radius: 25px;
   box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
   background: #f7f8f6;
 }
 
-.emotion-0 {
+.emotion-26 {
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
@@ -126,7 +879,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   height: 90px;
 }
 
-.emotion-6 {
+.emotion-32 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -141,45 +894,500 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
   justify-content: center;
 }
 
-.emotion-4 {
+.emotion-30 {
   color: #4b5e40;
 }
 
+.emotion-76 {
+  background: #f9f9f9;
+  border-top: 1px solid #e3e3e3;
+  color: #999999;
+  font-size: 14px;
+  padding: 20px;
+}
+
+.emotion-74 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+@media (min-width:768px) {
+  .emotion-74 {
+    min-width: 400px;
+    max-width: 800px;
+    margin: auto;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+}
+
+@media (min-width:1024px) {
+  .emotion-74 {
+    max-width: 1240px;
+  }
+}
+
+.emotion-65 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+}
+
+@media (min-width:768px) {
+  .emotion-65 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-38 {
+  color: #e25555;
+  padding: 0 5px;
+}
+
+.emotion-63 {
+  position: relative;
+  height: 18px;
+}
+
+.emotion-63:hover .emotion-62 {
+  visibility: visible;
+}
+
+.emotion-41 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: default;
+  width: 18px;
+  height: 18px;
+  padding: 0 10px;
+}
+
+.emotion-61 {
+  position: absolute;
+  background: #d3dddd;
+  padding: 1px 4px;
+  border-radius: 3px;
+  height: 20px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  visibility: hidden;
+  top: -2px;
+}
+
+.emotion-61:before {
+  content: '';
+  position: absolute;
+  top: 29%;
+  left: -4px;
+  margin-left: -5px;
+  border: 5px solid;
+  border-color: #d3dddd transparent transparent transparent;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.emotion-44 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: default;
+  width: 18px;
+  height: 18px;
+  padding: 0 5px;
+}
+
+.emotion-72 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@media (min-width:768px) {
+  .emotion-72 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+}
+
+.emotion-70 {
+  box-sizing: initial;
+  display: inline-block;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  padding: 0 5px;
+}
+
+.emotion-67 {
+  width: 100%;
+  height: auto;
+}
+
 <div
-  class="MuiBox-root MuiBox-root-2 emotion-10 emotion-11"
+  class="MuiBox-root MuiBox-root-2 emotion-78 emotion-79"
 >
+  <header
+    class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
+    data-testid="header"
+  >
+    <div
+      class="MuiToolbar-root MuiToolbar-regular emotion-22 emotion-23 MuiToolbar-gutters"
+    >
+      <div
+        class="MuiToolbar-root MuiToolbar-regular emotion-14 emotion-15 MuiToolbar-gutters"
+      >
+        <a
+          class="emotion-2 emotion-3"
+          href="/"
+        >
+          <div
+            class="emotion-0 emotion-1"
+          />
+        </a>
+        <div
+          class="emotion-12 emotion-13"
+        >
+          <div
+            class="emotion-10 emotion-11"
+          >
+            <div
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="react-autowhatever-1"
+              class="react-autosuggest__container"
+              role="combobox"
+            >
+              <div
+                aria-autocomplete="list"
+                aria-controls="react-autowhatever-1"
+                class="MuiFormControl-root MuiTextField-root react-autosuggest__input emotion-6 emotion-7 MuiFormControl-fullWidth"
+              >
+                <div
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
+                >
+                  <div
+                    class="MuiInputAdornment-root emotion-4 emotion-5 MuiInputAdornment-positionStart"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                      />
+                    </svg>
+                  </div>
+                  <input
+                    aria-invalid="false"
+                    autocomplete="off"
+                    class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedStart"
+                    placeholder="Search Packages"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container emotion-8 emotion-9"
+                id="react-autowhatever-1"
+                role="listbox"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="MuiToolbar-root MuiToolbar-regular emotion-20 emotion-21 MuiToolbar-gutters"
+        data-testid="header-right"
+      >
+        <button
+          class="MuiButtonBase-root MuiIconButton-root emotion-16 emotion-17 MuiIconButton-colorInherit"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <a
+          class="emotion-18 emotion-19"
+          data-testid="header--tooltip-documentation"
+          href="https://verdaccio.org/docs/en/installation"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-subtitle1"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </h6>
+        </a>
+        <button
+          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          data-testid="header--tooltip-info"
+          id="header--button-registryInfo"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <button
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
+          data-testid="header--button-login"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiButton-label"
+          >
+            Login
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+      </div>
+    </div>
+  </header>
   <div
-    class="emotion-8 emotion-9"
-    data-testid="loading"
+    class="MuiBox-root MuiBox-root-195 emotion-36 emotion-37"
   >
     <div
-      class="emotion-2 emotion-3"
+      class="emotion-34 emotion-35"
+      data-testid="loading"
     >
       <div
-        class="emotion-0 emotion-1"
-      />
+        class="emotion-28 emotion-29"
+      >
+        <div
+          class="emotion-26 emotion-1"
+        />
+      </div>
+      <div
+        class="emotion-32 emotion-33"
+      >
+        <div
+          class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+          role="progressbar"
+          style="width: 50px; height: 50px;"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+            />
+          </svg>
+        </div>
+      </div>
     </div>
+  </div>
+  <div
+    class="emotion-76 emotion-77"
+  >
     <div
-      class="emotion-6 emotion-7"
+      class="emotion-74 emotion-75"
     >
       <div
-        class="MuiCircularProgress-root emotion-4 emotion-5 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
-        role="progressbar"
-        style="width: 50px; height: 50px;"
+        class="emotion-65 emotion-66"
+      >
+         Made with
+        <span
+          class="emotion-38 emotion-39"
+        >
+          ♥
+        </span>
+        on
+        <span
+          class="emotion-63 emotion-64"
+        >
+          <svg
+            class="emotion-40 emotion-41 emotion-42"
+          >
+            <title>
+              Earth
+            </title>
+            <use
+              xlink:href="[object Object]#earth"
+            />
+          </svg>
+          <span
+            class="emotion-61 emotion-62"
+          >
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Spain
+              </title>
+              <use
+                xlink:href="[object Object]#spain"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Nicaragua
+              </title>
+              <use
+                xlink:href="[object Object]#nicaragua"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                India
+              </title>
+              <use
+                xlink:href="[object Object]#india"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Brazil
+              </title>
+              <use
+                xlink:href="[object Object]#brazil"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                China
+              </title>
+              <use
+                xlink:href="[object Object]#china"
+              />
+            </svg>
+            <svg
+              class="emotion-43 emotion-44 emotion-42"
+            >
+              <title>
+                Austria
+              </title>
+              <use
+                xlink:href="[object Object]#austria"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="emotion-72 emotion-73"
       >
-        <svg
-          class="MuiCircularProgress-svg"
-          viewBox="22 22 44 44"
-        >
-          <circle
-            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
-            cx="44"
-            cy="44"
-            fill="none"
-            r="20.2"
-            stroke-width="3.6"
+        Powered by
+        <span
+          class="emotion-43 emotion-70 emotion-71"
+          title="Verdaccio"
+        >
+          <img
+            alt="Verdaccio"
+            class="emotion-67 emotion-68"
+            src="[object Object]"
           />
-        </svg>
+        </span>
+        / undefined
       </div>
     </div>
   </div>
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
index fdfef85eb..aeed01f34 100644
--- a/src/components/Header/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -18,7 +18,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged out state', () => {
     const { container, queryByTestId, getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -32,7 +32,7 @@ describe('<Header /> component with logged in state', () => {
   test('should load the component in logged in state', () => {
     const { container, getByTestId, queryByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -46,7 +46,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open login dialog', async () => {
     const { getByText } = render(
       <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
           <Header />
         </AppContextProvider>
       </Router>
@@ -61,7 +61,7 @@ describe('<Header /> component with logged in state', () => {
   test('should logout the user', async () => {
     const { getByText, getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -79,7 +79,7 @@ describe('<Header /> component with logged in state', () => {
   test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -92,7 +92,7 @@ describe('<Header /> component with logged in state', () => {
   test('should open the registrationInfo modal when clicking on the info icon', async () => {
     const { getByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
@@ -109,7 +109,7 @@ describe('<Header /> component with logged in state', () => {
   test('should close the registrationInfo modal when clicking on the button close', async () => {
     const { getByTestId, getByText, queryByTestId } = render(
       <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
           <Header />
         </AppContextProvider>
       </Router>
diff --git a/src/components/LoginDialog/LoginDialog.test.tsx b/src/components/LoginDialog/LoginDialog.test.tsx
index ab104ba08..15c3830b7 100644
--- a/src/components/LoginDialog/LoginDialog.test.tsx
+++ b/src/components/LoginDialog/LoginDialog.test.tsx
@@ -8,7 +8,6 @@ import LoginDialog from './LoginDialog';
 
 const appContextValue: AppContextProps = {
   scope: '',
-  packages: [],
   setUser: jest.fn(),
 };
 
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 6f2c72ba5..6406e0ec7 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,17 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { PackageList } from '../../components/PackageList';
-import { PackageInterface } from '../../components/Package/Package';
+import API from '../../utils/api';
+import Loading from '../../components/Loading';
 
 interface Props {
   isUserLoggedIn: boolean;
-  packages: PackageInterface[];
 }
 
-const Home: React.FC<Props> = ({ packages }) => (
-  <div className="container content">
-    <PackageList packages={packages} />
-  </div>
-);
+const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
+  const [packages, setPackages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const loadPackages = async () => {
+    try {
+      const packages = await API.request('packages', 'GET');
+      // FIXME add correct type for package
+      setPackages(packages as never[]);
+    } catch (error) {
+      // FIXME: add dialog
+      console.error({
+        title: 'Warning',
+        message: `Unable to load package list: ${error.message}`,
+      });
+    }
+    setIsLoading(false);
+  };
+  useEffect(() => {
+    loadPackages().then();
+  }, [isUserLoggedIn]);
+
+  return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
+};
 
 export default Home;