diff --git a/application/src/App.tsx b/application/src/App.tsx
index 02a1ba1..cd62250 100644
--- a/application/src/App.tsx
+++ b/application/src/App.tsx
@@ -50,7 +50,7 @@ function App() {
                 <Routes>
                   <Route path="/" element={<Index />} />
                   <Route path="/login" element={<Login />} />
-                  <Route path="/public/:pageId" element={<PublicStatusPage />} />
+                  <Route path="/public/:slug" element={<PublicStatusPage />} />
                   
                   {/* Protected Routes */}
                   <Route path="/dashboard" element={
diff --git a/application/src/components/dashboard/sidebar/navigationData.ts b/application/src/components/dashboard/sidebar/navigationData.ts
index a96035f..f9956c5 100644
--- a/application/src/components/dashboard/sidebar/navigationData.ts
+++ b/application/src/components/dashboard/sidebar/navigationData.ts
@@ -41,14 +41,6 @@ export const mainMenuItems = [
     color: 'text-amber-400',
     hasNavigation: true
   },
-  {
-    id: 'reports',
-    path: null,
-    icon: LineChart,
-    translationKey: 'reports',
-    color: 'text-rose-400',
-    hasNavigation: false
-  },
   {
     id: 'regional-monitoring',
     path: '/regional-monitoring',
@@ -56,6 +48,14 @@ export const mainMenuItems = [
     translationKey: 'regionalMonitoring',
     color: 'text-indigo-400',
     hasNavigation: true
+  },
+  {
+    id: 'reports',
+    path: null,
+    icon: LineChart,
+    translationKey: 'reports',
+    color: 'text-rose-400',
+    hasNavigation: false
   }
 ];
 
diff --git a/application/src/components/operational-page/OperationalPageContent.tsx b/application/src/components/operational-page/OperationalPageContent.tsx
index e222809..d9376ba 100644
--- a/application/src/components/operational-page/OperationalPageContent.tsx
+++ b/application/src/components/operational-page/OperationalPageContent.tsx
@@ -39,8 +39,8 @@ export const OperationalPageContent = () => {
     if (page.custom_domain) {
       window.open(`https://${page.custom_domain}`, '_blank');
     } else {
-      // Navigate to the public status page route
-      window.open(`/status/${page.slug}`, '_blank');
+      // Navigate to the public status page route using the correct format
+      window.open(`/public/${page.slug}`, '_blank');
     }
   };
 
diff --git a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
index 14d8bd4..70caad3 100644
--- a/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
+++ b/application/src/components/regional-monitoring/AddRegionalAgentDialog.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
@@ -54,19 +53,69 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
     }
   };
 
-  const copyToClipboard = async (text: string) => {
+  const copyToClipboard = async (text: string, description: string = "Content") => {
     try {
-      await navigator.clipboard.writeText(text);
-      toast({
-        title: "Copied!",
-        description: "Installation script copied to clipboard.",
-      });
+      // Try the modern clipboard API first
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+        toast({
+          title: "Copied!",
+          description: `${description} copied to clipboard.`,
+        });
+        return;
+      }
+      
+      // Fallback for older browsers or non-secure contexts (like localhost)
+      const textArea = document.createElement('textarea');
+      textArea.value = text;
+      textArea.style.position = 'fixed';
+      textArea.style.left = '-999999px';
+      textArea.style.top = '-999999px';
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      
+      const successful = document.execCommand('copy');
+      document.body.removeChild(textArea);
+      
+      if (successful) {
+        toast({
+          title: "Copied!",
+          description: `${description} copied to clipboard.`,
+        });
+      } else {
+        throw new Error('execCommand failed');
+      }
     } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      
+      // Show the text in a modal or alert as final fallback
+      const userAgent = navigator.userAgent.toLowerCase();
+      const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+      
+      let errorMessage = "Failed to copy to clipboard.";
+      if (isLocalhost) {
+        errorMessage += " This is common in local development. Please manually copy the text.";
+      } else if (userAgent.includes('chrome')) {
+        errorMessage += " Try using HTTPS or enable clipboard permissions.";
+      }
+      
       toast({
         title: "Copy failed",
-        description: "Failed to copy to clipboard.",
+        description: errorMessage,
         variant: "destructive",
       });
+      
+      // As a last resort, select the text for manual copying
+      try {
+        const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
+        if (textarea) {
+          textarea.select();
+          textarea.setSelectionRange(0, 99999); // For mobile devices
+        }
+      } catch (selectError) {
+        console.error('Failed to select text:', selectError);
+      }
     }
   };
 
@@ -89,16 +138,6 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
     });
   };
 
