diff --git a/package.json b/package.json
index fb9ac4e..75383b6 100644
--- a/package.json
+++ b/package.json
@@ -68,8 +68,6 @@
     "@node-rs/argon2": "^2.0.2",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
     "drizzle-orm": "^0.43.1",
     "mqtt": "^5.13.1",
     "postgres": "^3.4.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8adcf8..7918f60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,12 +17,6 @@ importers:
       '@oslojs/encoding':
         specifier: ^1.1.0
         version: 1.1.0
-      d3-scale:
-        specifier: ^4.0.2
-        version: 4.0.2
-      d3-shape:
-        specifier: ^3.2.0
-        version: 3.2.0
       drizzle-orm:
         specifier: ^0.43.1
         version: 0.43.1(postgres@3.4.5)
diff --git a/src/lib/server/db/schema.js b/src/lib/server/db/schema.js
index e048caa..0ae02ed 100644
--- a/src/lib/server/db/schema.js
+++ b/src/lib/server/db/schema.js
@@ -34,7 +34,7 @@ export const sensors = pgTable("sensors", {
 });
 
 export const sensorData = pgTable("sensor_data", {
-  uuid: uuid().primaryKey().defaultRandom(),
+  uuid: uuid().primaryKey(),
   sensor: text("sensor")
     .references(() => sensors.id)
     .notNull(),
@@ -42,5 +42,4 @@ export const sensorData = pgTable("sensor_data", {
   humidity: real().notNull(),
   pressure: real().notNull(),
   altitude: real().notNull(),
-  time: timestamp({ withTimezone: true, mode: "date" }).notNull().defaultNow(),
 });
diff --git a/src/lib/server/mqtt-devices.js b/src/lib/server/mqtt-devices.js
deleted file mode 100644
index 8445506..0000000
--- a/src/lib/server/mqtt-devices.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// src/lib/server/mqtt-devices.js
-// This module provides access to MQTT device data for other parts of the application
-
-// We'll import the maps directly from the MQTT server module
-
-let connectedDevices = new Map();
-let deviceSensorData = new Map();
-
-// Export the maps so the MQTT server can set them
-export { connectedDevices, deviceSensorData };
-
-// Clean up offline devices (not seen in last 5 minutes)
-function cleanupDevices() {
-  const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
-  let updated = false;
-
-  for (const [deviceId, device] of connectedDevices.entries()) {
-    if (device.lastSeen < fiveMinutesAgo && device.status === "online") {
-      connectedDevices.set(deviceId, { ...device, status: "offline" });
-      updated = true;
-    }
-  }
-
-  return updated;
-}
-
-// Export function to get current devices
-export function getCurrentDevices() {
-  cleanupDevices();
-  return Array.from(connectedDevices.values()).map((device) => {
-    const sensorData = deviceSensorData.get(device.id);
-    return {
-      ...device,
-      sensorData: sensorData || null,
-    };
-  });
-}
-
-// Export function to get sensor data for a specific device
-export function getDeviceSensorData(deviceId) {
-  return deviceSensorData.get(deviceId) || null;
-}
diff --git a/src/routes/(app)/[slug]/+page.server.ts b/src/routes/(app)/[slug]/+page.server.ts
index 8ce7412..4488322 100644
--- a/src/routes/(app)/[slug]/+page.server.ts
+++ b/src/routes/(app)/[slug]/+page.server.ts
@@ -3,74 +3,35 @@ import * as table from "$lib/server/db/schema";
 import { eq } from "drizzle-orm";
 import type { PageServerLoad } from "./$types";
 import { connect } from "mqtt";
-import { getDeviceSensorData } from "$lib/server/mqtt-devices.js";
 
 export const load: PageServerLoad = async ({ params }) => {
-  // Convert slug to number for floor lookup
-  const floorNumber = Number(params.slug);
-  
-  // First check if we have a saved floor configuration in the floors table
-  const floorData = await db.select({ 
-    floor: table.floors.floor, 
-    url: table.floors.url 
-  }).from(table.floors).where(eq(table.floors.floor, floorNumber));
-  
-  if (floorData.length > 0 && floorData[0].url && floorData[0].url !== "/") {
-    try {
-      // Try to parse the saved configuration
-      const config = JSON.parse(floorData[0].url);
-      
-      // Add real sensor data to devices
-      if (config.devices) {
-        config.devices = config.devices.map(device => {
-          const sensorData = getDeviceSensorData(device.id);
-          return {
-            ...device,
-            sensorData: sensorData
-          };
-        });
-      }
-      
-      return { 
-        slug: params.slug, 
-        floorConfig: config,
-        hasConfig: true 
-      };
-    } catch (e) {
-      console.error("Error parsing floor configuration:", e);
+  {
+    const floor_cnt = await db.select({ floor: table.plans.floor, json: table.plans.plan }).from(table.plans).where(eq(table.plans.floor, params.slug));
+    if (floor_cnt.length == 0) {
+      await db.insert(table.plans).values({ floor: params.slug, plan: {
+        "regions": [
+          { "start": { "x": 100, "y": 100 }, "end": { "x": 400, "y": 100 } },
+          { "start": { "x": 400, "y": 100 }, "end": { "x": 400, "y": 300 } },
+          { "start": { "x": 400, "y": 300 }, "end": { "x": 100, "y": 300 } },
+          { "start": { "x": 100, "y": 300 }, "end": { "x": 100, "y": 100 } }
+        ],
+        "doors": [
+          { "location": { "x": 240, "y": 100 }, "width": 50, "rotation": 0 }
+        ],
+        "furnitures": [
+          {
+            "minBound": { "x": 150, "y": 150 },
+            "maxBound": { "x": 200, "y": 200 },
+            "equipName": "Table",
+            "xPlacement": 150,
+            "yPlacement": 150,
+            "rotation": 0
+          }
+        ]
+      }});
     }
+
   }
-  
-  // Fallback to the old canvas drawing system
-  const floor_cnt = await db.select({ floor: table.plans.floor, json: table.plans.plan }).from(table.plans).where(eq(table.plans.floor, params.slug));
-  if (floor_cnt.length == 0) {
-    await db.insert(table.plans).values({ floor: params.slug, plan: {
-      "regions": [
-        { "start": { "x": 100, "y": 100 }, "end": { "x": 400, "y": 100 } },
-        { "start": { "x": 400, "y": 100 }, "end": { "x": 400, "y": 300 } },
-        { "start": { "x": 400, "y": 300 }, "end": { "x": 100, "y": 300 } },
-        { "start": { "x": 100, "y": 300 }, "end": { "x": 100, "y": 100 } }
-      ],
-      "doors": [
-        { "location": { "x": 240, "y": 100 }, "width": 50, "rotation": 0 }
-      ],
-      "furnitures": [
-        {
-          "minBound": { "x": 150, "y": 150 },
-          "maxBound": { "x": 200, "y": 200 },
-          "equipName": "Table",
-          "xPlacement": 150,
-          "yPlacement": 150,
-          "rotation": 0
-        }
-      ]
-    }});
-  }
-  
   const floor_ = await db.select({ floor: table.plans.floor, json: table.plans.plan }).from(table.plans).where(eq(table.plans.floor, params.slug));
-  return { 
-    slug: params.slug, 
-    floor: floor_,
-    hasConfig: false 
-  };
+  return { slug: params.slug, floor: floor_ };
 };
diff --git a/src/routes/(app)/[slug]/+page.svelte b/src/routes/(app)/[slug]/+page.svelte
index 6491725..2f90051 100644
--- a/src/routes/(app)/[slug]/+page.svelte
+++ b/src/routes/(app)/[slug]/+page.svelte
@@ -1,59 +1,26 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
-  import { Thermometer, Droplets, Gauge, Mountain, Cpu, DownloadIcon } from "@lucide/svelte";
-  import { Button, buttonVariants } from "$lib/components/ui/button/index.js";
-  import { Input } from "$lib/components/ui/input/index.js";
-  import { Label } from "$lib/components/ui/label/index.js";
-  import * as Dialog from "$lib/components/ui/dialog/index.js";
 
   const { data } = $props();
 
   let mqttMessage = $state("Waiting for MQTT message...");
   let eventSource;
-  let deviceSensorData = $state(new Map());
-  let refreshInterval;
 
   onMount(() => {
     // Connect to the SSE endpoint
-    console.log("Attempting to connect to MQTT SSE...");
     eventSource = new EventSource("/mqtt");
 
     eventSource.onopen = () => {
-      console.log("SSE connection opened successfully!");
+      console.log("SSE connection opened.");
     };
 
     eventSource.onmessage = (event) => {
-      if (eventSource.readyState !== EventSource.OPEN) {
-        console.log("Floor page: Received message but connection is not open, ignoring");
-        return;
-      }
-
       try {
-        const messageData = JSON.parse(event.data);
-        console.log("Floor page received SSE data:", messageData);
-
-        // Handle device updates
-        if (messageData.devices) {
-          console.log("Received devices:", messageData.devices);
-          const newData = new Map();
-          messageData.devices.forEach((device) => {
-            console.log(`Device ${device.id} has sensor data:`, device.sensorData);
-            if (device.sensorData) {
-              newData.set(device.id, device.sensorData);
-            }
-          });
-          deviceSensorData = newData;
-          console.log("Updated deviceSensorData:", deviceSensorData);
-        }
-
-        // Handle MQTT message if present
-        if (messageData.message) {
-          mqttMessage = messageData.message;
-        } else {
-          mqttMessage = `Last update: ${messageData.timestamp}`;
-        }
+        const data = JSON.parse(event.data);
+        mqttMessage = data.message;
+        console.log("Received SSE message:", mqttMessage);
       } catch (e) {
-        console.error("Floor page: Error parsing SSE message:", e, "Raw data:", event.data);
+        console.error("Error parsing SSE message:", e);
       }
     };
 
@@ -64,16 +31,13 @@
   });
 
   onDestroy(() => {
-    if (eventSource && eventSource.readyState !== EventSource.CLOSED) {
-      console.log("Floor page: Closing SSE connection");
-      eventSource.close();
-    }
-    if (refreshInterval) {
-      clearInterval(refreshInterval);
+    if (eventSource) {
+      console.log("Closing SSE connection.");
+      eventSource.close(); // Clean up the connection when the component is destroyed
     }
   });
 
-  let canvasEl = $state<HTMLCanvasElement>();
+  let canvasEl: HTMLCanvasElement;
   let ctx;
 
   function drawFloorplan(data) {
@@ -117,483 +81,14 @@
       ctx.stroke();
     });
   }
-
   onMount(() => {
-    if (!data.hasConfig && data.floor?.[0]?.json) {
-      ctx = canvasEl.getContext("2d");
-      drawFloorplan(data.floor[0].json);
-    }
-  });
-
-  import * as Chart from "$lib/components/ui/chart/index.js";
-  import * as Card from "$lib/components/ui/card/index.js";
-  import * as Select from "$lib/components/ui/select/index.js";
-  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-  import { scaleUtc } from "d3-scale";
-  import { Area, AreaChart, ChartClipPath } from "layerchart";
-  import { curveNatural } from "d3-shape";
-  import ChartContainer from "$lib/components/ui/chart/chart-container.svelte";
-  import { cubicInOut } from "svelte/easing";
-  import { ChevronDownIcon, Columns2 } from "@lucide/svelte";
-
-  let chartData = $state([]);
-
-  let timeRange = $state("90d");
-
-  const selectedLabel = $derived.by(() => {
-    switch (timeRange) {
-      case "90d":
-        return "Last 3 months";
-      case "30d":
-        return "Last 30 days";
-      case "7d":
-        return "Last 7 days";
-      default:
-        return "Last 3 months";
-    }
-  });
-
-  const filteredData = $derived(
-    chartData.filter((item) => {
-      const now = new Date();
-      let daysToSubtract = 90;
-      if (timeRange === "30d") {
-        daysToSubtract = 30;
-      } else if (timeRange === "7d") {
-        daysToSubtract = 7;
-      }
-
-      const cutoffDate = new Date(now.getTime() - daysToSubtract * 24 * 60 * 60 * 1000);
-      return item.date >= cutoffDate;
-    }),
-  );
-
-  const chartConfig = {
-    temperature: { label: "Temperature (°C)", color: "var(--chart-1)" },
-    humidity: { label: "Humidity (%)", color: "var(--chart-2)" },
-    altitude: { label: "Altitude (m)", color: "var(--chart-3)" },
-    pressure: { label: "Pressure (kPa)", color: "var(--chart-4)" },
-  } satisfies Chart.ChartConfig;
-
-  let selectedSensor = $state("temperature");
-
-  const sensorOptions = [
-    {
-      key: "temperature",
-      label: chartConfig.temperature.label,
-      color: chartConfig.temperature.color,
-    },
-    {
-      key: "humidity",
-      label: chartConfig.humidity.label,
-      color: chartConfig.humidity.color,
-    },
-    {
-      key: "pressure",
-      label: chartConfig.pressure.label,
-      color: chartConfig.pressure.color,
-    },
-    {
-      key: "altitude",
-      label: chartConfig.altitude.label,
-      color: chartConfig.altitude.color,
-    },
-  ];
-
-  const selectedSensorConfig = $derived(
-    sensorOptions.find((s) => s.key === selectedSensor) || sensorOptions[0],
-  );
-
-  let isLoading = $state(false);
-  let hasError = $state(false);
-
-  let onOpenChange = $state(async (open: boolean) => {
-    console.log("onOpenChange called with:", open);
-    if (open) {
-      console.log("Starting to load statistics...");
-      isLoading = true;
-      hasError = false;
-      try {
-        console.log(`Fetching stats for floor: ${data.slug}`);
-        const response = await fetch(`/${data.slug}/stats`);
-        console.log("Stats response status:", response.status);
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const rawData = await response.json();
-        console.log("Raw stats data:", rawData);
-
-        if (!rawData || rawData.length === 0) {
-          console.log("No data available for statistics");
-          chartData = [];
-        } else {
-          chartData = rawData.map((obj: any) => {
-            return { ...obj, date: new Date(obj.date) };
-          });
-          console.log("Processed chart data:", chartData);
-        }
-      } catch (error) {
-        console.error("Error loading statistics:", error);
-        hasError = true;
-        chartData = [];
-      } finally {
-        isLoading = false;
-      }
-    }
+    ctx = canvasEl.getContext("2d");
+    drawFloorplan(data.floor[0].json);
   });
 </script>
 
-<div class="container mx-auto p-6">
-  <!-- <div style="display: flex; justify-content: center; align-items: center; height: 100%;"> -->
-  <h1 class="mb-6 text-center text-4xl font-bold">Floor {data.slug}</h1>
-
-  {#if data.hasConfig && data.floorConfig}
-    <!-- Display saved floor plan configuration -->
-    <div class="relative mx-auto max-w-4xl">
-      {#if data.floorConfig.image}
-        <div class="relative overflow-hidden rounded-lg border bg-gray-50">
-          <img src={data.floorConfig.image} alt="Floor plan" class="h-auto w-full" />
-
-          {#if data.floorConfig.devices}
-            {#each data.floorConfig.devices as device}
-              <div
-                class="absolute -translate-x-1/2 -translate-y-1/2 transform rounded-lg border-2 border-blue-500 bg-white p-3 shadow-lg"
-                style="left: {device.x}%; top: {device.y}%;"
-              >
-                <div class="flex items-center gap-2">
-                  <Cpu class="h-5 w-5 text-blue-600" />
-                  <span class="text-xs font-medium">{device.name}</span>
-                </div>
-                <div class="mt-2 grid grid-cols-2 gap-1">
-                  <div class="flex items-center gap-1">
-                    <Thermometer class="h-3 w-3 text-orange-500" />
-                    <span class="text-xs">
-                      {#if deviceSensorData.get(device.id)?.temperature !== undefined}
-                        {deviceSensorData.get(device.id).temperature.toFixed(1)}°C
-                      {:else if device.sensorData}
-                        {device.sensorData.temperature.toFixed(1)}°C
-                      {:else}
-                        --°C
-                      {/if}
-                    </span>
-                  </div>
-                  <div class="flex items-center gap-1">
-                    <Droplets class="h-3 w-3 text-blue-500" />
-                    <span class="text-xs">
-                      {#if deviceSensorData.get(device.id)?.humidity !== undefined}
-                        {deviceSensorData.get(device.id).humidity.toFixed(1)}%
-                      {:else if device.sensorData}
-                        {device.sensorData.humidity.toFixed(1)}%
-                      {:else}
-                        --%
-                      {/if}
-                    </span>
-                  </div>
-                  <div class="flex items-center gap-1">
-                    <Gauge class="h-3 w-3 text-green-500" />
-                    <span class="text-xs">
-                      {#if deviceSensorData.get(device.id)?.pressure !== undefined}
-                        {Math.round(deviceSensorData.get(device.id).pressure)}Pa
-                      {:else if device.sensorData}
-                        {Math.round(device.sensorData.pressure)}Pa
-                      {:else}
-                        --Pa
-                      {/if}
-                    </span>
-                  </div>
-                  <div class="flex items-center gap-1">
-                    <Mountain class="h-3 w-3 text-purple-500" />
-                    <span class="text-xs">
-                      {#if deviceSensorData.get(device.id)?.altitude !== undefined}
-                        {deviceSensorData.get(device.id).altitude.toFixed(1)}m
-                      {:else if device.sensorData}
-                        {device.sensorData.altitude.toFixed(1)}m
-                      {:else}
-                        --m
-                      {/if}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            {/each}
-          {/if}
-        </div>
-
-        <div class="mt-4 rounded-lg bg-gray-100 p-4">
-          <p class="text-sm text-gray-600">MQTT Status: {mqttMessage}</p>
-        </div>
-      {/if}
-    </div>
-  {:else}
-    <!-- Fallback to canvas drawing -->
-    <div class="flex flex-col items-center">
-      <span class="mb-4">{mqttMessage}</span>
-      <canvas bind:this={canvasEl} class="border" width="800" height="600"></canvas>
-    </div>
-  {/if}
-  <Dialog.Root bind:onOpenChange>
-    <Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Statistics</Dialog.Trigger>
-    <Dialog.Content class="sm:max-h-[90%] sm:max-w-[90%]">
-      <Dialog.Header>
-        <div class="grid flex-1 gap-1 text-center sm:text-left">
-          <Card.Title>Statistics for floor {data.slug}</Card.Title>
-          <Card.Description>Showing total data for the last 3 months</Card.Description>
-        </div>
-      </Dialog.Header>
-
-      <div class="flex items-center gap-2">
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger class="rounded-lg">
-            {#snippet child({ props })}
-              <Button variant="outline" size="sm" {...props}>
-                <Columns2 />
-                <span class="hidden lg:inline">{selectedSensorConfig.label}</span>
-                <span class="lg:hidden">{selectedSensorConfig.label}</span>
-                <ChevronDownIcon />
-              </Button>
-            {/snippet}
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end" class="w-56">
-            <DropdownMenu.RadioGroup bind:value={selectedSensor}>
-              {#each sensorOptions as sensor}
-                <DropdownMenu.RadioItem value={sensor.key} class="capitalize">
-                  {sensor.label}
-                </DropdownMenu.RadioItem>
-              {/each}
-            </DropdownMenu.RadioGroup>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-
-        <Select.Root type="single" bind:value={timeRange}>
-          <Select.Trigger class="w-[160px] rounded-lg" aria-label="Select a value">
-            {selectedLabel}
-          </Select.Trigger>
-          <Select.Content class="rounded-xl">
-            <Select.Item value="90d" class="rounded-lg">Last 3 months</Select.Item>
-            <Select.Item value="30d" class="rounded-lg">Last 30 days</Select.Item>
-            <Select.Item value="7d" class="rounded-lg">Last 7 days</Select.Item>
-          </Select.Content>
-        </Select.Root>
-
-        <Button variant="outline" size="sm">
-          <DownloadIcon />
-          <span class="hidden lg:inline">Export Data</span>
-        </Button>
-      </div>
-
-      {#if isLoading}
-        <div class="flex h-[400px] items-center justify-center">
-          <div class="text-center">
-            <div
-              class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600"
-            ></div>
-            <p class="text-muted-foreground">Loading statistics...</p>
-          </div>
-        </div>
-      {:else if hasError}
-        <div class="flex h-[400px] items-center justify-center">
-          <div class="text-center">
-            <p class="mb-2 text-red-600">Error loading statistics</p>
-            <p class="text-muted-foreground text-sm">Please try again later</p>
-          </div>
-        </div>
-      {:else if chartData.length === 0}
-        <div class="flex h-[400px] items-center justify-center">
-          <div class="text-center">
-            <p class="mb-2 text-lg font-semibold">No data available</p>
-            <p class="text-muted-foreground text-sm">
-              Statistics will appear once sensor data is collected
-            </p>
-          </div>
-        </div>
-      {:else}
-        <Card.Root>
-          <Card.Header>
-            <Card.Title class="text-xl">{selectedSensorConfig.label}</Card.Title>
-          </Card.Header>
-          <Card.Content>
-            <div class="space-y-4">
-              {#if filteredData.length > 0}
-                <!-- Statistics Summary -->
-                <div class="grid grid-cols-3 gap-4 rounded border p-4 text-center">
-                  <div>
-                    <div class="text-muted-foreground text-sm font-medium">Latest</div>
-                    <div class="text-lg font-semibold">
-                      {filteredData[filteredData.length - 1]?.[selectedSensor]?.toFixed(1)}
-                      {#if selectedSensor === "temperature"}°C
-                      {:else if selectedSensor === "humidity"}%
-                      {:else if selectedSensor === "pressure"}kPa
-                      {:else if selectedSensor === "altitude"}m
-                      {/if}
-                    </div>
-                  </div>
-                  <div>
-                    <div class="text-muted-foreground text-sm font-medium">Average</div>
-                    <div class="text-lg font-semibold">
-                      {(
-                        filteredData.reduce((sum, item) => sum + item[selectedSensor], 0) /
-                        filteredData.length
-                      ).toFixed(1)}
-                      {#if selectedSensor === "temperature"}°C
-                      {:else if selectedSensor === "humidity"}%
-                      {:else if selectedSensor === "pressure"}kPa
-                      {:else if selectedSensor === "altitude"}m
-                      {/if}
-                    </div>
-                  </div>
-                  <div>
-                    <div class="text-muted-foreground text-sm font-medium">Range</div>
-                    <div class="text-lg font-semibold">
-                      {Math.min(...filteredData.map((d) => d[selectedSensor])).toFixed(1)} - {Math.max(
-                        ...filteredData.map((d) => d[selectedSensor]),
-                      ).toFixed(1)}
-                      {#if selectedSensor === "temperature"}°C
-                      {:else if selectedSensor === "humidity"}%
-                      {:else if selectedSensor === "pressure"}kPa
-                      {:else if selectedSensor === "altitude"}m
-                      {/if}
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Simple SVG Line Chart -->
-                <div class="rounded border bg-white p-4">
-                  <svg viewBox="0 0 800 400" class="h-80 w-full">
-                    <!-- Chart area -->
-                    {#if filteredData.length > 1}
-                      {@const minValue = Math.min(...filteredData.map((d) => d[selectedSensor]))}
-                      {@const maxValue = Math.max(...filteredData.map((d) => d[selectedSensor]))}
-                      {@const valueRange = maxValue - minValue || 1}
-                      {@const padding = 30}
-                      {@const chartWidth = 800 - padding * 2}
-                      {@const chartHeight = 400 - padding * 2}
-
-                      <!-- Background grid -->
-                      <defs>
-                        <pattern id="grid" width="50" height="40" patternUnits="userSpaceOnUse">
-                          <path
-                            d="M 50 0 L 0 0 0 40"
-                            fill="none"
-                            stroke="#f0f0f0"
-                            stroke-width="1"
-                          />
-                        </pattern>
-                      </defs>
-                      <rect
-                        x={padding}
-                        y={padding}
-                        width={chartWidth}
-                        height={chartHeight}
-                        fill="url(#grid)"
-                      />
-
-                      <!-- Y-axis labels -->
-                      <text x="25" y={padding + 5} class="fill-gray-600 text-xs" text-anchor="end"
-                        >{maxValue.toFixed(1)}</text
-                      >
-                      <text
-                        x="25"
-                        y={padding + chartHeight / 2 + 5}
-                        class="fill-gray-600 text-xs"
-                        text-anchor="end">{((minValue + maxValue) / 2).toFixed(1)}</text
-                      >
-                      <text
-                        x="25"
-                        y={padding + chartHeight + 5}
-                        class="fill-gray-600 text-xs"
-                        text-anchor="end">{minValue.toFixed(1)}</text
-                      >
-
-                      <!-- X-axis labels -->
-                      {#if filteredData.length > 0}
-                        {@const firstDate = filteredData[0].date}
-                        {@const lastDate = filteredData[filteredData.length - 1].date}
-                        {@const midIndex = Math.floor(filteredData.length / 2)}
-                        {@const midDate = filteredData[midIndex].date}
-
-                        <!-- Format dates based on time range -->
-                        {@const formatDate = (date) => {
-                          if (timeRange === "7d") {
-                            return date.toLocaleDateString("en-US", {
-                              weekday: "short",
-                              month: "short",
-                              day: "numeric",
-                            });
-                          } else if (timeRange === "30d") {
-                            return date.toLocaleDateString("en-US", {
-                              month: "short",
-                              day: "numeric",
-                            });
-                          } else {
-                            return date.toLocaleDateString("en-US", { month: "short" });
-                          }
-                        }}
-
-                        <text
-                          x={padding}
-                          y={padding + chartHeight + 20}
-                          class="fill-gray-600 text-xs"
-                          text-anchor="start">{formatDate(firstDate)}</text
-                        >
-                        <text
-                          x={padding + chartWidth / 2}
-                          y={padding + chartHeight + 20}
-                          class="fill-gray-600 text-xs"
-                          text-anchor="middle">{formatDate(midDate)}</text
-                        >
-                        <text
-                          x={padding + chartWidth}
-                          y={padding + chartHeight + 20}
-                          class="fill-gray-600 text-xs"
-                          text-anchor="end">{formatDate(lastDate)}</text
-                        >
-                      {/if}
-
-                      <!-- Data line -->
-                      <polyline
-                        fill="none"
-                        stroke="#3b82f6"
-                        stroke-width="4"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        points={filteredData
-                          .map((d, i) => {
-                            const x = padding + (i / (filteredData.length - 1)) * chartWidth;
-                            const y =
-                              padding +
-                              chartHeight -
-                              ((d[selectedSensor] - minValue) / valueRange) * chartHeight;
-                            return `${x},${y}`;
-                          })
-                          .join(" ")}
-                      />
-                    {/if}
-                  </svg>
-                </div>
-
-                <div class="text-muted-foreground text-center text-xs">
-                  Data from {filteredData[0]?.date?.toLocaleDateString()} to {filteredData[
-                    filteredData.length - 1
-                  ]?.date?.toLocaleDateString()}
-                </div>
-              {:else}
-                <div class="flex h-[400px] items-center justify-center">
-                  <div class="text-center">
-                    <p class="mb-2 text-lg font-semibold">No data available</p>
-                    <p class="text-muted-foreground text-sm">
-                      No data found for the selected time period
-                    </p>
-                  </div>
-                </div>
-              {/if}
-            </div>
-          </Card.Content>
-        </Card.Root>
-      {/if}
-
-      <Dialog.Footer></Dialog.Footer>
-    </Dialog.Content>
-  </Dialog.Root>
+<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+  <h1 class="text-center text-4xl font-bold">Floor {data.slug}</h1>
+  <span>{mqttMessage}</span>
+  <canvas bind:this={canvasEl} class="obj-contain" width="800%" height="600%"></canvas>
 </div>
diff --git a/src/routes/(app)/[slug]/stats/+server.ts b/src/routes/(app)/[slug]/stats/+server.ts
deleted file mode 100644
index fc68394..0000000
--- a/src/routes/(app)/[slug]/stats/+server.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { db } from "$lib/server/db";
-import * as table from "$lib/server/db/schema"
-
-export const GET = async () => {
-  // Get all sensor data (like the original working version)
-  const rawData = await db.select({ 
-    altitude: table.sensorData.altitude, 
-    humidity: table.sensorData.humidity, 
-    pressure: table.sensorData.pressure, 
-    temperature: table.sensorData.temperature, 
-    date: table.sensorData.time, 
-  }).from(table.sensorData);
-  
-  // Scale pressure values to be in a similar range as other sensors
-  // Divide by 1000 to convert from Pa to kPa (more reasonable scale)
-  const data = rawData.map(item => ({
-    ...item,
-    pressure: Math.round((item.pressure / 1000) * 10) / 10 // Convert to kPa with 1 decimal place
-  }));
-  
-  console.log(`Returning ${data.length} data points`);
-
-  return new Response(JSON.stringify(data), {
-    headers: {
-      "Content-Type": "application/json"
-    }
-  });
-}
diff --git a/src/routes/(app)/settings/+page.server.js b/src/routes/(app)/settings/+page.server.js
index 1939028..365a6b8 100644
--- a/src/routes/(app)/settings/+page.server.js
+++ b/src/routes/(app)/settings/+page.server.js
@@ -1,35 +1,10 @@
 import { db } from "$lib/server/db";
 import * as table from "$lib/server/db/schema";
-import { getCurrentDevices } from "$lib/server/mqtt-devices.js";
 import { fail } from "@sveltejs/kit";
 import { eq } from "drizzle-orm";
 
 export const load = async (event) => {
-  // Fetch all available floors
-  const floors = await db
-    .select({ floor: table.floors.floor })
-    .from(table.floors)
-    .orderBy(table.floors.floor);
-
-  // Get real connected devices from MQTT
-  let devices = getCurrentDevices();
-
-  // If no real devices, provide fallback mock devices
-  if (devices.length === 0) {
-    devices = [
-      {
-        id: "no-devices",
-        name: "No ESP8266 devices connected",
-        type: "esp8266",
-        status: "offline",
-      },
-    ];
-  }
-
-  return {
-    floors: floors.map((f) => f.floor),
-    devices: devices,
-  };
+  return {};
 };
 
 export const actions = {
@@ -66,52 +41,4 @@ export const actions = {
 
     await db.delete(table.floors).where(eq(table.floors.floor, n));
   },
-  savefloor: async (event) => {
-    const formData = await event.request.formData();
-    const floorNumber = formData.get("floorNumber");
-    const floorPlanImage = formData.get("floorPlanImage");
-    const devices = formData.get("devices");
-
-    const n = Number(floorNumber);
-    if (isNaN(n)) return fail(400, { message: "Invalid floor number!" });
-
-    if (!floorPlanImage || !devices) {
-      return fail(400, { message: "Missing floor plan or device configuration!" });
-    }
-
-    try {
-      const deviceData = JSON.parse(devices);
-      deviceData.forEach(async (dev) => {
-        await db.insert(table.sensors).values({ id: dev.id, user: event.locals.session.userId });
-      });
-
-      // Check if floor exists
-      const exists = await db
-        .select({ floor: table.floors.floor })
-        .from(table.floors)
-        .where(eq(table.floors.floor, n));
-
-      if (exists.length === 0) {
-        return fail(400, { message: `Floor ${n} does not exist! Please create it first.` });
-      }
-
-      // Update floor with configuration
-      // Note: In a real implementation, you would store this data properly
-      // For now, we'll just update the url field as a JSON string
-      const floorConfig = {
-        image: floorPlanImage,
-        devices: deviceData,
-      };
-
-      await db
-        .update(table.floors)
-        .set({ url: JSON.stringify(floorConfig) })
-        .where(eq(table.floors.floor, n));
-
-      return { success: true, message: `Floor ${n} configuration saved successfully!` };
-    } catch (error) {
-      console.error("Error saving floor configuration:", error);
-      return fail(500, { message: "Failed to save floor configuration!" });
-    }
-  },
 };
diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
index 9b57069..173578d 100644
--- a/src/routes/(app)/settings/+page.svelte
+++ b/src/routes/(app)/settings/+page.svelte
@@ -1,6 +1,5 @@
 <script>
   import { enhance } from "$app/forms";
-  import { onMount, onDestroy } from "svelte";
   import Button from "$lib/components/ui/button/button.svelte";
   import Input from "$lib/components/ui/input/input.svelte";
   import Label from "$lib/components/ui/label/label.svelte";
@@ -11,83 +10,19 @@
   import CardTitle from "$lib/components/ui/card/card-title.svelte";
   import { Thermometer, Droplets, Gauge, Mountain, Upload, Cpu } from "@lucide/svelte";
 
-  const { form, data } = $props();
+  const { form } = $props();
 
   let floorPlanImage = $state(null);
-  let availableDevices = $state(data.devices || []);
-  let deviceSensorData = $state(new Map());
-  let eventSource;
+  let availableDevices = $state([
+    { id: "esp8266-1", name: "ESP8266 #1", type: "esp8266", status: "online" },
+    { id: "esp8266-2", name: "ESP8266 #2", type: "esp8266", status: "online" },
+    { id: "esp8266-3", name: "ESP8266 #3", type: "esp8266", status: "offline" },
+    { id: "esp8266-4", name: "ESP8266 #4", type: "esp8266", status: "online" },
+  ]);
 
   let placedDevices = $state([]);
   let draggedDevice = $state(null);
   let floorPlanRef = $state(null);
-  let selectedFloorNumber = $state("");
-  let saveMessage = $state(null);
-
-  $effect(() => {
-    if (data.floors && data.floors.length > 0 && !selectedFloorNumber) {
-      selectedFloorNumber = data.floors[0].toString();
-    }
-  });
-
-  $effect(() => {
-    // Update devices when data changes
-    if (data.devices) {
-      availableDevices = data.devices;
-    }
-  });
-
-  // Set up real-time updates via SSE
-  onMount(() => {
-    console.log("Settings: Attempting to connect to MQTT SSE...");
-    eventSource = new EventSource("/mqtt");
-
-    eventSource.onopen = () => {
-      console.log("Settings: SSE connection opened successfully!");
-    };
-
-    eventSource.onmessage = (event) => {
-      if (eventSource.readyState !== EventSource.OPEN) {
-        console.log("Settings: Received message but connection is not open, ignoring");
-        return;
-      }
-
-      try {
-        const messageData = JSON.parse(event.data);
-        console.log("Settings page received SSE data:", messageData);
-
-        // Update device sensor data and device list from real-time updates
-        if (messageData.devices) {
-          console.log("Updating available devices with:", messageData.devices);
-          // Update available devices with latest data
-          availableDevices = messageData.devices;
-
-          // Update sensor data map
-          const newData = new Map();
-          messageData.devices.forEach((device) => {
-            if (device.sensorData) {
-              newData.set(device.id, device.sensorData);
-            }
-          });
-          deviceSensorData = newData;
-          console.log("Updated deviceSensorData:", deviceSensorData);
-        }
-      } catch (e) {
-        console.error("Settings: Error parsing SSE message:", e);
-      }
-    };
-
-    eventSource.onerror = (error) => {
-      console.error("SSE Error:", error);
-    };
-  });
-
-  onDestroy(() => {
-    if (eventSource && eventSource.readyState !== EventSource.CLOSED) {
-      console.log("Settings: Closing SSE connection");
-      eventSource.close();
-    }
-  });
 
   function handleFileUpload(event) {
     const file = event.target.files?.[0];
@@ -233,65 +168,6 @@
           <p class="mt-2 text-sm text-gray-600">
             Drag ESP8266 devices from below onto the floor plan to place them in specific rooms.
           </p>
-
-          {#if floorPlanImage && placedDevices.length > 0}
-            <div class="mt-4 rounded-lg border bg-blue-50 p-4">
-              <h4 class="mb-3 font-semibold">Save Floor Configuration</h4>
-              <form
-                method="post"
-                action="?/savefloor"
-                use:enhance={() => {
-                  return async ({ result }) => {
-                    if (result.type === "success") {
-                      saveMessage = { type: "success", text: result.data.message };
-                      // Clear form after successful save
-                      selectedFloorNumber = "";
-                    } else if (result.type === "failure") {
-                      saveMessage = {
-                        type: "error",
-                        text: result.data?.message || "Failed to save configuration",
-                      };
-                    }
-                  };
-                }}
-              >
-                <input type="hidden" name="floorPlanImage" value={floorPlanImage} />
-                <input type="hidden" name="devices" value={JSON.stringify(placedDevices)} />
-                <div class="mb-3 flex items-end gap-4">
-                  <div class="flex-1">
-                    <Label for="floorNumber">Select Floor</Label>
-                    <select
-                      name="floorNumber"
-                      id="floorNumber"
-                      bind:value={selectedFloorNumber}
-                      class="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
-                      required
-                    >
-                      {#if data.floors && data.floors.length > 0}
-                        {#each data.floors as floor}
-                          <option value={floor.toString()}>
-                            Floor {floor}
-                          </option>
-                        {/each}
-                      {/if}
-                    </select>
-                  </div>
-                  <Button type="submit" variant="default" disabled={!selectedFloorNumber}>
-                    Save Floor Configuration
-                  </Button>
-                </div>
-              </form>
-              {#if saveMessage}
-                <p
-                  class="mt-2 text-sm {saveMessage.type === 'success'
-                    ? 'text-green-600'
-                    : 'text-red-600'}"
-                >
-                  {saveMessage.text}
-                </p>
-              {/if}
-            </div>
-          {/if}
         {/if}
 
         <div class="pt-4">
@@ -324,43 +200,19 @@
                 <div class="grid grid-cols-2 gap-1">
                   <div class="flex items-center gap-1 text-xs">
                     <Thermometer class="h-3 w-3 text-orange-500" />
-                    <span>
-                      {#if device.sensorData}
-                        {device.sensorData.temperature.toFixed(1)}°C
-                      {:else}
-                        --°C
-                      {/if}
-                    </span>
+                    <span>Temperature</span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Droplets class="h-3 w-3 text-blue-500" />
-                    <span>
-                      {#if device.sensorData}
-                        {device.sensorData.humidity.toFixed(1)}%
-                      {:else}
-                        --%
-                      {/if}
-                    </span>
+                    <span>Humidity</span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Gauge class="h-3 w-3 text-green-500" />
-                    <span>
-                      {#if device.sensorData}
-                        {Math.round(device.sensorData.pressure)}Pa
-                      {:else}
-                        --Pa
-                      {/if}
-                    </span>
+                    <span>Pressure</span>
                   </div>
                   <div class="flex items-center gap-1 text-xs">
                     <Mountain class="h-3 w-3 text-purple-500" />
-                    <span>
-                      {#if device.sensorData}
-                        {device.sensorData.altitude.toFixed(1)}m
-                      {:else}
-                        --m
-                      {/if}
-                    </span>
+                    <span>Altitude</span>
                   </div>
                 </div>
               </div>
diff --git a/src/routes/mqtt/+server.js b/src/routes/mqtt/+server.js
index 75ae0aa..a834279 100644
--- a/src/routes/mqtt/+server.js
+++ b/src/routes/mqtt/+server.js
@@ -1,9 +1,5 @@
 // src/routes/mqtt/+server.js
-import { db } from "$lib/server/db";
-import * as table from "$lib/server/db/schema";
-import { connectedDevices, deviceSensorData, getCurrentDevices } from "$lib/server/mqtt-devices.js";
-import { eq } from "drizzle-orm";
-import mqtt from "mqtt";
+import * as mqtt from "mqtt";
 import { writable } from "svelte/store";
 
 // A Svelte store to hold the latest MQTT message.
@@ -14,85 +10,6 @@ const devices = writable([]);
 
 let client = null;
 
-// Function to update device status and sensor data
-function updateDevice(deviceId, sensorData = null) {
-  const now = new Date();
-  const deviceName = `ESP8266 #${deviceId.slice(-6)}`;
-
-  // Update device info
-  connectedDevices.set(deviceId, {
-    id: deviceId,
-    name: deviceName,
-    type: "esp8266",
-    status: "online",
-    lastSeen: now,
-  });
-
-  // Update sensor data if provided
-  if (sensorData) {
-    deviceSensorData.set(deviceId, {
-      ...sensorData,
-      timestamp: now,
-    });
-  }
-
-  // Update the devices store
-  updateDevicesStore();
-}
-
-// Function to parse sensor data from MQTT payload
-function parseSensorData(payload) {
-  try {
-    const data = JSON.parse(payload);
-    return {
-      temperature: parseFloat(data.temperature) || 0,
-      humidity: parseFloat(data.humidity?.replace("%", "")) || 0,
-      pressure: parseFloat(data.pressure) || 0,
-      altitude: parseFloat(data.altitude) || 0,
-    };
-  } catch (error) {
-    console.error("Error parsing sensor data:", error);
-    return null;
-  }
-}
-
-// Store SSE controllers for cleanup
-const sseControllers = new Set();
-
-// Function to update devices store with latest data
-function updateDevicesStore() {
-  const deviceList = Array.from(connectedDevices.values()).map((device) => {
-    const sensorData = deviceSensorData.get(device.id);
-    return {
-      ...device,
-      sensorData: sensorData || null,
-    };
-  });
-  devices.set(deviceList);
-}
-
-// Clean up offline devices (not seen in last 5 minutes)
-function cleanupDevices() {
-  const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000);
-  let updated = false;
-
-  for (const [deviceId, device] of connectedDevices.entries()) {
-    if (device.lastSeen < fiveMinutesAgo && device.status === "online") {
-      connectedDevices.set(deviceId, { ...device, status: "offline" });
-      updated = true;
-    }
-  }
-
-  if (updated) {
-    updateDevicesStore();
-  }
-}
-
-// Run cleanup every minute
-setInterval(cleanupDevices, 60000);
-
-// getCurrentDevices is now imported from the shared module
-
 // Function to connect to MQTT
 function connectMqtt() {
   if (client && client.connected) {
@@ -101,7 +18,6 @@ function connectMqtt() {
 
   // Replace with your MQTT broker details
   const BROKER_URL = "mqtt://kada49.it:1883"; // Example public broker
-  //const BROKER_URL = "mqtt://test.mosquitto.org:1883";
   const TOPIC = "esp8266/+/data"; // Replace with your desired topic
 
   client = mqtt.connect(BROKER_URL);
@@ -117,38 +33,11 @@ function connectMqtt() {
     });
   });
 
-  client.on("message", async (topic, message) => {
+  client.on("message", (topic, message) => {
     const payload = message.toString();
     console.log(`Received message from topic "${topic}": ${payload}`);
     latestMessage.set(payload); // Update the Svelte store
-
-    // Extract device ID from topic (esp8266/DEVICE_ID/data)
-    const topicParts = topic.split("/");
-    if (topicParts.length >= 3 && topicParts[0] === "esp8266" && topicParts[2] === "data") {
-      const deviceId = topicParts[1];
-      console.log(`Processing data for device: ${deviceId}`);
-
-      // Parse sensor data
-      const sensorData = parseSensorData(payload);
-      if (sensorData) {
-        console.log(`Parsed sensor data:`, sensorData);
-        updateDevice(deviceId, sensorData);
-        const devices = await db.select().from(table.sensors).where(eq(table.sensors.id, deviceId));
-        if (devices.length == 1)
-          await db
-            .insert(table.sensorData)
-            .values({
-              sensor: deviceId,
-              temperature: sensorData.temperature,
-              humidity: sensorData.humidity,
-              altitude: sensorData.altitude,
-              pressure: sensorData.pressure,
-            });
-      } else {
-        // Still update device as online even if data parsing failed
-        updateDevice(deviceId);
-      }
-    }
+    console.log(topic.split("/")[1]);
   });
 
   client.on("error", (err) => {
@@ -181,98 +70,24 @@ export async function GET({ request }) {
   return new Response(
     new ReadableStream({
       start(controller) {
-        console.log("Client connected to MQTT SSE stream");
+        console.log("Client connected to SSE stream.");
 
-        let isConnected = true;
-        let interval;
-
-        // Add this controller to the broadcast set
-        sseControllers.add(controller);
-
-        // Cleanup function
-        const cleanup = () => {
-          console.log("Cleaning up MQTT SSE connection");
-          isConnected = false;
-          if (interval) {
-            clearInterval(interval);
-            interval = null;
-          }
-          sseControllers.delete(controller);
-          if (unsubscribe) {
-            unsubscribe();
-          }
-        };
-
-        // Send current device data
-        function sendDevices() {
-          if (!isConnected) {
-            cleanup();
-            return;
-          }
-
-          try {
-            const devices = getCurrentDevices();
-            const message = {
-              devices: devices,
-              timestamp: new Date().toISOString(),
-            };
-
-            // Check if controller is still valid before enqueueing
-            if (isConnected) {
-              controller.enqueue(`data: ${JSON.stringify(message)}\n\n`);
-            }
-          } catch (error) {
-            // Handle controller closed error specifically
-            if (
-              error.code === "ERR_INVALID_STATE" ||
-              error.message.includes("Controller is already closed")
-            ) {
-              console.log("MQTT SSE controller closed, stopping interval");
-            } else {
-              console.error("Error sending MQTT device data:", error);
-            }
-            cleanup();
-          }
-        }
-
-        // Send initial data
-        sendDevices();
-
-        // Send updates every 2 seconds
-        interval = setInterval(sendDevices, 2000);
-
-        // Subscribe to MQTT messages via the store for real-time updates
         const unsubscribe = latestMessage.subscribe((message) => {
-          if (message !== "No message yet" && isConnected) {
-            try {
-              const data = `data: ${JSON.stringify({
-                message: message,
-                devices: getCurrentDevices(),
-                timestamp: new Date().toISOString(),
-              })}\n\n`;
-              if (isConnected) {
-                controller.enqueue(data);
-              }
-            } catch (error) {
-              if (
-                error.code === "ERR_INVALID_STATE" ||
-                error.message.includes("Controller is already closed")
-              ) {
-                console.log("MQTT SSE controller closed during message send");
-                cleanup();
-              }
-            }
+          if (message !== "No message yet") {
+            const data = `data: ${JSON.stringify({ message: message })}\n\n`;
+            controller.enqueue(data);
           }
         });
 
         // Handle client disconnection
         request.signal.addEventListener("abort", () => {
-          console.log("Client disconnected from MQTT SSE stream");
-          cleanup();
+          console.log("Client disconnected from SSE stream.");
+          unsubscribe(); // Stop listening to store updates
+          controller.close();
         });
       },
       cancel() {
-        console.log("MQTT SSE stream cancelled");
+        console.log("SSE stream cancelled.");
       },
     }),
     { headers },