diff --git a/packages/backend/src/studio-api-impl.spec.ts b/packages/backend/src/studio-api-impl.spec.ts
index 105fed58f..523b5ddcb 100644
--- a/packages/backend/src/studio-api-impl.spec.ts
+++ b/packages/backend/src/studio-api-impl.spec.ts
@@ -25,7 +25,7 @@ import type { ApplicationManager } from './managers/applicationManager';
 import type { RecipeStatusRegistry } from './registries/RecipeStatusRegistry';
 import { StudioApiImpl } from './studio-api-impl';
 import type { PlayGroundManager } from './managers/playground';
-import type { Webview } from '@podman-desktop/api';
+import type { TelemetryLogger, Webview } from '@podman-desktop/api';
 import { CatalogManager } from './managers/catalogManager';
 import type { ModelsManager } from './managers/modelsManager';
 
@@ -77,6 +77,7 @@ beforeEach(async () => {
     {} as unknown as PlayGroundManager,
     catalogManager,
     {} as unknown as ModelsManager,
+    {} as TelemetryLogger,
   );
   vi.resetAllMocks();
   vi.mock('node:fs');
diff --git a/packages/backend/src/studio.spec.ts b/packages/backend/src/studio.spec.ts
index f15bec5d8..f5cf8faec 100644
--- a/packages/backend/src/studio.spec.ts
+++ b/packages/backend/src/studio.spec.ts
@@ -44,6 +44,12 @@ vi.mock('@podman-desktop/api', async () => {
           onDidReceiveMessage: vi.fn(),
           postMessage: vi.fn(),
         },
+        onDidChangeViewState: vi.fn(),
+      }),
+    },
+    env: {
+      createTelemetryLogger: () => ({
+        logUsage: vi.fn(),
       }),
     },
   };
diff --git a/packages/frontend/src/pages/Recipe.spec.ts b/packages/frontend/src/pages/Recipe.spec.ts
index fdbf2cd3d..0313c0538 100644
--- a/packages/frontend/src/pages/Recipe.spec.ts
+++ b/packages/frontend/src/pages/Recipe.spec.ts
@@ -1,4 +1,4 @@
-import { vi, test, expect } from 'vitest';
+import { vi, test, expect, beforeEach } from 'vitest';
 import { screen, render } from '@testing-library/svelte';
 import catalog from '../../../backend/src/ai-user-test.json';
 import Recipe from './Recipe.svelte';
@@ -7,6 +7,7 @@ const mocks = vi.hoisted(() => {
   return {
     getCatalogMock: vi.fn(),
     getPullingStatusesMock: vi.fn(),
+    telemetryLogUsageMock: vi.fn(),
   };
 });
 
@@ -15,6 +16,7 @@ vi.mock('../utils/client', async () => {
     studioClient: {
       getCatalog: mocks.getCatalogMock,
       getPullingStatuses: mocks.getPullingStatusesMock,
+      telemetryLogUsage: mocks.telemetryLogUsageMock,
     },
     rpcBrowser: {
       subscribe: () => {
@@ -26,6 +28,10 @@ vi.mock('../utils/client', async () => {
   };
 });
 
+beforeEach(() => {
+  vi.resetAllMocks();
+});
+
 test('should display recipe information', async () => {
   const recipe = catalog.recipes.find(r => r.id === 'recipe 1');
   expect(recipe).not.toBeUndefined();
@@ -40,3 +46,20 @@ test('should display recipe information', async () => {
   screen.getByText(recipe!.name);
   screen.getByText(recipe!.readme);
 });
+
+test('should send telemetry data', async () => {
+  const recipe = catalog.recipes.find(r => r.id === 'recipe 1');
+  expect(recipe).not.toBeUndefined();
+
+  mocks.getCatalogMock.mockResolvedValue(catalog);
+  mocks.getPullingStatusesMock.mockResolvedValue(new Map());
+  render(Recipe, {
+    recipeId: 'recipe 1',
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  expect(mocks.telemetryLogUsageMock).toHaveBeenNthCalledWith(1, 'recipe.open', {
+    'recipe.id': 'recipe 1',
+    'recipe.name': 'Recipe 1',
+  });
+});
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index b779898bb..c7db55025 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -15,7 +15,6 @@ import { getIcon } from '/@/utils/categoriesUtils';
 import RecipeModels from './RecipeModels.svelte';
 import { catalog } from '/@/stores/catalog';
 import { recipes } from '/@/stores/recipe';
-import type { Recipe } from '@shared/src/models/IRecipe';
 
 export let recipeId: string;
 
@@ -28,7 +27,7 @@ $: recipeStatus = $recipes.get(recipeId);
 let recipeTelemetry: string | undefined = undefined;
 $: if (recipe && recipe.id !== recipeTelemetry) { 
   recipeTelemetry = recipe.id;
-  studioClient.telemetryLogUsage('recipy.open', { 'recipe.id': recipe.id, 'recipe.name': recipe.name }); 
+  studioClient.telemetryLogUsage('recipe.open', { 'recipe.id': recipe.id, 'recipe.name': recipe.name }); 
 }
 
 let loading: boolean = false;