diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte
index 1d0f83950..dd73fc0c3 100644
--- a/packages/frontend/src/lib/RecipeDetails.svelte
+++ b/packages/frontend/src/lib/RecipeDetails.svelte
@@ -10,7 +10,6 @@ import { router } from 'tinro';
 import { applicationStates } from '../stores/application-states';
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
 import ApplicationActions from './ApplicationActions.svelte';
-import Button from './button/Button.svelte';
 import VSCodeIcon from '/@/lib/images/VSCodeIcon.svelte';
 import { localRepositories } from '../stores/localRepositories';
 import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
@@ -21,6 +20,7 @@ import StatusIcon from '/@/lib/StatusIcon.svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { getApplicationStatus, getApplicationStatusText } from '../pages/applications';
 import Spinner from './button/Spinner.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let recipeId: string;
 export let modelId: string;
diff --git a/packages/frontend/src/lib/button/Button.spec.ts b/packages/frontend/src/lib/button/Button.spec.ts
deleted file mode 100644
index d9cbcc7a4..000000000
--- a/packages/frontend/src/lib/button/Button.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2024 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-import '@testing-library/jest-dom/vitest';
-import { test, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import Button from '/@/lib/button/Button.svelte';
-
-test('Button inProgress must have a spinner', async () => {
-  // render the component
-  render(Button, { inProgress: true });
-
-  const svg = screen.getByRole('img');
-  expect(svg).toBeDefined();
-});
-
-test('Button no progress no icon do not have spinner', async () => {
-  // render the component
-  render(Button, { inProgress: false });
-
-  const svg = screen.queryByRole('img');
-  expect(svg).toBeNull();
-});
diff --git a/packages/frontend/src/lib/button/Button.svelte b/packages/frontend/src/lib/button/Button.svelte
deleted file mode 100644
index c1b97b2d6..000000000
--- a/packages/frontend/src/lib/button/Button.svelte
+++ /dev/null
@@ -1,85 +0,0 @@
-<script lang="ts">
-import type { ButtonType } from './Button';
-import { onMount } from 'svelte';
-import Fa from 'svelte-fa';
-import Spinner from './Spinner.svelte';
-
-export let title: string | undefined = undefined;
-export let inProgress = false;
-export let disabled = false;
-export let type: ButtonType = 'primary';
-export let icon: any = undefined;
-export let selected: boolean | undefined = undefined;
-
-$: if (selected !== undefined && type !== 'tab') {
-  console.error('property selected can be used with type=tab only');
-}
-export let padding: string = type !== 'tab' ? 'px-4 py-[5px]' : 'px-4 pb-1';
-
-let iconType: string | undefined = undefined;
-
-onMount(() => {
-  if (['fas', 'fab'].includes(icon?.prefix)) {
-    iconType = 'fa';
-  } else {
-    iconType = 'unknown';
-  }
-});
-
-let classes = '';
-$: {
-  if (disabled || inProgress) {
-    if (type === 'primary' || type === 'secondary') {
-      classes = 'bg-charcoal-50';
-    } else if (type === 'danger') {
-      classes = 'border-2 border-gray-700 bg-charcoal-800';
-    } else {
-      classes = 'text-charcoal-50 no-underline';
-    }
-  } else {
-    if (type === 'primary') {
-      classes = 'bg-purple-600 border-none hover:bg-purple-500';
-    } else if (type === 'secondary') {
-      classes = 'border-[1px] border-gray-200 hover:border-purple-500 hover:text-purple-500';
-    } else if (type === 'danger') {
-      classes = 'border-2 border-red-600 bg-charcoal-700 hover:bg-charcoal-400';
-    } else if (type === 'tab') {
-      classes = 'border-b-[3px] border-charcoal-700 hover:cursor-pointer text-gray-600 no-underline';
-    } else {
-      classes = 'border-none text-purple-400 hover:bg-white hover:bg-opacity-10';
-    }
-  }
-
-  if (type !== 'tab') {
-    classes += ' rounded-[4px] text-[13px]';
-  }
-}
-</script>
-
-<button
-  type="button"
-  class="relative {padding} box-border whitespace-nowrap select-none transition-all {classes} {$$props.class || ''}"
-  class:border-purple-500="{type === 'tab' && selected}"
-  class:hover:border-charcoal-100="{type === 'tab' && !selected}"
-  class:text-white="{(type === 'tab' && selected) || type === 'primary' || type === 'secondary' || type === 'danger'}"
-  title="{title}"
-  aria-label="{$$props['aria-label']}"
-  on:click
-  disabled="{disabled || inProgress}">
-  {#if icon || inProgress}
-    <div class="flex flex-row p-0 m-0 bg-transparent justify-center items-center space-x-[4px]">
-      {#if inProgress}
-        <Spinner size="1em" />
-      {:else if iconType === 'fa'}
-        <Fa icon="{icon}" />
-      {:else if iconType === 'unknown'}
-        <svelte:component this="{icon}" size="1em" />
-      {/if}
-      {#if $$slots.default}
-        <span><slot /></span>
-      {/if}
-    </div>
-  {:else}
-    <slot />
-  {/if}
-</button>
diff --git a/packages/frontend/src/lib/button/Button.ts b/packages/frontend/src/lib/button/Button.ts
deleted file mode 100644
index de8854a42..000000000
--- a/packages/frontend/src/lib/button/Button.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-/**
- * Type of button:
- *  primary   - a main action (the default)
- *  secondary - a secondary action
- *  danger    - a danger action
- *  link      - close, cancel, or other non-default button
- *  tab       - displayed as tab
- */
-export type ButtonType = 'primary' | 'secondary' | 'danger' | 'link' | 'tab';
diff --git a/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte b/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte
index de95c7397..676b82991 100644
--- a/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte
+++ b/packages/frontend/src/lib/notification/ContainerConnectionStatusInfo.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import Button from '../button/Button.svelte';
 import { filesize } from 'filesize';
 import { studioClient } from '/@/utils/client';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let connectionInfo: ContainerConnectionInfo;
 type BannerBackgroundColor = 'light' | 'dark';
diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
index de0bd74c2..8a051ad48 100644
--- a/packages/frontend/src/pages/CreateService.svelte
+++ b/packages/frontend/src/pages/CreateService.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
-import Button from '/@/lib/button/Button.svelte';
 import { faExclamationCircle, faLocationArrow, faPlus, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { modelsInfo } from '/@/stores/modelsInfo';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
@@ -17,6 +16,7 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
+import { Button } from '@podman-desktop/ui-svelte';
 
 // List of the models available locally
 let localModels: ModelInfo[];
diff --git a/packages/frontend/src/pages/Dashboard.svelte b/packages/frontend/src/pages/Dashboard.svelte
index 43b108e75..30c0f7659 100644
--- a/packages/frontend/src/pages/Dashboard.svelte
+++ b/packages/frontend/src/pages/Dashboard.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 import NavPage from '/@/lib/NavPage.svelte';
 import { router } from 'tinro';
-import Button from '/@/lib/button/Button.svelte';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { studioClient } from '/@/utils/client';
 import DashboardBanner from '/@/lib/images/DashboardBanner.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const openRecipesCatalog = () => {
   router.goto('/recipes');
diff --git a/packages/frontend/src/pages/ImportModels.svelte b/packages/frontend/src/pages/ImportModels.svelte
index 86d82fc20..eb787173d 100644
--- a/packages/frontend/src/pages/ImportModels.svelte
+++ b/packages/frontend/src/pages/ImportModels.svelte
@@ -3,10 +3,10 @@ import { faMinusCircle, faPlusCircle, faUpload } from '@fortawesome/free-solid-s
 import { router } from 'tinro';
 import { studioClient } from '../utils/client';
 import { Uri } from '@shared/src/uri/Uri';
-import Button from '../lib/button/Button.svelte';
 import ErrorMessage from '../lib/ErrorMessage.svelte';
 import NavPage from '../lib/NavPage.svelte';
 import type { LocalModelImportInfo } from '@shared/src/models/ILocalModelInfo';
+import { Button } from '@podman-desktop/ui-svelte';
 
 let modelsToImport: LocalModelImportInfo[] = [];
 let importError: string = '';
diff --git a/packages/frontend/src/pages/InferenceServerDetails.svelte b/packages/frontend/src/pages/InferenceServerDetails.svelte
index 88d111bbd..faadd55cd 100644
--- a/packages/frontend/src/pages/InferenceServerDetails.svelte
+++ b/packages/frontend/src/pages/InferenceServerDetails.svelte
@@ -11,8 +11,8 @@ import type { LanguageVariant } from 'postman-code-generators';
 import { studioClient } from '/@/utils/client';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
-import Button from '/@/lib/button/Button.svelte';
 import Badge from '/@/lib/Badge.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 export let containerId: string | undefined = undefined;
 
diff --git a/packages/frontend/src/pages/InferenceServers.svelte b/packages/frontend/src/pages/InferenceServers.svelte
index fce990cc9..dfd3141a9 100644
--- a/packages/frontend/src/pages/InferenceServers.svelte
+++ b/packages/frontend/src/pages/InferenceServers.svelte
@@ -8,11 +8,11 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ServiceStatus from '/@/lib/table/service/ServiceStatus.svelte';
 import ServiceAction from '/@/lib/table/service/ServiceAction.svelte';
 import ServiceColumnModelName from '/@/lib/table/service/ServiceColumnModelName.svelte';
-import Button from '/@/lib/button/Button.svelte';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { studioClient } from '/@/utils/client';
 import { router } from 'tinro';
 import { onMount } from 'svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<InferenceServer>[] = [
   new Column<InferenceServer>('Status', { width: '70px', renderer: ServiceStatus, align: 'center' }),
diff --git a/packages/frontend/src/pages/Models.svelte b/packages/frontend/src/pages/Models.svelte
index 3b416df74..a90b4ff3b 100644
--- a/packages/frontend/src/pages/Models.svelte
+++ b/packages/frontend/src/pages/Models.svelte
@@ -17,8 +17,8 @@ import { Tab } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import { tasks } from '/@/stores/tasks';
 import ModelColumnIcon from '../lib/table/model/ModelColumnIcon.svelte';
-import Button from '../lib/button/Button.svelte';
 import { router } from 'tinro';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<ModelInfo>[] = [
   new Column<ModelInfo>('', { width: '40px', renderer: ModelColumnIcon }),
diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
index cab1124f9..5a1077317 100644
--- a/packages/frontend/src/pages/Playground.svelte
+++ b/packages/frontend/src/pages/Playground.svelte
@@ -4,7 +4,6 @@ import { studioClient } from '/@/utils/client';
 import { isAssistantChat, isPendingChat, isUserChat, isSystemPrompt } from '@shared/src/models/IPlaygroundMessage';
 import NavPage from '../lib/NavPage.svelte';
 import { catalog } from '../stores/catalog';
-import Button from '../lib/button/Button.svelte';
 import { afterUpdate } from 'svelte';
 import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
 import ContainerIcon from '/@/lib/images/ContainerIcon.svelte';
@@ -15,7 +14,7 @@ import ChatMessage from '../lib/conversation/ChatMessage.svelte';
 import SystemPromptBanner from '/@/lib/conversation/SystemPromptBanner.svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
 import { faCircleInfo, faMicrochip, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, Tooltip } from '@podman-desktop/ui-svelte';
 import StatusIcon from '../lib/StatusIcon.svelte';
 import Badge from '../lib/Badge.svelte';
 import { router } from 'tinro';
diff --git a/packages/frontend/src/pages/PlaygroundCreate.svelte b/packages/frontend/src/pages/PlaygroundCreate.svelte
index da6a10ea4..388936c6e 100644
--- a/packages/frontend/src/pages/PlaygroundCreate.svelte
+++ b/packages/frontend/src/pages/PlaygroundCreate.svelte
@@ -4,7 +4,6 @@ import NavPage from '../lib/NavPage.svelte';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import { modelsInfo } from '/@/stores/modelsInfo';
 import Fa from 'svelte-fa';
-import Button from '../lib/button/Button.svelte';
 import { studioClient } from '../utils/client';
 import { router } from 'tinro';
 import { onDestroy, onMount } from 'svelte';
@@ -14,6 +13,7 @@ import { tasks } from '../stores/tasks';
 import { filterByLabel } from '../utils/taskUtils';
 import type { Unsubscriber } from 'svelte/store';
 import ErrorMessage from '../lib/ErrorMessage.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 let localModels: ModelInfo[];
 $: localModels = $modelsInfo.filter(model => model.file);
diff --git a/packages/frontend/src/pages/Playgrounds.svelte b/packages/frontend/src/pages/Playgrounds.svelte
index 3ab156798..b4ccd686e 100644
--- a/packages/frontend/src/pages/Playgrounds.svelte
+++ b/packages/frontend/src/pages/Playgrounds.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { router } from 'tinro';
 import NavPage from '../lib/NavPage.svelte';
-import Button from '../lib/button/Button.svelte';
 import Table from '../lib/table/Table.svelte';
 import PlaygroundColumnModel from '../lib/table/playground/PlaygroundColumnModel.svelte';
 import PlaygroundColumnName from '../lib/table/playground/PlaygroundColumnName.svelte';
@@ -10,6 +9,7 @@ import type { PlaygroundV2 } from '@shared/src/models/IPlaygroundV2';
 import ConversationColumnAction from '/@/lib/table/playground/ConversationColumnAction.svelte';
 import { conversations } from '/@/stores/conversations';
 import PlaygroundColumnIcon from '/@/lib/table/playground/PlaygroundColumnIcon.svelte';
+import { Button } from '@podman-desktop/ui-svelte';
 
 const columns: Column<PlaygroundV2>[] = [
   new Column<PlaygroundV2>('', { width: '40px', renderer: PlaygroundColumnIcon }),