-  const copyOneClickCommand = () => {
-    if (!installCommand) return;
-    
-    const oneClickCommand = `curl -fsSL -H "User-Agent: CheckCle-Installer" \\
-  "data:text/plain;base64,$(echo '${installCommand.bash_script}' | base64 -w 0)" \\
-  | sudo bash`;
-    
-    copyToClipboard(oneClickCommand);
-  };
-
   const handleComplete = () => {
     onAgentAdded();
     setStep(1);
@@ -211,7 +250,7 @@ export const AddRegionalAgentDialog: React.FC<AddRegionalAgentDialogProps> = ({
                         <Textarea
                           readOnly
                           value={`# One-click installation command:
-curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent.sh | sudo bash -s -- \\
+curl -fsSL https://raw.githubusercontent.com/checkcle/scripts/main/install.sh | sudo bash -s -- \\
   --region-name="${regionName}" \\
   --agent-id="${installCommand.agent_id}" \\
   --agent-ip="${agentIp}" \\
@@ -223,7 +262,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                           size="sm"
                           variant="outline"
                           className="absolute top-2 right-2"
-                          onClick={() => copyToClipboard(`curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`)}
+                          onClick={() => copyToClipboard(`curl -fsSL https://raw.githubusercontent.com/checkcle/scripts/main/install.sh | sudo bash -s -- --region-name="${regionName}" --agent-id="${installCommand.agent_id}" --agent-ip="${agentIp}" --token="${installCommand.token}" --pocketbase-url="${installCommand.api_endpoint}"`, "Installation command")}
                         >
                           <Copy className="h-3 w-3" />
                         </Button>
@@ -236,7 +275,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                         Download Complete Script
                       </Button>
                       <Button 
-                        onClick={() => copyToClipboard(installCommand.bash_script)} 
+                        onClick={() => copyToClipboard(installCommand.bash_script, "Installation script")} 
                         variant="outline" 
                         className="flex-1"
                       >
@@ -244,6 +283,16 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                         Copy Full Script
                       </Button>
                     </div>
+
+                    {/* Local development notice */}
+                    {(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') && (
+                      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                        <p className="text-sm text-yellow-800">
+                          <strong>Local Development Notice:</strong> If clipboard copying fails, this is normal in local development. 
+                          You can use the "Download Complete Script" button instead or manually copy the text.
+                        </p>
+                      </div>
+                    )}
                   </CardContent>
                 </Card>
               </TabsContent>
@@ -270,7 +319,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                             size="sm"
                             variant="ghost"
                             className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                            onClick={() => copyToClipboard(installCommand.agent_id)}
+                            onClick={() => copyToClipboard(installCommand.agent_id, "Agent ID")}
                           >
                             <Copy className="h-3 w-3" />
                           </Button>
@@ -314,7 +363,7 @@ curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/regional-agent
                           size="sm"
                           variant="ghost"
                           className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0 hover:bg-muted"
-                          onClick={() => copyToClipboard(installCommand.token)}
+                          onClick={() => copyToClipboard(installCommand.token, "Authentication token")}
                         >
                           <Copy className="h-3 w-3" />
                         </Button>
diff --git a/application/src/components/services/RegionalAgentFilter.tsx b/application/src/components/services/RegionalAgentFilter.tsx
new file mode 100644
index 0000000..f2396cd
--- /dev/null
+++ b/application/src/components/services/RegionalAgentFilter.tsx
@@ -0,0 +1,92 @@
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
+import { MapPin, Loader2, BarChart3 } from "lucide-react";
+
+interface RegionalAgentFilterProps {
+  selectedAgent: string;
+  onAgentChange: (agent: string) => void;
+}
+
+export function RegionalAgentFilter({ selectedAgent, onAgentChange }: RegionalAgentFilterProps) {
+  const { data: regionalAgents = [], isLoading } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+  });
+
+  // Filter only online agents
+  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+
+  const getCurrentAgentDisplay = () => {
+    if (!selectedAgent || selectedAgent === "all") {
+      return "All Monitoring";
+    }
+    
+    const [regionName] = selectedAgent.split("|");
+    const agent = onlineAgents.find(agent => 
+      `${agent.region_name}|${agent.agent_id}` === selectedAgent
+    );
+    
+    if (agent) {
+      return `${agent.region_name} (${agent.agent_ip_address})`;
+    }
+    
+    return regionName || "All Monitoring";
+  };
+
+  return (
+    <div className="w-64">
+      <label className="text-sm font-medium flex items-center gap-2 mb-2">
+        <MapPin className="h-4 w-4" />
+        Monitoring Source
+      </label>
+      <Select 
+        onValueChange={onAgentChange} 
+        value={selectedAgent || "all"}
+        disabled={isLoading}
+      >
+        <SelectTrigger>
+          <SelectValue placeholder={
+            isLoading 
+              ? "Loading agents..." 
+              : getCurrentAgentDisplay()
+          } />
+        </SelectTrigger>
+        <SelectContent>
+          {isLoading ? (
+            <SelectItem value="loading" disabled>
+              <div className="flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Loading agents...
+              </div>
+            </SelectItem>
+          ) : (
+            <>
+              <SelectItem value="all">
+                <div className="flex items-center gap-2">
+                  <BarChart3 className="h-4 w-4 text-purple-500" />
+                  <span className="font-medium">All Monitoring</span>
+                </div>
+              </SelectItem>
+              {onlineAgents.length > 0 && onlineAgents.map((agent) => (
+                <SelectItem key={agent.id} value={`${agent.region_name}|${agent.agent_id}`}>
+                  <div className="flex items-center gap-2">
+                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span className="font-medium">{agent.region_name}</span>
+                    <span className="text-muted-foreground">({agent.agent_ip_address})</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </>
+          )}
+        </SelectContent>
+      </Select>
+      {onlineAgents.length === 0 && !isLoading && (
+        <p className="text-xs text-amber-600 mt-1">
+          No regional agents available. Using default monitoring only.
+        </p>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/application/src/components/services/ResponseTimeChart.tsx b/application/src/components/services/ResponseTimeChart.tsx
index 1383863..a55c596 100644
--- a/application/src/components/services/ResponseTimeChart.tsx
+++ b/application/src/components/services/ResponseTimeChart.tsx
@@ -1,5 +1,5 @@
 
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, LineChart, Line } from "recharts";
 import { UptimeData } from "@/types/service.types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -13,94 +13,290 @@ interface ResponseTimeChartProps {
 export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
   const { theme } = useTheme();
   
+  // Modern color palette for different chart lines (only for All Monitoring)
+  const modernColors = [
+    { stroke: '#3b82f6', fill: 'rgba(59, 130, 246, 0.1)' }, // Blue
+    { stroke: '#10b981', fill: 'rgba(16, 185, 129, 0.1)' }, // Emerald
+    { stroke: '#f59e0b', fill: 'rgba(245, 158, 11, 0.1)' }, // Amber
+    { stroke: '#ef4444', fill: 'rgba(239, 68, 68, 0.1)' }, // Red
+    { stroke: '#8b5cf6', fill: 'rgba(139, 92, 246, 0.1)' }, // Violet
+    { stroke: '#06b6d4', fill: 'rgba(6, 182, 212, 0.1)' }, // Cyan
+    { stroke: '#f97316', fill: 'rgba(249, 115, 22, 0.1)' }, // Orange
+    { stroke: '#84cc16', fill: 'rgba(132, 204, 22, 0.1)' }, // Lime
+  ];
+  
+  // Check if we have data from multiple sources
+  const hasMultipleSources = useMemo(() => {
+    const sources = new Set();
+    uptimeData.forEach(data => {
+      const source = data.source || 'default';
+      sources.add(source);
+    });
+    return sources.size > 1;
+  }, [uptimeData]);
+
   // Format data for the chart with enhanced time formatting
   const chartData = useMemo(() => {
     if (!uptimeData || uptimeData.length === 0) return [];
     
-    // Sort by timestamp ascending (oldest to newest)
-    const sortedData = [...uptimeData].sort((a, b) => 
-      new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
-    );
-    
-    // Get time format based on data density
-    const isShortTimeRange = uptimeData.length > 0 &&
-      (new Date(uptimeData[0].timestamp).getTime() - new Date(uptimeData[uptimeData.length - 1].timestamp).getTime()) < 2 * 60 * 60 * 1000;
-    
-    return sortedData.map(data => {
-      const timestamp = new Date(data.timestamp);
+    if (hasMultipleSources) {
+      // Group data by timestamp for multi-source display
+      const timeGroups = new Map();
       
-      return {
-        time: isShortTimeRange 
-          ? format(timestamp, 'HH:mm:ss') // Include seconds for short time ranges like 60min
-          : format(timestamp, 'HH:mm'),
-        rawTime: timestamp.getTime(),
-        date: format(timestamp, 'MMM dd, yyyy'),
-        value: data.status === "paused" ? null : data.responseTime,
-        status: data.status,
-        // Separate values for different statuses with proper positioning
-        upValue: data.status === "up" ? data.responseTime : null,
-        downValue: data.status === "down" ? data.responseTime : null,
-        warningValue: data.status === "warning" ? data.responseTime : null,
-      };
-    });
-  }, [uptimeData]);
+      uptimeData.forEach(data => {
+        const timestamp = new Date(data.timestamp);
+        // Round to nearest minute for better grouping
+        const roundedTime = new Date(timestamp.getFullYear(), timestamp.getMonth(), timestamp.getDate(), 
+                                   timestamp.getHours(), timestamp.getMinutes());
+        const timeKey = roundedTime.getTime();
+        const source = data.source || 'default';
+        
+        if (!timeGroups.has(timeKey)) {
+          timeGroups.set(timeKey, {
+            time: format(roundedTime, 'HH:mm'),
+            rawTime: timeKey,
+            date: format(roundedTime, 'MMM dd, yyyy'),
+            timestamp: data.timestamp
+          });
+        }
+        
+        const group = timeGroups.get(timeKey);
+        
+        // Handle different data sources properly
+        if (source === 'default') {
+          // Only add pure default if we don't already have regional data with agent_id 1
+          const hasRegionalDefault = uptimeData.some(d => 
+            d.region_name === 'Default' && (d.agent_id === '1' || d.agent_id === 1)
+          );
+          
+          if (!hasRegionalDefault) {
+            group.defaultValue = data.status === "paused" ? null : data.responseTime;
+            group.defaultStatus = data.status;
+          }
+        } else {
+          // Regional monitoring data - distinguish by region and agent
+          const sourceKey = `regional_${source.replace('|', '_')}`;
+          
+          // Group by the same timestamp more accurately
+          const currentValue = group[`${sourceKey}_value`];
+          const newValue = data.status === "paused" ? null : data.responseTime;
+          
+          if (currentValue !== undefined && newValue !== null) {
+            // Average multiple values for the same time slot
+            const count = group[`${sourceKey}_count`] || 1;
+            group[`${sourceKey}_value`] = ((currentValue * count) + newValue) / (count + 1);
+            group[`${sourceKey}_count`] = count + 1;
+          } else if (newValue !== null) {
+            group[`${sourceKey}_value`] = newValue;
+            group[`${sourceKey}_count`] = 1;
+          }
+          
+          group[`${sourceKey}_status`] = data.status;
+          group[`${sourceKey}_label`] = data.region_name || source;
+          group[`${sourceKey}_agent_id`] = data.agent_id;
+        }
+      });
+      
+      return Array.from(timeGroups.values())
+        .sort((a, b) => a.rawTime - b.rawTime)
+        .slice(-50); // Show last 50 data points for better performance
+    } else {
+      // Single source display - use original styling
+      const sortedData = [...uptimeData].sort((a, b) => 
+        new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()
+      );
+      
+      const isShortTimeRange = uptimeData.length > 0 &&
+        (new Date(uptimeData[0].timestamp).getTime() - new Date(uptimeData[uptimeData.length - 1].timestamp).getTime()) < 2 * 60 * 60 * 1000;
+      
+      return sortedData.map(data => {
+        const timestamp = new Date(data.timestamp);
+        
+        return {
+          time: isShortTimeRange 
+            ? format(timestamp, 'HH:mm:ss')
+            : format(timestamp, 'HH:mm'),
+          rawTime: timestamp.getTime(),
+          date: format(timestamp, 'MMM dd, yyyy'),
+          value: data.status === "paused" ? null : data.responseTime,
+          status: data.status,
+          upValue: data.status === "up" ? data.responseTime : null,
+          downValue: data.status === "down" ? data.responseTime : null,
+          warningValue: data.status === "warning" ? data.responseTime : null,
+        };
+      });
+    }
+  }, [uptimeData, hasMultipleSources]);
   
   // Calculate Y-axis domain for better positioning
   const yAxisDomain = useMemo(() => {
-    if (!chartData.length) return ['dataMin - 10', 'dataMax + 10'];
+    if (!chartData.length) return [0, 100];
     
-    const allValues = chartData
-      .filter(d => d.value !== null && d.status !== 'paused')
-      .map(d => d.value);
+    let allValues: number[] = [];
+    
+    if (hasMultipleSources) {
+      chartData.forEach(d => {
+        Object.keys(d).forEach(key => {
+          if (key.endsWith('_value') || key === 'defaultValue') {
+            const value = d[key as keyof typeof d];
+            if (value !== null && value !== undefined && typeof value === 'number') {
+              allValues.push(value);
+            }
+          }
+        });
+      });
+    } else {
+      allValues = chartData
+        .filter(d => d.value !== null && d.status !== 'paused')
+        .map(d => d.value as number)
+        .filter(v => typeof v === 'number');
+    }
     
     if (allValues.length === 0) return [0, 100];
     
     const minValue = Math.min(...allValues);
     const maxValue = Math.max(...allValues);
-    const padding = (maxValue - minValue) * 0.1 || 10;
+    const padding = Math.max((maxValue - minValue) * 0.1, 10);
     
     return [Math.max(0, minValue - padding), maxValue + padding];
-  }, [chartData]);
+  }, [chartData, hasMultipleSources]);
+
+  // Get unique sources for legend with proper labeling and colors
+  const sources = useMemo(() => {
+    if (!hasMultipleSources) return [];
+    
+    const sourceSet = new Set<string>();
+    const sourceInfo = new Map<string, any>();
+    
+    uptimeData.forEach(data => {
+      const source = data.source || 'default';
+      if (source !== 'default') {
+        sourceSet.add(source);
+        sourceInfo.set(source, data);
+      }
+    });
+    
+    const regionalSources = Array.from(sourceSet).map((source, index) => {
+      const data = sourceInfo.get(source);
+      const [regionName, agentId] = source.split('|');
+      
+      // Create proper label with region and agent info
+      let label = regionName;
+      if (data?.agent_id && data.agent_id !== '1') {
+        label = `${regionName} (${data.agent_id})`;
+      } else if (regionName === 'Default' && data?.agent_id === '1') {
+        label = `Default (Agent 1)`;
+      }
+      
+      const colorIndex = index % modernColors.length;
+      
+      return {
+        key: `regional_${source.replace('|', '_')}`,
+        label: label,
+        stroke: modernColors[colorIndex].stroke,
+        fill: modernColors[colorIndex].fill
+      };
+    });
+
+    // Only add pure default monitoring if we have it AND no regional Default with agent_id 1
+    const hasRegionalDefault = uptimeData.some(data => 
+      data.region_name === 'Default' && (data.agent_id === '1' || data.agent_id === 1)
+    );
+    const hasPureDefault = uptimeData.some(data => data.source === 'default');
+    
+    const defaultSources = (hasPureDefault && !hasRegionalDefault) ? [{
+      key: 'default',
+      label: 'Default',
+      stroke: modernColors[regionalSources.length % modernColors.length].stroke,
+      fill: modernColors[regionalSources.length % modernColors.length].fill
+    }] : [];
+
+    return [...defaultSources, ...regionalSources];
+  }, [uptimeData, hasMultipleSources]);
   
   // Create a custom tooltip for the chart
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {
       const data = payload[0].payload;
       
-      // Set background color based on status
-      let statusColor = "bg-emerald-800";
-      let statusText = "Up";
-      
-      if (data.status === "down") {
-        statusColor = "bg-red-800";
-        statusText = "Down";
-      } else if (data.status === "warning") {
-        statusColor = "bg-yellow-800";
-        statusText = "Warning";
-      } else if (data.status === "paused") {
-        statusColor = "bg-gray-800";
-        statusText = "Paused";
-      }
-      
       return (
-        <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} p-2 border ${theme === 'dark' ? 'border-gray-700' : 'border-gray-200'} rounded shadow-md`}>
-          <p className="text-sm font-medium">{label}</p>
-          <p className="text-xs text-muted-foreground">{data.date}</p>
-          <div className={`flex items-center gap-2 mt-1 ${data.status === "paused" ? "opacity-70" : ""}`}>
-            <div className={`w-3 h-3 rounded-full ${statusColor}`}></div>
-            <span>{statusText}</span>
-          </div>
-          <p className="mt-1 font-mono text-sm">
-            {data.status === "paused" ? "Monitoring paused" : 
-             data.value !== null ? `${data.value} ms` : "No data"}
-          </p>
+        <div className={`${theme === 'dark' ? 'bg-gray-900' : 'bg-white'} p-3 border ${theme === 'dark' ? 'border-gray-700' : 'border-gray-200'} rounded shadow-md min-w-48`}>
+          <p className="text-sm font-medium">{String(label)}</p>
+          <p className="text-xs text-muted-foreground mb-2">{String(data.date)}</p>
+          
+          {hasMultipleSources ? (
+            // Multi-source tooltip
+            <div className="space-y-2">
+              {sources.map(source => {
+                const valueKey = source.key === 'default' ? 'defaultValue' : `${source.key}_value`;
+                const statusKey = source.key === 'default' ? 'defaultStatus' : `${source.key}_status`;
+                const value = data[valueKey];
+                const status = data[statusKey];
+                
+                if (value === undefined && status === undefined) return null;
+                
+                let statusColor = "bg-gray-800";
+                let statusText = "No Data";
+                
+                if (status === "up") {
+                  statusColor = "bg-emerald-800";
+                  statusText = "Up";
+                } else if (status === "down") {
+                  statusColor = "bg-red-800";
+                  statusText = "Down";
+                } else if (status === "warning") {
+                  statusColor = "bg-yellow-800";
+                  statusText = "Warning";
+                } else if (status === "paused") {
+                  statusColor = "bg-gray-800";
+                  statusText = "Paused";
+                }
+                
+                return (
+                  <div key={source.key} className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div 
+                        className="w-3 h-3 rounded-full"
+                        style={{ backgroundColor: source.stroke }}
+                      ></div>
+                      <span className="text-xs">{String(source.label)}</span>
+                    </div>
+                    <div className="text-xs font-mono">
+                      {status === "paused" ? "Paused" : 
+                       value !== null && value !== undefined ? `${value} ms` : "No data"}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            // Single source tooltip - showing status with color
+            <>
+              <div className={`flex items-center gap-2 mt-1 ${data.status === "paused" ? "opacity-70" : ""}`}>
+                <div className={`w-3 h-3 rounded-full ${
+                  data.status === "up" ? "bg-emerald-800" :
+                  data.status === "down" ? "bg-red-800" :
+                  data.status === "warning" ? "bg-yellow-800" : "bg-gray-800"
+                }`}></div>
+                <span>{
+                  data.status === "up" ? "Up" :
+                  data.status === "down" ? "Down" :
+                  data.status === "warning" ? "Warning" : "Paused"
+                }</span>
+              </div>
+              <p className="mt-1 font-mono text-sm">
+                {data.status === "paused" ? "Monitoring paused" : 
+                 data.value !== null ? `${data.value} ms` : "No data"}
+              </p>
+            </>
+          )}
         </div>
       );
     }
     return null;
   };
 
-  // Check if we have any data to display - be more lenient by checking raw uptimeData
+  // Check if we have any data to display
   const hasData = uptimeData.length > 0;
   
   // Get date range for display
@@ -130,6 +326,19 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
             </span>
           )}
         </CardTitle>
+        {hasMultipleSources && (
+          <div className="flex flex-wrap gap-4 text-sm">
+            {sources.map(source => (
+              <div key={source.key} className="flex items-center gap-2">
+                <div 
+                  className="w-3 h-3 rounded-full" 
+                  style={{ backgroundColor: source.stroke }}
+                ></div>
+                <span>{String(source.label)}</span>
+              </div>
+            ))}
+          </div>
+        )}
       </CardHeader>
       <CardContent>
         {!hasData ? (
@@ -139,82 +348,140 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
         ) : (
           <div className="h-80">
             <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
-                <defs>
-                  <linearGradient id="colorUp" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#10b981" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#10b981" stopOpacity={0.2}/>
-                  </linearGradient>
-                  <linearGradient id="colorDown" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#ef4444" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#ef4444" stopOpacity={0.2}/>
-                  </linearGradient>
-                  <linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.2}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
-                <XAxis 
-                  dataKey="time" 
-                  stroke={theme === 'dark' ? '#666' : '#9ca3af'}
-                  angle={-45}
-                  textAnchor="end"
-                  tick={{ fontSize: 10 }}
-                  height={60}
-                  interval="preserveStartEnd"
-                  minTickGap={5}
-                />
-                <YAxis 
-                  stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
-                  allowDecimals={false}
-                  domain={yAxisDomain}
-                />
-                <Tooltip content={<CustomTooltip />} />
-                
-                {/* Separate area charts for each status - positioned closer together */}
-                <Area 
-                  type="monotone" 
-                  dataKey="upValue"
-                  stroke="#10b981" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorUp)" 
-                  connectNulls={false}
-                />
-                
-                <Area 
-                  type="monotone" 
-                  dataKey="downValue"
-                  stroke="#ef4444" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorDown)" 
-                  connectNulls={false}
-                />
-                
-                <Area 
-                  type="monotone" 
-                  dataKey="warningValue"
-                  stroke="#f59e0b" 
-                  strokeWidth={2}
-                  fillOpacity={0.4}
-                  fill="url(#colorWarning)" 
-                  connectNulls={false}
-                />
-                
-                {/* Add reference lines for paused periods */}
-                {chartData.map((entry, index) => 
-                  entry.status === 'paused' ? (
-                    <ReferenceLine 
-                      key={`ref-${index}`}
-                      x={entry.time} 
-                      stroke="#9ca3af"
-                      strokeDasharray="3 3"
+              {hasMultipleSources ? (
+                <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
+                  <defs>
+                    {sources.map(source => (
+                      <linearGradient key={`gradient-${source.key}`} id={`gradient-${source.key}`} x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor={source.stroke} stopOpacity={0.3}/>
+                        <stop offset="95%" stopColor={source.stroke} stopOpacity={0.05}/>
+                      </linearGradient>
+                    ))}
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
+                  <XAxis 
+                    dataKey="time" 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'}
+                    angle={-45}
+                    textAnchor="end"
+                    tick={{ fontSize: 10 }}
+                    height={60}
+                    interval="preserveStartEnd"
+                    minTickGap={5}
+                  />
+                  <YAxis 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
+                    allowDecimals={false}
+                    domain={yAxisDomain}
+                  />
+                  <Tooltip content={<CustomTooltip />} />
+                  
+                  {/* Default monitoring area with modern background - only if exists and no regional default */}
+                  {sources.find(s => s.key === 'default') && (
+                    <Area
+                      type="monotone"
+                      dataKey="defaultValue"
+                      stroke={sources.find(s => s.key === 'default')?.stroke}
+                      fill={`url(#gradient-default)`}
+                      strokeWidth={2.5}
+                      dot={false}
+                      connectNulls={false}
+                    />
+                  )}
+                  
+                  {/* Regional monitoring areas with modern backgrounds */}
+                  {sources.filter(s => s.key !== 'default').map((source) => (
+                    <Area
+                      key={source.key}
+                      type="monotone" 
+                      dataKey={`${source.key}_value`}
+                      stroke={source.stroke}
+                      fill={`url(#gradient-${source.key})`}
+                      strokeWidth={2.5}
+                      dot={false}
+                      connectNulls={false}
                     />
-                  ) : null
-                )}
-              </AreaChart>
+                  ))}
+                </AreaChart>
+              ) : (
+                // For single regional agent or default monitoring only - use original AreaChart styling
+                <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 30 }}>
+                  <defs>
+                    <linearGradient id="colorUp" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#10b981" stopOpacity={0.05}/>
+                    </linearGradient>
+                    <linearGradient id="colorDown" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#ef4444" stopOpacity={0.05}/>
+                    </linearGradient>
+                    <linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#f59e0b" stopOpacity={0.05}/>
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke={theme === 'dark' ? '#333' : '#e5e7eb'} />
+                  <XAxis 
+                    dataKey="time" 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'}
+                    angle={-45}
+                    textAnchor="end"
+                    tick={{ fontSize: 10 }}
+                    height={60}
+                    interval="preserveStartEnd"
+                    minTickGap={5}
+                  />
+                  <YAxis 
+                    stroke={theme === 'dark' ? '#666' : '#9ca3af'} 
+                    allowDecimals={false}
+                    domain={yAxisDomain}
+                  />
+                  <Tooltip content={<CustomTooltip />} />
+                  
+                  {/* Original area charts for different statuses with background colors */}
+                  <Area 
+                    type="monotone" 
+                    dataKey="upValue"
+                    stroke="#10b981"
+                    fill="url(#colorUp)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  <Area 
+                    type="monotone" 
+                    dataKey="downValue"
+                    stroke="#ef4444"
+                    fill="url(#colorDown)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  <Area 
+                    type="monotone" 
+                    dataKey="warningValue"
+                    stroke="#f59e0b"
+                    fill="url(#colorWarning)"
+                    strokeWidth={2.5}
+                    dot={false}
+                    connectNulls={false}
+                  />
+                  
+                  {/* Reference lines for paused status */}
+                  {chartData.map((entry, index) => 
+                    entry.status === 'paused' ? (
+                      <ReferenceLine 
+                        key={`ref-${index}`}
+                        x={entry.time} 
+                        stroke="#9ca3af"
+                        strokeDasharray="3 3"
+                      />
+                    ) : null
+                  )}
+                </AreaChart>
+              )}
             </ResponsiveContainer>
           </div>
         )}
