diff --git a/src/Router.js b/src/Router.js
deleted file mode 100644
index 017ca913f..000000000
--- a/src/Router.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { lazy, Suspense } from 'react';
-
-import { useFlag } from '@unleash/proxy-client-react';
-import { Route, Routes } from 'react-router-dom';
-
-import EdgeImageDetail from './Components/edge/ImageDetails';
-import ShareImageModal from './Components/ShareImageModal/ShareImageModal';
-import { manageEdgeImagesUrlName } from './Utilities/edge';
-
-const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage'));
-const CreateImageWizard = lazy(() =>
-  import('./Components/CreateImageWizard/CreateImageWizard')
-);
-
-export const Router = () => {
-  const edgeParityFlag = useFlag('edgeParity.image-list');
-  return (
-    <Routes>
-      <Route
-        path="*"
-        element={
-          <Suspense>
-            <LandingPage />
-          </Suspense>
-        }
-      >
-        <Route path="share/:composeId" element={<ShareImageModal />} />
-      </Route>
-
-      <Route
-        path="imagewizard/:composeId?"
-        element={
-          <Suspense>
-            <CreateImageWizard />
-          </Suspense>
-        }
-      />
-      {edgeParityFlag && (
-        <Route
-          path={`/${manageEdgeImagesUrlName}/:imageId`}
-          element={<EdgeImageDetail />}
-        >
-          <Route path="*" element={<EdgeImageDetail />} />
-          <Route
-            path={`versions/:imageVersionId/*`}
-            element={<EdgeImageDetail />}
-          />
-        </Route>
-      )}
-    </Routes>
-  );
-};
diff --git a/src/Router.tsx b/src/Router.tsx
new file mode 100644
index 000000000..0bf00a227
--- /dev/null
+++ b/src/Router.tsx
@@ -0,0 +1,119 @@
+import React, { Suspense, lazy } from 'react';
+
+import { Bullseye, Button, Spinner } from '@patternfly/react-core';
+import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent';
+import ErrorState from '@redhat-cloud-services/frontend-components/ErrorState';
+import { useFlag } from '@unleash/proxy-client-react';
+import { Route, Routes } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+
+import EdgeImageDetail from './Components/edge/ImageDetails';
+import ShareImageModal from './Components/ShareImageModal/ShareImageModal';
+import { useGetComposesQuery } from './store/imageBuilderApi';
+import { manageEdgeImagesUrlName } from './Utilities/edge';
+import { resolveRelPath } from './Utilities/path';
+
+const LandingPage = lazy(() => import('./Components/LandingPage/LandingPage'));
+const CreateImageWizard = lazy(
+  () => import('./Components/CreateImageWizard/CreateImageWizard')
+);
+
+/**
+ * Help page for newcomers creating their first image if they've never did it.
+ * The user gets the possibility to click on a `create image` button that will
+ * open the wizard for them.
+ *
+ */
+const AppZeroState = () => {
+  const navigate = useNavigate();
+
+  return (
+    <AsyncComponent
+      appName="dashboard"
+      module="./AppZeroState"
+      scope="dashboard"
+      ErrorComponent={<ErrorState />}
+      app="Images"
+      appId="images_zero_state"
+      customText="Create your image by using the Image Builder wizard."
+      customButton={
+        <>
+          <Button
+            className="pf-c-button pf-m-primary pf-u-p-md pf-u-font-size-md"
+            data-testid="create-image-action"
+            onClick={() => navigate(resolveRelPath('imagewizard'))}
+          >
+            Create image
+          </Button>
+        </>
+      }
+    />
+  );
+};
+
+const ZERO_IMAGES = 0;
+
+/**
+ * Choses the proper entry point for the user (between the LandingPage and the
+ * AppZeroState components) depending on the condition that makes that user a
+ * newcomer or not.
+ */
+const AppEntryPoint = () => {
+  const { data, isSuccess } = useGetComposesQuery({
+    limit: 100,
+  });
+  // Get a spinner while the app is waiting for valid data to take a decision on
+  // which component to render.
+  if (!isSuccess) {
+    return (
+      <Bullseye>
+        <Spinner size="xl" />
+      </Bullseye>
+    );
+  }
+  const composes = data.data;
+  if (composes.length > ZERO_IMAGES) {
+    return <LandingPage />;
+  }
+  return <AppZeroState />;
+};
+
+export const Router = () => {
+  const edgeParityFlag = useFlag('edgeParity.image-list');
+  return (
+    <Routes>
+      <Route
+        path="*"
+        element={
+          <Suspense>
+            <AppEntryPoint />
+          </Suspense>
+        }
+      >
+        <Route path="share/:composeId" element={<ShareImageModal />} />
+      </Route>
+
+      <Route
+        path="imagewizard/:composeId?"
+        element={
+          <Suspense>
+            <CreateImageWizard />
+          </Suspense>
+        }
+      />
+
+      {edgeParityFlag && (
+        <Route
+          path={`/${manageEdgeImagesUrlName}/:imageId`}
+          element={<EdgeImageDetail />}
+        >
+          <Route path="*" element={<EdgeImageDetail />} />
+          <Route
+            path={`versions/:imageVersionId/*`}
+            element={<EdgeImageDetail />}
+          />
+        </Route>
+      )}
+    </Routes>
+  );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 8b5eee31f..6e5210ba8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "es2020",
     "target": "es5",
     "jsx": "react-jsx",
     "allowJs": true,