diff --git a/AppImage/components/hardware.tsx b/AppImage/components/hardware.tsx
index 15db5a0..8bb8e9d 100644
--- a/AppImage/components/hardware.tsx
+++ b/AppImage/components/hardware.tsx
@@ -21,6 +21,7 @@ import {
 import useSWR from "swr"
 import { useState, useEffect } from "react"
 import { type HardwareData, type GPU, type PCIDevice, type StorageDevice, fetcher } from "../types/hardware"
+import { API_PORT } from "@/lib/api-config"
 
 const parseLsblkSize = (sizeStr: string | undefined): number => {
   if (!sizeStr) return 0
@@ -247,7 +248,7 @@ export default function Hardware() {
 
         const apiUrl = isStandardPort
           ? `/api/gpu/${fullSlot}/realtime`
-          : `${protocol}//${hostname}:8008/api/gpu/${fullSlot}/realtime`
+          : `${protocol}//${hostname}:${API_PORT}/api/gpu/${fullSlot}/realtime`
 
         const response = await fetch(apiUrl, {
           method: "GET",
diff --git a/AppImage/components/metrics-dialog.tsx b/AppImage/components/metrics-dialog.tsx
index b8c1c31..c6f521a 100644
--- a/AppImage/components/metrics-dialog.tsx
+++ b/AppImage/components/metrics-dialog.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ArrowLeft, Loader2 } from "lucide-react"
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
+import { API_PORT } from "@/lib/api-config"
 
 interface MetricsViewProps {
   vmid: number
@@ -121,7 +122,7 @@ export function MetricsView({ vmid, vmName, vmType, onBack }: MetricsViewProps)
       const { protocol, hostname, port } = window.location
       const isStandardPort = port === "" || port === "80" || port === "443"
 
-      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:${API_PORT}`
 
       const apiUrl = `${baseUrl}/api/vms/${vmid}/metrics?timeframe=${timeframe}`
 
diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx
index a1576f3..a093c41 100644
--- a/AppImage/components/network-traffic-chart.tsx
+++ b/AppImage/components/network-traffic-chart.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react"
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
 import { Loader2 } from "lucide-react"
+import { API_PORT } from "@/lib/api-config"
 
 interface NetworkMetricsData {
   time: string
@@ -78,7 +79,7 @@ export function NetworkTrafficChart({
       const { protocol, hostname, port } = window.location
       const isStandardPort = port === "" || port === "80" || port === "443"
 
-      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:${API_PORT}`
 
       const apiUrl = interfaceName
         ? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}`
diff --git a/AppImage/components/node-metrics-charts.tsx b/AppImage/components/node-metrics-charts.tsx
index 138551b..40be442 100644
--- a/AppImage/components/node-metrics-charts.tsx
+++ b/AppImage/components/node-metrics-charts.tsx
@@ -6,6 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
 import { Loader2, TrendingUp, MemoryStick } from "lucide-react"
 import { useIsMobile } from "../hooks/use-mobile"
+import { API_PORT } from "@/lib/api-config"
 
 const TIMEFRAME_OPTIONS = [
   { value: "hour", label: "1 Hour" },
@@ -91,7 +92,7 @@ export function NodeMetricsCharts() {
       const { protocol, hostname, port } = window.location
       const isStandardPort = port === "" || port === "80" || port === "443"
 
-      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:8008`
+      const baseUrl = isStandardPort ? "" : `${protocol}//${hostname}:${API_PORT}`
 
       const apiUrl = `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
 
diff --git a/AppImage/components/system-logs.tsx b/AppImage/components/system-logs.tsx
index 51e423b..4579283 100644
--- a/AppImage/components/system-logs.tsx
+++ b/AppImage/components/system-logs.tsx
@@ -9,6 +9,7 @@ import { ScrollArea } from "./ui/scroll-area"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet"
+import { API_PORT } from "@/lib/api-config"
 import {
   FileText,
   Search,
@@ -131,10 +132,10 @@ export function SystemLogs() {
       if (isStandardPort) {
         return endpoint
       } else {
-        return `${protocol}//${hostname}:8008${endpoint}`
+        return `${protocol}//${hostname}:${API_PORT}${endpoint}`
       }
     }
-    return `${protocol}//${hostname}:8008${endpoint}`
+    return `${protocol}//${hostname}:${API_PORT}${endpoint}`
   }
 
   useEffect(() => {