diff --git a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
index 8473786..3c96d7f 100644
--- a/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
+++ b/application/src/components/services/ServiceDetailContainer/hooks/useServiceData.tsx
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from "react";
 import { pb } from "@/lib/pocketbase";
 import { Service, UptimeData } from "@/types/service.types";
@@ -6,14 +5,24 @@ import { useToast } from "@/hooks/use-toast";
 import { useNavigate } from "react-router-dom";
 import { uptimeService } from "@/services/uptimeService";
 import { DateRangeOption } from "../../DateRangeFilter";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
 
 export const useServiceData = (serviceId: string | undefined, startDate: Date, endDate: Date) => {
   const [service, setService] = useState<Service | null>(null);
   const [uptimeData, setUptimeData] = useState<UptimeData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [selectedRegionalAgent, setSelectedRegionalAgent] = useState<string>("all");
   const { toast } = useToast();
   const navigate = useNavigate();
 
+  // Get regional agents for "all" monitoring
+  const { data: regionalAgents = [] } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    enabled: selectedRegionalAgent === "all"
+  });
+
   const handleStatusChange = async (newStatus: "up" | "down" | "paused" | "warning") => {
     if (!service || !serviceId) return;
 
@@ -40,14 +49,18 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     }
   };
 
-  const fetchUptimeData = async (serviceId: string, start: Date, end: Date, selectedRange?: DateRangeOption | string) => {
+  const fetchUptimeData = async (serviceId: string, start: Date, end: Date, selectedRange?: DateRangeOption | string, regionalAgent?: string) => {
     try {
       if (!service) {
         console.log('No service data available for uptime fetch');
         return [];
       }
 
-      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}, service type: ${service.type}`);
+      const currentAgent = regionalAgent || selectedRegionalAgent;
+      console.log(`Fetching uptime data: ${start.toISOString()} to ${end.toISOString()} for range: ${selectedRange}, service type: ${service.type}, regional agent: ${currentAgent}`);
+      
+      // Clear existing data immediately when switching agents
+      setUptimeData([]);
       
       let limit = 500; // Default limit
       
@@ -59,15 +72,66 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
       
       console.log(`Using limit ${limit} for range ${selectedRange}`);
       
-      // Use the service type to fetch from the correct collection
-      const history = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
-      console.log(`Retrieved ${history.length} uptime records from collection for ${service.type} service`);
+      let history: UptimeData[] = [];
+      
+      if (currentAgent === "all") {
+        // Fetch data from all sources (default + all online regional agents)
+        console.log(`Fetching data from all monitoring sources`);
+        
+        // Fetch default monitoring data
+        const defaultData = await uptimeService.getUptimeHistory(serviceId, limit, start, end, service.type);
+        console.log(`Retrieved ${defaultData.length} default monitoring records`);
+        
+        // Mark default data with source identifier
+        const markedDefaultData = defaultData.map(record => ({
+          ...record,
+          source: 'default' as const,
+          region_name: undefined,
+          agent_id: undefined
+        }));
+        
+        history = [...markedDefaultData];
+        
+        // Fetch regional monitoring data from all online agents
+        const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+        
+        for (const agent of onlineAgents) {
+          try {
+            const regionalData = await uptimeService.getUptimeHistoryByRegionalAgent(
+              serviceId, limit, start, end, service.type, agent.region_name, agent.agent_id
+            );
+            console.log(`Retrieved ${regionalData.length} records from ${agent.region_name}`);
+            
+            // Mark regional data with source identifier
+            const markedRegionalData = regionalData.map(record => ({
+              ...record,
+              source: `${agent.region_name}|${agent.agent_id}` as const,
+              region_name: agent.region_name,
+              agent_id: agent.agent_id
+            }));
+            
+            history = [...history, ...markedRegionalData];
+          } catch (error) {
+            console.error(`Error fetching data from ${agent.region_name}:`, error);
+          }
+        }
+        
+        console.log(`Total combined records: ${history.length}`);
+        
+      } else {
+        // Fetch regional agent specific data
+        const [regionName, agentId] = currentAgent.split("|");
+        console.log(`Fetching regional agent data for region: ${regionName}, agent: ${agentId} from ${service.type} collection`);
+        history = await uptimeService.getUptimeHistoryByRegionalAgent(serviceId, limit, start, end, service.type, regionName, agentId);
+        console.log(`Retrieved ${history.length} regional monitoring records`);
+      }
       
       // Sort by timestamp (newest first)
       const filteredHistory = [...history].sort((a, b) => 
         new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
       );
       
+      console.log(`Final dataset: ${filteredHistory.length} records for ${currentAgent === "all" ? "all sources" : "regional"} monitoring`);
       setUptimeData(filteredHistory);
       return filteredHistory;
     } catch (error) {
@@ -81,6 +145,20 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     }
   };
 
+  const handleRegionalAgentChange = (agent: string) => {
+    console.log(`Regional agent changed from ${selectedRegionalAgent} to: ${agent}`);
+    
+    // Clear data immediately when switching
+    setUptimeData([]);
+    setSelectedRegionalAgent(agent);
+    
+    // Refetch data with new agent selection
+    if (serviceId && !isLoading && service) {
+      console.log(`Refetching data for new agent: ${agent}`);
+      fetchUptimeData(serviceId, startDate, endDate, '24h', agent);
+    }
+  };
+
   // Initial data loading
   useEffect(() => {
     const fetchServiceData = async () => {
@@ -121,8 +199,8 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
         console.log(`Loaded service: ${formattedService.name} (${formattedService.type})`);
         setService(formattedService);
         
-        // Fetch initial uptime history with 24h default - wait for service to be set
-        await new Promise(resolve => setTimeout(resolve, 100)); // Small delay to ensure state is updated
+        // Small delay to ensure state is updated before fetching uptime data
+        await new Promise(resolve => setTimeout(resolve, 100));
       } catch (error) {
         console.error("Error fetching service:", error);
         toast({
@@ -143,9 +221,9 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
   useEffect(() => {
     if (serviceId && !isLoading && service) {
       console.log(`Date range changed or service loaded, refetching data for ${serviceId}: ${startDate.toISOString()} to ${endDate.toISOString()}`);
-      fetchUptimeData(serviceId, startDate, endDate, '24h');
+      fetchUptimeData(serviceId, startDate, endDate, '24h', selectedRegionalAgent);
     }
-  }, [startDate, endDate, serviceId, isLoading, service]);
+  }, [startDate, endDate, serviceId, isLoading, service, selectedRegionalAgent, regionalAgents]);
 
   return {
     service,
@@ -154,6 +232,8 @@ export const useServiceData = (serviceId: string | undefined, startDate: Date, e
     setUptimeData,
     isLoading,
     handleStatusChange,
-    fetchUptimeData
+    fetchUptimeData,
+    selectedRegionalAgent,
+    handleRegionalAgentChange
   };
 };
\ No newline at end of file
diff --git a/application/src/components/services/ServiceDetailContainer/index.tsx b/application/src/components/services/ServiceDetailContainer/index.tsx
index e23e054..fed6a1d 100644
--- a/application/src/components/services/ServiceDetailContainer/index.tsx
+++ b/application/src/components/services/ServiceDetailContainer/index.tsx
@@ -80,7 +80,9 @@ export const ServiceDetailContainer = () => {
     handleStatusChange,
     fetchUptimeData,
     setService,
-    setUptimeData
+    setUptimeData,
+    selectedRegionalAgent,
+    handleRegionalAgentChange
   } = useServiceData(id, startDate, endDate);
 
   // Set up real-time updates
@@ -104,9 +106,9 @@ export const ServiceDetailContainer = () => {
     // Also explicitly fetch data with the new range to ensure immediate update
     if (id) {
       console.log(`ServiceDetailContainer: Explicitly fetching data for service ${id} with new range`);
-      fetchUptimeData(id, start, end, option);
+      fetchUptimeData(id, start, end, option, selectedRegionalAgent);
     }
-  }, [id, fetchUptimeData]);
+  }, [id, fetchUptimeData, selectedRegionalAgent]);
 
   return (
     <ServiceDetailWrapper
@@ -124,6 +126,8 @@ export const ServiceDetailContainer = () => {
           onDateRangeChange={handleDateRangeChange}
           onStatusChange={handleStatusChange}
           selectedDateOption={selectedRange}
+          selectedRegionalAgent={selectedRegionalAgent}
+          onRegionalAgentChange={handleRegionalAgentChange}
         />
       )}
     </ServiceDetailWrapper>
diff --git a/application/src/components/services/ServiceDetailContent.tsx b/application/src/components/services/ServiceDetailContent.tsx
index fd9aef9..d925312 100644
--- a/application/src/components/services/ServiceDetailContent.tsx
+++ b/application/src/components/services/ServiceDetailContent.tsx
@@ -14,6 +14,8 @@ interface ServiceDetailContentProps {
   onDateRangeChange: (start: Date, end: Date, option: DateRangeOption) => void;
   onStatusChange: (newStatus: "up" | "down" | "paused" | "warning") => void;
   selectedDateOption: DateRangeOption;
+  selectedRegionalAgent: string;
+  onRegionalAgentChange: (agent: string) => void;
 }
 
 export const ServiceDetailContent = ({
@@ -21,28 +23,37 @@ export const ServiceDetailContent = ({
   uptimeData,
   onDateRangeChange,
   onStatusChange,
-  selectedDateOption
+  selectedDateOption,
+  selectedRegionalAgent,
+  onRegionalAgentChange
 }: ServiceDetailContentProps) => {
   // Check if data is available
   const hasUptimeData = uptimeData && uptimeData.length > 0;
   
   return (
     <div className="p-4 md:p-6 pb-0 h-full overflow-auto">
-      <ServiceHeader service={service} onStatusChange={onStatusChange} />
+      <ServiceHeader 
+        service={service} 
+        onStatusChange={onStatusChange}
+        selectedRegionalAgent={selectedRegionalAgent}
+        onRegionalAgentChange={onRegionalAgentChange}
+      />
       <ServiceStatsCards service={service} uptimeData={uptimeData} />
       
-      <div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 md:gap-0">
+      <div className="mb-4 md:mb-6 mt-6 md:mt-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
         <h2 className="text-lg md:text-xl font-medium">Response Time History</h2>
-        <div className="flex flex-col md:flex-row items-start md:items-center gap-2">
-          <span className="text-sm text-muted-foreground">
-            Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' : 
-                        service.type.toLowerCase() === 'dns' ? 'dns_data' : 
-                        service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
-          </span>
-          <DateRangeFilter 
-            onRangeChange={onDateRangeChange} 
-            selectedOption={selectedDateOption} 
-          />
+        <div className="flex flex-col md:flex-row items-start md:items-center gap-4">
+          <div className="flex flex-col md:flex-row items-start md:items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              Collection: {service.type.toLowerCase() === 'ping' || service.type.toLowerCase() === 'icmp' ? 'ping_data' : 
+                          service.type.toLowerCase() === 'dns' ? 'dns_data' : 
+                          service.type.toLowerCase() === 'tcp' ? 'tcp_data' : 'uptime_data'}
+            </span>
+            <DateRangeFilter 
+              onRangeChange={onDateRangeChange} 
+              selectedOption={selectedDateOption} 
+            />
+          </div>
         </div>
       </div>
       
@@ -53,7 +64,8 @@ export const ServiceDetailContent = ({
               <AlertTriangle className="h-10 w-10 md:h-12 md:w-12 text-amber-500 mx-auto mb-2 md:mb-3 opacity-70" />
               <h3 className="text-base md:text-lg font-medium mb-1">No uptime data available</h3>
               <p className="text-muted-foreground max-w-md text-sm md:text-base">
-                There's no monitoring data for this service in the selected time period.
+                There's no monitoring data for this service in the selected time period
+                {selectedRegionalAgent !== "default" ? " from the selected regional agent" : ""}.
                 This could be because the service was recently added or monitoring is paused.
               </p>
             </div>
diff --git a/application/src/components/services/ServiceForm.tsx b/application/src/components/services/ServiceForm.tsx
index 81db0c1..18bc34d 100644
--- a/application/src/components/services/ServiceForm.tsx
+++ b/application/src/components/services/ServiceForm.tsx
@@ -12,6 +12,7 @@ import { ServiceNotificationFields } from "./add-service/ServiceNotificationFiel
 import { ServiceFormActions } from "./add-service/ServiceFormActions";
 import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
+import { ServiceRegionalFields } from "./add-service/ServiceRegionalFields";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -43,6 +44,8 @@ export function ServiceForm({
       retries: "3",
       notificationChannel: "",
       alertTemplate: "",
+      regionalMonitoringEnabled: false,
+      regionalAgent: "",
     },
     mode: "onBlur",
   });
@@ -71,6 +74,11 @@ export function ServiceForm({
         urlValue = initialData.url || "";
       }
 
+      // Handle regional monitoring data - ensure proper assignment display
+      const regionalAgent = initialData.region_name && initialData.agent_id 
+        ? `${initialData.region_name}|${initialData.agent_id}` 
+        : "";
+
       // Reset the form with initial data values
       form.reset({
         name: initialData.name || "",
@@ -81,10 +89,20 @@ export function ServiceForm({
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel === "none" ? "" : initialData.notificationChannel || "",
         alertTemplate: initialData.alertTemplate === "default" ? "" : initialData.alertTemplate || "",
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalAgent: regionalAgent,
       });
 
       // Log for debugging
-      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
+      console.log("Populating form with data:", { 
+        type: validType, 
+        url: urlValue, 
+        port: portValue, 
+        regionalAgent,
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        region_name: initialData.region_name,
+        agent_id: initialData.agent_id
+      });
     }
   }, [initialData, isEdit, form]);
 
@@ -97,6 +115,17 @@ export function ServiceForm({
     try {
       console.log("Form data being submitted:", data); // Debug log for submitted data
       
+      // Parse regional agent selection
+      let regionName = "";
+      let agentId = "";
+      
+      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
+      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
+        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+        regionName = parsedRegionName || "";
+        agentId = parsedAgentId || "";
+      }
+      
       // Prepare service data with proper field mapping
       const serviceData = {
         name: data.name,
@@ -105,6 +134,10 @@ export function ServiceForm({
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel === "none" ? "" : data.notificationChannel,
         alertTemplate: data.alertTemplate === "default" ? "" : data.alertTemplate,
+        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
+        // Always set region_name and agent_id - empty strings when unassigned
+        regionName: regionName,
+        agentId: agentId,
         // Map the URL field to appropriate database field based on service type
         ...(data.type === "dns" 
           ? { domain: data.url, url: "", host: "", port: undefined }  // DNS: store in domain field
@@ -115,6 +148,8 @@ export function ServiceForm({
           : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
         )
       };
+
+      console.log("Service data being sent:", serviceData);
       
       if (isEdit && initialData) {
         // Update existing service
@@ -164,6 +199,11 @@ export function ServiceForm({
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
             <ServiceConfigFields form={form} />
           </div>
+
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <ServiceRegionalFields form={form} />
+          </div>
           
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
diff --git a/application/src/components/services/ServiceHeader.tsx b/application/src/components/services/ServiceHeader.tsx
index d9df6a5..5016297 100644
--- a/application/src/components/services/ServiceHeader.tsx
+++ b/application/src/components/services/ServiceHeader.tsx
@@ -1,9 +1,10 @@
 
-import { ArrowLeft, Globe, MoreVertical, FileText, Github, Twitter, MessageSquare, Bell } from "lucide-react";
+import { ArrowLeft, Globe } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { StatusBadge } from "@/components/services/StatusBadge";
 import { ServiceMonitoringButton } from "@/components/services/ServiceMonitoringButton";
+import { RegionalAgentFilter } from "@/components/services/RegionalAgentFilter";
 import { Service } from "@/types/service.types";
 import { useLanguage } from "@/contexts/LanguageContext";
 import { cn } from "@/lib/utils";
@@ -11,9 +12,16 @@ import { cn } from "@/lib/utils";
 interface ServiceHeaderProps {
   service: Service;
   onStatusChange?: (newStatus: "up" | "down" | "paused" | "warning") => void;
+  selectedRegionalAgent?: string;
+  onRegionalAgentChange?: (agent: string) => void;
 }
 
-export function ServiceHeader({ service, onStatusChange }: ServiceHeaderProps) {
+export function ServiceHeader({ 
+  service, 
+  onStatusChange, 
+  selectedRegionalAgent, 
+  onRegionalAgentChange 
+}: ServiceHeaderProps) {
   const navigate = useNavigate();
   const { t } = useLanguage();
   
@@ -72,12 +80,14 @@ export function ServiceHeader({ service, onStatusChange }: ServiceHeaderProps) {
         <div className="flex items-center space-x-4">
           <StatusBadge status={service.status} size="lg" />
           <ServiceMonitoringButton service={service} onStatusChange={onStatusChange} />
-          <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
-            <span className="sr-only">More options</span>
-            <MoreVertical className="w-4 h-4" />
-          </Button>
+          {selectedRegionalAgent !== undefined && onRegionalAgentChange && (
+            <RegionalAgentFilter 
+              selectedAgent={selectedRegionalAgent}
+              onAgentChange={onRegionalAgentChange}
+            />
+          )}
         </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/application/src/components/services/ServiceHistoryDialog.tsx b/application/src/components/services/ServiceHistoryDialog.tsx
index 7a9830a..efcf8f7 100644
--- a/application/src/components/services/ServiceHistoryDialog.tsx
+++ b/application/src/components/services/ServiceHistoryDialog.tsx
@@ -64,6 +64,7 @@ export const ServiceHistoryDialog = ({
         {selectedService && (
           <ServiceUptimeHistory 
             serviceId={selectedService.id} 
+            serviceType={selectedService.type}
             startDate={startDate}
             endDate={endDate}
           />
@@ -71,4 +72,4 @@ export const ServiceHistoryDialog = ({
       </DialogContent>
     </Dialog>
   );
-};
+};
\ No newline at end of file
diff --git a/application/src/components/services/ServiceRow.tsx b/application/src/components/services/ServiceRow.tsx
index a07dfaf..1340e87 100644
--- a/application/src/components/services/ServiceRow.tsx
+++ b/application/src/components/services/ServiceRow.tsx
@@ -55,7 +55,7 @@ export const ServiceRow = ({
       <TableCell className="py-4">
         <ServiceRowResponseTime responseTime={service.responseTime} />
       </TableCell>
-      <TableCell className="w-52 py-4">
+      <TableCell className="w-60 py-4">
         <UptimeBar 
           uptime={service.uptime} 
           status={service.status} 
diff --git a/application/src/components/services/UptimeBar.tsx b/application/src/components/services/UptimeBar.tsx
index d7854a9..1c00ffe 100644
--- a/application/src/components/services/UptimeBar.tsx
+++ b/application/src/components/services/UptimeBar.tsx
@@ -1,52 +1,137 @@
 
 import React from "react";
-import { TooltipProvider } from "@/components/ui/tooltip";
-import { useUptimeData } from "./hooks/useUptimeData";
-import { UptimeStatusItem } from "./uptime/UptimeStatusItem";
+import { useConsolidatedUptimeData } from "./hooks/useConsolidatedUptimeData";
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 import { UptimeSummary } from "./uptime/UptimeSummary";
-import { UptimeLoadingState } from "./uptime/UptimeLoadingState";
-import { UptimeErrorState } from "./uptime/UptimeErrorState";
+import { formatRelative } from "date-fns";
 
 interface UptimeBarProps {
   uptime: number;
   status: string;
-  serviceId?: string;
-  interval?: number; // Service monitoring interval in seconds
-  serviceType?: string; // Add service type for proper data fetching
+  serviceId: string;
+  interval: number;
+  serviceType?: string;
 }
 
-export const UptimeBar = ({ uptime, status, serviceId, interval = 60, serviceType }: UptimeBarProps) => {
-  const { displayItems, isLoading, error, isFetching, refetch } = useUptimeData({
+export const UptimeBar = ({ uptime, status, serviceId, interval, serviceType }: UptimeBarProps) => {
+  // Use consolidated hook to get properly merged data
+  const { consolidatedItems, isLoading } = useConsolidatedUptimeData({
     serviceId,
     serviceType,
     status,
     interval
   });
 
-  // If still loading and no history, show improved loading state
-  if ((isLoading || isFetching) && displayItems.length === 0) {
-    return <UptimeLoadingState />;
-  }
-  
-  // If there's an error and no history, show improved error state with retry button
-  if (error && displayItems.length === 0) {
-    return <UptimeErrorState uptime={uptime} onRetry={refetch} />;
-  }
-  
-  return (
-    <TooltipProvider delayDuration={300}>
-      <div className="flex flex-col w-full gap-1">
-        <div className="flex items-center space-x-0.5 w-full h-6">
-          {displayItems.map((item, index) => (
-            <UptimeStatusItem 
-              key={item.id || `status-${index}`} 
-              item={item} 
-              index={index}
-            />
+  const getStatusColor = (itemStatus: string, hasData: boolean = true) => {
+    if (!hasData) {
+      return "bg-gray-300"; // No data color
+    }
+    
+    switch (itemStatus) {
+      case "up":
+        return "bg-emerald-500";
+      case "down":
+        return "bg-red-500";
+      case "warning":
+        return "bg-yellow-500";
+      case "paused":
+        return "bg-gray-500"; // Distinct paused color (darker grey)
+      default:
+        return "bg-gray-300"; // Default fallback
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="w-52">
+        <div className="flex items-center gap-1">
+          {Array(20).fill(null).map((_, index) => (
+            <div key={index} className="h-6 w-1 bg-gray-200 rounded animate-pulse" />
           ))}
         </div>
         <UptimeSummary uptime={uptime} interval={interval} />
       </div>
-    </TooltipProvider>
+    );
+  }
+
+  console.log('UptimeBar rendering consolidated items:', consolidatedItems.length);
+
+  return (
+    <div className="w-52">
+      <TooltipProvider>
+        <div className="flex items-center gap-1">
+          {consolidatedItems.map((slot, index) => {
+            // Check if we have actual monitoring data with valid status
+            const hasValidData = slot.items.length > 0 && slot.items.some(item => 
+              item.status && ['up', 'down', 'warning', 'paused'].includes(item.status)
+            );
+
+            // Determine the primary status for bar color (prioritize worst status)
+            let primaryStatus = 'unknown';
+            if (hasValidData) {
+              const statuses = slot.items.map(item => item.status);
+              primaryStatus = statuses.includes('down') ? 'down' :
+                            statuses.includes('warning') ? 'warning' :
+                            statuses.includes('up') ? 'up' : 
+                            statuses.includes('paused') ? 'paused' : 'unknown';
+            }
+
+            console.log(`Bar ${index} - Timestamp: ${slot.timestamp}, Items: ${slot.items.length}, Primary Status: ${primaryStatus}, Has Valid Data: ${hasValidData}`);
+            slot.items.forEach((item, itemIndex) => {
+              console.log(`  Item ${itemIndex}: Source=${item.source}, Status=${item.status}, ResponseTime=${item.responseTime}, IsDefault=${item.isDefault}`);
+            });
+
+            return (
+              <Tooltip key={index}>
+                <TooltipTrigger asChild>
+                  <div 
+                    className={`h-6 w-1 rounded cursor-pointer ${getStatusColor(primaryStatus, hasValidData)}`}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-xs">
+                  <div className="text-sm">
+                    <div className="font-medium mb-2 text-center">
+                      {formatRelative(new Date(slot.timestamp), new Date())}
+                    </div>
+                    {hasValidData ? (
+                      <div className="space-y-2">
+                        {slot.items.map((item, itemIndex) => (
+                          <div key={itemIndex} className="flex items-center justify-between gap-3">
+                            <div className="flex items-center gap-2 min-w-0">
+                              <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                                item.status === 'up' ? 'bg-emerald-500' :
+                                item.status === 'down' ? 'bg-red-500' :
+                                item.status === 'warning' ? 'bg-yellow-500' : 
+                                item.status === 'paused' ? 'bg-gray-500' : 'bg-gray-300'
+                              }`} />
+                              <span className="text-xs font-medium truncate">{item.source}</span>
+                            </div>
+                            <div className="text-xs font-mono text-right flex-shrink-0">
+                              {item.status === 'paused' ? 'Paused' :
+                               item.responseTime && item.responseTime > 0 ? `${item.responseTime}ms` : 
+                               'No response'}
+                            </div>
+                          </div>
+                        ))}
+                        {slot.items.length > 1 && (
+                          <div className="border-t pt-1 mt-2 text-xs text-muted-foreground text-center">
+                            {slot.items.length} monitoring sources
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="text-xs text-muted-foreground text-center">
+                        No monitoring data available
+                      </div>
+                    )}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </TooltipProvider>
+      <UptimeSummary uptime={uptime} interval={interval} />
+    </div>
   );
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/application/src/components/services/add-service/ServiceForm.tsx b/application/src/components/services/add-service/ServiceForm.tsx
index 7e3c1ae..b8b82c2 100644
--- a/application/src/components/services/add-service/ServiceForm.tsx
+++ b/application/src/components/services/add-service/ServiceForm.tsx
@@ -13,6 +13,7 @@ import { ServiceNotificationFields } from "./ServiceNotificationFields";
 import { ServiceFormActions } from "./ServiceFormActions";
 import { serviceService } from "@/services/serviceService";
 import { Service } from "@/types/service.types";
