diff --git a/src/components/whatsapp/CreateInstanceForm.tsx b/src/components/whatsapp/CreateInstanceForm.tsx
new file mode 100644
index 0000000..d907ddd
--- /dev/null
+++ b/src/components/whatsapp/CreateInstanceForm.tsx
@@ -0,0 +1,148 @@
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { MessageCircle } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { createWhatsAppInstance } from '@/services/whatsAppService';
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+
+interface CreateInstanceFormProps {
+  onInstanceCreated: (instance: WhatsAppInstance) => void;
+}
+
+const CreateInstanceForm = ({ onInstanceCreated }: CreateInstanceFormProps) => {
+  const { toast } = useToast();
+  const [loading, setLoading] = useState(false);
+  const [instanceName, setInstanceName] = useState(() => {
+    // Get user's name from localStorage as default value
+    return localStorage.getItem('userName') || '';
+  });
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const currentUserId = localStorage.getItem('userId') || '';
+
+  const handleCreateInstance = async () => {
+    // Validate form fields
+    if (!instanceName.trim()) {
+      toast({
+        title: "Erro",
+        description: "O nome da instância é obrigatório",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!phoneNumber.trim() || !/^[0-9]{10,15}$/.test(phoneNumber)) {
+      toast({
+        title: "Erro",
+        description: "Insira um número válido com DDD e país (ex: 559999999999)",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Ensure user is logged in
+    if (!currentUserId) {
+      toast({
+        title: "Erro de autenticação",
+        description: "Você precisa estar logado para criar uma instância",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const data = await createWhatsAppInstance(instanceName, phoneNumber);
+      
+      console.log('API response for create instance:', data);
+
+      // Create new instance object with user ID
+      const newInstance: WhatsAppInstance = {
+        instanceName,
+        instanceId: data.instance?.instanceId || Date.now().toString(), // Fallback if instanceId not provided
+        phoneNumber,
+        userId: currentUserId, // Associate with current user
+        status: data.instance?.status || 'created',
+        qrcode: data.qrcode?.base64 || null,
+        connectionState: 'closed' // Default to closed/disconnected
+      };
+      
+      console.log('New instance created:', newInstance);
+      
+      // Notify parent component about the new instance
+      onInstanceCreated(newInstance);
+      
+      toast({
+        title: "Sucesso!",
+        description: "Instância do WhatsApp criada com sucesso!"
+      });
+      
+      // Reset form fields
+      setInstanceName(localStorage.getItem('userName') || '');
+      setPhoneNumber('');
+      
+    } catch (error) {
+      console.error("Error creating WhatsApp instance:", error);
+      toast({
+        title: "Erro na criação da instância",
+        description: "Ocorreu um erro ao conectar com a API. Tente novamente mais tarde.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center mb-2">
+          <MessageCircle className="h-6 w-6 mr-2 text-green-600" />
+          <CardTitle>Vincular WhatsApp ao App</CardTitle>
+        </div>
+        <CardDescription>
+          Preencha os campos abaixo para conectar sua conta WhatsApp
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="instanceName">Nome da Instância</Label>
+          <Input
+            id="instanceName"
+            value={instanceName}
+            onChange={(e) => setInstanceName(e.target.value)}
+            placeholder="Digite um nome para a instância"
+            required
+          />
+          <p className="text-xs text-muted-foreground">O nome será usado para identificar esta conexão</p>
+        </div>
+        
+        <div className="space-y-2">
+          <Label htmlFor="phoneNumber">Número do WhatsApp</Label>
+          <Input
+            id="phoneNumber"
+            value={phoneNumber}
+            onChange={(e) => setPhoneNumber(e.target.value)}
+            placeholder="559999999999"
+            required
+          />
+          <p className="text-xs text-muted-foreground">Digite o número com DDD e código do país</p>
+        </div>
+        
+        <Button 
+          className="w-full mt-4" 
+          onClick={handleCreateInstance}
+          disabled={loading}
+        >
+          {loading ? "Criando..." : "Criar Instância"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default CreateInstanceForm;
diff --git a/src/components/whatsapp/InstanceCard.tsx b/src/components/whatsapp/InstanceCard.tsx
new file mode 100644
index 0000000..199c63e
--- /dev/null
+++ b/src/components/whatsapp/InstanceCard.tsx
@@ -0,0 +1,64 @@
+
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { QrCode, Smartphone } from 'lucide-react';
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+
+interface InstanceCardProps {
+  instance: WhatsAppInstance;
+  onViewQrCode: (instance: WhatsAppInstance) => void;
+  onDelete: (instanceId: string) => void;
+}
+
+const InstanceCard = ({ instance, onViewQrCode, onDelete }: InstanceCardProps) => {
+  return (
+    <Card className="h-full">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg">{instance.instanceName}</CardTitle>
+      </CardHeader>
+      <CardContent className="pb-2">
+        <div className="space-y-2">
+          <div className="flex items-center text-sm">
+            <Smartphone className="h-4 w-4 mr-2 text-gray-500" />
+            <span>{instance.phoneNumber}</span>
+          </div>
+          <div className="flex items-center text-sm">
+            {instance.connectionState === 'open' ? (
+              <Badge variant="success" className="flex items-center gap-1">
+                <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
+                Status: Conectado
+              </Badge>
+            ) : (
+              <Badge variant="outline" className="flex items-center gap-1 text-red-500 border-red-300">
+                <span className="inline-block w-2 h-2 rounded-full bg-red-500"></span>
+                Status: Desconectado
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button 
+          variant="outline" 
+          size="sm" 
+          onClick={() => onViewQrCode(instance)}
+          className="flex items-center"
+        >
+          <QrCode className="h-4 w-4 mr-2" />
+          Ver QR Code
+        </Button>
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          className="text-red-500 hover:text-red-700 hover:bg-red-50"
+          onClick={() => onDelete(instance.instanceId)}
+        >
+          Remover
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default InstanceCard;
diff --git a/src/components/whatsapp/InstanceList.tsx b/src/components/whatsapp/InstanceList.tsx
new file mode 100644
index 0000000..ef2f871
--- /dev/null
+++ b/src/components/whatsapp/InstanceList.tsx
@@ -0,0 +1,43 @@
+
+import { Card, CardContent } from '@/components/ui/card';
+import InstanceCard from './InstanceCard';
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+
+interface InstanceListProps {
+  instances: WhatsAppInstance[];
+  onViewQrCode: (instance: WhatsAppInstance) => void;
+  onDelete: (instanceId: string) => void;
+}
+
+const InstanceList = ({ instances, onViewQrCode, onDelete }: InstanceListProps) => {
+  if (instances.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-6">
+          <div className="text-center text-muted-foreground">
+            <p>Nenhuma instância criada ainda.</p>
+            <p className="mt-1">Crie uma instância usando o formulário acima.</p>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">Instâncias Criadas</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {instances.map((instance) => (
+          <InstanceCard 
+            key={instance.instanceId} 
+            instance={instance} 
+            onViewQrCode={onViewQrCode} 
+            onDelete={onDelete}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InstanceList;
diff --git a/src/components/whatsapp/QrCodeDialog.tsx b/src/components/whatsapp/QrCodeDialog.tsx
new file mode 100644
index 0000000..1270559
--- /dev/null
+++ b/src/components/whatsapp/QrCodeDialog.tsx
@@ -0,0 +1,133 @@
+
+import { useState } from 'react';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogDescription 
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { RefreshCw } from 'lucide-react';
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+import { fetchQrCode } from '@/services/whatsAppService';
+import { useToast } from '@/hooks/use-toast';
+
+interface QrCodeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  activeInstance: WhatsAppInstance | null;
+  onStatusCheck: () => void;
+}
+
+const QrCodeDialog = ({ 
+  open, 
+  onOpenChange, 
+  activeInstance, 
+  onStatusCheck 
+}: QrCodeDialogProps) => {
+  const { toast } = useToast();
+  const [loadingQR, setLoadingQR] = useState(false);
+  const [qrCodeData, setQrCodeData] = useState<string | null>(null);
+  const [qrError, setQrError] = useState<string | null>(null);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange(newOpen);
+    
+    // After dialog closes, trigger status check to update connection state
+    if (!newOpen) {
+      onStatusCheck();
+    }
+  };
+
+  const handleRefreshQrCode = async () => {
+    if (!activeInstance) return;
+    
+    setLoadingQR(true);
+    setQrError(null);
+
+    try {
+      const data = await fetchQrCode(activeInstance.instanceName);
+      console.log('QR Code API response:', data);
+
+      // Using the "base64" field from the response as the QR code data
+      if (data && data.base64) {
+        // Save the base64 image data directly - it already contains the data:image prefix
+        setQrCodeData(data.base64);
+      } else {
+        setQrError("QR Code não disponível. A instância pode já estar conectada ou houve um erro na API.");
+      }
+    } catch (error) {
+      console.error("Error fetching QR code:", error);
+      setQrError("Falha ao obter QR Code. Verifique a conexão ou tente novamente mais tarde.");
+      toast({
+        title: "Erro ao obter QR Code",
+        description: "Não foi possível obter o QR Code. Tente novamente mais tarde.",
+        variant: "destructive",
+      });
+    } finally {
+      setLoadingQR(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Conectar WhatsApp - {activeInstance?.instanceName}</DialogTitle>
+          <DialogDescription>
+            Escaneie o QR Code com seu WhatsApp para finalizar a conexão
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col items-center space-y-4 py-4">
+          {loadingQR && (
+            <div className="text-center py-8">
+              <p>Carregando QR Code...</p>
+            </div>
+          )}
+          
+          {qrCodeData && !loadingQR && (
+            <div className="flex flex-col items-center space-y-4">
+              <div className="border p-4 bg-white rounded-md">
+                <img 
+                  src={qrCodeData}
+                  alt="QR Code WhatsApp" 
+                  className="w-full h-auto max-w-[250px]" 
+                />
+              </div>
+              <p className="text-sm text-center">
+                Escaneie este QR Code com seu WhatsApp para finalizar a conexão.
+              </p>
+            </div>
+          )}
+          
+          {qrError && !loadingQR && (
+            <Alert variant="destructive" className="mb-4">
+              <AlertDescription>{qrError}</AlertDescription>
+            </Alert>
+          )}
+          
+          <div className="flex space-x-2">
+            {activeInstance && (
+              <Button 
+                variant="outline" 
+                onClick={handleRefreshQrCode} 
+                disabled={loadingQR}
+                className="flex items-center"
+              >
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Atualizar QR Code
+              </Button>
+            )}
+            <Button variant="ghost" onClick={() => onOpenChange(false)}>
+              Fechar
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default QrCodeDialog;
diff --git a/src/pages/WhatsApp.tsx b/src/pages/WhatsApp.tsx
index cf952a6..1489984 100644
--- a/src/pages/WhatsApp.tsx
+++ b/src/pages/WhatsApp.tsx
@@ -1,97 +1,43 @@
+
 import { useState, useEffect } from 'react';
 import Layout from '@/components/layout/Layout';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 import { useToast } from '@/hooks/use-toast';
-import { Label } from '@/components/ui/label';
-import { MessageCircle, QrCode, RefreshCw, Smartphone } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { Badge } from '@/components/ui/badge';
-
-interface WhatsAppInstance {
-  instanceName: string;
-  instanceId: string;
-  phoneNumber: string;
-  userId: string;
-  status?: string;
-  qrcode?: string;
-  connectionState?: 'open' | 'closed' | 'connecting';
-}
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+import { 
+  fetchQrCode, 
+  fetchConnectionState, 
+  saveInstancesToLocalStorage, 
+  loadInstancesFromLocalStorage 
+} from '@/services/whatsAppService';
+import CreateInstanceForm from '@/components/whatsapp/CreateInstanceForm';
+import InstanceList from '@/components/whatsapp/InstanceList';
+import QrCodeDialog from '@/components/whatsapp/QrCodeDialog';
 
 const WhatsApp = () => {
   const { toast } = useToast();
-  const [loading, setLoading] = useState(false);
-  const [loadingQR, setLoadingQR] = useState(false);
-  const [instanceName, setInstanceName] = useState(() => {
-    // Get user's name from localStorage as default value
-    const userName = localStorage.getItem('userName') || '';
-    return userName;
-  });
-  const [phoneNumber, setPhoneNumber] = useState('');
   const [instances, setInstances] = useState<WhatsAppInstance[]>([]);
   const [activeInstance, setActiveInstance] = useState<WhatsAppInstance | null>(null);
-  const [qrCodeData, setQrCodeData] = useState<string | null>(null);
-  const [qrError, setQrError] = useState<string | null>(null);
   const [qrDialogOpen, setQrDialogOpen] = useState(false);
   const [statusCheckInterval, setStatusCheckInterval] = useState<NodeJS.Timeout | null>(null);
   const [currentUserId, setCurrentUserId] = useState<string>('');
 
-  // Get current user ID on component mount
-  useEffect(() => {
-    const userId = localStorage.getItem('userId') || '';
-    setCurrentUserId(userId);
-  }, []);
-
-  // Load saved instances from localStorage on component mount and filter by current user
+  // Get current user ID and load instances on component mount
   useEffect(() => {
     const userId = localStorage.getItem('userId') || '';
     setCurrentUserId(userId);
     
-    const savedInstances = localStorage.getItem('whatsappInstances');
-    if (savedInstances && userId) {
-      try {
-        const allInstances = JSON.parse(savedInstances);
-        // Filter instances to only show those belonging to the current user
-        const userInstances = allInstances.filter(
-          (instance: WhatsAppInstance) => instance.userId === userId
-        );
-        setInstances(userInstances);
-        
-        // Log for debugging
-        console.log('Loaded user instances:', userInstances);
-      } catch (error) {
-        console.error("Error parsing saved instances:", error);
-      }
+    if (userId) {
+      const userInstances = loadInstancesFromLocalStorage(userId);
+      setInstances(userInstances);
+      console.log('Loaded user instances:', userInstances);
     }
   }, []); // Only run once on mount
 
   // Save instances to localStorage whenever they change
   useEffect(() => {
-    if (instances.length > 0) {
-      // We need to save ALL instances (not just current user's) to maintain everyone's data
-      const savedInstances = localStorage.getItem('whatsappInstances');
-      let allInstances: WhatsAppInstance[] = [];
-      
-      if (savedInstances) {
-        try {
-          const parsedInstances = JSON.parse(savedInstances);
-          // Filter out current user's instances from saved data (we'll add updated ones)
-          allInstances = parsedInstances.filter(
-            (instance: WhatsAppInstance) => instance.userId !== currentUserId
-          );
-        } catch (error) {
-          console.error("Error parsing saved instances:", error);
-        }
-      }
-      
-      // Add current user's instances to the array
-      const updatedInstances = [...allInstances, ...instances];
-      localStorage.setItem('whatsappInstances', JSON.stringify(updatedInstances));
-      
-      // Log for debugging
-      console.log('Saved all instances to localStorage:', updatedInstances);
+    if (instances.length > 0 && currentUserId) {
+      saveInstancesToLocalStorage(instances, currentUserId);
+      console.log('Saved instances to localStorage:', instances);
     }
   }, [instances, currentUserId]);
 
@@ -106,6 +52,12 @@ const WhatsApp = () => {
         // User ID changed (new login)
         const newUserId = localStorage.getItem('userId') || '';
         setCurrentUserId(newUserId);
+        
+        // Load instances for the new user
+        if (newUserId) {
+          const userInstances = loadInstancesFromLocalStorage(newUserId);
+          setInstances(userInstances);
+        }
       }
     };
     
@@ -160,204 +112,50 @@ const WhatsApp = () => {
     }
   };
 
-  // Function to fetch connection state for an instance
-  const fetchConnectionState = async (instanceName: string): Promise<'open' | 'closed' | 'connecting'> => {
-    try {
-      const serverUrl = "evolutionapi2.innova1001.com.br";
-      const apiKey = "beeb77fbd7f48f91db2cd539a573c130";
-
-      const response = await fetch(`https://${serverUrl}/instance/connectionState/${encodeURIComponent(instanceName)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'apikey': apiKey
-        }
-      });
-
-      if (!response.ok) {
-        return 'closed';
-      }
-
-      const data = await response.json();
-      return data.instance?.state || 'closed' as 'open' | 'closed' | 'connecting';
-    } catch (error) {
-      console.error("Error fetching connection state:", error);
-      return 'closed';
+  // Handler for when a new instance is created
+  const handleInstanceCreated = async (newInstance: WhatsAppInstance) => {
+    // Add new instance to the list - use the function form to guarantee correct state update
+    setInstances(prevInstances => [...prevInstances, newInstance]);
+    
+    // If there's a QR code in the response, show it
+    if (newInstance.qrcode) {
+      setActiveInstance(newInstance);
+      setQrDialogOpen(true);
     }
+
+    // Trigger a status check for all instances
+    await checkAllInstancesStatus();
   };
 
-  const createInstance = async () => {
-    // Validate form fields
-    if (!instanceName.trim()) {
-      toast({
-        title: "Erro",
-        description: "O nome da instância é obrigatório",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    if (!phoneNumber.trim() || !/^[0-9]{10,15}$/.test(phoneNumber)) {
-      toast({
-        title: "Erro",
-        description: "Insira um número válido com DDD e país (ex: 559999999999)",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    // Ensure user is logged in
-    if (!currentUserId) {
-      toast({
-        title: "Erro de autenticação",
-        description: "Você precisa estar logado para criar uma instância",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      // Using the provided URL and API key for Evolution API
-      const serverUrl = "evolutionapi2.innova1001.com.br";
-      const apiKey = "beeb77fbd7f48f91db2cd539a573c130";
-
-      const response = await fetch(`https://${serverUrl}/instance/create`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'apikey': apiKey
-        },
-        body: JSON.stringify({
-          instanceName: instanceName,
-          number: phoneNumber,
-          qrcode: true,
-          integration: "WHATSAPP-BAILEYS"
-        })
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.message || 'Erro ao criar instância');
-      }
-
-      console.log('API response for create instance:', data);
-
-      // Create new instance object with user ID
-      const newInstance: WhatsAppInstance = {
-        instanceName,
-        instanceId: data.instance?.instanceId || Date.now().toString(), // Fallback if instanceId not provided
-        phoneNumber,
-        userId: currentUserId, // Associate with current user
-        status: data.instance?.status || 'created',
-        qrcode: data.qrcode?.base64 || null,
-        connectionState: 'closed' // Default to closed/disconnected
-      };
-      
-      console.log('New instance created:', newInstance);
-      
-      // Add new instance to the list - use the function form to guarantee correct state update
-      setInstances(prevInstances => [...prevInstances, newInstance]);
-      
-      toast({
-        title: "Sucesso!",
-        description: "Instância do WhatsApp criada com sucesso!"
-      });
-      
-      // Reset form fields
-      setInstanceName(localStorage.getItem('userName') || '');
-      setPhoneNumber('');
-      
-      // If there's a QR code in the response, show it
-      if (data.qrcode && data.qrcode.base64) {
-        setActiveInstance(newInstance);
-        setQrCodeData(data.qrcode.base64);
-        setQrDialogOpen(true);
-      }
-
-      // Trigger a status check for all instances
-      checkAllInstancesStatus();
-    } catch (error) {
-      console.error("Error creating WhatsApp instance:", error);
-      toast({
-        title: "Erro na criação da instância",
-        description: "Ocorreu um erro ao conectar com a API. Tente novamente mais tarde.",
-        variant: "destructive",
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchQrCode = async (instance: WhatsAppInstance) => {
+  // Handler for when QR code dialog is requested
+  const handleViewQrCode = async (instance: WhatsAppInstance) => {
     setActiveInstance(instance);
-    setLoadingQR(true);
-    setQrError(null);
     setQrDialogOpen(true);
 
     try {
-      const serverUrl = "evolutionapi2.innova1001.com.br";
-      const apiKey = "beeb77fbd7f48f91db2cd539a573c130";
-
-      // Updated endpoint to use instance name instead of instanceId
-      const response = await fetch(`https://${serverUrl}/instance/connect/${encodeURIComponent(instance.instanceName)}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'apikey': apiKey
-        }
-      });
-
-      const data = await response.json();
+      const data = await fetchQrCode(instance.instanceName);
       console.log('QR Code API response:', data);
-
-      if (!response.ok) {
-        throw new Error(data.message || 'Erro ao obter QR Code');
-      }
-
-      // Using the "base64" field from the response as the QR code data
-      if (data && data.base64) {
-        // Save the base64 image data directly - it already contains the data:image prefix
-        setQrCodeData(data.base64);
-      } else {
-        setQrError("QR Code não disponível. A instância pode já estar conectada ou houve um erro na API.");
-      }
+      
+      // If the fetchQrCode call was successful, QrCodeDialog will handle showing the QR code
     } catch (error) {
-      console.error("Error fetching QR code:", error);
-      setQrError("Falha ao obter QR Code. Verifique a conexão ou tente novamente mais tarde.");
+      console.error("Error initiating QR code fetch:", error);
       toast({
         title: "Erro ao obter QR Code",
-        description: "Não foi possível obter o QR Code. Tente novamente mais tarde.",
+        description: "Falha ao iniciar obtenção de QR Code. Tente novamente.",
         variant: "destructive",
       });
-    } finally {
-      setLoadingQR(false);
+      setQrDialogOpen(false);
     }
   };
 
-  const deleteInstance = (instanceId: string) => {
+  // Handler for when an instance is deleted
+  const handleDeleteInstance = (instanceId: string) => {
     setInstances(prevInstances => prevInstances.filter(instance => instance.instanceId !== instanceId));
     // If we're viewing QR code for this instance, close the dialog
     if (activeInstance?.instanceId === instanceId) {
       setQrDialogOpen(false);
     }
     
-    // Update localStorage - need to preserve other users' instances
-    const savedInstances = localStorage.getItem('whatsappInstances');
-    if (savedInstances) {
-      try {
-        const allInstances = JSON.parse(savedInstances);
-        const updatedInstances = allInstances.filter(
-          (instance: WhatsAppInstance) => !(instance.instanceId === instanceId && instance.userId === currentUserId)
-        );
-        localStorage.setItem('whatsappInstances', JSON.stringify(updatedInstances));
-      } catch (error) {
-        console.error("Error updating instances in localStorage:", error);
-      }
-    }
-    
     toast({
       title: "Instância removida",
       description: "A instância do WhatsApp foi removida com sucesso.",
@@ -372,180 +170,22 @@ const WhatsApp = () => {
         </div>
         
         {/* Form to create a new instance */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center mb-2">
-              <MessageCircle className="h-6 w-6 mr-2 text-green-600" />
-              <CardTitle>Vincular WhatsApp ao App</CardTitle>
-            </div>
-            <CardDescription>
-              Preencha os campos abaixo para conectar sua conta WhatsApp
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="instanceName">Nome da Instância</Label>
-              <Input
-                id="instanceName"
-                value={instanceName}
-                onChange={(e) => setInstanceName(e.target.value)}
-                placeholder="Digite um nome para a instância"
-                required
-              />
-              <p className="text-xs text-muted-foreground">O nome será usado para identificar esta conexão</p>
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="phoneNumber">Número do WhatsApp</Label>
-              <Input
-                id="phoneNumber"
-                value={phoneNumber}
-                onChange={(e) => setPhoneNumber(e.target.value)}
-                placeholder="559999999999"
-                required
-              />
-              <p className="text-xs text-muted-foreground">Digite o número com DDD e código do país</p>
-            </div>
-            
-            <Button 
-              className="w-full mt-4" 
-              onClick={createInstance}
-              disabled={loading}
-            >
-              {loading ? "Criando..." : "Criar Instância"}
-            </Button>
-          </CardContent>
-        </Card>
+        <CreateInstanceForm onInstanceCreated={handleInstanceCreated} />
         
         {/* List of created instances */}
-        {instances.length > 0 ? (
-          <div className="space-y-4">
-            <h2 className="text-xl font-semibold">Instâncias Criadas</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {instances.map((instance) => (
-                <Card key={instance.instanceId} className="h-full">
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-lg">{instance.instanceName}</CardTitle>
-                  </CardHeader>
-                  <CardContent className="pb-2">
-                    <div className="space-y-2">
-                      <div className="flex items-center text-sm">
-                        <Smartphone className="h-4 w-4 mr-2 text-gray-500" />
-                        <span>{instance.phoneNumber}</span>
-                      </div>
-                      <div className="flex items-center text-sm">
-                        {instance.connectionState === 'open' ? (
-                          <Badge variant="success" className="flex items-center gap-1">
-                            <span className="inline-block w-2 h-2 rounded-full bg-green-500"></span>
-                            Status: Conectado
-                          </Badge>
-                        ) : (
-                          <Badge variant="outline" className="flex items-center gap-1 text-red-500 border-red-300">
-                            <span className="inline-block w-2 h-2 rounded-full bg-red-500"></span>
-                            Status: Desconectado
-                          </Badge>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                  <CardFooter className="flex justify-between">
-                    <Button 
-                      variant="outline" 
-                      size="sm" 
-                      onClick={() => fetchQrCode(instance)}
-                      className="flex items-center"
-                    >
-                      <QrCode className="h-4 w-4 mr-2" />
-                      Ver QR Code
-                    </Button>
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
-                      onClick={() => deleteInstance(instance.instanceId)}
-                    >
-                      Remover
-                    </Button>
-                  </CardFooter>
-                </Card>
-              ))}
-            </div>
-          </div>
-        ) : (
-          <Card>
-            <CardContent className="py-6">
-              <div className="text-center text-muted-foreground">
-                <p>Nenhuma instância criada ainda.</p>
-                <p className="mt-1">Crie uma instância usando o formulário acima.</p>
-              </div>
-            </CardContent>
-          </Card>
-        )}
+        <InstanceList 
+          instances={instances} 
+          onViewQrCode={handleViewQrCode} 
+          onDelete={handleDeleteInstance} 
+        />
         
         {/* QR Code Dialog */}
-        <Dialog open={qrDialogOpen} onOpenChange={(open) => {
-          // When dialog closes, ensure the instance is still in the list
-          setQrDialogOpen(open);
-          
-          // After dialog closes, trigger status check to update connection state
-          if (!open && instances.length > 0) {
-            checkAllInstancesStatus();
-          }
-        }}>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>Conectar WhatsApp - {activeInstance?.instanceName}</DialogTitle>
-              <DialogDescription>
-                Escaneie o QR Code com seu WhatsApp para finalizar a conexão
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex flex-col items-center space-y-4 py-4">
-              {loadingQR && (
-                <div className="text-center py-8">
-                  <p>Carregando QR Code...</p>
-                </div>
-              )}
-              
-              {qrCodeData && !loadingQR && (
-                <div className="flex flex-col items-center space-y-4">
-                  <div className="border p-4 bg-white rounded-md">
-                    <img 
-                      src={qrCodeData}
-                      alt="QR Code WhatsApp" 
-                      className="w-full h-auto max-w-[250px]" 
-                    />
-                  </div>
-                  <p className="text-sm text-center">
-                    Escaneie este QR Code com seu WhatsApp para finalizar a conexão.
-                  </p>
-                </div>
-              )}
-              
-              {qrError && !loadingQR && (
-                <Alert variant="destructive" className="mb-4">
-                  <AlertDescription>{qrError}</AlertDescription>
-                </Alert>
-              )}
-              
-              <div className="flex space-x-2">
-                {activeInstance && (
-                  <Button 
-                    variant="outline" 
-                    onClick={() => fetchQrCode(activeInstance)} 
-                    disabled={loadingQR}
-                    className="flex items-center"
-                  >
-                    <RefreshCw className="h-4 w-4 mr-2" />
-                    Atualizar QR Code
-                  </Button>
-                )}
-                <Button variant="ghost" onClick={() => setQrDialogOpen(false)}>
-                  Fechar
-                </Button>
-              </div>
-            </div>
-          </DialogContent>
-        </Dialog>
+        <QrCodeDialog 
+          open={qrDialogOpen} 
+          onOpenChange={setQrDialogOpen}
+          activeInstance={activeInstance}
+          onStatusCheck={checkAllInstancesStatus}
+        />
       </div>
     </Layout>
   );
diff --git a/src/services/whatsAppService.ts b/src/services/whatsAppService.ts
new file mode 100644
index 0000000..5dd2358
--- /dev/null
+++ b/src/services/whatsAppService.ts
@@ -0,0 +1,114 @@
+
+import { WhatsAppInstance } from '@/types/whatsAppTypes';
+
+const SERVER_URL = "evolutionapi2.innova1001.com.br";
+const API_KEY = "beeb77fbd7f48f91db2cd539a573c130";
+
+export const createWhatsAppInstance = async (
+  instanceName: string, 
+  phoneNumber: string
+): Promise<any> => {
+  const response = await fetch(`https://${SERVER_URL}/instance/create`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': API_KEY
+    },
+    body: JSON.stringify({
+      instanceName: instanceName,
+      number: phoneNumber,
+      qrcode: true,
+      integration: "WHATSAPP-BAILEYS"
+    })
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.message || 'Erro ao criar instância');
+  }
+
+  return response.json();
+};
+
+export const fetchQrCode = async (instanceName: string): Promise<any> => {
+  const response = await fetch(`https://${SERVER_URL}/instance/connect/${encodeURIComponent(instanceName)}`, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': API_KEY
+    }
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    throw new Error(errorData.message || 'Erro ao obter QR Code');
+  }
+
+  return response.json();
+};
+
+export const fetchConnectionState = async (instanceName: string): Promise<'open' | 'closed' | 'connecting'> => {
+  try {
+    const response = await fetch(`https://${SERVER_URL}/instance/connectionState/${encodeURIComponent(instanceName)}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'apikey': API_KEY
+      }
+    });
+
+    if (!response.ok) {
+      return 'closed';
+    }
+
+    const data = await response.json();
+    return data.instance?.state || 'closed' as 'open' | 'closed' | 'connecting';
+  } catch (error) {
+    console.error("Error fetching connection state:", error);
+    return 'closed';
+  }
+};
+
+export const saveInstancesToLocalStorage = (
+  instances: WhatsAppInstance[], 
+  currentUserId: string
+): void => {
+  // We need to save ALL instances (not just current user's) to maintain everyone's data
+  const savedInstances = localStorage.getItem('whatsappInstances');
+  let allInstances: WhatsAppInstance[] = [];
+  
+  if (savedInstances) {
+    try {
+      const parsedInstances = JSON.parse(savedInstances);
+      // Filter out current user's instances from saved data (we'll add updated ones)
+      allInstances = parsedInstances.filter(
+        (instance: WhatsAppInstance) => instance.userId !== currentUserId
+      );
+    } catch (error) {
+      console.error("Error parsing saved instances:", error);
+    }
+  }
+  
+  // Add current user's instances to the array
+  const updatedInstances = [...allInstances, ...instances];
+  localStorage.setItem('whatsappInstances', JSON.stringify(updatedInstances));
+};
+
+export const loadInstancesFromLocalStorage = (
+  userId: string
+): WhatsAppInstance[] => {
+  const savedInstances = localStorage.getItem('whatsappInstances');
+  if (savedInstances && userId) {
+    try {
+      const allInstances = JSON.parse(savedInstances);
+      // Filter instances to only show those belonging to the current user
+      return allInstances.filter(
+        (instance: WhatsAppInstance) => instance.userId === userId
+      );
+    } catch (error) {
+      console.error("Error parsing saved instances:", error);
+      return [];
+    }
+  }
+  return [];
+};
diff --git a/src/types/whatsAppTypes.ts b/src/types/whatsAppTypes.ts
new file mode 100644
index 0000000..9bf08df
--- /dev/null
+++ b/src/types/whatsAppTypes.ts
@@ -0,0 +1,10 @@
+
+export interface WhatsAppInstance {
+  instanceName: string;
+  instanceId: string;
+  phoneNumber: string;
+  userId: string;
+  status?: string;
+  qrcode?: string;
+  connectionState?: 'open' | 'closed' | 'connecting';
+}