diff --git a/public/components/DeleteDialog.jsx b/public/components/DeleteDialog.jsx
new file mode 100644
index 0000000..b8df23d
--- /dev/null
+++ b/public/components/DeleteDialog.jsx
@@ -0,0 +1,32 @@
+function DeleteDialog({ isOpen, onClose, onConfirm, serverName }) {
+  return (
+    <div className={`${isOpen ? 'block' : 'hidden'} fixed inset-0 bg-black bg-opacity-50 z-50`}>
+      <div className="fixed inset-0 flex items-center justify-center">
+        <div className="bg-white rounded-lg p-6 max-w-sm mx-auto">
+          <h3 className="text-lg font-medium leading-6 text-gray-900">Delete Server</h3>
+          <div className="mt-2">
+            <p className="text-sm text-gray-500">
+              Are you sure you want to delete server {serverName}? This action cannot be undone.
+            </p>
+          </div>
+          <div className="mt-4 flex justify-end space-x-3">
+            <button
+              onClick={onClose}
+              className="inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-300 rounded-md hover:bg-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={onConfirm}
+              className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+module.exports = DeleteDialog;
diff --git a/public/index.html b/public/index.html
index 93bdbb2..412a01d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
 </head>
 <body class="bg-gray-100">
     <div id="root"></div>
+    <script type="text/babel" src="/components/DeleteDialog.jsx"></script>
     <script type="text/babel" src="/js/app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 9d7f223..94ba533 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -44,12 +44,16 @@ function ToolCard({ tool }) {
 
 function ServerCard({ server, onRemove }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const handleRemove = (e) => {
     e.stopPropagation();
-    if (confirm(`Are you sure you want to delete server ${server.name}?`)) {
-      onRemove(server.name);
-    }
+    setShowDeleteDialog(true);
+  };
+
+  const handleConfirmDelete = () => {
+    onRemove(server.name);
+    setShowDeleteDialog(false);
   };
 
   return (
@@ -72,6 +76,14 @@ function ServerCard({ server, onRemove }) {
           <button className="text-gray-400 hover:text-gray-600">{isExpanded ? '▼' : '▶'}</button>
         </div>
       </div>
+      
+      <DeleteDialog
+        isOpen={showDeleteDialog}
+        onClose={() => setShowDeleteDialog(false)}
+        onConfirm={handleConfirmDelete}
+        serverName={server.name}
+      />
+
       {isExpanded && server.tools && (
         <div className="mt-6">
           <h3 className="text-lg font-medium text-gray-900 mb-4">Available Tools</h3>
