diff --git a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.spec.ts b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.spec.ts
index fb8c7e9d837ce..e42d258d10055 100644
--- a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.spec.ts
+++ b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.spec.ts
@@ -20,7 +20,7 @@
 
 import '@testing-library/jest-dom';
 import { test, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/svelte';
 import PreferencesExtensionRendering from './PreferencesExtensionRendering.svelte';
 import { extensionInfos } from '../../stores/extensions';
 
@@ -113,4 +113,27 @@ describe('PreferencesExtensionRendering', () => {
     expect(remove).toBeInTheDocument();
     expect(remove).toBeDisabled();
   });
+
+  test('Expect empty screen if there is no matching extension (could be during providerInfos is loading)', async () => {
+    // clear store
+    extensionInfos.set([]);
+
+    // start without extension in the stores, should be empty
+    render(PreferencesExtensionRendering, { extensionId: 'test' });
+
+    // check empty page is displayed if we do not have matching of the extension
+    const emptyHeading = screen.getByRole('heading', { name: 'Extension not found', level: 1 });
+    expect(emptyHeading).toBeInTheDocument();
+
+    // now register the extension in the store
+    setup('started');
+
+    // wait empty page disappear
+    await waitForElementToBeRemoved(() => screen.queryByRole('heading', { name: 'Extension not found', level: 1 }));
+
+    // now check disable button is displayed as extension is started
+    const start = screen.getByRole('button', { name: 'Disable' });
+    expect(start).toBeInTheDocument();
+    expect(start).toBeEnabled();
+  });
 });
diff --git a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
index eecd30da66f6c..a8f3526ca4bc9 100644
--- a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
@@ -5,12 +5,14 @@ import type { ExtensionInfo } from '../../../../main/src/plugin/api/extension-in
 import SettingsPage from './SettingsPage.svelte';
 import ExtensionStatus from '../ui/ExtensionStatus.svelte';
 import Button from '../ui/Button.svelte';