+import { ServiceRegionalFields } from "./ServiceRegionalFields";
 
 interface ServiceFormProps {
   onSuccess: () => void;
@@ -44,6 +45,8 @@ export function ServiceForm({
       retries: "3",
       notificationChannel: "",
       alertTemplate: "",
+      regionalMonitoringEnabled: false,
+      regionalAgent: "",
     },
     mode: "onBlur",
   });
@@ -72,6 +75,11 @@ export function ServiceForm({
         urlValue = initialData.url || "";
       }
 
+      // Handle regional monitoring data - ensure proper assignment display
+      const regionalAgent = initialData.region_name && initialData.agent_id 
+        ? `${initialData.region_name}|${initialData.agent_id}` 
+        : "";
+
       // Reset the form with initial data values
       form.reset({
         name: initialData.name || "",
@@ -82,10 +90,20 @@ export function ServiceForm({
         retries: String(initialData.retries || 3),
         notificationChannel: initialData.notificationChannel || "",
         alertTemplate: initialData.alertTemplate || "",
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        regionalAgent: regionalAgent,
       });
 
       // Log for debugging
-      console.log("Populating form with data:", { type: validType, url: urlValue, port: portValue });
+      console.log("Populating form with data:", { 
+        type: validType, 
+        url: urlValue, 
+        port: portValue, 
+        regionalAgent,
+        regionalMonitoringEnabled: Boolean(initialData.regional_monitoring_enabled),
+        region_name: initialData.region_name,
+        agent_id: initialData.agent_id
+      });
     }
   }, [initialData, isEdit, form]);
 
