diff --git a/packages/frontend/src/lib/NavPage.spec.ts b/packages/frontend/src/lib/NavPage.spec.ts
new file mode 100644
index 000000000..fde5d0da0
--- /dev/null
+++ b/packages/frontend/src/lib/NavPage.spec.ts
@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import NavPage from '/@/lib/NavPage.svelte';
+
+test('NavPage should have linear progress', async () => {
+  // render the component
+  render(NavPage, { loading: true, title: 'dummy' });
+
+  const content = await screen.findByLabelText('content');
+  expect(content).toBeDefined();
+  expect(content.firstChild?.nodeName).toBe('PROGRESS');
+});
+
+test('NavPage should not have linear progress', async () => {
+  // render the component
+  render(NavPage, { title: 'dummy' });
+
+  const content = await screen.findByLabelText('content');
+  expect(content).toBeDefined();
+  expect(content.firstChild).toBeNull(); // no slot content provided
+});
diff --git a/packages/frontend/src/lib/NavPage.svelte b/packages/frontend/src/lib/NavPage.svelte
index a799f104b..04a7a03dd 100644
--- a/packages/frontend/src/lib/NavPage.svelte
+++ b/packages/frontend/src/lib/NavPage.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
+import LinearProgress from '/@/lib/progress/LinearProgress.svelte';
 
 export let title: string;
 export let searchTerm = '';
 export let searchEnabled = true;
+export let loading = false;
 export let icon: IconDefinition | undefined = undefined;
 </script>
 
@@ -57,7 +59,11 @@ export let icon: IconDefinition | undefined = undefined;
       <slot name="tabs" />
     </div>
     <div class="flex w-full h-full overflow-auto" role="region" aria-label="content">
-      <slot name="content" />
+      {#if loading}
+        <LinearProgress/>
+      {:else}
+        <slot name="content" />
+      {/if}
     </div>
   </div>
 </div>
diff --git a/packages/frontend/src/pages/ModelColumnHW.svelte b/packages/frontend/src/lib/table/model/ModelColumnHW.svelte
similarity index 100%
rename from packages/frontend/src/pages/ModelColumnHW.svelte
rename to packages/frontend/src/lib/table/model/ModelColumnHW.svelte
diff --git a/packages/frontend/src/pages/ModelColumnLicense.svelte b/packages/frontend/src/lib/table/model/ModelColumnLicense.svelte
similarity index 100%
rename from packages/frontend/src/pages/ModelColumnLicense.svelte
rename to packages/frontend/src/lib/table/model/ModelColumnLicense.svelte
diff --git a/packages/frontend/src/pages/ModelColumnName.svelte b/packages/frontend/src/lib/table/model/ModelColumnName.svelte
similarity index 100%
rename from packages/frontend/src/pages/ModelColumnName.svelte
rename to packages/frontend/src/lib/table/model/ModelColumnName.svelte
diff --git a/packages/frontend/src/pages/ModelColumnPopularity.svelte b/packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte
similarity index 100%
rename from packages/frontend/src/pages/ModelColumnPopularity.svelte
rename to packages/frontend/src/lib/table/model/ModelColumnPopularity.svelte
diff --git a/packages/frontend/src/pages/ModelColumnRegistry.svelte b/packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte
similarity index 100%
rename from packages/frontend/src/pages/ModelColumnRegistry.svelte
rename to packages/frontend/src/lib/table/model/ModelColumnRegistry.svelte
diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
index 453a28890..008cdc825 100644
--- a/packages/frontend/src/pages/Model.svelte
+++ b/packages/frontend/src/pages/Model.svelte
@@ -16,7 +16,7 @@ onMount(async () => {
 })
 </script>
 
-<NavPage title="{model?.name || ''}" searchEnabled="{false}">
+<NavPage title="{model?.name || ''}" searchEnabled="{false}" loading="{model === undefined}">
   <svelte:fragment slot="tabs">
     <Tab title="Summary" url="{modelId}" />
     <Tab title="Playground" url="{modelId}/playground" />
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index 613747562..63a69b44d 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -4,11 +4,11 @@ import NavPage from '../lib/NavPage.svelte';
 import Table from '../lib/table/Table.svelte';
 import { Column, Row } from '../lib/table/table';
 import { localModels } from '../stores/local-models';
-import ModelColumnName from './ModelColumnName.svelte';
-import ModelColumnRegistry from './ModelColumnRegistry.svelte';
-import ModelColumnPopularity from './ModelColumnPopularity.svelte';
-import ModelColumnLicense from './ModelColumnLicense.svelte';
-import ModelColumnHw from './ModelColumnHW.svelte';
+import ModelColumnName from '../lib/table/model/ModelColumnName.svelte';
+import ModelColumnRegistry from '../lib/table/model/ModelColumnRegistry.svelte';
+import ModelColumnPopularity from '../lib/table/model/ModelColumnPopularity.svelte';
+import ModelColumnLicense from '../lib/table/model/ModelColumnLicense.svelte';
+import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
 import { onDestroy, onMount } from 'svelte';
 import { studioClient } from '/@/utils/client';
 import type { Category } from '@shared/models/ICategory';
@@ -73,12 +73,9 @@ onDestroy(() => {
 
 </script>
 
-<NavPage title="Models on disk" searchEnabled="{false}">
+<NavPage title="Models on disk" searchEnabled="{false}" loading="{loading}">
   <div slot="content" class="flex flex-col min-w-full min-h-full">
     <div class="min-w-full min-h-full flex-1">
-      {#if loading}
-        <LinearProgress/>
-      {/if}
       <div class="mt-4 px-5 space-y-5 h-full">
         {#if !loading}
           {#if tasks.length > 0}
diff --git a/packages/frontend/src/pages/RecipeModels.svelte b/packages/frontend/src/pages/RecipeModels.svelte
index a4def8571..effd0e591 100644
--- a/packages/frontend/src/pages/RecipeModels.svelte
+++ b/packages/frontend/src/pages/RecipeModels.svelte
@@ -2,11 +2,11 @@
   import type { ModelInfo } from '@shared/src/models/IModelInfo';
   import Table from '../lib/table/Table.svelte';
   import { Column, Row } from '../lib/table/table';
-  import ModelColumnName from './ModelColumnName.svelte';
-  import ModelColumnRegistry from './ModelColumnRegistry.svelte';
-  import ModelColumnPopularity from './ModelColumnPopularity.svelte';
-  import ModelColumnLicense from './ModelColumnLicense.svelte';
-  import ModelColumnHw from './ModelColumnHW.svelte';
+  import ModelColumnName from '../lib/table/model/ModelColumnName.svelte';
+  import ModelColumnRegistry from '../lib/table/model/ModelColumnRegistry.svelte';
+  import ModelColumnPopularity from '../lib/table/model/ModelColumnPopularity.svelte';
+  import ModelColumnLicense from '../lib/table/model/ModelColumnLicense.svelte';
+  import ModelColumnHw from '../lib/table/model/ModelColumnHW.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
 
@@ -16,7 +16,7 @@
   onMount(async () => {
     if (modelsIds && modelsIds.length > 0) {
       models = await studioClient.getModelsByIds(modelsIds);
-    }    
+    }
   })
 
   const columns: Column<ModelInfo>[] = [