-import { faPlay, faStop, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faPlay, faPuzzlePiece, faStop, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { router } from 'tinro';
+import EmptyScreen from '../ui/EmptyScreen.svelte';
 
 export let extensionId: string = undefined;
 
 let extensionInfo: ExtensionInfo;
+
 $: extensionInfo = $extensionInfos.find(extension => extension.id === extensionId);
 $: hideOnboardingButton = true;
 $: hasOnboarding(extensionId).then(value => (hideOnboardingButton = value));
@@ -32,72 +34,76 @@ async function hasOnboarding(extensionId: string): Promise<boolean> {
 }
 </script>
 
-<SettingsPage title="{extensionInfo.displayName} Extension">
-  <span slot="subtitle">
-    {extensionInfo.description}
-  </span>
-  <div class="flex flex-col bg-charcoal-600 rounded-md p-3">
-    {#if extensionInfo}
-      <Route path="/*" breadcrumb="{extensionInfo.displayName}">
-        <!-- Manage lifecycle-->
-        <div class="flex pb-2">
-          <div class="pr-2">Status</div>
-          <ExtensionStatus status="{extensionInfo.state}" />
-        </div>
-
-        <div class="py-2 flex flex-row items-center">
-          <!-- start is enabled only when stopped or failed -->
-          <div class="px-2 text-sm italic text-gray-700">
-            <Button
-              disabled="{extensionInfo.state !== 'stopped' && extensionInfo.state !== 'failed'}"
-              on:click="{() => startExtension()}"
-              icon="{faPlay}">
-              Enable
-            </Button>
-          </div>
-
-          <!-- stop is enabled only when started -->
-          <div class="px-2 text-sm italic text-gray-700">
-            <Button disabled="{extensionInfo.state !== 'started'}" on:click="{() => stopExtension()}" icon="{faStop}">
-              Disable
-            </Button>
+{#if !extensionInfo}
+  <EmptyScreen title="Extension not found" icon="{faPuzzlePiece}" message="No extension found with id {extensionId}" />
+{:else}
+  <SettingsPage title="{extensionInfo.displayName} Extension">
+    <span slot="subtitle">
+      {extensionInfo.description}
+    </span>
+    <div class="flex flex-col bg-charcoal-600 rounded-md p-3">
+      {#if extensionInfo}
+        <Route path="/*" breadcrumb="{extensionInfo.displayName}">
+          <!-- Manage lifecycle-->
+          <div class="flex pb-2">
+            <div class="pr-2">Status</div>
+            <ExtensionStatus status="{extensionInfo.state}" />
           </div>
 
-          <!-- delete is enabled only when stopped or failed -->
-          {#if extensionInfo.removable}
+          <div class="py-2 flex flex-row items-center">
+            <!-- start is enabled only when stopped or failed -->
             <div class="px-2 text-sm italic text-gray-700">
               <Button
                 disabled="{extensionInfo.state !== 'stopped' && extensionInfo.state !== 'failed'}"
-                on:click="{() => removeExtension()}"
-                icon="{faTrash}">
-                Remove
+                on:click="{() => startExtension()}"
+                icon="{faPlay}">
+                Enable
               </Button>
             </div>
-          {:else}
-            <div class="text-gray-900 items-center px-2 text-sm">Default extension, cannot be removed</div>
-          {/if}
-        </div>
 
-        <div class="px-2 text-sm italic text-gray-700" class:hidden="{hideOnboardingButton}">
-          <button
-            on:click="{() => router.goto(`/preferences/onboarding/${extensionInfo.id}`)}"
-            class="pf-c-button pf-m-primary"
-            type="button">
-            <span class="pf-c-button__icon pf-m-start">
-              <i class="fas fa-play" aria-hidden="true"></i>
-            </span>
-            Onboarding
-          </button>
-        </div>
-        {#if extensionInfo.error}
-          <div class="flex flex-col">
-            <div class="py-2">Extension error: {extensionInfo.error.message}</div>
-            {#if extensionInfo.error.stack}
-              <div class="py-2">Stack trace</div>
-              <div class="py-2">{extensionInfo.error.stack}</div>
+            <!-- stop is enabled only when started -->
+            <div class="px-2 text-sm italic text-gray-700">
+              <Button disabled="{extensionInfo.state !== 'started'}" on:click="{() => stopExtension()}" icon="{faStop}">
+                Disable
+              </Button>
+            </div>
+
+            <!-- delete is enabled only when stopped or failed -->
+            {#if extensionInfo.removable}
+              <div class="px-2 text-sm italic text-gray-700">
+                <Button
+                  disabled="{extensionInfo.state !== 'stopped' && extensionInfo.state !== 'failed'}"
+                  on:click="{() => removeExtension()}"
+                  icon="{faTrash}">
+                  Remove
+                </Button>
+              </div>
+            {:else}
+              <div class="text-gray-900 items-center px-2 text-sm">Default extension, cannot be removed</div>
             {/if}
           </div>
-        {/if}
-      </Route>
-    {/if}
-  </div></SettingsPage>
+
+          <div class="px-2 text-sm italic text-gray-700" class:hidden="{hideOnboardingButton}">
+            <button
+              on:click="{() => router.goto(`/preferences/onboarding/${extensionInfo.id}`)}"
+              class="pf-c-button pf-m-primary"
+              type="button">
+              <span class="pf-c-button__icon pf-m-start">
+                <i class="fas fa-play" aria-hidden="true"></i>
+              </span>
+              Onboarding
+            </button>
+          </div>
+          {#if extensionInfo.error}
+            <div class="flex flex-col">
+              <div class="py-2">Extension error: {extensionInfo.error.message}</div>
+              {#if extensionInfo.error.stack}
+                <div class="py-2">Stack trace</div>
+                <div class="py-2">{extensionInfo.error.stack}</div>
+              {/if}
+            </div>
+          {/if}
+        </Route>
+      {/if}
+    </div></SettingsPage>
+{/if}