diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte
index 4189ef1b7..e18de681e 100644
--- a/packages/frontend/src/lib/ErrorMessage.svelte
+++ b/packages/frontend/src/lib/ErrorMessage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import Fa from 'svelte-fa';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import Tooltip from './Tooltip.svelte';
+import { Tooltip } from '@podman-desktop/ui-svelte';
 
 export let error: string;
 export let icon = false;
diff --git a/packages/frontend/src/lib/Tooltip.svelte b/packages/frontend/src/lib/Tooltip.svelte
deleted file mode 100644
index 33ce8be17..000000000
--- a/packages/frontend/src/lib/Tooltip.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<style>
-.tooltip.top {
-  left: 50%;
-  transform: translate(-50%, -100%);
-  margin-top: -8px;
-}
-.tooltip.bottom {
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, 100%);
-  margin-bottom: -8px;
-}
-.tooltip.left {
-  left: 0;
-  transform: translateX(-100%);
-  margin-left: -8px;
-}
-.tooltip.right {
-  right: 0;
-  transform: translate(100%, -50%);
-  margin-top: -10px;
-  margin-right: -8px;
-}
-.tooltip.top-left {
-  left: 0;
-  transform: translate(-80%, -100%);
-  margin-top: -8px;
-}
-.tooltip.bottom-left {
-  left: 0;
-  bottom: 0;
-  transform: translate(-80%, 100%);
-  margin-top: -8px;
-}
-.tooltip.bottom-right {
-  left: 0;
-  bottom: 0;
-  transform: translate(0%, 100%);
-  margin-top: -8px;
-}
-.tooltip.top-right {
-  left: 0;
-  transform: translate(0%, -100%);
-  margin-top: -8px;
-}
-.tooltip-slot:hover + .tooltip {
-  opacity: 1;
-  visibility: initial;
-}
-</style>
-
-<script>
-export let top = false;
-export let topLeft = false;
-export let topRight = false;
-export let right = false;
-export let bottom = false;
-export let bottomLeft = false;
-export let bottomRight = false;
-export let left = false;
-</script>
-
-<div class="relative inline-block">
-  <span class="group tooltip-slot {$$props.class}">
-    <slot name="content" />
-  </span>
-  <div
-    class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none z-[10]"
-    class:left="{left}"
-    class:right="{right}"
-    class:bottom="{bottom}"
-    class:top="{top}"
-    class:top-left="{topLeft}"
-    class:top-right="{topRight}"
-    class:bottom-left="{bottomLeft}"
-    class:bottom-right="{bottomRight}">
-    <slot name="tip" />
-  </div>
-</div>
diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
index 4eb57e59a..cab1124f9 100644
--- a/packages/frontend/src/pages/Playground.svelte
+++ b/packages/frontend/src/pages/Playground.svelte
@@ -15,7 +15,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 '/@/lib/Tooltip.svelte';
+import { Tooltip } from '@podman-desktop/ui-svelte';
 import StatusIcon from '../lib/StatusIcon.svelte';
 import Badge from '../lib/Badge.svelte';
 import { router } from 'tinro';