diff --git a/src/pages/Proxmox/RemotesPage.tsx b/src/pages/Proxmox/RemotesPage.tsx
index e72421c0..2711418a 100644
--- a/src/pages/Proxmox/RemotesPage.tsx
+++ b/src/pages/Proxmox/RemotesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/index';
 import { RefreshCw } from 'lucide-react';
 import { RemotesList } from '@/components/Proxmox';
@@ -6,6 +6,8 @@ import { AddRemoteForm } from '@/components/Proxmox';
 import { EditRemoteForm } from '@/components/Proxmox';
 import { RemoveRemoteDialog } from '@/components/Proxmox';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/index';
+import { listProxmoxClusters, addProxmoxCluster, removeProxmoxCluster } from '@/lib/proxmoxClient';
+import { ClusterType } from '@/lib/domain';
 
 interface RemoteInfo {
   id: string;
@@ -22,30 +24,87 @@ export function ProxmoxRemotesPage() {
   const [editingRemote, setEditingRemote] = useState<RemoteInfo | null>(null);
   const [removingRemote, setRemovingRemote] = useState<RemoteInfo | null>(null);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleAddRemote = (config: any) => {
-    const newRemote: RemoteInfo = {
-      id: String(remotes.length + 1),
-      name: String(config.name),
-      url: String(config.url),
-      username: String(config.username),
-      type: config.type as 'pve' | 'pbs',
-      status: 'connected',
-    };
-    setRemotes([...remotes, newRemote]);
-    setShowAddDialog(false);
+  const loadRemotes = async () => {
+    try {
+      const clusters = await listProxmoxClusters();
+      const remotesList: RemoteInfo[] = clusters.map((c) => ({
+        id: c.id,
+        name: c.name,
+        url: c.url,
+        username: c.username,
+        type: c.clusterType === 've' ? 'pve' : 'pbs',
+        status: 'connected' as const,
+      }));
+      setRemotes(remotesList);
+    } catch (err) {
+      console.error('Failed to load remotes:', err);
+    }
+  };
+
+  useEffect(() => {
+    void loadRemotes();
+  }, []);
+
+  const generateId = (): string => {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleEditRemote = (config: any) => {
-    setRemotes(remotes.map(r => r.id === String(config.id) ? { ...r, ...config } as RemoteInfo : r));
-    setEditingRemote(null);
+  const handleAddRemote = async (config: any) => {
+    try {
+      const clusterType = config.type === 'pve' ? 've' : 'pbs';
+      const url = config.url.replace(/^https?:\/\//, '');
+      const port = config.type === 'pve' ? 8006 : 8007;
+      const id = config.id || generateId();
+      await addProxmoxCluster(
+        id,
+        config.name,
+        clusterType as ClusterType,
+        { url, port },
+        config.username,
+        config.password || ''
+      );
+      await loadRemotes();
+      setShowAddDialog(false);
+    } catch (err) {
+      console.error('Failed to add remote:', err);
+      alert('Failed to add remote: ' + String(err));
+    }
   };
 
-  const handleRemoveRemote = () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleEditRemote = async (config: any) => {
+    try {
+      const clusterType = config.type === 'pve' ? 've' : 'pbs';
+      const url = config.url.replace(/^https?:\/\//, '');
+      const port = config.type === 'pve' ? 8006 : 8007;
+      await removeProxmoxCluster(config.id);
+      await addProxmoxCluster(
+        config.id,
+        config.name,
+        clusterType as ClusterType,
+        { url, port },
+        config.username,
+        config.password || ''
+      );
+      await loadRemotes();
+      setEditingRemote(null);
+    } catch (err) {
+      console.error('Failed to edit remote:', err);
+      alert('Failed to edit remote: ' + String(err));
+    }
+  };
+
+  const handleRemoveRemote = async () => {
     if (removingRemote) {
-      setRemotes(remotes.filter(r => r.id !== removingRemote.id));
-      setRemovingRemote(null);
+      try {
+        await removeProxmoxCluster(removingRemote.id);
+        await loadRemotes();
+        setRemovingRemote(null);
+      } catch (err) {
+        console.error('Failed to remove remote:', err);
+        alert('Failed to remove remote: ' + String(err));
+      }
     }
   };