diff --git a/ui/src/components/WebcalModal.tsx b/ui/src/components/WebcalModal.tsx
index 3c02dac..1cef2d3 100644
--- a/ui/src/components/WebcalModal.tsx
+++ b/ui/src/components/WebcalModal.tsx
@@ -15,12 +15,11 @@ import {
 import { useTablosList } from "@ui/hooks/tablos";
 import { useGenerateWebcalToken } from "@ui/hooks/webcal";
 import { toast } from "@ui/lib/toast";
-import { CopyIcon } from "@ui/ui-library/icons";
 import { useState } from "react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Label } from "./ui/label";
-
+import { CopyIcon } from "lucide-react";
 interface WebcalModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
diff --git a/ui/src/pages/tablo.tsx b/ui/src/pages/tablo.tsx
index b42fac2..f974401 100644
--- a/ui/src/pages/tablo.tsx
+++ b/ui/src/pages/tablo.tsx
@@ -373,8 +373,10 @@ export const TabloPage = () => {
 
             {/* Trash Icon - Only show for admins */}
             {isAdmin && (
-              <button
-                className="absolute top-2 right-2 p-1.5 bg-destructive hover:bg-destructive/90 text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10"
+              <Button
+                variant="outline"
+                size="icon-sm"
+                className="absolute top-2 right-2 p-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10 text-red-600 hover:text-red-700 hover:bg-red-50 border-red-200"
                 onClick={(e) => {
                   e.stopPropagation();
                   handleDeleteTablo(tablo.id);
@@ -382,7 +384,7 @@ export const TabloPage = () => {
                 title="Supprimer le tablo"
               >
                 <Trash2 className="w-4 h-4" />
-              </button>
+              </Button>
             )}
 
             {/* Read-only indicator for non-admins */}