diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 88bdd377c4..54a805c027 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@@ -90,7 +90,7 @@ export default React.memo(styled(BaseOverlay)(({ theme }: ThemeProps) => `
     display: flex;
     margin: 0 auto;
     max-width: 50rem;
-    padding: 1em;
+    padding: 1em 3rem 1em;
     position: relative;
 
     .contentIcon {
diff --git a/packages/apps/src/overlays/Connecting.tsx b/packages/apps/src/overlays/Connecting.tsx
index 2c258b25bb..6064a14930 100644
--- a/packages/apps/src/overlays/Connecting.tsx
+++ b/packages/apps/src/overlays/Connecting.tsx
@@ -19,9 +19,19 @@ interface Props {
 
 function Connecting ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const { isApiConnected, isWaitingInjected } = useApi();
+  const { isApiConnected, isApiReady, isWaitingInjected } = useApi();
 
-  if (isWaitingInjected) {
+  if (!isApiReady) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='puzzle-piece'
+        type='info'
+      >
+        <div>{t<string>('Waiting to make a connection to the remote endpoint and finishing API initialization.')}</div>
+      </BaseOverlay>
+    );
+  } else if (isWaitingInjected) {
     return (
       <BaseOverlay
         className={className}