@@ -98,6 +116,17 @@ export function ServiceForm({
     try {
       console.log("Form data being submitted:", data); // Debug log for submitted data
       
+      // Parse regional agent selection
+      let regionName = "";
+      let agentId = "";
+      
+      // Only set region and agent if regional monitoring is enabled AND an agent is selected (not unassign)
+      if (data.regionalMonitoringEnabled && data.regionalAgent && data.regionalAgent !== "") {
+        const [parsedRegionName, parsedAgentId] = data.regionalAgent.split("|");
+        regionName = parsedRegionName || "";
+        agentId = parsedAgentId || "";
+      }
+      
       // Prepare service data with proper field mapping
       const serviceData = {
         name: data.name,
@@ -106,6 +135,10 @@ export function ServiceForm({
         retries: parseInt(data.retries),
         notificationChannel: data.notificationChannel || undefined,
         alertTemplate: data.alertTemplate || undefined,
+        regionalMonitoringEnabled: data.regionalMonitoringEnabled || false,
+        // Always set region_name and agent_id - empty strings when unassigned
+        regionName: regionName,
+        agentId: agentId,
         // Map the URL field to appropriate database field based on service type
         ...(data.type === "dns" 
           ? { domain: data.url, url: "", host: "", port: undefined }  // DNS: store in domain field
@@ -116,6 +149,8 @@ export function ServiceForm({
           : { url: data.url, domain: "", host: "", port: undefined }  // HTTP: store in url field
         )
       };
+
+      console.log("Service data being sent:", serviceData);
       
       if (isEdit && initialData) {
         // Update existing service
@@ -165,6 +200,11 @@ export function ServiceForm({
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Configuration</h3>
             <ServiceConfigFields form={form} />
           </div>
+
+          <div className="space-y-4">
+            <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Regional Monitoring</h3>
+            <ServiceRegionalFields form={form} />
+          </div>
           
           <div className="space-y-4">
             <h3 className="text-sm font-medium text-muted-foreground border-b pb-2">Notifications</h3>
diff --git a/application/src/components/services/add-service/ServiceRegionalFields.tsx b/application/src/components/services/add-service/ServiceRegionalFields.tsx
new file mode 100644
index 0000000..1ed7045
--- /dev/null
+++ b/application/src/components/services/add-service/ServiceRegionalFields.tsx
@@ -0,0 +1,154 @@
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { UseFormReturn } from "react-hook-form";
+import { ServiceFormData } from "./types";
+import { useQuery } from "@tanstack/react-query";
+import { regionalService } from "@/services/regionalService";
+import { MapPin, Loader2, X } from "lucide-react";
+
+interface ServiceRegionalFieldsProps {
+  form: UseFormReturn<ServiceFormData>;
+}
+
+export function ServiceRegionalFields({ form }: ServiceRegionalFieldsProps) {
+  const regionalMonitoringEnabled = form.watch("regionalMonitoringEnabled");
+  const currentRegionalAgent = form.watch("regionalAgent");
+
+  const { data: regionalAgents = [], isLoading } = useQuery({
+    queryKey: ['regional-services'],
+    queryFn: regionalService.getRegionalServices,
+    enabled: regionalMonitoringEnabled,
+  });
+
+  // Filter only online agents
+  const onlineAgents = regionalAgents.filter(agent => agent.connection === 'online');
+
+  // Find the current agent name for display
+  const getCurrentAgentDisplay = () => {
+    if (!currentRegionalAgent || currentRegionalAgent === "unassign") {
+      return "Select a regional agent or unassign";
+    }
+    
+    const [regionName] = currentRegionalAgent.split("|");
+    const agent = onlineAgents.find(agent => 
+      `${agent.region_name}|${agent.agent_id}` === currentRegionalAgent
+    );
+    
+    if (agent) {
+      return `${agent.region_name} (${agent.agent_ip_address})`;
+    }
+    
+    // If agent is not found in online agents, it might be offline but still assigned
+    return regionName || "Select a regional agent or unassign";
+  };
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="regionalMonitoringEnabled"
+        render={({ field }) => (
+          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <FormLabel className="text-base font-medium flex items-center gap-2">
+                <MapPin className="h-4 w-4" />
+                Regional Monitoring
+              </FormLabel>
+              <div className="text-sm text-muted-foreground">
+                Assign this service to a regional monitoring agent for distributed monitoring
+              </div>
+            </div>
+            <FormControl>
+              <Switch
+                checked={field.value || false}
+                onCheckedChange={field.onChange}
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+
+      {regionalMonitoringEnabled && (
+        <FormField
+          control={form.control}
+          name="regionalAgent"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Regional Agent</FormLabel>
+              <Select 
+                onValueChange={(value) => {
+                  // Handle the unassign case by setting to empty string
+                  field.onChange(value === "unassign" ? "" : value);
+                }} 
+                value={field.value || "unassign"}
+                disabled={isLoading}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder={
+                      isLoading 
+                        ? "Loading agents..." 
+                        : getCurrentAgentDisplay()
+                    } />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {isLoading ? (
+                    <SelectItem value="loading" disabled>
+                      <div className="flex items-center gap-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        Loading agents...
+                      </div>
+                    </SelectItem>
+                  ) : (
+                    <>
+                      <SelectItem value="unassign">
+                        <div className="flex items-center gap-2">
+                          <X className="h-4 w-4 text-red-500" />
+                          <span className="text-red-600">Unassign (No Regional Agent)</span>
+                        </div>
+                      </SelectItem>
+                      {onlineAgents.length === 0 ? (
+                        <SelectItem value="no-agents" disabled>
+                          No online regional agents available
+                        </SelectItem>
+                      ) : (
+                        onlineAgents.map((agent) => (
+                          <SelectItem key={agent.id} value={`${agent.region_name}|${agent.agent_id}`}>
+                            <div className="flex items-center gap-2">
+                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                              <span className="font-medium">{agent.region_name}</span>
+                              <span className="text-muted-foreground">({agent.agent_ip_address})</span>
+                            </div>
+                          </SelectItem>
+                        ))
+                      )}
+                    </>
+                  )}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+              {regionalMonitoringEnabled && onlineAgents.length === 0 && !isLoading && (
+                <p className="text-sm text-amber-600">
+                  No online regional agents found. Services will use default monitoring.
+                </p>
+              )}
+              {currentRegionalAgent && currentRegionalAgent !== "" && currentRegionalAgent !== "unassign" && (
+                <p className="text-sm text-green-600">
+                  Currently assigned to: {getCurrentAgentDisplay()}
+                </p>
+              )}
+              {(!currentRegionalAgent || currentRegionalAgent === "" || currentRegionalAgent === "unassign") && (
+                <p className="text-sm text-orange-600">
+                  Service is unassigned and will use default monitoring.
+                </p>
+              )}
+            </FormItem>
+          )}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/application/src/components/services/add-service/types.ts b/application/src/components/services/add-service/types.ts
index 2aee449..c276e4d 100644
--- a/application/src/components/services/add-service/types.ts
+++ b/application/src/components/services/add-service/types.ts
@@ -13,6 +13,9 @@ export const serviceSchema = z.object({
   retries: z.string(),
   notificationChannel: z.string().optional(),
   alertTemplate: z.string().optional(),
+  // Regional monitoring fields
+  regionalMonitoringEnabled: z.boolean().optional(),
+  regionalAgent: z.string().optional(),
 });
 
 export type ServiceFormData = z.infer<typeof serviceSchema>;
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useConsolidatedUptimeData.ts b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
new file mode 100644
index 0000000..06a1f07
--- /dev/null
+++ b/application/src/components/services/hooks/useConsolidatedUptimeData.ts
@@ -0,0 +1,209 @@
+
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { uptimeService } from '@/services/uptimeService';
+import { UptimeData } from '@/types/service.types';
+
+interface UseConsolidatedUptimeDataProps {
+  serviceId?: string;
+  serviceType?: string;
+  status: string;
+  interval: number;
+}
+
+interface ConsolidatedTimeSlot {
+  timestamp: string;
+  items: Array<UptimeData & { source: string; isDefault: boolean }>;
+}
+
+// Helper function to safely check if a PocketBase field is actually undefined/null
+const isFieldEmpty = (field: any): boolean => {
+  if (field === undefined || field === null) return true;
+  if (typeof field === 'object' && field._type === 'undefined') return true;
+  if (typeof field === 'string' && (field === '' || field === 'undefined')) return true;
+  return false;
+};
+
+// Helper function to safely get field value from PocketBase
+const getFieldValue = (field: any): string | number | null => {
+  if (isFieldEmpty(field)) return null;
+  if (typeof field === 'object' && field.value !== undefined) return field.value;
+  return field;
+};
+
+// Helper function to normalize timestamp to minute precision
+const normalizeTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  // Round down to the nearest minute
+  date.setSeconds(0, 0);
+  return date.toISOString();
+};
+
+export const useConsolidatedUptimeData = ({ serviceId, serviceType, status, interval }: UseConsolidatedUptimeDataProps) => {
+  const [consolidatedItems, setConsolidatedItems] = useState<ConsolidatedTimeSlot[]>([]);
+  
+  // Fetch ALL uptime history data in a single query
+  const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
+    queryKey: ['consolidatedUptimeHistory', serviceId, serviceType],
+    queryFn: async () => {
+      if (!serviceId) {
+        console.log('No serviceId provided, skipping fetch');
+        return [];
+      }
+      console.log(`Fetching consolidated uptime data for service ${serviceId} of type ${serviceType}`);
+      
+      // Get ALL uptime history data - this should include both default and regional data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 100, undefined, undefined, serviceType);
+      
+      console.log(`Retrieved ${rawData.length} total records for service ${serviceId}`);
+      console.log('Raw data sample:', rawData.slice(0, 5).map(d => ({
+        timestamp: d.timestamp,
+        region_name: d.region_name,
+        agent_id: d.agent_id,
+        status: d.status,
+        service_id: d.service_id,
+        response_time: d.responseTime
+      })));
+      
+      return rawData;
+    },
+    enabled: !!serviceId,
+    refetchInterval: 30000,
+    staleTime: 15000,
+    placeholderData: (previousData) => previousData,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+  
+  // Process and consolidate uptime data
+  const processConsolidatedData = (data: UptimeData[]): ConsolidatedTimeSlot[] => {
+    if (!data || data.length === 0) return [];
+    
+    console.log(`Processing ${data.length} uptime records for consolidation`);
+    
+    // Create a map to group records by normalized timestamp (minute precision)
+    const timeSlotMap = new Map<string, Array<UptimeData & { source: string; isDefault: boolean }>>();
+    
+    data.forEach(record => {
+      // Normalize timestamp to minute precision to avoid duplicate bars
+      const normalizedTimestamp = normalizeTimestamp(record.timestamp);
+      
+      // Safely extract region and agent information
+      const regionName = getFieldValue(record.region_name);
+      const agentId = getFieldValue(record.agent_id);
+      
+      // Determine the source name and whether it's default monitoring
+      let sourceName: string;
+      let isDefault: boolean;
+      
+      if (regionName && agentId) {
+        // Regional monitoring data
+        sourceName = `${regionName} (Agent ${agentId})`;
+        isDefault = false;
+        console.log(`Found regional data: ${sourceName} for normalized timestamp ${normalizedTimestamp}`);
+      } else if (agentId && !regionName) {
+        // Default monitoring with specific agent
+        sourceName = `Default (Agent ${agentId})`;
+        isDefault = true;
+        console.log(`Found default monitoring: ${sourceName} for normalized timestamp ${normalizedTimestamp}`);
+      } else {
+        // Default monitoring fallback
+        sourceName = 'Default (Agent 1)';
+        isDefault = true;
+        console.log(`Using fallback default monitoring for normalized timestamp ${normalizedTimestamp}`);
+      }
+      
+      // Get or create the array for this normalized timestamp
+      if (!timeSlotMap.has(normalizedTimestamp)) {
+        timeSlotMap.set(normalizedTimestamp, []);
+      }
+      
+      // Check if we already have an entry from this source for this time slot
+      const existingItems = timeSlotMap.get(normalizedTimestamp)!;
+      const existingFromSource = existingItems.find(item => item.source === sourceName);
+      
+      if (!existingFromSource) {
+        // Add the record with source information only if we don't already have one from this source
+        timeSlotMap.get(normalizedTimestamp)!.push({
+          ...record,
+          timestamp: normalizedTimestamp, // Use normalized timestamp
+          source: sourceName,
+          isDefault
+        });
+        
+        console.log(`Added record to normalized timestamp ${normalizedTimestamp}: Source=${sourceName}, Status=${record.status}, IsDefault=${isDefault}, ResponseTime=${record.responseTime}ms`);
+      } else {
+        console.log(`Skipping duplicate record for source ${sourceName} at timestamp ${normalizedTimestamp}`);
+      }
+    });
+    
+    // Convert map to consolidated time slots and sort by timestamp (newest first)
+    const consolidatedTimeline: ConsolidatedTimeSlot[] = Array.from(timeSlotMap.entries())
+      .map(([timestamp, items]) => ({
+        timestamp,
+        items: items.sort((a, b) => {
+          // Sort so default monitoring appears first
+          if (a.isDefault && !b.isDefault) return -1;
+          if (!a.isDefault && b.isDefault) return 1;
+          return 0;
+        })
+      }))
+      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+      .slice(0, 20); // Take the most recent 20 time slots
+    
+    console.log(`Created ${consolidatedTimeline.length} consolidated time slots with normalized timestamps`);
+    consolidatedTimeline.forEach((slot, index) => {
+      console.log(`Slot ${index} - Normalized Timestamp: ${slot.timestamp}, Items: ${slot.items.length}`);
+      slot.items.forEach((item, itemIndex) => {
+        console.log(`  Item ${itemIndex}: Source=${item.source}, Status=${item.status}, ResponseTime=${item.responseTime}ms, IsDefault=${item.isDefault}`);
+      });
+    });
+    
+    return consolidatedTimeline;
+  };
+  
+  // Update consolidated items when data changes
+  useEffect(() => {
+    if (uptimeData && uptimeData.length > 0) {
+      console.log(`Processing consolidated uptime data for service ${serviceId}`);
+      const processedData = processConsolidatedData(uptimeData);
+      setConsolidatedItems(processedData);
+    } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
+      // Generate placeholder data when no real data is available
+      console.log(`No uptime data available for service ${serviceId}, generating placeholder`);
+      
+      const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
+        ? status 
+        : "paused";
+        
+      const placeholderHistory: ConsolidatedTimeSlot[] = Array(20).fill(null).map((_, index) => {
+        const timestamp = new Date(Date.now() - (index * interval * 1000));
+        timestamp.setSeconds(0, 0); // Normalize to minute precision
+        
+        return {
+          timestamp: timestamp.toISOString(),
+          items: [{
+            id: `placeholder-${serviceId}-${index}`,
+            service_id: serviceId || "",
+            serviceId: serviceId || "",
+            timestamp: timestamp.toISOString(),
+            status: statusValue as "up" | "down" | "warning" | "paused",
+            responseTime: 0,
+            source: 'Default (Agent 1)',
+            isDefault: true
+          }]
+        };
+      });
+      
+      setConsolidatedItems(placeholderHistory);
+    }
+  }, [uptimeData, serviceId, status, interval]);
+
+  return {
+    consolidatedItems,
+    isLoading,
+    error,
+    isFetching,
+    refetch
+  };
+};
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useDefaultUptimeData.ts b/application/src/components/services/hooks/useDefaultUptimeData.ts
new file mode 100644
index 0000000..498bb76
--- /dev/null
+++ b/application/src/components/services/hooks/useDefaultUptimeData.ts
@@ -0,0 +1,180 @@
+
+import { useState, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { uptimeService } from '@/services/uptimeService';
+import { UptimeData } from '@/types/service.types';
+
+interface UseDefaultUptimeDataProps {
+  serviceId?: string;
+  serviceType?: string;
+  status: string;
+  interval: number;
+}
+
+export const useDefaultUptimeData = ({ serviceId, serviceType, status, interval }: UseDefaultUptimeDataProps) => {
+  const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
+  
+  // Fetch ONLY Default (Agent ID 1) uptime history data - NO regional data whatsoever
+  const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
+    queryKey: ['strictDefaultUptimeHistory', serviceId, serviceType],
+    queryFn: async () => {
+      if (!serviceId) {
+        console.log('No serviceId provided, skipping fetch');
+        return [];
+      }
+      console.log(`Fetching STRICT Default (Agent ID 1) uptime data for service ${serviceId} of type ${serviceType}`);
+      
+      // Get raw uptime history data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      
+      // ULTRA-STRICT filtering: ONLY Default monitoring records (Agent ID 1)
+      // This means: NO region_name, NO agent_id, NO regional monitoring whatsoever
+      const strictDefaultData = rawData.filter(record => {
+        // Must have NO regional monitoring info at all
+        const isStrictDefault = (
+          !record.region_name && 
+          !record.agent_id &&
+          record.service_id === serviceId
+        );
+        
+        if (isStrictDefault) {
+          console.log(`✓ ACCEPTED Default record: ${record.id} - ${record.timestamp} - Pure default monitoring`);
+        } else {
+          console.log(`✗ REJECTED non-default record: ${record.id} - region: ${record.region_name || 'none'}, agent: ${record.agent_id || 'none'}`);
+        }
+        
+        return isStrictDefault;
+      });
+      
+      console.log(`ULTRA-STRICT FILTER: Reduced ${rawData.length} records to ${strictDefaultData.length} pure default monitoring records`);
+      return strictDefaultData;
+    },
+    enabled: !!serviceId,
+    refetchInterval: 30000,
+    staleTime: 15000,
+    placeholderData: (previousData) => previousData,
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+  });
+  
+  // Process uptime data with absolute timestamp uniqueness
+  const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
+    if (!data || data.length === 0) return [];
+    
+    console.log(`Processing ${data.length} strict default monitoring records for service ${serviceId}`);
+    
+    // Sort data by timestamp (newest first)
+    const sortedData = [...data].sort((a, b) => 
+      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+    
+    // ABSOLUTE timestamp uniqueness - use Map for O(1) lookup
+    const timestampMap = new Map<string, UptimeData>();
+    
+    sortedData.forEach(record => {
+      const exactTimestamp = record.timestamp;
+      
+      if (!timestampMap.has(exactTimestamp)) {
+        timestampMap.set(exactTimestamp, record);
+        console.log(`✓ Added unique default record: ${record.id} - ${exactTimestamp}`);
+      } else {
+        console.log(`✗ REJECTED absolute duplicate timestamp: ${record.id} - ${exactTimestamp} (exact timestamp match)`);
+      }
+    });
+    
+    // Convert Map back to array and take most recent 20
+    const uniqueRecords = Array.from(timestampMap.values());
+    const recentData = uniqueRecords.slice(0, 20);
+    
+    console.log(`FINAL RESULT: ${recentData.length} absolutely unique default monitoring records`);
+    
+    return recentData;
+  };
+  
+  // Update history items when data changes
+  useEffect(() => {
+    if (uptimeData && uptimeData.length > 0) {
+      console.log(`Received ${uptimeData.length} strict default monitoring records for service ${serviceId}`);
+      const processedData = processUptimeData(uptimeData, interval);
+      setHistoryItems(processedData);
+    } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
+      // Generate placeholder data when no real data is available
+      console.log(`No strict default monitoring data available for service ${serviceId}, generating placeholder`);
+      
+      const statusValue = (status === "up" || status === "down" || status === "warning" || status === "paused") 
+        ? status 
+        : "paused";
+        
+      const placeholderHistory: UptimeData[] = Array(20).fill(null).map((_, index) => ({
+        id: `placeholder-${serviceId}-${index}`,
+        service_id: serviceId || "",
+        serviceId: serviceId || "",
+        timestamp: new Date(Date.now() - (index * interval * 1000)).toISOString(),
+        status: statusValue as "up" | "down" | "warning" | "paused",
+        responseTime: 0
+      }));
+      
+      setHistoryItems(placeholderHistory);
+    }
+  }, [uptimeData, serviceId, status, interval]);
+
+  // Ensure we always have exactly 20 items for consistent display
+  const getDisplayItems = (): UptimeData[] => {
+    const items = [...historyItems];
+    
+    // If we have fewer than 20 items, pad with older placeholder data
+    if (items.length < 20) {
+      const lastItem = items.length > 0 ? items[items.length - 1] : null;
+      const lastStatus = lastItem ? lastItem.status : 
+                        (status === "up" || status === "down" || status === "warning" || status === "paused") ? 
+                        status as "up" | "down" | "warning" | "paused" : "paused";
+      
+      const paddingCount = 20 - items.length;
+      const paddingItems: UptimeData[] = Array(paddingCount).fill(null).map((_, index) => {
+        const baseTime = lastItem ? new Date(lastItem.timestamp).getTime() : Date.now();
+        const timeOffset = (index + 1) * interval * 1000;
+        
+        return {
+          id: `padding-${serviceId}-${index}`,
+          service_id: serviceId || "",
+          serviceId: serviceId || "",
+          timestamp: new Date(baseTime - timeOffset).toISOString(),
+          status: lastStatus,
+          responseTime: 0
+        };
+      });
+      
+      items.push(...paddingItems);
+    }
+
+    // Final absolute validation - use Set for guaranteed uniqueness
+    const finalItems = items.slice(0, 20);
+    const seenTimestamps = new Set<string>();
+    const absolutelyUniqueItems: UptimeData[] = [];
+    
+    finalItems.forEach(item => {
+      if (!seenTimestamps.has(item.timestamp)) {
+        seenTimestamps.add(item.timestamp);
+        absolutelyUniqueItems.push(item);
+      } else {
+        console.log(`FINAL VALIDATION: Removing absolute duplicate timestamp ${item.timestamp} from display`);
+      }
+    });
+
+    // Sort by timestamp (newest first) and ensure exactly 20 items
+    const sortedValidated = absolutelyUniqueItems.sort((a, b) => 
+      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+    );
+    
+    console.log(`DISPLAY READY: ${sortedValidated.length} absolutely validated default monitoring items`);
+    return sortedValidated.slice(0, 20);
+  };
+
+  return {
+    displayItems: getDisplayItems(),
+    isLoading,
+    error,
+    isFetching,
+    refetch
+  };
+};
\ No newline at end of file
diff --git a/application/src/components/services/hooks/useUptimeData.ts b/application/src/components/services/hooks/useUptimeData.ts
index 34f7b88..0bfe235 100644
--- a/application/src/components/services/hooks/useUptimeData.ts
+++ b/application/src/components/services/hooks/useUptimeData.ts
@@ -14,16 +14,24 @@ interface UseUptimeDataProps {
 export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseUptimeDataProps) => {
   const [historyItems, setHistoryItems] = useState<UptimeData[]>([]);
   
-  // Fetch real uptime history data if serviceId is provided
+  // Fetch ALL uptime history data including regional monitoring data
   const { data: uptimeData, isLoading, error, isFetching, refetch } = useQuery({
-    queryKey: ['uptimeHistory', serviceId, serviceType],
-    queryFn: () => {
+    queryKey: ['allUptimeHistory', serviceId, serviceType],
+    queryFn: async () => {
       if (!serviceId) {
         console.log('No serviceId provided, skipping fetch');
-        return Promise.resolve([]);
+        return [];
       }
-      console.log(`Fetching uptime data for service ${serviceId} of type ${serviceType}`);
-      return uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      console.log(`Fetching ALL uptime data for service ${serviceId} of type ${serviceType} - including regional monitoring`);
+      
+      // Get raw uptime history data
+      const rawData = await uptimeService.getUptimeHistory(serviceId, 50, undefined, undefined, serviceType);
+      
+      // Include ALL monitoring data - both default and regional
+      const allMonitoringData = rawData.filter(record => record.service_id === serviceId);
+      
+      console.log(`Retrieved ${rawData.length} total records, filtered to ${allMonitoringData.length} records for service ${serviceId}`);
+      return allMonitoringData;
     },
     enabled: !!serviceId,
     refetchInterval: 30000,
@@ -33,21 +41,21 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
   });
   
-  // Filter and process uptime data
+  // Process uptime data to include both default and regional monitoring
   const processUptimeData = (data: UptimeData[], intervalSeconds: number): UptimeData[] => {
     if (!data || data.length === 0) return [];
     
-    console.log(`Processing ${data.length} uptime records for service ${serviceId}`);
+    console.log(`Processing ${data.length} uptime records (all monitoring data) for service ${serviceId}`);
     
     // Sort data by timestamp (newest first)
     const sortedData = [...data].sort((a, b) => 
       new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
     );
     
-    // Take the most recent 20 records to ensure we have enough data
-    const recentData = sortedData.slice(0, 20);
+    // Take the most recent records to ensure we have enough data for both default and regional
+    const recentData = sortedData.slice(0, 50);
     
-    console.log(`Using ${recentData.length} most recent records`);
+    console.log(`Using ${recentData.length} most recent records including both default and regional monitoring`);
     
     return recentData;
   };
@@ -55,7 +63,7 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
   // Update history items when data changes
   useEffect(() => {
     if (uptimeData && uptimeData.length > 0) {
-      console.log(`Received ${uptimeData.length} uptime records for service ${serviceId}`);
+      console.log(`Received ${uptimeData.length} uptime records (all monitoring) for service ${serviceId}`);
       const processedData = processUptimeData(uptimeData, interval);
       setHistoryItems(processedData);
     } else if (!serviceId || (uptimeData && uptimeData.length === 0)) {
@@ -68,8 +76,8 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
         
       const placeholderHistory: UptimeData[] = Array(20).fill(null).map((_, index) => ({
         id: `placeholder-${serviceId}-${index}`,
-        service_id: serviceId || "", // Include service_id
-        serviceId: serviceId || "", // Keep for backward compatibility
+        service_id: serviceId || "",
+        serviceId: serviceId || "",
         timestamp: new Date(Date.now() - (index * interval * 1000)).toISOString(),
         status: statusValue as "up" | "down" | "warning" | "paused",
         responseTime: 0
@@ -79,39 +87,9 @@ export const useUptimeData = ({ serviceId, serviceType, status, interval }: UseU
     }
   }, [uptimeData, serviceId, status, interval]);
 
-  // Ensure we always have exactly 20 items for consistent display
+  // Return display items - all monitoring data for tooltip usage
   const getDisplayItems = (): UptimeData[] => {
-    const items = [...historyItems];
-    
-    // If we have fewer than 20 items, pad with older placeholder data
-    if (items.length < 20) {
-      const lastItem = items.length > 0 ? items[items.length - 1] : null;
-      const lastStatus = lastItem ? lastItem.status : 
-                        (status === "up" || status === "down" || status === "warning" || status === "paused") ? 
-                        status as "up" | "down" | "warning" | "paused" : "paused";
-      
-      const paddingCount = 20 - items.length;
-      const paddingItems: UptimeData[] = Array(paddingCount).fill(null).map((_, index) => {
-        const baseTime = lastItem ? new Date(lastItem.timestamp).getTime() : Date.now();
-        const timeOffset = (index + 1) * interval * 1000;
-        
-        return {
-          id: `padding-${serviceId}-${index}`,
-          service_id: serviceId || "", // Include service_id
-          serviceId: serviceId || "", // Keep for backward compatibility
-          timestamp: new Date(baseTime - timeOffset).toISOString(),
-          status: lastStatus,
-          responseTime: 0
-        };
-      });
-      
-      items.push(...paddingItems);
-    }
-
-    // Return exactly 20 items, sorted by timestamp (newest first)
-    return items.slice(0, 20).sort((a, b) => 
-      new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-    );
+    return historyItems;
   };
 
   return {
diff --git a/application/src/components/services/uptime/UptimeSummary.tsx b/application/src/components/services/uptime/UptimeSummary.tsx
index 9f4eb4e..aa4e759 100644
--- a/application/src/components/services/uptime/UptimeSummary.tsx
+++ b/application/src/components/services/uptime/UptimeSummary.tsx
@@ -8,12 +8,12 @@ interface UptimeSummaryProps {
 
 export const UptimeSummary = ({ uptime, interval }: UptimeSummaryProps) => {
   return (
-    <div className="flex items-center justify-between text-xs">
+    <div className="flex items-center justify-between text-xs mt-1">
       <span className="text-muted-foreground">
         {Math.round(uptime)}% uptime
       </span>
       <span className="text-xs text-muted-foreground">
-        Last 20 checks 
+        Last 20 checks
       </span>
     </div>
   );
diff --git a/application/src/components/ssl-domain/AddSSLCertificateForm.tsx b/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
index 3cb0a5e..9b21707 100644
--- a/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
+++ b/application/src/components/ssl-domain/AddSSLCertificateForm.tsx
@@ -1,4 +1,3 @@
-
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,7 +18,7 @@ const formSchema = z.object({
   domain: z.string().min(1, "Domain is required"),
   warning_threshold: z.coerce.number().int().min(1).max(365),
   expiry_threshold: z.coerce.number().int().min(1).max(30),
-  notification_channel: z.string().min(1, "Notification channel is required"),
+  notification_channel: z.string().optional(), // Make it optional to allow empty string for "None"
   check_interval: z.coerce.number().int().min(1).max(30).optional()
 });
 
@@ -44,7 +43,7 @@ export const AddSSLCertificateForm = ({
       domain: "",
       warning_threshold: 30,
       expiry_threshold: 7,
-      notification_channel: "",
+      notification_channel: "none",
       check_interval: 1
     }
   });
@@ -66,14 +65,6 @@ export const AddSSLCertificateForm = ({
           return config.enabled === true;
         });
         setAlertConfigs(enabledConfigs);
-        
-        // Set default if available, preferring Telegram channels
-        const telegramChannel = enabledConfigs.find(c => c.notification_type === "telegram");
-        const defaultChannel = telegramChannel || enabledConfigs[0];
-        
-        if (defaultChannel?.id) {
-          form.setValue("notification_channel", defaultChannel.id);
-        }
       } catch (error) {
         console.error("Error fetching notification channels:", error);
         toast.error(t('failedToLoadCertificates'));
@@ -92,7 +83,7 @@ export const AddSSLCertificateForm = ({
         domain: values.domain,
         warning_threshold: values.warning_threshold,
         expiry_threshold: values.expiry_threshold,
-        notification_channel: values.notification_channel,
+        notification_channel: values.notification_channel === "none" ? "" : (values.notification_channel || ""), // Convert "none" to empty string
         check_interval: values.check_interval
       };
       
@@ -180,13 +171,14 @@ export const AddSSLCertificateForm = ({
           render={({ field }) => (
             <FormItem>
               <FormLabel>{t('notificationChannel')}</FormLabel>
-              <Select onValueChange={field.onChange} value={field.value}>
+              <Select onValueChange={field.onChange} value={field.value || "none"}>
                 <FormControl>
                   <SelectTrigger>
                     <SelectValue placeholder={t('chooseChannel')} />
                   </SelectTrigger>
                 </FormControl>
                 <SelectContent>
+                  <SelectItem value="none">{t('none')}</SelectItem>
                   {alertConfigs.length > 0 ? (
                     alertConfigs.map((config) => (
                       <SelectItem key={config.id} value={config.id || ""}>
@@ -196,13 +188,13 @@ export const AddSSLCertificateForm = ({
                   ) : isLoading ? (
                     <SelectItem value="loading" disabled>{t('loadingChannels')}</SelectItem>
                   ) : (
-                    <SelectItem value="none" disabled>{t('noChannelsFound')}</SelectItem>
+                    <SelectItem value="none-disabled" disabled>{t('noChannelsFound')}</SelectItem>
                   )}
                 </SelectContent>
               </Select>
               <FormDescription className="flex items-center gap-1">
                 <Bell className="h-4 w-4" /> 
-                {t('chooseChannel')}
+                {t('whereToSend')}
               </FormDescription>
               <FormMessage />
             </FormItem>
diff --git a/application/src/services/regionalService.ts b/application/src/services/regionalService.ts
index 832caf8..48f4aa3 100644
--- a/application/src/services/regionalService.ts
+++ b/application/src/services/regionalService.ts
@@ -1,4 +1,3 @@
-
 import { pb } from '@/lib/pocketbase';
 import { RegionalService, CreateRegionalServiceParams, InstallCommand } from '@/types/regional.types';
 
@@ -106,7 +105,7 @@ AGENT_TOKEN="${token}"
 POCKETBASE_URL="${apiEndpoint}"
 
 # Base package information
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
@@ -175,14 +174,44 @@ echo "📁 Created temporary directory: $TEMP_DIR"
 # Download the .deb package
 echo "📥 Downloading Regional Monitoring Agent package for $PKG_ARCH..."
 cd "$TEMP_DIR"
-if wget -q --show-progress "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
-    echo "✅ Package downloaded successfully"
-else
+
+# Test if package exists first
+echo "🔍 Checking package availability..."
+if command -v curl >/dev/null 2>&1; then
+    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -I "$PACKAGE_URL")
+    if [ "$HTTP_STATUS" != "200" ]; then
+        echo "❌ Package not found at $PACKAGE_URL (HTTP $HTTP_STATUS)"
+        echo "   Available packages should be:"
+        echo "   - distributed-regional-check-agent_\${PACKAGE_VERSION}_amd64.deb"
+        echo "   - distributed-regional-check-agent_\${PACKAGE_VERSION}_arm64.deb"
+        rm -rf "$TEMP_DIR"
+        exit 1
+    fi
+    echo "✅ Package found, proceeding with download..."
+fi
+
+# Try wget first, then curl as fallback
+DOWNLOAD_SUCCESS=false
+
+if command -v wget >/dev/null 2>&1; then
+    if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using wget"
+    fi
+elif command -v curl >/dev/null 2>&1; then
+    if curl -L --connect-timeout 30 --max-time 300 --retry 3 --retry-delay 2 -o "$PACKAGE_NAME" "$PACKAGE_URL"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using curl"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ]; then
     echo "❌ Failed to download package from $PACKAGE_URL"
     echo "   Please check:"
     echo "   - Internet connection"
     echo "   - Package availability for $PKG_ARCH architecture"
-    echo "   - GitHub repository access"
+    echo "   - GitHub repository access: https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+    echo "   - Firewall/proxy settings"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -222,6 +251,9 @@ fi
 echo ""
 echo "⚙️  Configuring Regional Monitoring Agent..."
 
+# Ensure configuration directory exists
+mkdir -p /etc/regional-check-agent
+
 # Create the environment configuration file
 cat > /etc/regional-check-agent/regional-check-agent.env << EOF
 # Distributed Regional Check Agent Configuration
@@ -232,7 +264,7 @@ PORT=8091
 
 # Operation defaults
 DEFAULT_COUNT=4
-DEFAULT_TIMEOUT=3s
+DEFAULT_TIMEOUT=10s
 MAX_COUNT=20
 MAX_TIMEOUT=30s
 
@@ -258,8 +290,14 @@ EOF
 echo "✅ Configuration file created at /etc/regional-check-agent/regional-check-agent.env"
 
 # Set proper permissions
-chown root:regional-check-agent /etc/regional-check-agent/regional-check-agent.env
-chmod 640 /etc/regional-check-agent/regional-check-agent.env
+if id "regional-check-agent" &>/dev/null; then
+    chown root:regional-check-agent /etc/regional-check-agent/regional-check-agent.env
+    chmod 640 /etc/regional-check-agent/regional-check-agent.env
+else
+    echo "⚠️  regional-check-agent user not found, using root permissions"
+    chown root:root /etc/regional-check-agent/regional-check-agent.env
+    chmod 600 /etc/regional-check-agent/regional-check-agent.env
+fi
 
 # Enable and start the service
 echo ""
diff --git a/application/src/services/serviceService.ts b/application/src/services/serviceService.ts
index 0ed0bf7..fd6c89e 100644
--- a/application/src/services/serviceService.ts
+++ b/application/src/services/serviceService.ts
@@ -32,6 +32,10 @@ export const serviceService = {
         muteAlerts: item.alerts === "muted",  // Convert string to boolean for compatibility
         alerts: item.alerts || "unmuted",     // Store actual database field
         muteChangedAt: item.mute_changed_at,
+        // Regional monitoring fields
+        region_name: item.region_name || "",
+        agent_id: item.agent_id || "",
+        regional_monitoring_enabled: item.regional_monitoring_enabled || false,
       }));
     } catch (error) {
       console.error("Error fetching services:", error);
@@ -58,6 +62,10 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel,
         template_id: params.alertTemplate,
+        // Regional monitoring fields
+        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        region_name: params.regionName || "",
+        agent_id: params.agentId || "",
         // Conditionally add fields based on service type
         ...(serviceType === "dns" 
           ? { domain: params.domain, url: "", host: "", port: null }  // DNS: store in domain field
@@ -90,6 +98,9 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
+        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        region_name: record.region_name || "",
+        agent_id: record.agent_id || "",
       } as Service;
       
       // Immediately start monitoring for the new service
@@ -117,6 +128,10 @@ export const serviceService = {
         max_retries: params.retries,
         notification_id: params.notificationChannel || null,
         template_id: params.alertTemplate || null,
+        // Regional monitoring fields
+        regional_monitoring_enabled: params.regionalMonitoringEnabled || false,
+        region_name: params.regionName || "",
+        agent_id: params.agentId || "",
         // Conditionally update fields based on service type
         ...(serviceType === "dns" 
           ? { domain: params.domain, url: "", host: "", port: null }  // DNS: update domain field
@@ -156,6 +171,9 @@ export const serviceService = {
         retries: record.max_retries || 3,
         notificationChannel: record.notification_id,
         alertTemplate: record.template_id,
+        regional_monitoring_enabled: record.regional_monitoring_enabled || false,
+        region_name: record.region_name || "",
+        agent_id: record.agent_id || "",
       } as Service;
       
       return updatedService;
diff --git a/application/src/services/uptimeService.ts b/application/src/services/uptimeService.ts
index 10fa139..989895a 100644
--- a/application/src/services/uptimeService.ts
+++ b/application/src/services/uptimeService.ts
@@ -70,7 +70,7 @@ export const uptimeService = {
         return [];
       }
 
-      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}`;
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_default`;
       
       // Check cache
       const cached = uptimeCache.get(cacheKey);
@@ -81,7 +81,7 @@ export const uptimeService = {
       
       // Determine the correct collection based on service type
       const collection = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
-      console.log(`Fetching uptime history for service ${serviceId} from collection ${collection}, limit: ${limit}`);
+      console.log(`Fetching default uptime history for service ${serviceId} from collection ${collection}, limit: ${limit}`);
       
       // Build filter to get records for specific service_id
       let filter = `service_id='${serviceId}'`;
@@ -102,11 +102,11 @@ export const uptimeService = {
         $cancelKey: `uptime_history_${serviceId}_${Date.now()}`
       };
       
-      console.log(`Filter query: ${filter} on collection: ${collection}`);
+      console.log(`Filter query for default data: ${filter} on collection: ${collection}`);
       
       const response = await pb.collection(collection).getList(1, limit, options);
       
-      console.log(`Fetched ${response.items.length} uptime records for service ${serviceId} from ${collection}`);
+      console.log(`Fetched ${response.items.length} records for service ${serviceId} from ${collection}`);
       
       if (response.items.length > 0) {
         console.log(`Date range in results: ${response.items[response.items.length - 1].timestamp} to ${response.items[0].timestamp}`);
@@ -117,8 +117,8 @@ export const uptimeService = {
       // Transform the response items to UptimeData format
       const uptimeData = response.items.map(item => ({
         id: item.id,
-        service_id: item.service_id, // Include service_id
-        serviceId: item.service_id, // Keep for backward compatibility
+        service_id: item.service_id,
+        serviceId: item.service_id,
         timestamp: item.timestamp,
         status: item.status as "up" | "down" | "warning" | "paused",
         responseTime: item.response_time || 0,
@@ -140,7 +140,7 @@ export const uptimeService = {
       console.error(`Error fetching uptime history for service ${serviceId}:`, error);
       
       // Try to return cached data as fallback
-      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}`;
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_default`;
       const cached = uptimeCache.get(cacheKey);
       if (cached) {
         console.log(`Using expired cached data for service ${serviceId} due to fetch error`);
@@ -151,5 +151,81 @@ export const uptimeService = {
       console.log(`Returning empty array for service ${serviceId} due to fetch error`);
       return [];
     }
+  },
+
+  async getUptimeHistoryByRegionalAgent(
+    serviceId: string, 
+    limit: number = 50, 
+    startDate?: Date, 
+    endDate?: Date, 
+    serviceType?: string,
+    regionName?: string,
+    agentId?: string
+  ): Promise<UptimeData[]> {
+    try {
+      if (!regionName || !agentId) {
+        console.log('No region name or agent ID provided for regional query');
+        return [];
+      }
+
+      const cacheKey = `uptime_${serviceId}_${limit}_${startDate?.toISOString() || ''}_${endDate?.toISOString() || ''}_${serviceType || 'default'}_${regionName}_${agentId}`;
+      
+      // Check cache
+      const cached = uptimeCache.get(cacheKey);
+      if (cached && (Date.now() - cached.timestamp) < cached.expiresIn) {
+        console.log(`Using cached regional uptime history for service ${serviceId}`);
+        return cached.data;
+      }
+
+      // Determine the correct collection based on service type
+      const collection = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
+      console.log(`Fetching regional uptime history from collection: ${collection} for service: ${serviceId}, region: ${regionName}, agent: ${agentId}`);
+
+      // Build filter for regional agent data
+      let filter = `service_id="${serviceId}" && region_name="${regionName}" && agent_id="${agentId}"`;
+
+      if (startDate && endDate) {
+        const startISO = startDate.toISOString();
+        const endISO = endDate.toISOString();
+        filter += ` && timestamp>="${startISO}" && timestamp<="${endISO}"`;
+      }
+
+      console.log(`Regional filter query: ${filter} on collection: ${collection}`);
+
+      const records = await pb.collection(collection).getList(1, limit, {
+        sort: '-timestamp',
+        filter: filter,
+        $autoCancel: false,
+        $cancelKey: `regional_uptime_history_${serviceId}_${Date.now()}`
+      });
+
+      console.log(`Retrieved ${records.items.length} regional uptime records from ${collection} for region ${regionName}, agent ${agentId}`);
+
+      const uptimeData = records.items.map(item => ({
+        id: item.id,
+        service_id: item.service_id,
+        serviceId: item.service_id,
+        timestamp: item.timestamp,
+        status: item.status as "up" | "down" | "paused" | "warning",
+        responseTime: item.response_time || item.responseTime || 0,
+        error_message: item.error_message,
+        details: item.details,
+        created: item.created,
+        updated: item.updated
+      }));
+
+      // Cache the result
+      uptimeCache.set(cacheKey, {
+        data: uptimeData,
+        timestamp: Date.now(),
+        expiresIn: CACHE_TTL
+      });
+
+      return uptimeData;
+    } catch (error) {
+      const collectionForError = serviceType ? getCollectionForServiceType(serviceType) : 'uptime_data';
+      console.error(`Error fetching regional uptime history from ${collectionForError}:`, error);
+      return [];
+    }
   }
 };
\ No newline at end of file
diff --git a/application/src/types/service.types.ts b/application/src/types/service.types.ts
index b9da956..e2dbc9a 100644
--- a/application/src/types/service.types.ts
+++ b/application/src/types/service.types.ts
@@ -1,4 +1,3 @@
-
 export interface Service {
   id: string;
   name: string;
@@ -32,6 +31,10 @@ export interface Service {
   headers?: string;
   body?: string;
   method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
+  // Regional monitoring fields
+  region_name?: string;
+  agent_id?: string;
+  regional_monitoring_enabled?: boolean;
 }
 
 export interface CreateServiceParams {
@@ -45,6 +48,10 @@ export interface CreateServiceParams {
   retries: number;
   notificationChannel?: string;
   alertTemplate?: string;
+  // Regional monitoring params
+  regionalMonitoringEnabled?: boolean;
+  regionName?: string;
+  agentId?: string;
 }
 
 export interface UptimeData {
@@ -60,6 +67,11 @@ export interface UptimeData {
   updated?: string;
   date?: string; // Keep for backward compatibility
   uptime?: number; // Keep for backward compatibility
+  // Regional monitoring fields
+  region_name?: string;
+  agent_id?: string | number;
+  // Source identifier for multi-source display
+  source?: string;
 }
 
 export interface PingData {
diff --git a/scripts/install-regional-agent.sh b/scripts/install-regional-agent.sh
index ba87228..dbf789d 100644
--- a/scripts/install-regional-agent.sh
+++ b/scripts/install-regional-agent.sh
@@ -3,7 +3,7 @@
 
 # CheckCle Regional Monitoring Agent - Universal Installation Script
 # This script automatically detects system architecture and installs the appropriate package
-# Usage: curl -fsSL https://github.com/operacle/checkcle/blob/main/scripts/install-regional-agent.sh | sudo bash -s -- [options]
+# Usage: curl -fsSL https://raw.githubusercontent.com/operacle/checkcle/main/scripts/install-regional-agent.sh | sudo bash -s -- [options]
 
 set -e
 
@@ -13,7 +13,7 @@ AGENT_ID=""
 AGENT_IP_ADDRESS=""
 AGENT_TOKEN=""
 POCKETBASE_URL=""
-BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+BASE_PACKAGE_URL="https://github.com/operacle/Distributed-Regional-Monitoring/releases/download/V1.0.0"
 PACKAGE_VERSION="1.0.0"
 SERVICE_NAME="regional-check-agent"
 
@@ -149,8 +149,8 @@ echo ""
 echo "🔧 Checking system requirements..."
 MISSING_TOOLS=()
 
-if ! command -v wget >/dev/null 2>&1; then
-    MISSING_TOOLS+=("wget")
+if ! command -v wget >/dev/null 2>&1 && ! command -v curl >/dev/null 2>&1; then
+    MISSING_TOOLS+=("wget or curl")
 fi
 
 if ! command -v dpkg >/dev/null 2>&1; then
@@ -164,7 +164,7 @@ fi
 if [ ${#MISSING_TOOLS[@]} -ne 0 ]; then
     echo "❌ Missing required tools: ${MISSING_TOOLS[*]}"
     echo "   Please install missing tools and try again"
-    echo "   On Debian/Ubuntu: sudo apt-get update && sudo apt-get install wget"
+    echo "   On Debian/Ubuntu: sudo apt-get update && sudo apt-get install wget curl"
     exit 1
 fi
 
@@ -179,15 +179,62 @@ echo ""
 echo "📥 Downloading Regional Monitoring Agent package for $PKG_ARCH..."
 cd "$TEMP_DIR"
 
-if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
-    echo "✅ Package downloaded successfully"
-else
+# Test if package exists first - Accept both 200 and 302 (redirect) as success
+echo "🔍 Checking package availability..."
+if command -v curl >/dev/null 2>&1; then
+    HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -I "$PACKAGE_URL")
+    if [ "$HTTP_STATUS" != "200" ] && [ "$HTTP_STATUS" != "302" ]; then
+        echo "❌ Package not found at $PACKAGE_URL (HTTP $HTTP_STATUS)"
+        echo "   Available packages should be:"
+        echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_amd64.deb"
+        echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
+        echo ""
+        echo "   Please check the GitHub releases page:"
+        echo "   https://github.com/operacle/Distributed-Regional-Monitoring/releases"
+        rm -rf "$TEMP_DIR"
+        exit 1
+    fi
+    echo "✅ Package found (HTTP $HTTP_STATUS), proceeding with download..."
+fi
+
+# Try wget first, then curl as fallback
+DOWNLOAD_SUCCESS=false
+
+if command -v wget >/dev/null 2>&1; then
+    echo "📥 Downloading with wget..."
+    if wget -q --show-progress --timeout=30 --tries=3 "$PACKAGE_URL" -O "$PACKAGE_NAME"; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using wget"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ] && command -v curl >/dev/null 2>&1; then
+    echo "📥 Downloading with curl..."
+    if curl -L --connect-timeout 30 --max-time 300 --retry 3 --retry-delay 2 -o "$PACKAGE_NAME" "$PACKAGE_URL" --progress-bar; then
+        DOWNLOAD_SUCCESS=true
+        echo "✅ Package downloaded successfully using curl"
+    fi
+fi
+
+if [ "$DOWNLOAD_SUCCESS" = false ]; then
     echo "❌ Failed to download package from $PACKAGE_URL"
     echo "   Please check:"
     echo "   - Internet connection"
     echo "   - Package availability for $PKG_ARCH architecture"
-    echo "   - GitHub repository access"
+    echo "   - GitHub repository access: https://github.com/operacle/Distributed-Regional-Monitoring/releases"
     echo "   - Firewall/proxy settings"
+    echo ""
+    echo "   Available packages should be:"
+    echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_amd64.deb"
+    echo "   - distributed-regional-check-agent_${PACKAGE_VERSION}_arm64.deb"
+    rm -rf "$TEMP_DIR"
+    exit 1
+fi
+
+# Verify download was successful
+if [ ! -f "$PACKAGE_NAME" ] || [ ! -s "$PACKAGE_NAME" ]; then
+    echo "❌ Downloaded package is empty or missing"
+    echo "   File size: $(ls -lh "$PACKAGE_NAME" 2>/dev/null | awk '{print $5}' || echo 'file not found')"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -203,6 +250,8 @@ if dpkg-deb --info "$PACKAGE_NAME" > /dev/null 2>&1; then
     dpkg-deb --field "$PACKAGE_NAME" Package Version Architecture Description | head -4
 else
     echo "❌ Package verification failed - corrupted download"
+    echo "   File size: $(ls -lh "$PACKAGE_NAME" | awk '{print $5}')"
+    echo "   Try downloading manually from: $PACKAGE_URL"
     rm -rf "$TEMP_DIR"
     exit 1
 fi
@@ -227,7 +276,7 @@ else
         echo "   Manual resolution:"
         echo "   1. Run: sudo apt-get update"
         echo "   2. Run: sudo apt-get install -f"
-        echo "   3. Retry installation"
+        echo "   3. Retry installation: sudo dpkg -i $PACKAGE_NAME"
         rm -rf "$TEMP_DIR"
         exit 1
     fi
@@ -379,7 +428,7 @@ echo "🔧 Troubleshooting:"
 echo "   If the service fails to start:"
 echo "   1. Check logs: sudo journalctl -u $SERVICE_NAME -n 50"
 echo "   2. Verify config: cat /etc/regional-check-agent/regional-check-agent.env"
-echo "   3. Test connectivity: ping $POCKETBASE_URL"
+echo "   3. Test connectivity: ping $(echo $POCKETBASE_URL | sed 's|https\?://||' | sed 's|/.*||')"
 echo "   4. Check port availability: sudo netstat -tlnp | grep 8091"
 echo ""
 echo "✨ The agent is now monitoring and reporting to your CheckCle dashboard!"
\ No newline at end of file