diff --git a/AppImage/app/network/[id]/page.tsx b/AppImage/app/network/[id]/page.tsx
new file mode 100644
index 0000000..8da6e11
--- /dev/null
+++ b/AppImage/app/network/[id]/page.tsx
@@ -0,0 +1,26 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import { NetworkTrafficChart } from "@/components/charts/network-traffic-chart"
+
+const Page = ({ params }) => {
+  const { id } = params
+  const timeframe = "1h" // Example value, you may need to adjust this based on your application logic
+
+  return (
+    <div>
+      {/* Other components or code here */}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Network Traffic</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <NetworkTrafficChart timeframe={timeframe} interfaceName={id} refreshInterval={30000} />
+        </CardContent>
+      </Card>
+
+      {/* Other components or code here */}
+    </div>
+  )
+}
+
+export default Page
diff --git a/AppImage/app/node/[id]/page.tsx b/AppImage/app/node/[id]/page.tsx
new file mode 100644
index 0000000..7840885
--- /dev/null
+++ b/AppImage/app/node/[id]/page.tsx
@@ -0,0 +1,28 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import NetworkTrafficChart from "@/components/NetworkTrafficChart" // Ensure this path is correct
+
+const timeframe = "1h" // Declare timeframe variable
+const handleTotalsCalculated = (totals) => {
+  console.log("Totals calculated:", totals)
+} // Declare handleTotalsCalculated function
+
+export default function Page({ id }) {
+  return (
+    <>
+      {/* ... other code here ... */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Network Traffic</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <NetworkTrafficChart
+            timeframe={timeframe}
+            onTotalsCalculated={handleTotalsCalculated}
+            refreshInterval={30000}
+          />
+        </CardContent>
+      </Card>
+      {/* ... rest of code here ... */}
+    </>
+  )
+}
diff --git a/AppImage/components/network-traffic-chart.tsx b/AppImage/components/network-traffic-chart.tsx
index 7e5c0c0..6fb2907 100644
--- a/AppImage/components/network-traffic-chart.tsx
+++ b/AppImage/components/network-traffic-chart.tsx
@@ -15,7 +15,7 @@ interface NetworkTrafficChartProps {
   timeframe: string
   interfaceName?: string
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
-  refreshInterval?: number // En milisegundos, por defecto 60000 (60 segundos)
+  refreshInterval?: number // En milisegundos, por defecto 30000 (30 segundos)
 }
 
 const CustomNetworkTooltip = ({ active, payload, label }: any) => {
@@ -42,7 +42,7 @@ const NetworkTrafficChartComponent = ({
   timeframe,
   interfaceName,
   onTotalsCalculated,
-  refreshInterval = 60000,
+  refreshInterval = 30000,
 }: NetworkTrafficChartProps) => {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)