diff --git a/.vscode/mcp.json b/.vscode/mcp.json
index 1f291d5d..bf436f29 100644
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -1,4 +1,12 @@
 {
+	"inputs": [
+		{
+			"type": "promptString",
+			"id": "supabase-access-token",
+			"description": "Supabase personal access token",
+			"password": true
+		}
+	],
 	"servers": {
 		"supabase": {
 			"command": "npx",
@@ -10,18 +18,6 @@
 				"SUPABASE_ACCESS_TOKEN": "${input:supabase-access-token}"
 			},
 			"type": "stdio"
-		},
-		"SVELTEKIT-mcp-server-70cd8977": {
-			"url": "https://mcp.svelte.dev/mcp",
-			"type": "http"
-		}
-	},
-	"inputs": [
-		{
-			"type": "promptString",
-			"id": "supabase-access-token",
-			"description": "Supabase personal access token",
-			"password": true
 		}
-	]
+	}
 }
\ No newline at end of file
diff --git a/SUPABAES_SETUP_SCRIPTS/TRIGGERS/alert_triggered_insert.sql b/SUPABAES_SETUP_SCRIPTS/TRIGGERS/alert_triggered_insert.sql
new file mode 100644
index 00000000..f810bae0
--- /dev/null
+++ b/SUPABAES_SETUP_SCRIPTS/TRIGGERS/alert_triggered_insert.sql
@@ -0,0 +1,34 @@
+CREATE OR REPLACE FUNCTION public.fn_log_rule_trigger()
+RETURNS trigger
+LANGUAGE plpgsql
+SECURITY DEFINER
+SET search_path = public
+AS $$
+BEGIN
+  -- Only handle rising edge: false -> true
+  IF COALESCE(OLD.is_triggered, false) = false
+     AND COALESCE(NEW.is_triggered, false) = true
+  THEN
+    -- -- Stamp and bump (commented out for now)
+    -- NEW.last_triggered := (now() AT TIME ZONE 'utc');
+    -- NEW.trigger_count  := COALESCE(OLD.trigger_count, 0) + 1;
+
+    -- Insert log row if we have both NOT NULL values required by FK
+    IF NEW.dev_eui IS NOT NULL AND NEW."ruleGroupId" IS NOT NULL THEN
+      INSERT INTO public.cw_rule_triggered (dev_eui, rule_group_id)
+      VALUES (NEW.dev_eui, NEW."ruleGroupId");
+    END IF;
+  END IF;
+
+  RETURN NEW;
+END;
+$$;
+
+
+DROP TRIGGER IF EXISTS trg_cw_rules_log_trigger ON public.cw_rules;
+
+CREATE TRIGGER trg_cw_rules_log_trigger
+BEFORE UPDATE OF is_triggered ON public.cw_rules
+FOR EACH ROW
+WHEN (COALESCE(OLD.is_triggered, false) IS DISTINCT FROM COALESCE(NEW.is_triggered, false))
+EXECUTE FUNCTION public.fn_log_rule_trigger();
\ No newline at end of file
diff --git a/database.types.ts b/database.types.ts
index 333ca958..b5f2a38d 100644
--- a/database.types.ts
+++ b/database.types.ts
@@ -386,6 +386,63 @@ export type Database = {
 				};
 				Relationships: [];
 			};
+			cw_air_data_duplicate: {
+				Row: {
+					battery_level: number | null;
+					co: number | null;
+					co2: number | null;
+					created_at: string;
+					dev_eui: string;
+					humidity: number | null;
+					is_simulated: boolean;
+					lux: number | null;
+					pressure: number | null;
+					rainfall: number | null;
+					smoke_detected: boolean | null;
+					temperature_c: number | null;
+					uv_index: number | null;
+					vape_detected: boolean | null;
+					wind_direction: number | null;
+					wind_speed: number | null;
+				};
+				Insert: {
+					battery_level?: number | null;
+					co?: number | null;
+					co2?: number | null;
+					created_at?: string;
+					dev_eui: string;
+					humidity?: number | null;
+					is_simulated?: boolean;
+					lux?: number | null;
+					pressure?: number | null;
+					rainfall?: number | null;
+					smoke_detected?: boolean | null;
+					temperature_c?: number | null;
+					uv_index?: number | null;
+					vape_detected?: boolean | null;
+					wind_direction?: number | null;
+					wind_speed?: number | null;
+				};
+				Update: {
+					battery_level?: number | null;
+					co?: number | null;
+					co2?: number | null;
+					created_at?: string;
+					dev_eui?: string;
+					humidity?: number | null;
+					is_simulated?: boolean;
+					lux?: number | null;
+					pressure?: number | null;
+					rainfall?: number | null;
+					smoke_detected?: boolean | null;
+					temperature_c?: number | null;
+					uv_index?: number | null;
+					vape_detected?: boolean | null;
+					wind_direction?: number | null;
+					wind_speed?: number | null;
+				};
+				Relationships: [];
+			};
 			cw_data_metadata: {
 				Row: {
 					adder: number;
@@ -422,6 +479,51 @@ export type Database = {
 				};
 				Relationships: [];
 			};
+			cw_device_gateway: {
+				Row: {
+					created_at: string;
+					dev_eui: string;
+					gateway_id: string;
+					id: number;
+					last_update: string;
+					rssi: number | null;
+					snr: number | null;
+				};
+				Insert: {
+					created_at?: string;
+					dev_eui: string;
+					gateway_id: string;
+					id?: number;
+					last_update?: string;
+					rssi?: number | null;
+					snr?: number | null;
+				};
+				Update: {
+					created_at?: string;
+					dev_eui?: string;
+					gateway_id?: string;
+					id?: number;
+					last_update?: string;
+					rssi?: number | null;
+					snr?: number | null;
+				};
+				Relationships: [
+					{
+						foreignKeyName: 'cw_device_gateway_dev_eui_fkey';
+						columns: ['dev_eui'];
+						isOneToOne: false;
+						referencedRelation: 'cw_devices';
+						referencedColumns: ['dev_eui'];
+					},
+					{
+						foreignKeyName: 'cw_device_gateway_gateway_id_fkey';
+						columns: ['gateway_id'];
+						isOneToOne: false;
+						referencedRelation: 'cw_gateways';
+						referencedColumns: ['gateway_id'];
+					}
+				];
+			};
 			cw_device_owners: {
 				Row: {
 					dev_eui: string;
@@ -577,51 +679,60 @@ export type Database = {
 			};
 			cw_devices: {
 				Row: {
-					ai_provider: string | null;
 					battery_changed_at: string | null;
 					battery_level: number | null;
 					dev_eui: string;
 					installed_at: string | null;
+					last_data_updated_at: string | null;
 					lat: number | null;
 					location_id: number | null;
 					long: number | null;
 					name: string;
+					primary_data: number | null;
 					report_endpoint: string | null;
+					secondary_data: number | null;
 					serial_number: string | null;
+					tti_name: string | null;
 					type: number | null;
 					upload_interval: number | null;
 					user_id: string | null;
 					warranty_start_date: string | null;
 				};
 				Insert: {
-					ai_provider?: string | null;
 					battery_changed_at?: string | null;
 					battery_level?: number | null;
 					dev_eui: string;
 					installed_at?: string | null;
+					last_data_updated_at?: string | null;
 					lat?: number | null;
 					location_id?: number | null;
 					long?: number | null;
 					name?: string;
+					primary_data?: number | null;
 					report_endpoint?: string | null;
+					secondary_data?: number | null;
 					serial_number?: string | null;
+					tti_name?: string | null;
 					type?: number | null;
 					upload_interval?: number | null;
 					user_id?: string | null;
 					warranty_start_date?: string | null;
 				};
 				Update: {
-					ai_provider?: string | null;
 					battery_changed_at?: string | null;
 					battery_level?: number | null;
 					dev_eui?: string;
 					installed_at?: string | null;
+					last_data_updated_at?: string | null;
 					lat?: number | null;
 					location_id?: number | null;
 					long?: number | null;
 					name?: string;
+					primary_data?: number | null;
 					report_endpoint?: string | null;
+					secondary_data?: number | null;
 					serial_number?: string | null;
+					tti_name?: string | null;
 					type?: number | null;
 					upload_interval?: number | null;
 					user_id?: string | null;
@@ -958,6 +1069,42 @@ export type Database = {
 					}
 				];
 			};
+			cw_rule_triggered: {
+				Row: {
+					created_at: string;
+					dev_eui: string;
+					id: number;
+					rule_group_id: string;
+				};
+				Insert: {
+					created_at?: string;
+					dev_eui: string;
+					id?: number;
+					rule_group_id: string;
+				};
+				Update: {
+					created_at?: string;
+					dev_eui?: string;
+					id?: number;
+					rule_group_id?: string;
+				};
+				Relationships: [
+					{
+						foreignKeyName: 'cw_rule_triggered_dev_eui_fkey';
+						columns: ['dev_eui'];
+						isOneToOne: false;
+						referencedRelation: 'cw_devices';
+						referencedColumns: ['dev_eui'];
+					},
+					{
+						foreignKeyName: 'cw_rule_triggered_rule_group_id_fkey';
+						columns: ['rule_group_id'];
+						isOneToOne: false;
+						referencedRelation: 'cw_rules';
+						referencedColumns: ['ruleGroupId'];
+					}
+				];
+			};
 			cw_rules: {
 				Row: {
 					action_recipient: string;
@@ -1052,6 +1199,33 @@ export type Database = {
 				};
 				Relationships: [];
 			};
+			cw_soil_data_duplicate: {
+				Row: {
+					created_at: string;
+					dev_eui: string;
+					ec: number | null;
+					moisture: number | null;
+					ph: number | null;
+					temperature_c: number | null;
+				};
+				Insert: {
+					created_at?: string;
+					dev_eui: string;
+					ec?: number | null;
+					moisture?: number | null;
+					ph?: number | null;
+					temperature_c?: number | null;
+				};
+				Update: {
+					created_at?: string;
+					dev_eui?: string;
+					ec?: number | null;
+					moisture?: number | null;
+					ph?: number | null;
+					temperature_c?: number | null;
+				};
+				Relationships: [];
+			};
 			cw_traffic2: {
 				Row: {
 					bicycle_count: number;
@@ -1331,6 +1505,7 @@ export type Database = {
 				Row: {
 					accepted_agreements: boolean;
 					avatar_url: string | null;
+					created_at: string;
 					discord: string | null;
 					email: string | null;
 					employer: string | null;
@@ -1345,6 +1520,7 @@ export type Database = {
 				Insert: {
 					accepted_agreements?: boolean;
 					avatar_url?: string | null;
+					created_at?: string;
 					discord?: string | null;
 					email?: string | null;
 					employer?: string | null;
@@ -1359,6 +1535,7 @@ export type Database = {
 				Update: {
 					accepted_agreements?: boolean;
 					avatar_url?: string | null;
+					created_at?: string;
 					discord?: string | null;
 					email?: string | null;
 					employer?: string | null;
@@ -1761,41 +1938,57 @@ export type Database = {
 				};
 				Returns: Json[];
 			};
-			get_hloc_data: {
-				Args:
-					| {
+			get_hloc_data:
+				| {
+						Args: {
 							device_eui: string;
 							end_time: string;
 							start_time: string;
 							table_name: string;
 							time_interval: string;
-					  }
-					| {
+						};
+						Returns: {
+							close: number;
+							high: number;
+							interval_time: string;
+							low: number;
+							open: number;
+						}[];
+				  }
+				| {
+						Args: {
 							p_bucket_interval: string;
 							p_dev_eui: string;
 							p_metric: string;
 							p_table: string;
 							p_time_range: string;
-					  }
-					| {
+						};
+						Returns: {
+							bucket: string;
+							close_val: number;
+							dev_eui: string;
+							high_val: number;
+							low_val: number;
+							open_val: number;
+						}[];
+				  }
+				| {
+						Args: {
 							p_bucket_interval: string;
 							p_dev_eui: string;
 							p_metric: string;
 							p_time_range: string;
-					  };
-				Returns: {
-					bucket: string;
-					close_val: number;
-					dev_eui: string;
-					high_val: number;
-					low_val: number;
-					open_val: number;
-				}[];
-			};
-			get_location_for_user: {
-				Args: { user_id: string };
-				Returns: number[];
-			};
+						};
+						Returns: {
+							bucket: string;
+							close_val: number;
+							dev_eui: string;
+							high_val: number;
+							low_val: number;
+							open_val: number;
+						}[];
+				  };
+			get_location_for_user: { Args: { user_id: string }; Returns: number[] };
 			get_road_events: {
 				Args: { time_grouping: string };
 				Returns: {
@@ -1816,6 +2009,29 @@ export type Database = {
 					period_start: string;
 				}[];
 			};
+			get_table_columns: {
+				Args: { p_table: unknown };
+				Returns: {
+					column_name: string;
+				}[];
+			};
+			is_device_admin_for:
+				| {
+						Args: { p_dev_eui: string };
+						Returns: {
+							error: true;
+						} & 'Could not choose the best candidate function between: public.is_device_admin_for(p_dev_eui => text), public.is_device_admin_for(p_dev_eui => varchar). Try renaming the parameters or the function itself in the database so function overloading can be resolved';
+				  }
+				| {
+						Args: { p_dev_eui: string };
+						Returns: {
+							error: true;
+						} & 'Could not choose the best candidate function between: public.is_device_admin_for(p_dev_eui => text), public.is_device_admin_for(p_dev_eui => varchar). Try renaming the parameters or the function itself in the database so function overloading can be resolved';
+				  };
+			is_device_member_for: { Args: { p_dev_eui: string }; Returns: boolean };
+			is_device_owner_for: { Args: { dev: string }; Returns: boolean };
+			is_location_member_for: { Args: { loc_id: number }; Returns: boolean };
+			is_location_owner_for: { Args: { loc_id: number }; Returns: boolean };
 		};
 		Enums: {
 			[_ in never]: never;
diff --git a/src/app.css b/src/app.css
index a4288722..8d239c30 100644
--- a/src/app.css
+++ b/src/app.css
@@ -16,11 +16,11 @@
 	--color-primary-hover: #3a8c3f;
 	--color-background: #eaeaea;
 	--color-foreground: #938aee;
-	--color-foreground-light: #f0f0f0;
+	--color-foreground-light: #f5f5f5;
 	--color-foreground-dark: #2a2a2a;
 	--color-card: #ffffff;
-	--color-text: #333333;
-	--color-text-secondary: rgba(51, 51, 51, 0.7);
+	--color-text: #1f2937;
+	--color-text-secondary: rgba(31, 41, 55, 0.7);
 
 	/* Specialized colors */
 	--color-air-bg: #e6f7ff;
@@ -50,11 +50,15 @@
 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
 	/* Standard UI colors */
-	--color-border: rgb(229 231 235);
-	--color-border-subtle: rgb(229 231 235 / 0.3);
+	--color-border: rgb(219 224 231);
+	--color-border-subtle: rgb(229 231 235);
 	--color-surface: rgb(249 250 251);
 	--color-surface-raised: rgb(255 255 255);
-	--color-text-muted: rgb(107 114 128);
+	--color-text-muted: rgb(75 85 99);
+	--color-surface-muted: rgba(255, 255, 255, 0.85);
+	--color-surface-emphasis: color-mix(in srgb, var(--color-foreground) 6%, #ffffff 94%);
+	--color-header: color-mix(in srgb, var(--color-background) 80%, rgba(255, 255, 255, 0.8) 20%);
+	--color-sidebar: color-mix(in srgb, var(--color-background) 75%, rgba(255, 255, 255, 0.9) 25%);
 }
 
 /* Dark mode color variables (activated by .dark class on <html>) */
@@ -92,6 +96,10 @@
 	--color-surface: rgb(55 65 81);
 	--color-surface-raised: rgb(55 65 81);
 	--color-text-muted: rgb(156 163 175);
+	--color-surface-muted: rgba(31, 41, 55, 0.78);
+	--color-surface-emphasis: color-mix(in srgb, var(--color-foreground-light) 60%, rgba(15, 23, 42, 0.6) 40%);
+	--color-header: color-mix(in srgb, var(--color-background) 88%, rgba(15, 23, 42, 0.9) 12%);
+	--color-sidebar: color-mix(in srgb, var(--color-background) 82%, rgba(30, 41, 59, 0.92) 18%);
 }
 
 html,
@@ -109,6 +117,15 @@ body {
 	flex-grow: 1;
 }
 
+body {
+	background: radial-gradient(circle at top, color-mix(in srgb, var(--color-background) 92%, #ffffff 8%) 0%, var(--color-background) 45%, var(--color-background) 100%);
+	color: var(--color-text);
+}
+
+.dark body {
+	background: radial-gradient(circle at top, color-mix(in srgb, var(--color-background) 85%, #0f172a 15%) 0%, var(--color-background) 45%, var(--color-background) 100%);
+}
+
 /* Global card styles */
 .card {
 	background-color: var(--color-card);
@@ -160,20 +177,70 @@ button.primary:hover { background-color: var(--color-primary-hover); }
 
 
 .btn-base {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	border-radius: var(--btn-radius);
 	font-weight: var(--btn-font-weight);
 	padding: var(--btn-padding-y) var(--btn-padding-x);
 	box-shadow: var(--btn-shadow);
-	transition: background-color .2s, color .2s, border-color .2s;
+	transition:
+		background-color 180ms ease,
+		color 180ms ease,
+		border-color 180ms ease,
+		box-shadow 180ms ease,
+		transform 120ms ease;
 	outline: none;
-	line-height: 1.25rem;
+	line-height: 1.3;
+	border: 1px solid transparent;
+}
+.btn-base:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+.btn-base:active {
+	transform: translateY(1px);
+}
+.btn-base:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+	box-shadow: none;
+}
+.btn-primary {
+	background: var(--btn-primary-bg);
+	color: var(--btn-primary-text);
+}
+.btn-primary:hover {
+	background: var(--btn-primary-bg-hover);
+}
+.btn-secondary {
+	background: var(--btn-secondary-bg);
+	color: var(--btn-secondary-text);
+}
+.btn-secondary:hover {
+	background: var(--btn-secondary-bg-hover);
+}
+.btn-ghost {
+	background: transparent;
+	color: inherit;
+}
+.btn-ghost:hover {
+	background-color: rgba(0 0 0 / 0.05);
+}
+.dark .btn-ghost:hover {
+	background-color: rgba(255 255 255 / 0.08);
+}
+.btn-outline {
+	background: transparent;
+	border: 1px solid var(--btn-secondary-bg-hover);
+	color: var(--btn-secondary-text);
+}
+.btn-outline:hover {
+	background-color: rgba(0 0 0 / 0.05);
+}
+.dark .btn-outline:hover {
+	background-color: rgba(255 255 255 / 0.08);
 }
-.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
-.btn-primary:hover { background: var(--btn-primary-bg-hover); }
-.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
-.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
-.btn-ghost { background: transparent; }
-.btn-outline { background: transparent; border:1px solid var(--btn-secondary-bg-hover); }
 
 
 /* Sensor data specific styles */
@@ -192,6 +259,65 @@ button.primary:hover { background-color: var(--color-primary-hover); }
 	color: var(--color-text-secondary);
 }
 
+.surface-card {
+	background-color: color-mix(in srgb, var(--color-card) 96%, #ffffff 4%);
+	color: var(--color-text);
+	border-radius: 0.9rem;
+	border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent 30%);
+	box-shadow:
+		0 26px 38px -32px rgba(15 23 42 / 0.55),
+		0 12px 28px -36px rgba(15 23 42 / 0.45),
+		0 1px 3px rgba(15 23 42 / 0.12);
+	transition:
+		background-color 180ms ease,
+		border-color 180ms ease,
+		box-shadow 200ms ease;
+}
+
+.surface-section {
+	background-color: color-mix(in srgb, var(--color-surface) 96%, #ffffff 4%);
+	border-radius: 0.9rem;
+	border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent 30%);
+}
+
+.surface-muted {
+	background-color: color-mix(in srgb, var(--color-surface-emphasis) 95%, #ffffff 5%);
+	border-radius: 0.9rem;
+}
+
+.header-surface {
+	background-color: var(--color-header);
+	backdrop-filter: blur(14px);
+	border-bottom: 1px solid var(--color-border-subtle);
+	box-shadow: 0 8px 24px -20px rgba(15, 23, 42, 0.4);
+}
+
+.sidebar-surface {
+	background-color: var(--color-sidebar);
+	backdrop-filter: blur(18px);
+	border-right: 1px solid var(--color-border-subtle);
+	box-shadow: 12px 0 28px -28px rgba(15, 23, 42, 0.45);
+}
+
+.dark .surface-card {
+	background-color: color-mix(in srgb, var(--color-foreground-dark) 92%, rgba(15, 23, 42, 0.85) 8%);
+	border-color: color-mix(in srgb, var(--color-border) 65%, transparent 35%);
+}
+
+.dark .surface-section {
+	background-color: color-mix(in srgb, var(--color-foreground-dark) 88%, rgba(15, 23, 42, 0.8) 12%);
+	border-color: color-mix(in srgb, var(--color-border) 65%, transparent 35%);
+}
+
+.dark .surface-muted {
+	background-color: color-mix(in srgb, var(--color-foreground-dark) 75%, rgba(30, 41, 59, 0.9) 25%);
+}
+
+.dark .header-surface,
+.dark .sidebar-surface {
+	border-color: var(--color-border-subtle);
+}
+
 .error-message {
 	color: var(--color-error);
 	background-color: var(--color-error-bg);
@@ -316,40 +442,23 @@ a {
 .form-container {
 	display: flex;
 	flex-direction: column;
-	gap: 1rem;
+	gap: 1.25rem;
 	background-color: var(--color-card);
-	padding: 1.5rem;
-	border-radius: 0.5rem;
+	padding: 1.75rem;
+	border-radius: 0.75rem;
+	border: 1px solid var(--color-border-subtle);
+	box-shadow: var(--shadow-md);
+	transition: box-shadow 180ms ease;
+}
+.form-container:hover {
 	box-shadow:
-		0 4px 6px -1px rgb(0 0 0 / 0.1),
-		0 2px 4px -2px rgb(0 0 0 / 0.1);
+		0 14px 30px -20px rgb(15 23 42 / 0.35),
+		0 8px 18px -12px rgb(15 23 42 / 0.2);
 }
 .form-container label {
 	font-size: 0.875rem;
 	font-weight: 500;
-}
-.form-container input,
-.form-container textarea,
-.form-container select {
-	border-radius: 0.25rem;
-	border-width: 1px;
-	border-color: rgb(209 213 219);
-	padding: 0.5rem;
-}
-.dark .form-container input,
-.dark .form-container textarea,
-.dark .form-container select {
-	border-color: rgb(55 65 81);
-}
-.form-container button[type='submit'],
-.form-container input[type='submit'] {
-	color: white;
-	padding: 0.5rem 1rem;
-	border-radius: 0.25rem;
-}
-.form-container button[type='submit']:disabled,
-.form-container input[type='submit']:disabled {
-	opacity: 0.5;
+	color: var(--color-text);
 }
 
 
@@ -574,6 +683,7 @@ input[type="week"]:focus {
 	/* Status/accent colors */
 	:root.force-light .bg-yellow-500 { background-color: #eab308 !important; }
 	:root.force-light .bg-green-500 { background-color: #22c55e !important; }
+	:root.force-light .bg-red-400.dark\:bg-slate-500 { background-color: #f87171 !important; }
 	
 	/* White/transparent backgrounds */
 	:root.force-light .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
@@ -669,4 +779,4 @@ input[type="week"]:focus {
 	line-height: 1rem;
 	font-weight: 500;
 	color: var(--color-text-muted);
-}
\ No newline at end of file
+}
diff --git a/src/app.d.ts b/src/app.d.ts
index 38b659e5..8167efac 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -4,14 +4,16 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 
-import type { Database } from '$lib/types/database.types';
+import type { Database } from '../database.types';
 import type { Session, SupabaseClient, User } from '@supabase/supabase-js';
 
+type TypedSupabaseClient = SupabaseClient<Database>;
+
 declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			supabase: SupabaseClient;
+			supabase: TypedSupabaseClient;
 			safeGetSession: () => Promise<{ session: Session | null; user: User | null }>;
 			session: Session | null;
 			user: User | null;
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 94790b8d..7b042bee 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -2,6 +2,8 @@ import { error, redirect, type Handle } from '@sveltejs/kit';
 import { createServerClient } from '@supabase/ssr';
 import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
 import { createClient } from '@supabase/supabase-js';
+import type { Session, User } from '@supabase/supabase-js';
+import type { Database } from '../database.types';
 
 const PUBLIC_ROUTES = [
 	'/offline.html',
@@ -54,19 +56,23 @@ const handleCORS: Handle = async ({ event, resolve }) => {
 // Handle for Supabase authentication and session management
 const handleSupabase: Handle = async ({ event, resolve }) => {
 	// Create a Supabase client specific for server-side rendering (SSR)
-	event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
-		cookies: {
-			getAll: () => event.cookies.getAll(),
-			setAll: (cookiesToSet) => {
-				// Store cookies to be set later instead of setting them immediately
-				event.locals.supabaseCookies = cookiesToSet;
+	event.locals.supabase = createServerClient<Database>(
+		PUBLIC_SUPABASE_URL,
+		PUBLIC_SUPABASE_ANON_KEY,
+		{
+			cookies: {
+				getAll: () => event.cookies.getAll(),
+				setAll: (cookiesToSet) => {
+					// Store cookies to be set later instead of setting them immediately
+					event.locals.supabaseCookies = cookiesToSet;
+				}
 			}
 		}
-	});
+	) as any;
 
 	// Handle JWT token authentication for API routes
-	let tokenSession = null;
-	let tokenUser = null;
+	let tokenSession: Session | null = null;
+	let tokenUser: User | null = null;
 
 	// Get headers from the request for better debugging
 	const headers = new Headers(event.request.headers);
@@ -84,17 +90,32 @@ const handleSupabase: Handle = async ({ event, resolve }) => {
 		event.url.pathname.startsWith('/api') || event.url.pathname.includes('/reports/pdf');
 
 	if (jwt && isApiOrAppRoute) {
-		const jwt = authorizationHeader?.replace(/^Bearer\s+/i, '').trim();
-		if (!jwt) {
+		const bearer = authorizationHeader?.replace(/^Bearer\s+/i, '').trim();
+		if (!bearer) {
 			throw error(401, 'Unauthorized access: No JWT token provided');
 		}
-		const jwtSupabase = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+		const jwtSupabase = createClient<Database>(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
 			global: {
-				headers: { Authorization: `Bearer ${jwt}` }
+				headers: { Authorization: `Bearer ${bearer}` }
 			},
 			auth: { persistSession: false }
 		});
-		event.locals.supabase = jwtSupabase;
+
+		const [{ data: sessionData, error: sessionError }, { data: userData, error: userError }] =
+			await Promise.all([jwtSupabase.auth.getSession(), jwtSupabase.auth.getUser()]);
+
+		if (sessionError) {
+			console.error('JWT session lookup error:', sessionError.message);
+		}
+
+		if (userError || !userData?.user) {
+			throw error(401, 'Unauthorized access: Invalid JWT token');
+		}
+
+		tokenSession = sessionData.session ?? null;
+		tokenUser = userData.user;
+
+		event.locals.supabase = jwtSupabase as any;
 		return await resolve(event, {
 			filterSerializedResponseHeaders(name) {
 				return name === 'content-range' || name === 'x-supabase-api-version';
@@ -184,6 +205,8 @@ const handleSupabase: Handle = async ({ event, resolve }) => {
 				// Token is valid, set the user from the validated token
 				//console.log('Valid API token for user:', data.user.email);
 				event.locals.user = data.user;
+				tokenUser = data.user;
+				tokenSession = null;
 
 				// Continue processing the request
 				const response = await resolve(event, {
diff --git a/src/lib/components/BatteryLevel.svelte b/src/lib/components/BatteryLevel.svelte
index 3aba1de1..35bccdf9 100644
--- a/src/lib/components/BatteryLevel.svelte
+++ b/src/lib/components/BatteryLevel.svelte
@@ -4,16 +4,27 @@
 	import { Tooltip } from 'bits-ui';
 
 	// Props
+	type IconSize = 'small' | 'medium' | 'large' | 'xlarge';
+
 	let {
 		value = 50, // 0..100
-		size = 'medium',
+		size = 'medium' as IconSize,
 		showLabel = false, // show % text next to icon
 		charging = false, // optional charging bolt overlay
 		lowThreshold = 15, // % -> red
 		midThreshold = 40, // % -> amber
 		highThreshold = 70, // % -> yellow; above is green
 		ariaLabel = 'Battery level'
-	} = $props();
+	} = $props<{
+		value?: number;
+		size?: IconSize;
+		showLabel?: boolean;
+		charging?: boolean;
+		lowThreshold?: number;
+		midThreshold?: number;
+		highThreshold?: number;
+		ariaLabel?: string;
+	}>();
 
 	function getBatteryColor(): string {
 		if (value <= lowThreshold) return 'red';
diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
index 1e01f1e2..9ad15107 100644
--- a/src/lib/components/CopyButton.svelte
+++ b/src/lib/components/CopyButton.svelte
@@ -1,6 +1,7 @@
 <!-- CopyEmoji.svelte -->
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { writable } from 'svelte/store';
 
 	type Events = {
 		copied: string;
@@ -37,7 +38,7 @@
 		class?: string;
 	}>();
 
-	let showingSuccess = false;
+	const showingSuccess = writable(false);
 	let lastTimer: number | null = null;
 
 	async function copyText(text: string) {
@@ -65,9 +66,9 @@
 			await copyText(value);
 			dispatch('copied', value);
 			// Visual success feedback
-			showingSuccess = true;
+			showingSuccess.set(true);
 			if (lastTimer) window.clearTimeout(lastTimer);
-			lastTimer = window.setTimeout(() => (showingSuccess = false), successMs);
+			lastTimer = window.setTimeout(() => showingSuccess.set(false), successMs);
 		} catch (err) {
 			dispatch('error', err as Error);
 		}
@@ -79,12 +80,12 @@
 	class="cw-copy-emoji {className}"
 	onclick={handleClick}
 	{title}
-	aria-label={showingSuccess ? 'Copied' : title}
+	aria-label={$showingSuccess ? 'Copied' : title}
 	aria-live="polite"
 	{disabled}
 >
 	<span class="emoji" aria-hidden="true" style={`font-size:${size}`}
-		>{showingSuccess ? copiedEmoji : emoji}</span
+		>{$showingSuccess ? copiedEmoji : emoji}</span
 	>
 </button>
 
diff --git a/src/lib/components/DataTable.svelte b/src/lib/components/DataTable.svelte
index a92eedf1..76a9fa79 100644
--- a/src/lib/components/DataTable.svelte
+++ b/src/lib/components/DataTable.svelte
@@ -1,25 +1,35 @@
-<script>
+<script lang="ts">
 	import { _ } from 'svelte-i18n';
-	let { historicalData } = $props();
+	type DataRecord = Record<string, unknown> & { created_at?: string };
 
-	let dataArray = $derived(historicalData); // Assume data is an array of objects
+	let { historicalData } = $props<{ historicalData: DataRecord[] }>();
+
+	let dataArray = $derived(historicalData);
 
 	// Filter data for current day
-	function getCurrentDayData(dataArray) {
+	function getCurrentDayData(dataArray: DataRecord[]): DataRecord[] {
 		const today = new Date();
 		today.setHours(0, 0, 0, 0);
 
 		return dataArray.filter((item) => {
-			const itemDate = new Date(item.created_at);
+			const createdAt = item.created_at;
+			if (typeof createdAt !== 'string') {
+				return false;
+			}
+			const itemDate = new Date(createdAt);
+			if (Number.isNaN(itemDate.getTime())) {
+				return false;
+			}
 			itemDate.setHours(0, 0, 0, 0);
 			return itemDate.getTime() === today.getTime();
 		});
 	}
 
 	// Get visible columns
-	function getVisibleColumns(dataArray) {
+	function getVisibleColumns(dataArray: DataRecord[]): string[] {
 		const excludedColumns = ['is_simulated', 'dev_eui', 'smoke_detected', 'id', 'vape_detected'];
-		const allKeys = dataArray.length > 0 ? Object.keys(dataArray[0]) : [];
+		const allKeys =
+			dataArray.length > 0 ? Object.keys(dataArray[0] as Record<string, unknown>) : [];
 
 		return allKeys.filter((key) => {
 			if (excludedColumns.includes(key)) return false;
@@ -29,7 +39,7 @@
 	}
 
 	// Format column names
-	function formatColumnName(key) {
+	function formatColumnName(key: string): string {
 		return key
 			.split('_')
 			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
@@ -37,50 +47,50 @@
 	}
 
 	// Format cell value
-	function formatCellValue(key, value) {
+	function formatCellValue(key: string, value: unknown): string {
 		if (key === 'created_at') {
-			return new Date(value).toLocaleString();
+			if (typeof value === 'string') {
+				const date = new Date(value);
+				return Number.isNaN(date.getTime()) ? '—' : date.toLocaleString();
+			}
+			return '—';
 		}
 		if (typeof value === 'boolean') {
 			return value ? 'Yes' : 'No';
 		}
 		if (typeof value === 'number') {
-			return value.toFixed(2);
+			return Number.isFinite(value) ? value.toFixed(2) : '—';
 		}
-		return value;
+		return value == null ? '—' : String(value);
 	}
 
 	let filteredData = $derived(getCurrentDayData(dataArray));
 	let visibleColumns = $derived(getVisibleColumns(filteredData));
 </script>
 
-<div class="min-h-screen w-full text-gray-900">
-	<div class="mx-auto w-full p-4">
-		<div
-			class="overflow-hidden rounded-lg border border-gray-200/70 bg-white shadow-lg dark:border-white/10 dark:bg-neutral-900"
-		>
+<div class="w-full text-[var(--color-text)]">
+	<div class="mx-auto w-full max-w-6xl p-4">
+		<div class="surface-card overflow-hidden">
 			<!-- Header -->
-			<div
-				class="bg-gradient-to-r from-blue-600 to-blue-700 px-6 py-4 dark:from-blue-700 dark:to-indigo-800"
-			>
-				<h1 class="text-2xl font-bold text-white">{$_('Sensor Data - Today')}</h1>
+			<div class="border-b border-[var(--color-border-subtle)] px-6 py-4">
+				<h1 class="text-xl leading-tight font-semibold">{$_('Sensor Data - Today')}</h1>
 			</div>
 
 			<!-- Table wrapper -->
 			<div class="overflow-x-auto">
 				{#if filteredData.length === 0}
-					<div class="p-12 text-center text-gray-500 dark:text-gray-400">
-						<p class="text-lg">{$_('No data available for today')}</p>
+					<div class="p-12 text-center text-[var(--color-text-muted)]">
+						<p class="text-base">{$_('No data available for today')}</p>
 					</div>
 				{:else}
 					<table class="w-full text-sm">
 						<thead
-							class="border-b border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-neutral-800"
+							class="border-b border-[var(--color-border-subtle)] bg-[var(--color-surface-emphasis)]"
 						>
 							<tr>
 								{#each visibleColumns as column}
 									<th
-										class="text-md px-6 py-3 text-left font-semibold tracking-wide text-gray-700 uppercase dark:text-gray-200"
+										class="px-6 py-3 text-left text-xs font-semibold tracking-wide text-[var(--color-text-muted)] uppercase"
 									>
 										{$_(column)}
 									</th>
@@ -88,15 +98,11 @@
 							</tr>
 						</thead>
 
-						<tbody class="divide-y divide-gray-200 dark:divide-white/10">
+						<tbody class="divide-y divide-[var(--color-border-subtle)]">
 							{#each filteredData as row, rowIndex}
-								<tr
-									class="transition-colors duration-150 even:bg-transparent hover:bg-gray-50 dark:even:bg-white/5 dark:hover:bg-white/10"
-								>
+								<tr class="transition-colors duration-150 hover:bg-[var(--color-surface-emphasis)]">
 									{#each visibleColumns as column}
-										<td
-											class="px-6 py-3 text-lg whitespace-nowrap text-gray-900 dark:text-gray-100"
-										>
+										<td class="px-6 py-3 text-sm whitespace-nowrap text-[var(--color-text)]">
 											{formatCellValue(column, row[column])}
 										</td>
 									{/each}
diff --git a/src/lib/components/GlobalSidebar.svelte b/src/lib/components/GlobalSidebar.svelte
index 70ae1b74..5fd4c2bd 100644
--- a/src/lib/components/GlobalSidebar.svelte
+++ b/src/lib/components/GlobalSidebar.svelte
@@ -140,33 +140,21 @@
 
 <!-- Sidebar -->
 <aside
-	class="fixed top-0 left-0 z-50 flex flex-col overflow-x-hidden border-r transition-all duration-300 ease-in-out
-		{dark ? 'border-slate-700/30 bg-slate-800/95' : 'border-gray-200/30 bg-slate-200'}
-		shadow-lg backdrop-blur-sm"
-	style="top: 73px; 
-		height: calc(100vh - 73px);
-		width: {isOpen ? '256px' : '64px'};"
+	class="sidebar-surface fixed top-[73px] left-0 z-50 flex flex-col overflow-x-hidden transition-all duration-300 ease-in-out"
+	style="height: calc(100vh - 73px); width: {isOpen ? '256px' : '64px'};"
 	class:mobile-hidden={!isOpen}
 	aria-label="Sidebar navigation"
 >
 	<!-- Sidebar Header -->
 	{#if sidebarStore.isOpen}
-		<div
-			class="flex items-center justify-between border-b p-4 {dark
-				? 'border-slate-700/30'
-				: 'border-gray-200/30'}"
-		>
-			<h2 class="text-lg font-semibold {dark ? 'text-white' : 'text-gray-900'}">
-				{$_('Navigation')}
-			</h2>
+		<div class="flex items-center justify-between border-b border-[var(--color-border-subtle)] p-4">
+			<h2 class="text-lg font-semibold text-[var(--color-text)]">{$_('Navigation')}</h2>
 			<button
 				onclick={() => {
 					// Toggle sidebar only (no navigation) – don't trigger global loading overlay
 					sidebarStore.toggle();
 				}}
-				class="rounded-lg p-2 transition-all duration-200 hover:scale-105 {dark
-					? 'text-slate-400 hover:bg-slate-700/50 hover:text-white'
-					: 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'}"
+				class="rounded-lg p-2 text-[var(--color-text-muted)] transition-all duration-200 hover:scale-105 hover:bg-[var(--color-surface-emphasis)] hover:text-[var(--color-text)]"
 				aria-label="Toggle small icon mode"
 			>
 				<MaterialIcon name="keyboard_double_arrow_left" size="small" />
@@ -178,7 +166,7 @@
 	<nav class="z-10 flex flex-1 flex-col overflow-y-auto pr-2" style="z-index: 10000;">
 		<ul class="space-y-1">
 			{#if !sidebarStore.isOpen}
-				<li class="mx-3 border-t {dark ? 'border-slate-500/30' : 'border-gray-200/30'}">
+				<li class="mx-3 border-t border-[var(--color-border-subtle)]">
 					<button
 						type="button"
 						onclick={() => {
@@ -200,33 +188,27 @@
 					<a
 						href={item.href}
 						onclick={() => {
-							// Only trigger loading if we're navigating to a different route
 							if ($page.url.pathname !== item.href) {
 								startLoading();
 							}
 							sidebarStore.close();
 						}}
-						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 no-underline transition-all duration-200 hover:scale-105
-							{isActiveRoute(item.matcher)
-							? dark
-								? 'bg-emerald-600/30 text-emerald-400'
-								: 'bg-emerald-100 text-emerald-700'
-							: dark
-								? 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
-								: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}"
+						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:scale-[1.01] hover:bg-[var(--color-surface-emphasis)] hover:text-[var(--color-text)] {isActiveRoute(
+							item.matcher
+						)
+							? 'bg-[var(--color-primary)]/12 text-[var(--color-primary)] shadow-[0_0_0_1px_var(--color-primary)]/15'
+							: ''}"
 						aria-current={isActiveRoute(item.matcher) ? 'page' : undefined}
 						title={sidebarStore.isSmallIconMode && !sidebarStore.isOpen ? $_(item.label) : ''}
 					>
-						<MaterialIcon name={item.icon} size="medium" />
-						<input type="hidden" value={sidebarStore.isOpen} />
-
+						<MaterialIcon name={item.icon} size="medium" class="rounded-md bg-white/5 p-1" />
 						{#if sidebarStore.isOpen}
-							<span class="font-medium">{$_(item.label)}</span>
+							<span class="leading-tight font-medium">{$_(item.label)}</span>
 						{/if}
 					</a>
 				</li>
 				{#if index < navigationItems.length - 1}
-					<li class="mx-3 border-t {dark ? 'border-slate-500/30' : 'border-gray-200/30'}"></li>
+					<li class="mx-3 border-t border-[var(--color-border-subtle)]"></li>
 				{/if}
 			{/each}
 		</ul>
@@ -234,18 +216,14 @@
 		{#if sidebarStore.isOpen}
 			<button
 				onclick={handleLogout}
-				class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors duration-200
-				{dark ? 'bg-emerald-600/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700'}
-				{dark
-					? 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
-					: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}"
+				class="mt-4 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-[var(--color-primary)] shadow-[0_0_0_1px_var(--color-primary)]/20 transition-colors duration-200 hover:bg-[var(--color-primary)]/15"
 			>
-				<MaterialIcon name="logout" size="medium" />
+				<MaterialIcon name="logout" size="medium" class="rounded-md bg-white/5 p-1" />
 				{$_('Logout')}
 			</button>
 		{/if}
 		<ul class="space-y-1">
-			<li class="mx-3 border-t {dark ? 'border-slate-500/30' : 'border-gray-200/30'}"></li>
+			<li class="mx-3 border-t border-[var(--color-border-subtle)]"></li>
 			<li>
 				<div class="flex flex-row">
 					<a
@@ -256,19 +234,15 @@
 							}
 							sidebarStore.close();
 						}}
-						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 no-underline transition-all duration-200
-							{isActiveRoute('/app/account-settings/general')
-							? dark
-								? 'bg-emerald-600/30 text-emerald-400'
-								: 'bg-emerald-100 text-emerald-700'
-							: dark
-								? 'text-slate-300 hover:bg-slate-700/50 hover:text-white'
-								: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'}"
+						class="decoration-none flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-[var(--color-text-muted)] transition-all duration-200 hover:scale-[1.01] hover:bg-[var(--color-surface-emphasis)] hover:text-[var(--color-text)] {isActiveRoute(
+							'/app/account-settings/general'
+						)
+							? 'bg-[var(--color-primary)]/12 text-[var(--color-primary)] shadow-[0_0_0_1px_var(--color-primary)]/15'
+							: ''}"
 						aria-current={isActiveRoute('/app/account-settings/general') ? 'page' : undefined}
 						title={sidebarStore.isSmallIconMode && !sidebarStore.isOpen ? $_('settings') : ''}
 					>
-						<MaterialIcon name="settings" size="medium" />
-						<input type="hidden" value={sidebarStore.isOpen} />
+						<MaterialIcon name="settings" size="medium" class="rounded-md bg-white/5 p-1" />
 					</a>
 					<span class="flex flex-1 border-l md:hidden"></span>
 					<ThemeToggle class="flex w-full md:hidden" outlineColor="black" />
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 69b553b7..8df4614c 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -78,55 +78,25 @@
 </script>
 
 <!-- Main Header -->
-<header
-	class="fixed top-0 right-0 left-0 z-50 overflow-hidden border-b transition-colors duration-300 {dark
-		? 'border-emerald-900 bg-emerald-800'
-		: 'border-emerald-500 bg-slate-800'}"
->
-	<!-- Animated background pattern -->
-	<div class="absolute inset-0">
-		<div
-			class="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,_{dark
-				? '#22c55e'
-				: '#10b981'}_2px,_transparent_2px),radial-gradient(circle_at_75%_75%,_{dark
-				? '#10b981'
-				: '#059669'}_1px,_transparent_1px)] animate-[drift_20s_linear_infinite] bg-[length:60px_60px]"
-		></div>
-	</div>
-
-	<nav class="relative z-10 flex w-full p-4">
+<header class="fixed inset-x-0 top-0 z-50 border-b border-emerald-900 bg-emerald-800 text-white">
+	<nav class="flex w-full flex-row items-center gap-4 px-6 py-3">
 		<!-- Logo -->
 		<a
 			href="/app/dashboard"
-			class="mr-5 flex items-center gap-3 no-underline transition-transform hover:scale-105 hover:no-underline focus:no-underline"
+			class="mr-5 flex items-center gap-3 rounded-lg px-2 py-1 no-underline transition-transform hover:scale-[1.02] hover:no-underline focus:no-underline"
 			style="text-decoration: none !important;"
 		>
-			<img src={CropWatchLogo} alt="CropWatch Logo" class="h-10" width="40px" height="40px" />
+			<img src={CropWatchLogo} alt="CropWatch Logo" class="h-9 w-9" width="36" height="36" />
 			<div
-				class="cropwatch-shine rounded-md text-2xl font-bold tracking-tight text-white transition-colors duration-300"
-				style="text-decoration: none !important;"
+				class="font-heading text-xl font-semibold tracking-tight text-white transition-colors duration-300"
 			>
 				<h1>𝘾𝙧𝙤𝙥𝙒𝙖𝙩𝙘𝙝<sup><small>®</small></sup></h1>
 			</div>
 		</a>
 
-		<!-- Desktop Navigation -->
-		<ul class="hidden items-center gap-8 lg:flex">
-			<!-- <li>
-				<a
-					href="#about"
-					class="relative rounded-lg px-4 py-2 font-medium backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:after:w-4/5 {getDarkMode()
-						? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-						: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-				>
-					About
-				</a>
-			</li> -->
-		</ul>
-
-		<!-- CTA Button -->
 		<span class="flex-1"></span>
-		<div class="hidden items-center gap-3 md:flex">
+
+		<div class="hidden items-center gap-3 text-white md:flex">
 			<!-- @todo Move the language and theme selectors to the user settings page -->
 			<LanguageSelector />
 			<ThemeModeSelector />
@@ -160,45 +130,35 @@
 	<!-- Mobile Menu -->
 	{#if mobileMenuOpen}
 		<div
-			class="mobile-menu absolute top-full right-0 left-0 z-50 border-b transition-all duration-300 lg:hidden {dark
-				? 'border-slate-700 bg-slate-800'
-				: 'border-gray-200 bg-white'}"
+			class="mobile-menu absolute top-full right-0 left-0 z-50 border-b border-emerald-900 bg-emerald-800/95 text-white transition-all duration-300 lg:hidden"
 		>
 			<div class="px-4 py-4">
 				<!-- Mobile Navigation Links -->
-				<div class="space-y-3 border-b pb-4 {dark ? 'border-slate-700/30' : 'border-gray-200/30'}">
+				<div class="space-y-3 border-b border-emerald-900/60 pb-4">
 					<a
 						href="/app/dashboard"
-						class="block rounded-lg px-4 py-2 font-medium transition-colors {dark
-							? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-							: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
+						class="block rounded-lg px-4 py-2 font-medium text-white transition-colors hover:bg-white/10"
 						onclick={() => (mobileMenuOpen = false)}
 					>
 						Dashboard
 					</a>
 					<a
 						href="/app/dashboard/location"
-						class="block rounded-lg px-4 py-2 font-medium transition-colors {dark
-							? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-							: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
+						class="block rounded-lg px-4 py-2 font-medium text-white transition-colors hover:bg-white/10"
 						onclick={() => (mobileMenuOpen = false)}
 					>
 						Locations
 					</a>
 					<a
 						href="/app/devices"
-						class="block rounded-lg px-4 py-2 font-medium transition-colors {dark
-							? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-							: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
+						class="block rounded-lg px-4 py-2 font-medium text-white transition-colors hover:bg-white/10"
 						onclick={() => (mobileMenuOpen = false)}
 					>
 						Devices
 					</a>
 					<a
 						href="/app/reports"
-						class="block rounded-lg px-4 py-2 font-medium transition-colors {dark
-							? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-							: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
+						class="block rounded-lg px-4 py-2 font-medium text-white transition-colors hover:bg-white/10"
 						onclick={() => (mobileMenuOpen = false)}
 					>
 						Reports
@@ -297,88 +257,8 @@
 	{/if}
 </header>
 
-<!-- Secondary Navigation/Breadcrumb Bar -->
-<div
-	class="fixed right-0 left-0 z-40 border-b transition-colors {dark
-		? 'border-slate-700 bg-slate-800'
-		: 'border-gray-200 bg-slate-200 shadow-sm'} titlebar-safe-area"
-	style="top: 72px;"
->
-	<div class="mx-auto px-4 py-3">
-		<div class="flex flex-wrap items-center gap-4">
-			<!-- Breadcrumb or secondary nav -->
-			<div class="flex items-center gap-2 text-sm {dark ? 'text-slate-400' : 'text-gray-600'}">
-				<Breadcrumbs />
-			</div>
-			<div class="flex-1"></div>
-			<!-- Quick actions -->
-			<div class="hidden items-center gap-4 text-sm md:flex">
-				<a
-					href={`https://kb.cropwatch.io/doku.php?id=${page.route.id}`}
-					target="_blank"
-					class="flex items-center gap-1 transition-colors hover:text-green-400 {dark
-						? 'text-slate-400'
-						: 'text-gray-600'}"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="16"
-						height="16"
-						fill="currentColor"
-						class="bi bi-question-circle"
-						viewBox="0 0 16 16"
-					>
-						<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
-						<path
-							d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"
-						/>
-					</svg>
-					Help
-				</a>
-			</div>
-		</div>
-	</div>
-</div>
-
 <style>
 	.titlebar-safe-area {
 		padding-top: env(titlebar-area-height, 0px);
 	}
-
-	/* Math Sans Bold Italic for CropWatch header */
-	.cropwatch-shine {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.cropwatch-shine::before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: -100%;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-		animation: shine 2s ease-in-out 0.5s;
-		pointer-events: none;
-	}
-
-	@keyframes shine {
-		0% {
-			left: -100%;
-		}
-		100% {
-			left: 100%;
-		}
-	}
-
-	/* Removed unused .cropwatch-shine-bright variant */
-	@keyframes drift {
-		0% {
-			transform: translateX(0) translateY(0);
-		}
-		100% {
-			transform: translateX(-60px) translateY(-60px);
-		}
-	}
 </style>
diff --git a/src/lib/components/RelayControl.svelte b/src/lib/components/RelayControl.svelte
index 5ce1d9dd..eed88eae 100644
--- a/src/lib/components/RelayControl.svelte
+++ b/src/lib/components/RelayControl.svelte
@@ -3,7 +3,7 @@
 	import { success, error as showError } from '$lib/stores/toast.svelte';
 	import { _ } from 'svelte-i18n';
 	import Spinner from '$lib/components/Spinner.svelte';
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import type { RealtimeChannel, SupabaseClient } from '@supabase/supabase-js';
 	import type { Device } from '$lib/models/Device';
 
@@ -14,7 +14,7 @@
 	}: { supabase: SupabaseClient | undefined; device: Device | undefined; latestData: any } =
 		$props();
 
-	const devEui = $derived(device.dev_eui);
+	const devEui = $derived(device?.dev_eui ?? '');
 	const t = $derived(_);
 
 	function translate(key: string, params?: Record<string, unknown>) {
@@ -31,7 +31,7 @@
 	];
 
 	const POLL_INTERVAL_MS = 10_000;
-	const COOLDOWN_SECONDS = 15;
+	const COOLDOWN_SECONDS = 120;
 
 	let busy: Record<RelayKey, boolean> = $state({ relay1: false, relay2: false });
 	let relayState: Record<RelayKey, boolean> = $state({ relay1: false, relay2: false });
@@ -40,41 +40,7 @@
 
 	let statusInterval: ReturnType<typeof setInterval> | undefined;
 	let cooldownTimer: ReturnType<typeof setInterval> | undefined;
-	let broadcastChannel: RealtimeChannel | undefined = $state();
-
-	broadcastChannel = supabase.channel('cw_relay_data', {
-		config: { private: true }
-	});
-	broadcastChannel.on('broadcast', { event: '*' }, (payload) => {
-		startCooldown();
-		payload.payload.record.relay_1;
-		payload.payload.record.relay_2;
-		if (payload.payload.record.dev_eui !== devEui) return;
-		const r1 = coerceBool(payload.payload.record.relay_1 ?? payload.payload.record.relay1);
-		const r2 = coerceBool(payload.payload.record.relay_2 ?? payload.payload.record.relay2);
-		relayState = {
-			relay1: r1 ?? relayState.relay1,
-			relay2: r2 ?? relayState.relay2
-		};
-		latestData = payload.payload.record;
-	});
-	broadcastChannel.subscribe((status, err) => {
-		console.debug('[Dashboard] Broadcast channel status', { status, err });
-		if (status === 'SUBSCRIBED') {
-			// Successfully subscribed
-			console.log('Broadcast channel subscribed');
-		}
-		if (status === 'CHANNEL_ERROR') {
-			console.error('Broadcast channel error', err);
-		}
-		if (status === 'TIMED_OUT') {
-			console.warn('Broadcast channel timed out');
-		}
-		if (status === 'CLOSED') {
-			console.warn('Broadcast channel closed');
-			broadcastChannel = undefined;
-		}
-	});
+	let broadcastChannel: RealtimeChannel | undefined;
 
 	function setBusy(relay: RelayKey, val: boolean) {
 		busy = { ...busy, [relay]: val };
@@ -116,6 +82,10 @@
 		if (showLoader) {
 			loadingInitial = true;
 		}
+		if (!devEui) {
+			loadingInitial = false;
+			return;
+		}
 		try {
 			const res = await fetch(`/api/devices/${devEui}/status`);
 			if (res.ok) {
@@ -138,6 +108,41 @@
 
 	onMount(() => {
 		void loadInitialState(true);
+
+		if (supabase) {
+			const channel = supabase.channel('cw_relay_data', {
+				config: { private: true }
+			});
+
+			channel.on('broadcast', { event: '*' }, (payload) => {
+				const record = payload?.payload?.record as Record<string, unknown> | undefined;
+				if (!record || record.dev_eui !== devEui) return;
+				startCooldown();
+				const r1 = coerceBool(record.relay_1 ?? record.relay1);
+				const r2 = coerceBool(record.relay_2 ?? record.relay2);
+				relayState = {
+					relay1: r1 ?? relayState.relay1,
+					relay2: r2 ?? relayState.relay2
+				};
+				latestData = record;
+			});
+
+			channel.subscribe((status, err) => {
+				console.debug('[Dashboard] Broadcast channel status', { status, err });
+				if (status === 'CHANNEL_ERROR') {
+					console.error('Broadcast channel error', err);
+				}
+				if (status === 'TIMED_OUT') {
+					console.warn('Broadcast channel timed out');
+				}
+				if (status === 'CLOSED') {
+					console.warn('Broadcast channel closed');
+				}
+			});
+
+			broadcastChannel = channel;
+		}
+
 		statusInterval = setInterval(() => {
 			void loadInitialState();
 		}, POLL_INTERVAL_MS);
@@ -148,17 +153,11 @@
 				statusInterval = undefined;
 			}
 			clearCooldownTimer();
+			void broadcastChannel?.unsubscribe();
+			broadcastChannel = undefined;
 		};
 	});
 
-	onDestroy(() => {
-		if (statusInterval) {
-			clearInterval(statusInterval);
-			statusInterval = undefined;
-		}
-		clearCooldownTimer();
-	});
-
 	function buttonDisabled(relay: RelayKey, turnOn: boolean) {
 		return loadingInitial || busy[relay] || cooldownRemaining > 0 || relayState[relay] === turnOn;
 	}
@@ -171,7 +170,7 @@
 	}
 
 	async function sendCommand(relay: RelayKey, turnOn: boolean) {
-		if (busy[relay]) return;
+		if (busy[relay] || !devEui) return;
 		setBusy(relay, true);
 		const payloadName = (relay + (turnOn ? 'On' : 'Off')) as keyof typeof DRAGINO_LT22222L_PAYLOADS;
 		try {
diff --git a/src/lib/components/Reports/NewPoint.svelte b/src/lib/components/Reports/NewPoint.svelte
index 9fc0a242..b77f78fb 100644
--- a/src/lib/components/Reports/NewPoint.svelte
+++ b/src/lib/components/Reports/NewPoint.svelte
@@ -1,22 +1,34 @@
 <script lang="ts">
-	let { onSelect } = $props();
+	type Operator = '>' | '<' | '=' | null;
+
+	let { onSelect } = $props<{
+		onSelect: (point: {
+			id: number;
+			name: string;
+			operator: Operator;
+			value: number | null;
+			min: number | null;
+			max: number | null;
+			color: string;
+		}) => void;
+	}>();
 
 	// Make `point` reactive
 	let point = $state({
 		id: 5,
 		name: 'Warning High',
-		operator: '>',
-		value: 30,
-		min: null,
-		max: null,
+		operator: '>' as Operator,
+		value: 30 as number | null,
+		min: null as number | null,
+		max: null as number | null,
 		color: '#FFA500'
 	});
 
 	function handleSave() {
-        if (point.min != null && point.max != null) {
-            point.operator = undefined;
-            point.value = null;
-        }
+		if (point.min != null && point.max != null) {
+			point.operator = null;
+			point.value = null;
+		}
 		onSelect({
 			id: point.id,
 			name: point.name,
@@ -27,19 +39,30 @@
 			color: point.color
 		});
 	}
+
+	function handleOperatorChange(event: Event) {
+		const value = (event.target as HTMLSelectElement).value;
+		point.operator = value === '' ? null : (value as Operator);
+		if (point.operator === null) {
+			point.value = null;
+		} else {
+			point.min = null;
+			point.max = null;
+		}
+	}
 </script>
 
 <!-- Bind inputs to the reactive `point` object -->
 <input type="text" bind:value={point.name} placeholder="Point Name" />
-{#if point.operator != undefined}
+{#if point.operator !== null}
 	<input type="number" bind:value={point.value} placeholder="Value" />
 {/if}
-{#if point.operator === undefined}
+{#if point.operator === null}
 	<input type="number" bind:value={point.min} placeholder="Minimum Value" />
 	<input type="number" bind:value={point.max} placeholder="Maximum Value" />
 {/if}
-<select bind:value={point.operator}>
-	<option value={undefined}>empty</option>
+<select value={point.operator ?? ''} onchange={handleOperatorChange}>
+	<option value="">{'Range'}</option>
 	<option value=">">&gt;</option>
 	<option value="<">&lt;</option>
 	<option value="=">=</option>
diff --git a/src/lib/components/StatsCard/StatsCard.svelte b/src/lib/components/StatsCard/StatsCard.svelte
index 280ea77a..a8590278 100644
--- a/src/lib/components/StatsCard/StatsCard.svelte
+++ b/src/lib/components/StatsCard/StatsCard.svelte
@@ -2,7 +2,7 @@
 	import type { DeviceStats } from '$lib/models/DeviceDataRecord';
 	import { nameToNotation } from '$lib/utilities/NameToNotation';
 	import { formatNumber, getTextColorByKey } from '$lib/utilities/stats';
-	import { mdiArrowDownBold, mdiArrowUpBold, mdiMinus } from '@mdi/js';
+	import { mdiArrowDownBold, mdiArrowUpBold, mdiMinus } from '$lib/icons/mdi';
 	import { _ } from 'svelte-i18n';
 	import Icon from '$lib/components/ui/base/Icon.svelte';
 	import MaterialIcon from '../UI/icons/MaterialIcon.svelte';
diff --git a/src/lib/components/UI/dashboard/DashboardCard.svelte b/src/lib/components/UI/dashboard/DashboardCard.svelte
index 28b91033..1c4cfbab 100644
--- a/src/lib/components/UI/dashboard/DashboardCard.svelte
+++ b/src/lib/components/UI/dashboard/DashboardCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Icon from '$lib/components/ui/base/Icon.svelte';
 	import { goto } from '$app/navigation';
-	import { mdiAlert, mdiCheck, mdiClose, mdiClockOutline } from '@mdi/js';
+	import { mdiAlert, mdiCheck, mdiClose, mdiClockOutline } from '$lib/icons/mdi';
 	import type { Location } from '$lib/models/Location';
 	import type { Snippet } from 'svelte';
 
@@ -24,45 +24,47 @@
 	}>();
 </script>
 
-<div class="card-surface flex h-full w-full flex-col overflow-hidden text-gray-900 dark:text-white">
-	<div class="relative flex min-h-[60px] flex-row bg-teal-800 text-yellow-300 dark:bg-[#2c3546]">
-		<h2
-			class="flex w-full flex-row justify-between px-2 pt-3 text-lg font-semibold text-yellow-600 dark:text-yellow-400"
-		>
-			<div
-				class="top-3 left-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/20 shadow-lg dark:bg-gray-800"
+<div
+	class="surface-card flex h-full w-full flex-col overflow-hidden rounded-lg border border-[var(--color-border)] text-[var(--color-text)] shadow-sm"
+>
+	<div
+		class="flex items-center justify-between border-b border-[var(--color-border)] bg-gradient-to-r from-[var(--color-surface)] to-transparent px-4 py-3"
+	>
+		<div class="flex items-center gap-3">
+			<span
+				class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-500"
 			>
 				{#if loading}
-					<Icon class="text-xl text-blue-400" path={mdiClockOutline} />
+					<Icon class="text-blue-500" path={mdiClockOutline} />
 				{:else if allActive}
-					<Icon class="text-xl text-green-500" path={mdiCheck} />
+					<Icon class="text-emerald-500" path={mdiCheck} />
 				{:else if activeDevices.length > 0 && !allInactive}
-					<Icon class="rounded-lg text-xl text-orange-300" path={mdiAlert} />
+					<Icon class="text-amber-400" path={mdiAlert} />
 				{:else}
-					<Icon class="text-xl text-red-500" path={mdiClose} />
+					<Icon class="text-rose-500" path={mdiClose} />
 				{/if}
-			</div>
-			<span class="ml-5 flex flex-auto pt-1">{location.name}</span>
-			<button
-				class="ml-2 flex inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-blue-200 bg-blue-50 p-0 text-blue-700 transition-colors duration-200 hover:bg-blue-100 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-300 dark:hover:bg-gray-600"
-				onclick={() => goto(href)}
-				aria-label="View details"
-			>
-				<svg viewBox="0 0 24 24" class="pointer-events-none h-5 w-5">
-					<path
-						fill="currentColor"
-						d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
-					/>
-				</svg>
-			</button>
-		</h2>
+			</span>
+			<h2 class="text-base leading-tight font-semibold text-gray-900 dark:text-gray-100">
+				{location.name}
+			</h2>
+		</div>
+		<button
+			class="inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-[var(--color-border-subtle)] bg-[var(--color-surface-emphasis)] text-gray-700 transition-colors duration-200 hover:bg-[var(--color-primary)]/10 hover:text-[var(--color-primary)] dark:text-gray-300"
+			onclick={() => goto(href)}
+			aria-label="View details"
+		>
+			<svg viewBox="0 0 24 24" class="pointer-events-none h-5 w-5">
+				<path
+					fill="currentColor"
+					d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
+				/>
+			</svg>
+		</button>
 	</div>
 
-	<div class="px-2 py-2">
-		<div class="flex w-full flex-col items-start gap-1">
-			{#if content}
-				{@render content()}
-			{/if}
-		</div>
+	<div class="flex flex-1 flex-col gap-2 px-4 py-3 text-sm">
+		{#if content}
+			{@render content()}
+		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/UI/dashboard/DashboardFilterBits.svelte b/src/lib/components/UI/dashboard/DashboardFilterBits.svelte
index b8dd9566..53e45f8c 100644
--- a/src/lib/components/UI/dashboard/DashboardFilterBits.svelte
+++ b/src/lib/components/UI/dashboard/DashboardFilterBits.svelte
@@ -13,7 +13,7 @@
 		mdiTune,
 		mdiViewDashboard,
 		mdiViewList
-	} from '@mdi/js';
+	} from '$lib/icons/mdi';
 	import { Button, DropdownMenu, Tooltip } from 'bits-ui';
 	import { onMount } from 'svelte';
 	import { themeStore } from '$lib/stores/theme';
diff --git a/src/lib/components/UI/dashboard/DataRowItem.svelte b/src/lib/components/UI/dashboard/DataRowItem.svelte
index 9258f06d..31ab94bf 100644
--- a/src/lib/components/UI/dashboard/DataRowItem.svelte
+++ b/src/lib/components/UI/dashboard/DataRowItem.svelte
@@ -5,7 +5,7 @@
 	import { nameToEmoji } from '$lib/utilities/NameToEmoji';
 	import { formatNumber } from '$lib/utilities/stats';
 	import { getDeviceLatestTimestamp } from '$lib/utilities/deviceUtils';
-	import { mdiArrowDown, mdiArrowRight, mdiArrowUp } from '@mdi/js';
+	import { mdiArrowDown, mdiArrowRight, mdiArrowUp } from '$lib/icons/mdi';
 	import { _ } from 'svelte-i18n';
 	import Collapse from '$lib/components/ui/base/Collapse.svelte';
 	import Button from '$lib/components/UI/buttons/Button.svelte';
@@ -144,14 +144,14 @@
 		<div class="my-1 mr-2 ml-2 flex-1 border-r-2">
 			<div class="flex flex-col text-base">
 				<div class="justify-left flex flex-row pl-0">
-					<b class="ml-4 pb-1 text-sm font-semibold tracking-wide text-gray-700 dark:text-gray-300"
+					<b class="ml-4 pb-1 text-sm font-semibold tracking-wide text-gray-800 dark:text-gray-200"
 						>{device.name || `Device ${device.dev_eui}`}</b
 					>
 				</div>
 				<div class="flex w-full flex-row justify-between justify-center space-x-5">
 					{#if device.latestData}
 						<div class="flex items-center">
-							<span class="mr-1.5 text-lg text-gray-600 dark:text-gray-400"
+							<span class="mr-1.5 text-lg text-gray-700 dark:text-gray-300"
 								>{nameToEmoji(primaryDataKey)}</span
 							>
 							<div class="flex flex-col items-start">
@@ -160,7 +160,7 @@
 								>
 									{formatNumber({ key: primaryDataKey, value: primaryValue })}
 									<span
-										class="text-accent-700 dark:text-accent-400 ml-0.5 align-top text-xs font-normal"
+										class="ml-0.5 align-top text-xs font-semibold text-gray-700 dark:text-gray-300"
 										>{primaryNotation}</span
 									>
 								</span>
@@ -169,7 +169,7 @@
 						{#if secondaryDataKey}
 							<span class="flex flex-grow-[0.2]"></span>
 							<div class="flex items-center">
-								<span class="mr-1.5 text-lg text-gray-600 dark:text-gray-400"
+								<span class="mr-1.5 text-lg text-gray-700 dark:text-gray-300"
 									>{nameToEmoji(secondaryDataKey)}</span
 								>
 								<div class="no-wrap flex flex-col items-start">
@@ -177,7 +177,7 @@
 										class="flex flex-nowrap items-baseline text-lg leading-tight font-bold text-gray-900 dark:text-white"
 									>
 										<span>{formatNumber({ key: secondaryDataKey, value: secondaryValue })}</span>
-										<span class="text-accent-700 dark:text-accent-400 ml-0.5 text-xs font-normal"
+										<span class="ml-0.5 text-xs font-semibold text-gray-700 dark:text-gray-300"
 											>{secondaryNotation}</span
 										>
 									</span>
@@ -191,7 +191,7 @@
 		<div class="flex items-center pr-2">
 			<svg
 				viewBox="0 0 24 24"
-				class="h-5 w-5 text-gray-600 dark:text-gray-400"
+				class="h-5 w-5 text-gray-700 dark:text-gray-400"
 				fill="currentColor"
 				aria-hidden="true"
 			>
@@ -231,8 +231,8 @@
 
 <Collapse
 	classes={{
-		root: 'mb-1 bg-gray-200 dark:bg-gray-800/30 w-full ',
-		icon: 'text-gray-600 dark:text-gray-500 data-[open=true]:rotate-90'
+		root: 'mb-1.5 bg-gray-100 dark:bg-gray-800/50 w-full rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow',
+		icon: 'text-gray-700 dark:text-gray-400 data-[open=true]:rotate-90'
 	}}
 	open={defaultCollapse}
 	on:change={(e) => collapseStateChange(e)}
diff --git a/src/lib/components/UI/dashboard/DeviceDataList.svelte b/src/lib/components/UI/dashboard/DeviceDataList.svelte
index befc8417..e5364cef 100644
--- a/src/lib/components/UI/dashboard/DeviceDataList.svelte
+++ b/src/lib/components/UI/dashboard/DeviceDataList.svelte
@@ -56,7 +56,7 @@
 	<!-- Device data block -->
 	<div class="ml-1 flex-1">
 		<div class="flex">
-			<h3 class="mb-2 basis-1/3 text-lg font-semibold text-yellow-600 dark:text-yellow-400">
+			<h3 class="mb-2 basis-1/3 text-lg font-bold text-gray-900 dark:text-gray-100">
 				{$_('Details')}
 			</h3>
 		</div>
diff --git a/src/lib/components/UI/dashboard/LocationsPanel.svelte b/src/lib/components/UI/dashboard/LocationsPanel.svelte
index 8d13221b..b90d5cf5 100644
--- a/src/lib/components/UI/dashboard/LocationsPanel.svelte
+++ b/src/lib/components/UI/dashboard/LocationsPanel.svelte
@@ -3,14 +3,26 @@
   A component that displays a list of locations with selection capability
 -->
 <script lang="ts">
-	import type { LocationWithCount } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
 	import { handleKeyDown } from '$lib/utilities/dashboardLayout';
 	import { getLocationActiveStatus } from '$lib/utilities/deviceUtils';
-	import { mdiClose, mdiMagnify } from '@mdi/js';
+	import { mdiClose, mdiMagnify } from '$lib/icons/mdi';
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import Icon from '$lib/components/ui/base/Icon.svelte';
 
+	type LocationWithCount = {
+		location_id: number;
+		name: string;
+		deviceCount: number;
+		cw_devices?: unknown[];
+	};
+
+	const dispatch = createEventDispatcher<{
+		locationSelect: { locationId: number };
+		searchClear: void;
+	}>();
+
 	// Props
 	export let locations: LocationWithCount[] = [];
 	export let selectedLocation: number | null = null;
@@ -19,7 +31,6 @@
 
 	// Function to handle location selection
 	function selectLocation(locationId: number) {
-		// Emit a custom event to notify parent component
 		dispatch('locationSelect', { locationId });
 	}
 
@@ -36,17 +47,6 @@
 		dispatch('searchClear');
 	}
 
-	// Function to create a dispatch method for custom events
-	function createEventDispatcher() {
-		return {
-			dispatch: (event: string, detail: any) => {
-				const customEvent = new CustomEvent(event, { detail });
-				document.dispatchEvent(customEvent);
-			}
-		};
-	}
-	const { dispatch } = createEventDispatcher();
-
 	// Filter locations based on search term
 	$: filteredLocations = locations.filter(
 		(location) => !search || location.name.toLowerCase().includes(search.toLowerCase())
@@ -62,18 +62,17 @@
 	});
 </script>
 
-<div class="locations-panel">
+<div class="surface-card locations-panel">
 	<h2 class="mb-4 text-lg font-semibold">{$_('Locations')}</h2>
 
 	<div class="relative mb-4">
-		<div class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-600 dark:text-gray-400">
+		<div class="absolute inset-y-0 left-0 flex items-center pl-2 text-[var(--color-text-muted)]">
 			<Icon path={mdiMagnify} size="1.25em" />
 		</div>
 		<input
 			type="text"
 			bind:value={search}
-			class="w-full rounded-md border border-zinc-300 bg-white py-2 pr-8 pl-8 text-sm text-black placeholder-zinc-500 transition-all duration-150 focus:border-zinc-500 focus:ring-1 focus:ring-zinc-400 focus:outline-none
-      dark:border-zinc-600 dark:bg-zinc-600 dark:text-white dark:placeholder-zinc-400 dark:focus:border-zinc-400 dark:focus:ring-zinc-500"
+			class="w-full rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-card)] py-2 pr-8 pl-8 text-sm text-[var(--color-text)] placeholder-[var(--color-text-muted)] shadow-sm transition focus:border-[var(--color-primary)] focus:ring-1 focus:ring-[var(--color-primary)] focus:outline-none"
 			placeholder={$_('Search')}
 			onkeydown={(e) => {
 				if (e.key === 'Enter') {
@@ -83,7 +82,7 @@
 		/>
 		{#if search}
 			<button
-				class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+				class="absolute inset-y-0 right-0 flex items-center pr-2 text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text)]"
 				onclick={clearSearch}
 				aria-label="Clear search"
 			>
@@ -136,6 +135,9 @@
 
 <style>
 	.locations-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
 		height: 100%;
 		overflow-y: auto;
 	}
@@ -149,86 +151,56 @@
 	.location-item {
 		display: flex;
 		flex-direction: column;
-		padding: 0.75rem;
-		border-radius: 0.375rem;
-		background-color: white;
-		border: 1px solid #e5e7eb;
+		padding: 0.85rem;
+		border-radius: 0.65rem;
+		background-color: var(--color-surface);
+		border: 1px solid var(--color-border-subtle);
 		text-align: left;
-		transition: all 0.2s;
+		transition:
+			transform 0.2s ease,
+			background-color 0.2s ease,
+			border-color 0.2s ease;
 	}
 
 	.location-item:hover {
-		background-color: #f9fafb;
+		background-color: var(--color-surface-emphasis);
+		transform: translateY(-1px);
 	}
 
 	.location-item.selected {
-		border-color: #3b82f6;
-		background-color: #eff6ff;
-	}
-
-	:global(.dark) .location-item {
-		background-color: #27272a;
-		border-color: #3f3f46;
-	}
-
-	:global(.dark) .location-item:hover {
-		background-color: #3f3f46;
-	}
-
-	:global(.dark) .location-item.selected {
-		border-color: #3b82f6;
-		background-color: #1e3a8a;
+		border-color: var(--color-primary);
+		background-color: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface) 88%);
+		color: var(--color-primary);
 	}
 
 	.location-name {
-		font-weight: 500;
-		margin-bottom: 0.25rem;
+		font-weight: 600;
+		margin-bottom: 0.35rem;
 	}
 
 	.location-stats {
 		display: flex;
 		justify-content: space-between;
-		font-size: 0.875rem;
-		color: #6b7280;
-	}
-
-	:global(.dark) .location-stats {
-		color: #d1d5db;
+		font-size: 0.85rem;
+		color: var(--color-text-muted);
 	}
 
 	.status {
 		font-size: 0.75rem;
-		padding: 0.125rem 0.375rem;
-		border-radius: 9999px;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
 	}
 
 	.status.active {
-		background-color: #d1fae5;
-		color: #065f46;
+		color: var(--color-primary);
 	}
 
 	.status.inactive {
-		background-color: #fee2e2;
-		color: #b91c1c;
+		color: #ef4444;
 	}
 
 	.status.mixed {
-		background-color: #fef3c7;
-		color: #92400e;
-	}
-
-	:global(.dark) .status.active {
-		background-color: #065f46;
-		color: #d1fae5;
-	}
-
-	:global(.dark) .status.inactive {
-		background-color: #b91c1c;
-		color: #fee2e2;
-	}
-
-	:global(.dark) .status.mixed {
-		background-color: #92400e;
-		color: #fef3c7;
+		color: #f97316;
 	}
 </style>
diff --git a/src/lib/components/UI/detail/DateRange.svelte b/src/lib/components/UI/detail/DateRange.svelte
index 29fd36d5..7bc8cf05 100644
--- a/src/lib/components/UI/detail/DateRange.svelte
+++ b/src/lib/components/UI/detail/DateRange.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
-	import { DateRangePicker, type DateRange } from "bits-ui";
+	import { DateRangePicker, type DateRange } from 'bits-ui';
 	// import { CalendarDateTime } from "@internationalized/date";
 	// import type { DateValue } from "@internationalized/date";
-	import CalendarIcon from "$lib/components/UI/icons/CalendarIcon.svelte";
-	import ChevronLeftIcon from "$lib/components/UI/icons/ChevronLeftIcon.svelte";
-	import ChevronRightIcon from "$lib/components/UI/icons/ChevronRightIcon.svelte";
-	
+	import CalendarIcon from '$lib/components/UI/icons/CalendarIcon.svelte';
+	import ChevronLeftIcon from '$lib/components/UI/icons/ChevronLeftIcon.svelte';
+	import ChevronRightIcon from '$lib/components/UI/icons/ChevronRightIcon.svelte';
+
 	// Define props for component
 	let { startDate, endDate, label, disabled } = $props();
-	
+
 	// Setup internal reactive state
 	let dateRange = $state<DateRange>({
 		start: startDate,
 		end: endDate
 	});
-	
+
 	// Update parent component when date range changes
 	$effect(() => {
 		startDate = dateRange?.start;
 		endDate = dateRange?.end;
 	});
-	
+
 	// Update internal state when props change
 	$effect(() => {
 		if (startDate !== dateRange?.start || endDate !== dateRange?.end) {
@@ -30,16 +30,16 @@
 			};
 		}
 	});
-	
+
 	// Function binding for fully controlled state management
 	function getValue() {
 		return dateRange;
 	}
-	
+
 	function setValue(newValue: DateRange) {
 		dateRange = newValue;
 	}
-	
+
 	// Open state management
 	let isOpen = $state(false);
 </script>
@@ -48,31 +48,33 @@
 	<DateRangePicker.Root
 		bind:value={getValue, setValue}
 		bind:open={isOpen}
-		disabled={disabled}
+		{disabled}
 		weekdayFormat="short"
 		fixedWeeks={true}
 		closeOnRangeSelect={true}
 		class="flex w-full flex-col gap-1.5"
 	>
-		<DateRangePicker.Label class="block text-sm font-medium mb-1">
+		<DateRangePicker.Label class="mb-1 block text-sm font-medium">
 			{label}
 		</DateRangePicker.Label>
-		
-		<div class="date-field flex w-full items-center rounded border border-gray-300 px-2 py-1.5 text-sm focus-within:border-primary hover:border-gray-400">
-			{#each ["start", "end"] as type}
+
+		<div
+			class="date-field flex w-full items-center rounded border border-[var(--color-border-subtle)] bg-[var(--color-card)] px-2 py-1.5 text-sm text-[var(--color-text)] shadow-sm focus-within:border-[var(--color-primary)] focus-within:ring-1 focus-within:ring-[var(--color-primary)] hover:border-[var(--color-border)]"
+		>
+			{#each ['start', 'end'] as const as type}
 				<DateRangePicker.Input {type} class="flex">
 					{#snippet children({ segments })}
 						{#each segments as { part, value }, i (part + i)}
 							<div class="inline-block">
-								{#if part === "literal"}
-									<DateRangePicker.Segment {part} class="text-gray-500 px-1">
+								{#if part === 'literal'}
+									<DateRangePicker.Segment {part} class="px-1 text-[var(--color-text-muted)]">
 										{value}
 									</DateRangePicker.Segment>
 								{:else}
-									<DateRangePicker.Segment 
-										{part} 
-										class="px-1 py-0.5 rounded hover:bg-gray-100 focus:bg-gray-100 
-											aria-[valuetext=Empty]:text-gray-400"
+									<DateRangePicker.Segment
+										{part}
+										class="rounded px-1 py-0.5 hover:bg-[var(--color-surface-emphasis)] focus:bg-[var(--color-surface-emphasis)]
+											aria-[valuetext=Empty]:text-[var(--color-text-muted)]"
 									>
 										{value}
 									</DateRangePicker.Segment>
@@ -81,68 +83,78 @@
 						{/each}
 					{/snippet}
 				</DateRangePicker.Input>
-				
-				{#if type === "start"}
-					<div aria-hidden="true" class="text-gray-500 px-1">to</div>
+
+				{#if type === 'start'}
+					<div aria-hidden="true" class="px-1 text-[var(--color-text-muted)]">to</div>
 				{/if}
 			{/each}
-			
-			<DateRangePicker.Trigger class="ml-auto flex items-center justify-center h-6 w-6 rounded hover:bg-gray-100">
+
+			<DateRangePicker.Trigger
+				class="ml-auto flex h-6 w-6 items-center justify-center rounded hover:bg-[var(--color-surface-emphasis)]"
+			>
 				<CalendarIcon />
 			</DateRangePicker.Trigger>
 		</div>
-		
-		<DateRangePicker.Content 
-			sideOffset={6} 
-			class="z-50 bg-white rounded-md border border-gray-200 shadow-md p-4"
+
+		<DateRangePicker.Content
+			sideOffset={6}
+			class="z-50 rounded-md border border-[var(--color-border)] bg-[var(--color-card)] p-4 shadow-lg"
 		>
 			<DateRangePicker.Calendar class="select-none">
 				{#snippet children({ months, weekdays })}
-					<DateRangePicker.Header class="flex items-center justify-between mb-4">
-						<DateRangePicker.PrevButton class="flex items-center justify-center h-7 w-7 rounded hover:bg-gray-100">
+					<DateRangePicker.Header
+						class="mb-4 flex items-center justify-between text-[var(--color-text)]"
+					>
+						<DateRangePicker.PrevButton
+							class="flex h-7 w-7 items-center justify-center rounded hover:bg-[var(--color-surface-emphasis)]"
+						>
 							<!-- <ChevronLeftIcon /> -->
 						</DateRangePicker.PrevButton>
-						
-						<DateRangePicker.Heading class="text-sm font-medium" />
-						
-						<DateRangePicker.NextButton class="flex items-center justify-center h-7 w-7 rounded hover:bg-gray-100">
+
+						<DateRangePicker.Heading class="text-sm font-medium text-[var(--color-text)]" />
+
+						<DateRangePicker.NextButton
+							class="flex h-7 w-7 items-center justify-center rounded hover:bg-[var(--color-surface-emphasis)]"
+						>
 							<!-- <ChevronRightIcon /> -->
 						</DateRangePicker.NextButton>
 					</DateRangePicker.Header>
-					
-					<div class="flex flex-col space-y-4 pt-1 sm:flex-row sm:space-x-4 sm:space-y-0">
+
+					<div class="flex flex-col space-y-4 pt-1 sm:flex-row sm:space-y-0 sm:space-x-4">
 						{#each months as month (month.value)}
 							<DateRangePicker.Grid class="w-full border-collapse space-y-1">
 								<DateRangePicker.GridHead>
 									<DateRangePicker.GridRow class="mb-1 flex w-full justify-between">
 										{#each weekdays as day (day)}
-											<DateRangePicker.HeadCell class="text-gray-500 w-8 text-center text-xs">
+											<DateRangePicker.HeadCell
+												class="w-8 text-center text-xs text-[var(--color-text-muted)]"
+											>
 												<div>{day.slice(0, 2)}</div>
 											</DateRangePicker.HeadCell>
 										{/each}
 									</DateRangePicker.GridRow>
 								</DateRangePicker.GridHead>
-								
+
 								<DateRangePicker.GridBody>
 									{#each month.weeks as weekDates (weekDates)}
 										<DateRangePicker.GridRow class="flex w-full">
 											{#each weekDates as date (date)}
-												<DateRangePicker.Cell 
+												<DateRangePicker.Cell
 													{date}
 													month={month.value}
-													class="relative m-0 p-0 w-8 text-center text-sm"
+													class="relative m-0 w-8 p-0 text-center text-sm"
 												>
 													<DateRangePicker.Day
 														class="
-															inline-flex items-center justify-center w-8 h-8 rounded-full 
-															hover:bg-gray-100
-															data-selected:bg-primary data-selected:text-white
-															data-selection-start:bg-primary data-selection-start:text-white
-															data-selection-end:bg-primary data-selection-end:text-white
-															data-highlighted:bg-gray-100
+															inline-flex h-8 w-8 items-center justify-center rounded-full 
+															hover:bg-[var(--color-surface-emphasis)]
+															data-disabled:opacity-50 data-highlighted:bg-[var(--color-surface-emphasis)]
+															data-outside-month:opacity-40 data-selected:bg-[var(--color-primary)]
+															data-selected:text-white data-selection-end:bg-[var(--color-primary)]
+															data-selection-end:text-white
+															data-selection-start:bg-[var(--color-primary)]
+															data-selection-start:text-white
 															data-today:font-bold
-															data-disabled:opacity-50
-															data-outside-month:opacity-40
 														"
 													>
 														{date.day}
@@ -166,8 +178,9 @@
 	.date-range-picker :global([data-selection-end]:not([data-selection-start])) {
 		border-radius: 9999px;
 	}
-	
-	.date-range-picker :global([data-selected]:not([data-selection-start]):not([data-selection-end])) {
+
+	.date-range-picker
+		:global([data-selected]:not([data-selection-start]):not([data-selection-end])) {
 		border-radius: 0;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/UI/form/Avatar.svelte b/src/lib/components/UI/form/Avatar.svelte
index fa1e9a3e..921f8736 100644
--- a/src/lib/components/UI/form/Avatar.svelte
+++ b/src/lib/components/UI/form/Avatar.svelte
@@ -59,7 +59,7 @@
 			style="height: {size}em; width: {size}em;"
 		/>
 	{:else}
-		<div class="avatar no-image" style="height: {size}em; width: {size}em;" />
+		<div class="avatar no-image" style="height: {size}em; width: {size}em;"></div>
 	{/if}
 	<input type="hidden" name="avatarUrl" value={url} />
 	<div style="width: {size}em;">
diff --git a/src/lib/components/UI/form/Select.svelte b/src/lib/components/UI/form/Select.svelte
index ddc69dcd..324459ff 100644
--- a/src/lib/components/UI/form/Select.svelte
+++ b/src/lib/components/UI/form/Select.svelte
@@ -25,7 +25,7 @@
 	{name}
 	{disabled}
 	bind:value
-	class="rounded border border-gray-300 bg-white p-2 text-gray-900 text-inherit dark:border-zinc-700 dark:bg-zinc-800 dark:text-white {className}"
+	class="min-h-10 rounded-md border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-2 text-sm text-[var(--color-text)] shadow-sm transition focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-[var(--color-border)] dark:bg-[var(--color-foreground-dark)] dark:text-[var(--color-text)] {className}"
 	{onchange}
 	{...rest}
 >
diff --git a/src/lib/components/UI/form/TextInput.svelte b/src/lib/components/UI/form/TextInput.svelte
index bb70e006..d55b36c4 100644
--- a/src/lib/components/UI/form/TextInput.svelte
+++ b/src/lib/components/UI/form/TextInput.svelte
@@ -25,6 +25,6 @@
 	bind:value
 	{placeholder}
 	{disabled}
-	class="min-h-9 rounded border border-gray-300 bg-white px-2 py-0 text-gray-900 text-inherit dark:border-zinc-700 dark:bg-zinc-800 dark:text-white {className}"
+	class="min-h-10 rounded-md border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-2 text-sm text-[var(--color-text)] shadow-sm transition focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-[var(--color-border)] dark:bg-[var(--color-foreground-dark)] dark:text-[var(--color-text)] {className}"
 	{...rest}
 />
diff --git a/src/lib/components/UI/form/UserPermissionsSelector.svelte b/src/lib/components/UI/form/UserPermissionsSelector.svelte
index f56ddf3d..8ac2f0a5 100644
--- a/src/lib/components/UI/form/UserPermissionsSelector.svelte
+++ b/src/lib/components/UI/form/UserPermissionsSelector.svelte
@@ -184,7 +184,6 @@
 								<Button
 									type="submit"
 									variant="secondary"
-									iconic
 									{disabled}
 									onclick={(event) => {
 										event.preventDefault();
diff --git a/src/lib/components/UI/icons/CalendarIcon.svelte b/src/lib/components/UI/icons/CalendarIcon.svelte
index 60b4a21b..8838b278 100644
--- a/src/lib/components/UI/icons/CalendarIcon.svelte
+++ b/src/lib/components/UI/icons/CalendarIcon.svelte
@@ -1,20 +1,21 @@
 <script>
-  export let className = "";
+	export let className = '';
 </script>
 
-<svg 
-  xmlns="http://www.w3.org/2000/svg"
-  width="24" 
-  height="24" 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke="currentColor" 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
 >
-  <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
-  <line x1="16" y1="2" x2="16" y2="6" />
-  <line x1="8" y1="2" x2="8" y2="6" />
-  <line x1="3" y1="10" x2="21" y2="10" />
+	<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+	<line x1="16" y1="2" x2="16" y2="6" />
+	<line x1="8" y1="2" x2="8" y2="6" />
+	<line x1="3" y1="10" x2="21" y2="10" />
 </svg>
diff --git a/src/lib/components/UI/icons/ChevronLeftIcon.svelte b/src/lib/components/UI/icons/ChevronLeftIcon.svelte
index cbd99603..f46817be 100644
--- a/src/lib/components/UI/icons/ChevronLeftIcon.svelte
+++ b/src/lib/components/UI/icons/ChevronLeftIcon.svelte
@@ -1,18 +1,18 @@
 <script>
-  export let className = "";
+	export let className = '';
 </script>
 
-<svg 
-  xmlns="http://www.w3.org/2000/svg" 
-  
-  width="24" 
-  height="24" 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke="currentColor" 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
 >
-  <path d="m15 18-6-6 6-6" />
+	<path d="m15 18-6-6 6-6" />
 </svg>
diff --git a/src/lib/components/UI/icons/ChevronRightIcon.svelte b/src/lib/components/UI/icons/ChevronRightIcon.svelte
index ac8efb02..36bbcd14 100644
--- a/src/lib/components/UI/icons/ChevronRightIcon.svelte
+++ b/src/lib/components/UI/icons/ChevronRightIcon.svelte
@@ -1,17 +1,18 @@
 <script>
-  export let className = "";
+	export let className = '';
 </script>
 
-<svg 
-  xmlns="http://www.w3.org/2000/svg"
-  width="24" 
-  height="24" 
-  viewBox="0 0 24 24" 
-  fill="none" 
-  stroke="currentColor" 
-  stroke-width="2" 
-  stroke-linecap="round" 
-  stroke-linejoin="round"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={className}
 >
-  <path d="m9 18 6-6-6-6" />
+	<path d="m9 18 6-6-6-6" />
 </svg>
diff --git a/src/lib/components/UI/primitives/Icon.svelte b/src/lib/components/UI/primitives/Icon.svelte
index 91f6d35a..cbb8ba6b 100644
--- a/src/lib/components/UI/primitives/Icon.svelte
+++ b/src/lib/components/UI/primitives/Icon.svelte
@@ -5,14 +5,14 @@
 		data?: string;
 		size?: string | number;
 		class?: string;
-		title?: string;
+		ariaLabel?: string;
 	}
 	let {
 		path = undefined,
 		data = undefined,
 		size = '1em',
 		class: className = '',
-		title
+		ariaLabel
 	}: Props = $props();
 	let d = $derived(path || data || '');
 	let width = $derived(typeof size === 'number' ? `${size}px` : size);
@@ -20,9 +20,9 @@
 </script>
 
 <svg
-	{title}
 	role="img"
-	aria-hidden={title ? undefined : true}
+	aria-label={ariaLabel}
+	aria-hidden={ariaLabel ? undefined : true}
 	viewBox="0 0 24 24"
 	{width}
 	{height}
@@ -32,5 +32,4 @@
 	{#if d}
 		<path {d} />
 	{/if}
-	<slot />
 </svg>
diff --git a/src/lib/components/dashboard/DashboardFilter.svelte b/src/lib/components/dashboard/DashboardFilter.svelte
index 8db3c985..3c06f513 100644
--- a/src/lib/components/dashboard/DashboardFilter.svelte
+++ b/src/lib/components/dashboard/DashboardFilter.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '$lib/components/ui/base/Icon.svelte';
-	import { mdiMagnify, mdiClose } from '@mdi/js';
+	import { mdiMagnify, mdiClose } from '$lib/icons/mdi';
 	import { getDashboardUIStore } from '$lib/stores/DashboardUIStore.svelte';
 	import { onMount, onDestroy } from 'svelte';
 
diff --git a/src/lib/components/dashboard/LocationSidebar.svelte b/src/lib/components/dashboard/LocationSidebar.svelte
index 36b08183..be43b8b9 100644
--- a/src/lib/components/dashboard/LocationSidebar.svelte
+++ b/src/lib/components/dashboard/LocationSidebar.svelte
@@ -12,7 +12,7 @@
 		mdiClose,
 		mdiEarth,
 		mdiMagnify
-	} from '@mdi/js';
+	} from '$lib/icons/mdi';
 	import { _ } from 'svelte-i18n';
 	import Icon from '$lib/components/ui/base/Icon.svelte';
 	import { fade } from 'svelte/transition';
diff --git a/src/lib/components/global/Breadcrumbs.svelte b/src/lib/components/global/Breadcrumbs.svelte
index 0e920fe0..267bdf30 100644
--- a/src/lib/components/global/Breadcrumbs.svelte
+++ b/src/lib/components/global/Breadcrumbs.svelte
@@ -44,6 +44,12 @@
 			label: $_('Settings')
 		}
 	];
+
+	const resolvePath = (template: string): string =>
+		template.replace(/\[(?<param>\w+?)\]/g, (_match, param: string) => {
+			const params = page.params as Record<string, string | undefined>;
+			return params[param] ?? '';
+		});
 </script>
 
 <SiteWideRefreshButton />
@@ -54,10 +60,7 @@
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
 		</svg>
 	{/if}
-	<a
-		href={path?.replaceAll(/\[(?<param>\w+?)\]/g, (_, param) => page.params[param])}
-		class="transition-colors hover:text-green-400">{label}</a
-	>
+	<a href={resolvePath(path)} class="transition-colors hover:text-green-400">{label}</a>
 {/snippet}
 
 <nav class="ml-16 flex flex-wrap items-center gap-1">
diff --git a/src/lib/components/ui/base/Icon.svelte b/src/lib/components/ui/base/Icon.svelte
index 31ab8b8a..19cc8c41 100644
--- a/src/lib/components/ui/base/Icon.svelte
+++ b/src/lib/components/ui/base/Icon.svelte
@@ -3,22 +3,30 @@
 		path = undefined,
 		data = undefined,
 		size = '1em',
-		className = ''
+		className = '',
+		class: externalClass = ''
 	} = $props<{
 		path?: string;
 		data?: string;
 		size?: string | number;
 		className?: string;
+		class?: string;
 	}>();
 	let el: SVGSVGElement;
 	const resolved = $derived(path || data || '');
 	const pixelSize = $derived(typeof size === 'number' ? `${size}px` : size);
+	const mergedClass = $derived(
+		[className, externalClass]
+			.map((c) => c?.trim())
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
 <svg
 	bind:this={el}
 	viewBox="0 0 24 24"
-	class={className}
+	class={mergedClass}
 	style={`width:${pixelSize};height:${pixelSize};display:inline-block;`}
 	aria-hidden="true"
 >
diff --git a/src/lib/dtos/AirDataDto.ts b/src/lib/dtos/AirDataDto.ts
index e80e066e..100fc34c 100644
--- a/src/lib/dtos/AirDataDto.ts
+++ b/src/lib/dtos/AirDataDto.ts
@@ -4,180 +4,180 @@ import type { AirData } from '../models/AirData';
  * DTO for air data creation
  */
 export interface CreateAirDataDto {
-  /**
-   * Device EUI
-   */
-  dev_eui: string;
-  
-  /**
-   * Temperature in Celsius
-   */
-  temperature_c?: number;
-  
-  /**
-   * Humidity percentage
-   */
-  humidity?: number;
-  
-  /**
-   * CO level
-   */
-  co?: number;
-  
-  /**
-   * CO2 level
-   */
-  co2?: number;
-  
-  /**
-   * Pressure value
-   */
-  pressure?: number;
-  
-  /**
-   * Light level in lux
-   */
-  lux?: number;
-  
-  /**
-   * Battery level percentage
-   */
-  battery_level?: number;
-  
-  /**
-   * UV index
-   */
-  uv_index?: number;
-  
-  /**
-   * Rainfall amount
-   */
-  rainfall?: number;
-  
-  /**
-   * Wind speed
-   */
-  wind_speed?: number;
-  
-  /**
-   * Wind direction in degrees
-   */
-  wind_direction?: number;
-  
-  /**
-   * Whether smoke is detected
-   */
-  smoke_detected?: boolean;
-  
-  /**
-   * Whether vape is detected
-   */
-  vape_detected?: boolean;
-  
-  /**
-   * Whether this data point is simulated
-   */
-  is_simulated?: boolean;
+	/**
+	 * Device EUI
+	 */
+	dev_eui: string;
+
+	/**
+	 * Temperature in Celsius
+	 */
+	temperature_c?: number;
+
+	/**
+	 * Humidity percentage
+	 */
+	humidity?: number;
+
+	/**
+	 * CO level
+	 */
+	co?: number;
+
+	/**
+	 * CO2 level
+	 */
+	co2?: number;
+
+	/**
+	 * Pressure value
+	 */
+	pressure?: number;
+
+	/**
+	 * Light level in lux
+	 */
+	lux?: number;
+
+	/**
+	 * Battery level percentage
+	 */
+	battery_level?: number;
+
+	/**
+	 * UV index
+	 */
+	uv_index?: number;
+
+	/**
+	 * Rainfall amount
+	 */
+	rainfall?: number;
+
+	/**
+	 * Wind speed
+	 */
+	wind_speed?: number;
+
+	/**
+	 * Wind direction in degrees
+	 */
+	wind_direction?: number;
+
+	/**
+	 * Whether smoke is detected
+	 */
+	smoke_detected?: boolean;
+
+	/**
+	 * Whether vape is detected
+	 */
+	vape_detected?: boolean;
+
+	/**
+	 * Whether this data point is simulated
+	 */
+	is_simulated?: boolean;
 }
 
 /**
  * DTO for air data responses
  */
 export interface AirDataDto {
-  /**
-   * Device EUI
-   */
-  dev_eui: string;
-  
-  /**
-   * Temperature in Celsius
-   */
-  temperature_c?: number;
-  
-  /**
-   * Humidity percentage
-   */
-  humidity?: number;
-  
-  /**
-   * CO level
-   */
-  co?: number;
-  
-  /**
-   * CO2 level
-   */
-  co2?: number;
-  
-  /**
-   * Pressure value
-   */
-  pressure?: number;
-  
-  /**
-   * Light level in lux
-   */
-  lux?: number;
-  
-  /**
-   * Battery level percentage
-   */
-  battery_level?: number;
-  
-  /**
-   * UV index
-   */
-  uv_index?: number;
-  
-  /**
-   * Rainfall amount
-   */
-  rainfall?: number;
-  
-  /**
-   * Wind speed
-   */
-  wind_speed?: number;
-  
-  /**
-   * Wind direction in degrees
-   */
-  wind_direction?: number;
-  
-  /**
-   * Whether smoke is detected
-   */
-  smoke_detected?: boolean;
-  
-  /**
-   * Whether vape is detected
-   */
-  vape_detected?: boolean;
-  
-  /**
-   * Timestamp when the data was created
-   */
-  created_at: string;
-  
-  /**
-   * Whether this data point is simulated
-   */
-  is_simulated: boolean;
+	/**
+	 * Device EUI
+	 */
+	dev_eui: string;
+
+	/**
+	 * Temperature in Celsius
+	 */
+	temperature_c?: number;
+
+	/**
+	 * Humidity percentage
+	 */
+	humidity?: number;
+
+	/**
+	 * CO level
+	 */
+	co?: number;
+
+	/**
+	 * CO2 level
+	 */
+	co2?: number;
+
+	/**
+	 * Pressure value
+	 */
+	pressure?: number;
+
+	/**
+	 * Light level in lux
+	 */
+	lux?: number;
+
+	/**
+	 * Battery level percentage
+	 */
+	battery_level?: number;
+
+	/**
+	 * UV index
+	 */
+	uv_index?: number;
+
+	/**
+	 * Rainfall amount
+	 */
+	rainfall?: number;
+
+	/**
+	 * Wind speed
+	 */
+	wind_speed?: number;
+
+	/**
+	 * Wind direction in degrees
+	 */
+	wind_direction?: number;
+
+	/**
+	 * Whether smoke is detected
+	 */
+	smoke_detected?: boolean;
+
+	/**
+	 * Whether vape is detected
+	 */
+	vape_detected?: boolean;
+
+	/**
+	 * Timestamp when the data was created
+	 */
+	created_at: string;
+
+	/**
+	 * Whether this data point is simulated
+	 */
+	is_simulated: boolean;
 }
 
 /**
  * DTO for historical/time-series air data
  */
 export interface TimeSeriesAirDataDto {
-  /**
-   * Timestamp for the data point
-   */
-  timestamp: string;
-  
-  /**
-   * Array of air data readings
-   */
-  readings: AirDataDto[];
+	/**
+	 * Timestamp for the data point
+	 */
+	timestamp: string;
+
+	/**
+	 * Array of air data readings
+	 */
+	readings: AirDataDto[];
 }
 
 /**
@@ -186,24 +186,24 @@ export interface TimeSeriesAirDataDto {
  * @returns AirDataDto
  */
 export function toAirDataDto(airData: AirData): AirDataDto {
-  return {
-    dev_eui: airData.dev_eui,
-    temperature_c: airData.temperature_c,
-    humidity: airData.humidity,
-    co: airData.co,
-    co2: airData.co2,
-    pressure: airData.pressure,
-    lux: airData.lux,
-    battery_level: airData.battery_level,
-    uv_index: airData.uv_index,
-    rainfall: airData.rainfall,
-    wind_speed: airData.wind_speed,
-    wind_direction: airData.wind_direction,
-    smoke_detected: airData.smoke_detected,
-    vape_detected: airData.vape_detected,
-    created_at: airData.created_at,
-    is_simulated: airData.is_simulated
-  };
+	return {
+		dev_eui: airData.dev_eui,
+		temperature_c: airData.temperature_c ?? undefined,
+		humidity: airData.humidity ?? undefined,
+		co: airData.co ?? undefined,
+		co2: airData.co2 ?? undefined,
+		pressure: airData.pressure ?? undefined,
+		lux: airData.lux ?? undefined,
+		battery_level: airData.battery_level ?? undefined,
+		uv_index: airData.uv_index ?? undefined,
+		rainfall: airData.rainfall ?? undefined,
+		wind_speed: airData.wind_speed ?? undefined,
+		wind_direction: airData.wind_direction ?? undefined,
+		smoke_detected: airData.smoke_detected ?? undefined,
+		vape_detected: airData.vape_detected ?? undefined,
+		created_at: airData.created_at,
+		is_simulated: airData.is_simulated ?? false
+	};
 }
 
 /**
@@ -213,46 +213,46 @@ export function toAirDataDto(airData: AirData): AirDataDto {
  * @returns Array of TimeSeriesAirDataDto
  */
 export function toTimeSeriesAirDataDto(
-  airData: AirData[], 
-  groupByInterval: 'hour' | 'day' | 'week' | 'month' = 'hour'
+	airData: AirData[],
+	groupByInterval: 'hour' | 'day' | 'week' | 'month' = 'hour'
 ): TimeSeriesAirDataDto[] {
-  const groupedData = new Map<string, AirData[]>();
-  
-  // Group the data by the specified time interval
-  for (const data of airData) {
-    const date = new Date(data.created_at);
-    let groupKey: string;
-    
-    switch (groupByInterval) {
-      case 'day':
-        groupKey = date.toISOString().split('T')[0]; // YYYY-MM-DD
-        break;
-      case 'week':
-        // Get the date of the Monday of the current week
-        const day = date.getDay();
-        const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Adjust for Sunday
-        const monday = new Date(date);
-        monday.setDate(diff);
-        groupKey = monday.toISOString().split('T')[0];
-        break;
-      case 'month':
-        groupKey = date.toISOString().substring(0, 7); // YYYY-MM
-        break;
-      case 'hour':
-      default:
-        groupKey = date.toISOString().substring(0, 13); // YYYY-MM-DDTHH
-    }
-    
-    if (!groupedData.has(groupKey)) {
-      groupedData.set(groupKey, []);
-    }
-    
-    groupedData.get(groupKey)!.push(data);
-  }
-  
-  // Convert the grouped data to DTOs
-  return Array.from(groupedData.entries()).map(([timestamp, dataPoints]) => ({
-    timestamp,
-    readings: dataPoints.map(toAirDataDto)
-  }));
-}
\ No newline at end of file
+	const groupedData = new Map<string, AirData[]>();
+
+	// Group the data by the specified time interval
+	for (const data of airData) {
+		const date = new Date(data.created_at);
+		let groupKey: string;
+
+		switch (groupByInterval) {
+			case 'day':
+				groupKey = date.toISOString().split('T')[0]; // YYYY-MM-DD
+				break;
+			case 'week':
+				// Get the date of the Monday of the current week
+				const day = date.getDay();
+				const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Adjust for Sunday
+				const monday = new Date(date);
+				monday.setDate(diff);
+				groupKey = monday.toISOString().split('T')[0];
+				break;
+			case 'month':
+				groupKey = date.toISOString().substring(0, 7); // YYYY-MM
+				break;
+			case 'hour':
+			default:
+				groupKey = date.toISOString().substring(0, 13); // YYYY-MM-DDTHH
+		}
+
+		if (!groupedData.has(groupKey)) {
+			groupedData.set(groupKey, []);
+		}
+
+		groupedData.get(groupKey)!.push(data);
+	}
+
+	// Convert the grouped data to DTOs
+	return Array.from(groupedData.entries()).map(([timestamp, dataPoints]) => ({
+		timestamp,
+		readings: dataPoints.map(toAirDataDto)
+	}));
+}
diff --git a/src/lib/dtos/DeviceDto.ts b/src/lib/dtos/DeviceDto.ts
index d6004109..0d576261 100644
--- a/src/lib/dtos/DeviceDto.ts
+++ b/src/lib/dtos/DeviceDto.ts
@@ -4,215 +4,215 @@ import type { Device, DeviceType, DeviceLocation } from '../models/Device';
  * DTO for device creation
  */
 export interface CreateDeviceDto {
-  /**
-   * Device EUI (unique identifier)
-   */
-  dev_eui: string;
-  
-  /**
-   * Device name
-   */
-  name: string;
-  
-  /**
-   * Device type ID
-   */
-  type?: number;
-  
-  /**
-   * Location ID where device is installed
-   */
-  location_id?: number;
-  
-  /**
-   * Latitude coordinate
-   */
-  lat?: number;
-  
-  /**
-   * Longitude coordinate
-   */
-  long?: number;
-  
-  /**
-   * Serial number of the device
-   */
-  serial_number?: string;
-  
-  /**
-   * Upload interval in seconds
-   */
-  upload_interval?: number;
+	/**
+	 * Device EUI (unique identifier)
+	 */
+	dev_eui: string;
+
+	/**
+	 * Device name
+	 */
+	name: string;
+
+	/**
+	 * Device type ID
+	 */
+	type?: number;
+
+	/**
+	 * Location ID where device is installed
+	 */
+	location_id?: number;
+
+	/**
+	 * Latitude coordinate
+	 */
+	lat?: number;
+
+	/**
+	 * Longitude coordinate
+	 */
+	long?: number;
+
+	/**
+	 * Serial number of the device
+	 */
+	serial_number?: string;
+
+	/**
+	 * Upload interval in seconds
+	 */
+	upload_interval?: number;
 }
 
 /**
  * DTO for device updates
  */
 export interface UpdateDeviceDto {
-  /**
-   * Device name
-   */
-  name?: string;
-  
-  /**
-   * Device type ID
-   */
-  type?: number;
-  
-  /**
-   * Location ID where device is installed
-   */
-  location_id?: number;
-  
-  /**
-   * Latitude coordinate
-   */
-  lat?: number;
-  
-  /**
-   * Longitude coordinate
-   */
-  long?: number;
-  
-  /**
-   * Upload interval in seconds
-   */
-  upload_interval?: number;
-  
-  /**
-   * Date when battery was changed
-   */
-  battery_changed_at?: string;
+	/**
+	 * Device name
+	 */
+	name?: string;
+
+	/**
+	 * Device type ID
+	 */
+	type?: number;
+
+	/**
+	 * Location ID where device is installed
+	 */
+	location_id?: number;
+
+	/**
+	 * Latitude coordinate
+	 */
+	lat?: number;
+
+	/**
+	 * Longitude coordinate
+	 */
+	long?: number;
+
+	/**
+	 * Upload interval in seconds
+	 */
+	upload_interval?: number;
+
+	/**
+	 * Date when battery was changed
+	 */
+	battery_changed_at?: string;
 }
 
 /**
  * DTO for device responses with minimal information
  */
 export interface DeviceDto {
-  /**
-   * Device EUI (unique identifier)
-   */
-  dev_eui: string;
-  
-  /**
-   * Device name
-   */
-  name: string;
-  
-  /**
-   * Device type ID
-   */
-  type?: number;
-  
-  /**
-   * Location ID where device is installed
-   */
-  location_id?: number;
-  
-  /**
-   * Latitude coordinate
-   */
-  lat?: number;
-  
-  /**
-   * Longitude coordinate
-   */
-  long?: number;
-  
-  /**
-   * Upload interval in seconds
-   */
-  upload_interval?: number;
+	/**
+	 * Device EUI (unique identifier)
+	 */
+	dev_eui: string;
+
+	/**
+	 * Device name
+	 */
+	name: string;
+
+	/**
+	 * Device type ID
+	 */
+	type?: number;
+
+	/**
+	 * Location ID where device is installed
+	 */
+	location_id?: number;
+
+	/**
+	 * Latitude coordinate
+	 */
+	lat?: number;
+
+	/**
+	 * Longitude coordinate
+	 */
+	long?: number;
+
+	/**
+	 * Upload interval in seconds
+	 */
+	upload_interval?: number;
 }
 
 /**
  * DTO for detailed device information including type and location
  */
 export interface DeviceDetailDto extends DeviceDto {
-  /**
-   * Device type information
-   */
-  deviceType?: DeviceTypeDto;
-  
-  /**
-   * Device location information
-   */
-  location?: DeviceLocationDto;
-  
-  /**
-   * Serial number of the device
-   */
-  serial_number?: string;
-  
-  /**
-   * Date when device was installed
-   */
-  installed_at?: string;
-  
-  /**
-   * Date when battery was changed
-   */
-  battery_changed_at?: string;
-  
-  /**
-   * Date when warranty started
-   */
-  warranty_start_date?: string;
+	/**
+	 * Device type information
+	 */
+	deviceType?: DeviceTypeDto;
+
+	/**
+	 * Device location information
+	 */
+	location?: DeviceLocationDto;
+
+	/**
+	 * Serial number of the device
+	 */
+	serial_number?: string;
+
+	/**
+	 * Date when device was installed
+	 */
+	installed_at?: string;
+
+	/**
+	 * Date when battery was changed
+	 */
+	battery_changed_at?: string;
+
+	/**
+	 * Date when warranty started
+	 */
+	warranty_start_date?: string;
 }
 
 /**
  * DTO for device type information
  */
 export interface DeviceTypeDto {
-  /**
-   * Device type ID
-   */
-  id: number;
-  
-  /**
-   * Device type name
-   */
-  name: string;
-  
-  /**
-   * Device manufacturer
-   */
-  manufacturer?: string;
-  
-  /**
-   * Device model
-   */
-  model?: string;
+	/**
+	 * Device type ID
+	 */
+	id: number;
+
+	/**
+	 * Device type name
+	 */
+	name: string;
+
+	/**
+	 * Device manufacturer
+	 */
+	manufacturer?: string;
+
+	/**
+	 * Device model
+	 */
+	model?: string;
 }
 
 /**
  * DTO for device location information
  */
 export interface DeviceLocationDto {
-  /**
-   * Location ID
-   */
-  location_id: number;
-  
-  /**
-   * Location name
-   */
-  name: string;
-  
-  /**
-   * Location description
-   */
-  description?: string;
-  
-  /**
-   * Latitude coordinate
-   */
-  lat?: number;
-  
-  /**
-   * Longitude coordinate
-   */
-  long?: number;
+	/**
+	 * Location ID
+	 */
+	location_id: number;
+
+	/**
+	 * Location name
+	 */
+	name: string;
+
+	/**
+	 * Location description
+	 */
+	description?: string;
+
+	/**
+	 * Latitude coordinate
+	 */
+	lat?: number;
+
+	/**
+	 * Longitude coordinate
+	 */
+	long?: number;
 }
 
 /**
@@ -221,15 +221,15 @@ export interface DeviceLocationDto {
  * @returns DeviceDto
  */
 export function toDeviceDto(device: Device): DeviceDto {
-  return {
-    dev_eui: device.dev_eui,
-    name: device.name,
-    type: device.type,
-    location_id: device.location_id,
-    lat: device.lat,
-    long: device.long,
-    upload_interval: device.upload_interval
-  };
+	return {
+		dev_eui: device.dev_eui,
+		name: device.name ?? '',
+		type: device.type ?? undefined,
+		location_id: device.location_id ?? undefined,
+		lat: device.lat ?? undefined,
+		long: device.long ?? undefined,
+		upload_interval: device.upload_interval ?? undefined
+	};
 }
 
 /**
@@ -240,36 +240,36 @@ export function toDeviceDto(device: Device): DeviceDto {
  * @returns DeviceDetailDto
  */
 export function toDeviceDetailDto(
-  device: Device,
-  deviceType?: DeviceType,
-  location?: DeviceLocation
+	device: Device,
+	deviceType?: DeviceType,
+	location?: DeviceLocation
 ): DeviceDetailDto {
-  const detailDto: DeviceDetailDto = {
-    ...toDeviceDto(device),
-    serial_number: device.serial_number,
-    installed_at: device.installed_at,
-    battery_changed_at: device.battery_changed_at,
-    warranty_start_date: device.warranty_start_date
-  };
-  
-  if (deviceType) {
-    detailDto.deviceType = {
-      id: deviceType.id,
-      name: deviceType.name,
-      manufacturer: deviceType.manufacturer,
-      model: deviceType.model
-    };
-  }
-  
-  if (location) {
-    detailDto.location = {
-      location_id: location.location_id,
-      name: location.name,
-      description: location.description,
-      lat: location.lat,
-      long: location.long
-    };
-  }
-  
-  return detailDto;
-}
\ No newline at end of file
+	const detailDto: DeviceDetailDto = {
+		...toDeviceDto(device),
+		serial_number: device.serial_number ?? undefined,
+		installed_at: device.installed_at ?? undefined,
+		battery_changed_at: device.battery_changed_at ?? undefined,
+		warranty_start_date: device.warranty_start_date ?? undefined
+	};
+
+	if (deviceType) {
+		detailDto.deviceType = {
+			id: deviceType.id,
+			name: deviceType.name ?? undefined,
+			manufacturer: deviceType.manufacturer ?? undefined,
+			model: deviceType.model ?? undefined
+		};
+	}
+
+	if (location) {
+		detailDto.location = {
+			location_id: location.location_id,
+			name: location.name,
+			description: location.description ?? undefined,
+			lat: location.lat ?? undefined,
+			long: location.long ?? undefined
+		};
+	}
+
+	return detailDto;
+}
diff --git a/src/lib/dtos/RuleDto.ts b/src/lib/dtos/RuleDto.ts
index a5912c35..b68a92a2 100644
--- a/src/lib/dtos/RuleDto.ts
+++ b/src/lib/dtos/RuleDto.ts
@@ -4,110 +4,110 @@ import type { Rule, RuleCriteria, RuleWithCriteria } from '../models/Rule';
  * Data Transfer Object for rule criteria
  */
 export interface RuleCriteriaDto {
-  /**
-   * Unique identifier for the rule criteria
-   */
-  id: number;
-  
-  /**
-   * The rule group this criteria belongs to
-   */
-  ruleGroupId: string;
-  
-  /**
-   * The sensor type this criteria applies to
-   */
-  sensorType: string;
-  
-  /**
-   * Comparison operator (e.g., '>', '<', '=')
-   */
-  operator: string;
-  
-  /**
-   * Threshold value for comparison
-   */
-  value: number;
-  
-  /**
-   * Optional unit of measurement
-   */
-  unit?: string | null;
-  
-  /**
-   * Timestamp when the criteria was created
-   */
-  createdAt: string;
+	/**
+	 * Unique identifier for the rule criteria
+	 */
+	id: number;
+
+	/**
+	 * The rule group this criteria belongs to
+	 */
+	ruleGroupId: string;
+
+	/**
+	 * The sensor type this criteria applies to
+	 */
+	sensorType: string;
+
+	/**
+	 * Comparison operator (e.g., '>', '<', '=')
+	 */
+	operator: string;
+
+	/**
+	 * Threshold value for comparison
+	 */
+	value: number;
+
+	/**
+	 * Optional unit of measurement
+	 */
+	unit?: string | null;
+
+	/**
+	 * Timestamp when the criteria was created
+	 */
+	createdAt: string;
 }
 
 /**
  * Data Transfer Object for rules
  */
 export interface RuleDto {
-  /**
-   * Unique identifier for the rule
-   */
-  id: number;
-  
-  /**
-   * The rule group ID for grouping multiple criteria
-   */
-  ruleGroupId: string;
-  
-  /**
-   * Name of the rule
-   */
-  name: string;
-  
-  /**
-   * Description of the rule
-   */
-  description?: string | null;
-  
-  /**
-   * Device EUI the rule applies to
-   */
-  deviceEui?: string | null;
-  
-  /**
-   * Profile ID the rule belongs to
-   */
-  profileId?: string | null;
-  
-  /**
-   * Whether the rule is currently active
-   */
-  isActive: boolean;
-  
-  /**
-   * Severity level of the rule (e.g., 'low', 'medium', 'high')
-   */
-  severity?: string | null;
-  
-  /**
-   * Action to take when rule is triggered
-   */
-  actionType?: string | null;
-  
-  /**
-   * Notification message to send when triggered
-   */
-  message?: string | null;
-  
-  /**
-   * Timestamp when the rule was created
-   */
-  createdAt: string;
+	/**
+	 * Unique identifier for the rule
+	 */
+	id: number;
+
+	/**
+	 * The rule group ID for grouping multiple criteria
+	 */
+	ruleGroupId: string;
+
+	/**
+	 * Name of the rule
+	 */
+	name: string;
+
+	/**
+	 * Description of the rule
+	 */
+	description?: string | null;
+
+	/**
+	 * Device EUI the rule applies to
+	 */
+	deviceEui?: string | null;
+
+	/**
+	 * Profile ID the rule belongs to
+	 */
+	profileId?: string | null;
+
+	/**
+	 * Whether the rule is currently active
+	 */
+	isActive: boolean;
+
+	/**
+	 * Severity level of the rule (e.g., 'low', 'medium', 'high')
+	 */
+	severity?: string | null;
+
+	/**
+	 * Action to take when rule is triggered
+	 */
+	actionType?: string | null;
+
+	/**
+	 * Notification message to send when triggered
+	 */
+	message?: string | null;
+
+	/**
+	 * Timestamp when the rule was created
+	 */
+	createdAt: string;
 }
 
 /**
  * Data Transfer Object for rules with their criteria
  */
 export interface RuleWithCriteriaDto extends RuleDto {
-  /**
-   * Array of criteria associated with this rule
-   */
-  criteria: RuleCriteriaDto[];
+	/**
+	 * Array of criteria associated with this rule
+	 */
+	criteria: RuleCriteriaDto[];
 }
 
 /**
@@ -115,15 +115,15 @@ export interface RuleWithCriteriaDto extends RuleDto {
  * @param criteria The rule criteria entity
  */
 export function toRuleCriteriaDto(criteria: RuleCriteria): RuleCriteriaDto {
-  return {
-    id: criteria.id,
-    ruleGroupId: criteria.ruleGroupId,
-    sensorType: criteria.sensor_type,
-    operator: criteria.operator,
-    value: criteria.value,
-    unit: criteria.unit,
-    createdAt: criteria.created_at
-  };
+	return {
+		id: criteria.id,
+		ruleGroupId: criteria.ruleGroupId,
+		sensorType: criteria.subject,
+		operator: criteria.operator,
+		value: criteria.trigger_value,
+		unit: null,
+		createdAt: criteria.created_at
+	};
 }
 
 /**
@@ -131,19 +131,19 @@ export function toRuleCriteriaDto(criteria: RuleCriteria): RuleCriteriaDto {
  * @param rule The rule entity
  */
 export function toRuleDto(rule: Rule): RuleDto {
-  return {
-    id: rule.id,
-    ruleGroupId: rule.ruleGroupId,
-    name: rule.name,
-    description: rule.description,
-    deviceEui: rule.dev_eui,
-    profileId: rule.profile_id,
-    isActive: rule.is_active,
-    severity: rule.severity,
-    actionType: rule.notifier_type,
-    message: rule.message,
-    createdAt: rule.created_at
-  };
+	return {
+		id: rule.id,
+		ruleGroupId: rule.ruleGroupId,
+		name: rule.name,
+		description: null,
+		deviceEui: rule.dev_eui ?? null,
+		profileId: rule.profile_id ?? null,
+		isActive: !rule.is_triggered,
+		severity: null,
+		actionType: rule.notifier_type != null ? String(rule.notifier_type) : null,
+		message: null,
+		createdAt: rule.created_at
+	};
 }
 
 /**
@@ -151,10 +151,10 @@ export function toRuleDto(rule: Rule): RuleDto {
  * @param ruleWithCriteria The rule with criteria entity
  */
 export function toRuleWithCriteriaDto(ruleWithCriteria: RuleWithCriteria): RuleWithCriteriaDto {
-  return {
-    ...toRuleDto(ruleWithCriteria),
-    criteria: ruleWithCriteria.criteria.map(toRuleCriteriaDto)
-  };
+	return {
+		...toRuleDto(ruleWithCriteria),
+		criteria: ruleWithCriteria.criteria.map(toRuleCriteriaDto)
+	};
 }
 
 /**
@@ -162,5 +162,5 @@ export function toRuleWithCriteriaDto(ruleWithCriteria: RuleWithCriteria): RuleW
  * @param rules Array of rule entities
  */
 export function toRuleDtos(rules: Rule[]): RuleDto[] {
-  return rules.map(toRuleDto);
-}
\ No newline at end of file
+	return rules.map(toRuleDto);
+}
diff --git a/src/lib/icons/mdi.ts b/src/lib/icons/mdi.ts
new file mode 100644
index 00000000..203d6225
--- /dev/null
+++ b/src/lib/icons/mdi.ts
@@ -0,0 +1,59 @@
+// Local subset of Material Design Icons paths so we avoid bundling the full @mdi/js payload.
+// Update this list if additional icons are required.
+
+export const mdiAlert = 'M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z';
+export const mdiArrowDown =
+	'M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z';
+export const mdiArrowDownBold = 'M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z';
+export const mdiArrowRight =
+	'M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z';
+export const mdiArrowUp = 'M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z';
+export const mdiArrowUpBold = 'M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z';
+export const mdiCheck = 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z';
+export const mdiChevronLeft = 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z';
+export const mdiClockOutline =
+	'M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z';
+export const mdiClose =
+	'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z';
+export const mdiCog =
+	'M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z';
+export const mdiDevices =
+	'M3 6H21V4H3C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H7V18H3V6M13 12H9V13.78C8.39 14.33 8 15.11 8 16C8 16.89 8.39 17.67 9 18.22V20H13V18.22C13.61 17.67 14 16.88 14 16S13.61 14.33 13 13.78V12M11 17.5C10.17 17.5 9.5 16.83 9.5 16S10.17 14.5 11 14.5 12.5 15.17 12.5 16 11.83 17.5 11 17.5M22 8H16C15.5 8 15 8.5 15 9V19C15 19.5 15.5 20 16 20H22C22.5 20 23 19.5 23 19V9C23 8.5 22.5 8 22 8M21 18H17V10H21V18Z';
+export const mdiDownload = 'M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z';
+export const mdiEarth =
+	'M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z';
+export const mdiEye =
+	'M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z';
+export const mdiEyeOff =
+	'M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z';
+export const mdiFileDocument =
+	'M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z';
+export const mdiGrid =
+	'M10,4V8H14V4H10M16,4V8H20V4H16M16,10V14H20V10H16M16,16V20H20V16H16M14,20V16H10V20H14M8,20V16H4V20H8M8,14V10H4V14H8M8,8V4H4V8H8M10,14H14V10H10V14M4,2H20A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H4C2.92,22 2,21.1 2,20V4A2,2 0 0,1 4,2Z';
+export const mdiIdentifier =
+	'M10 7V9H9V15H10V17H6V15H7V9H6V7H10M16 7C17.11 7 18 7.9 18 9V15C18 16.11 17.11 17 16 17H12V7M16 9H14V15H16V9Z';
+export const mdiMagnify =
+	'M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z';
+export const mdiMapMarker =
+	'M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z';
+export const mdiMinus = 'M19,13H5V11H19V13Z';
+export const mdiMonitorDashboard =
+	'M21,16V4H3V16H21M21,2A2,2 0 0,1 23,4V16A2,2 0 0,1 21,18H14V20H16V22H8V20H10V18H3C1.89,18 1,17.1 1,16V4C1,2.89 1.89,2 3,2H21M5,6H14V11H5V6M15,6H19V8H15V6M19,9V14H15V9H19M5,12H9V14H5V12M10,12H14V14H10V12Z';
+export const mdiPlus = 'M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z';
+export const mdiSort =
+	'M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z';
+export const mdiSortAlphabeticalAscending =
+	'M19 17H22L18 21L14 17H17V3H19M11 13V15L7.67 19H11V21H5V19L8.33 15H5V13M9 3H7C5.9 3 5 3.9 5 5V11H7V9H9V11H11V5C11 3.9 10.11 3 9 3M9 7H7V5H9Z';
+export const mdiSortAscending =
+	'M19 17H22L18 21L14 17H17V3H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z';
+export const mdiSortCalendarAscending =
+	'M21 17H24L20 21L16 17H19V3H21V17M8 16H11V13H8V16M13 5H12V3H10V5H6V3H4V5H3C1.89 5 1 5.89 1 7V18C1 19.11 1.89 20 3 20H13C14.11 20 15 19.11 15 18V7C15 5.89 14.11 5 13 5M3 18L3 11H13L13 18L3 18Z';
+export const mdiSortClockAscending =
+	'M20 17H23L19 21L15 17H18V3H20V17M8 5C4.14 5 1 8.13 1 12C1 15.87 4.13 19 8 19C11.86 19 15 15.87 15 12C15 8.13 11.87 5 8 5M10.19 14.53L7 12.69V9H8.5V11.82L10.94 13.23L10.19 14.53Z';
+export const mdiSortDescending =
+	'M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z';
+export const mdiTune =
+	'M3,17V19H9V17H3M3,5V7H13V5H3M13,21V19H21V17H13V15H11V21H13M7,9V11H3V13H7V15H9V9H7M21,13V11H11V13H21M15,9H17V7H21V5H17V3H15V9Z';
+export const mdiViewDashboard = 'M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z';
+export const mdiViewList =
+	'M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z';
diff --git a/src/lib/interfaces/ILocationService.ts b/src/lib/interfaces/ILocationService.ts
index e77a7501..37598be9 100644
--- a/src/lib/interfaces/ILocationService.ts
+++ b/src/lib/interfaces/ILocationService.ts
@@ -39,7 +39,7 @@ export interface ILocationService {
 	 * Delete a location
 	 * @param locationId The location ID
 	 */
-	deleteLocation(locationId: number): Promise<boolean>;
+	deleteLocation(locationId: number, userId: string): Promise<boolean>;
 
 	/**
 	 * Get the count of devices for a specific location
diff --git a/src/lib/interfaces/IRuleService.ts b/src/lib/interfaces/IRuleService.ts
index c6352b3b..15fe3102 100644
--- a/src/lib/interfaces/IRuleService.ts
+++ b/src/lib/interfaces/IRuleService.ts
@@ -1,87 +1,98 @@
-import type { Rule, RuleInsert, RuleUpdate, RuleCriteria, RuleCriteriaInsert, RuleCriteriaUpdate, RuleWithCriteria } from '../models/Rule';
+import type {
+	Rule,
+	RuleInsert,
+	RuleUpdate,
+	RuleCriteria,
+	RuleCriteriaInsert,
+	RuleCriteriaUpdate,
+	RuleWithCriteria
+} from '../models/Rule';
 
 /**
  * Service interface for rule operations
  */
 export interface IRuleService {
-  /**
-   * Get a rule by its ID
-   * @param id The rule ID
-   */
-  getRuleById(id: number): Promise<Rule | null>;
-  
-  /**
-   * Get a rule with its criteria by group ID
-   * @param ruleGroupId The rule group ID
-   */
-  getRuleWithCriteria(ruleGroupId: string): Promise<RuleWithCriteria | null>;
-  
-  /**
-   * Get rules by device EUI
-   * @param devEui The device EUI
-   */
-  getRulesByDevice(devEui: string): Promise<Rule[]>;
+	/**
+	 * Get a rule by its ID
+	 * @param id The rule ID
+	 */
+	getRuleById(id: number): Promise<Rule | null>;
 
-  /**
-   * Get rules and rule criteria by device EUI
-   * @param devEui The device EUI
-   */
-  getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria | null>;
-  
-  /**
-   * Get rules by profile ID
-   * @param profileId The profile ID
-   */
-  getRulesByProfile(profileId: string): Promise<Rule[]>;
-  
-  /**
-   * Get rule criteria by rule group ID
-   * @param ruleGroupId The rule group ID
-   */
-  getRuleCriteriaByGroup(ruleGroupId: string): Promise<RuleCriteria[]>;
-  
-  /**
-   * Create a new rule
-   * @param rule The rule to create
-   */
-  createRule(rule: RuleInsert): Promise<Rule>;
-  
-  /**
-   * Create a new rule criteria
-   * @param criteria The rule criteria to create
-   */
-  createRuleCriteria(criteria: RuleCriteriaInsert): Promise<RuleCriteria>;
-  
-  /**
-   * Create a complete rule with criteria
-   * @param rule The rule to create
-   * @param criteria Array of criteria to create for the rule
-   */
-  createRuleWithCriteria(rule: RuleInsert, criteria: RuleCriteriaInsert[]): Promise<RuleWithCriteria>;
-  
-  /**
-   * Update an existing rule
-   * @param id The rule ID
-   * @param rule The rule with updated values
-   */
-  updateRule(id: number, rule: RuleUpdate): Promise<Rule | null>;
-  
-  /**
-   * Update an existing rule criteria
-   * @param id The criteria ID
-   * @param criteria The criteria with updated values
-   */
-  updateRuleCriteria(id: number, criteria: RuleCriteriaUpdate): Promise<RuleCriteria | null>;
-  
-  /**
-   * Delete a rule and its associated criteria
-   * @param id The rule ID
-   */
-  deleteRule(id: number): Promise<boolean>;
-  
-  /**
-   * Delete a rule criteria
-   * @param id The criteria ID
-   */
-  deleteRuleCriteria(id: number): Promise<boolean>;
-}
\ No newline at end of file
+	/**
+	 * Get a rule with its criteria by group ID
+	 * @param ruleGroupId The rule group ID
+	 */
+	getRuleWithCriteria(ruleGroupId: string): Promise<RuleWithCriteria | null>;
+
+	/**
+	 * Get rules by device EUI
+	 * @param devEui The device EUI
+	 */
+	getRulesByDevice(devEui: string): Promise<Rule[]>;
+
+	/**
+	 * Get rules and rule criteria by device EUI
+	 * @param devEui The device EUI
+	 */
+	getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria[]>;
+
+	/**
+	 * Get rules by profile ID
+	 * @param profileId The profile ID
+	 */
+	getRulesByProfile(profileId: string): Promise<Rule[]>;
+
+	/**
+	 * Get rule criteria by rule group ID
+	 * @param ruleGroupId The rule group ID
+	 */
+	getRuleCriteriaByGroup(ruleGroupId: string): Promise<RuleCriteria[]>;
+
+	/**
+	 * Create a new rule
+	 * @param rule The rule to create
+	 */
+	createRule(rule: RuleInsert): Promise<Rule>;
+
+	/**
+	 * Create a new rule criteria
+	 * @param criteria The rule criteria to create
+	 */
+	createRuleCriteria(criteria: RuleCriteriaInsert): Promise<RuleCriteria>;
+
+	/**
+	 * Create a complete rule with criteria
+	 * @param rule The rule to create
+	 * @param criteria Array of criteria to create for the rule
+	 */
+	createRuleWithCriteria(
+		rule: RuleInsert,
+		criteria: RuleCriteriaInsert[]
+	): Promise<RuleWithCriteria>;
+
+	/**
+	 * Update an existing rule
+	 * @param id The rule ID
+	 * @param rule The rule with updated values
+	 */
+	updateRule(id: number, rule: RuleUpdate): Promise<Rule | null>;
+
+	/**
+	 * Update an existing rule criteria
+	 * @param id The criteria ID
+	 * @param criteria The criteria with updated values
+	 */
+	updateRuleCriteria(id: number, criteria: RuleCriteriaUpdate): Promise<RuleCriteria | null>;
+
+	/**
+	 * Delete a rule and its associated criteria
+	 * @param id The rule ID
+	 */
+	deleteRule(id: number): Promise<boolean>;
+
+	/**
+	 * Delete a rule criteria
+	 * @param id The criteria ID
+	 */
+	deleteRuleCriteria(id: number): Promise<boolean>;
+}
diff --git a/src/lib/interfaces/ISessionService.ts b/src/lib/interfaces/ISessionService.ts
index 0ef14908..b59661c1 100644
--- a/src/lib/interfaces/ISessionService.ts
+++ b/src/lib/interfaces/ISessionService.ts
@@ -1,14 +1,14 @@
-import { Session, User } from '@supabase/supabase-js';
+import type { Session, User } from '@supabase/supabase-js';
 
 /**
  * Interface for session management service
  * Provides safe access to authenticated sessions
  */
 export interface ISessionService {
-  /**
-   * Gets a validated session and user
-   * Similar to safeGetSession in hooks.server.ts
-   * Ensures JWT is valid before returning session
-   */
-  getSafeSession(): Promise<{ session: Session | null; user: User | null }>;
-}
\ No newline at end of file
+	/**
+	 * Gets a validated session and user
+	 * Similar to safeGetSession in hooks.server.ts
+	 * Ensures JWT is valid before returning session
+	 */
+	getSafeSession(): Promise<{ session: Session | null; user: User | null }>;
+}
diff --git a/src/lib/models/Device.ts b/src/lib/models/Device.ts
index 7ac7c622..72247de2 100644
--- a/src/lib/models/Device.ts
+++ b/src/lib/models/Device.ts
@@ -20,6 +20,7 @@ export type DeviceUpdate = Database['public']['Tables']['cw_devices']['Update'];
  */
 export interface DeviceWithType extends Device {
 	cw_device_type?: DeviceType;
+	tti_name?: string | null;
 }
 
 /**
diff --git a/src/lib/models/Rule.ts b/src/lib/models/Rule.ts
index 66e4dfc6..0a5446aa 100644
--- a/src/lib/models/Rule.ts
+++ b/src/lib/models/Rule.ts
@@ -1,117 +1,13 @@
 import type { Database } from '../../../database.types';
 
-/**
- * Rule model representing rules from the cw_rules table
- */
-export interface Rule {
-  /**
-   * Unique identifier for the rule
-   */
-  id: number;
-  
-  /**
-   * The rule group ID for grouping multiple criteria
-   */
-  ruleGroupId: string;
-  
-  /**
-   * Name of the rule
-   */
-  name: string;
-  
-  /**
-   * Device EUI the rule applies to
-   */
-  dev_eui?: string | null;
-  
-  /**
-   * Profile ID the rule belongs to
-   */
-  profile_id: string;
-  
-  /**
-   * Action to take when rule is triggered
-   */
-  notifier_type?: number | null;
+export type Rule = Database['public']['Tables']['cw_rules']['Row'];
+export type RuleInsert = Database['public']['Tables']['cw_rules']['Insert'];
+export type RuleUpdate = Database['public']['Tables']['cw_rules']['Update'];
 
-  /**
-   * Who should the message be sent to? (This may need to be pulled into a new table)
-   */
-  action_recipient: string | null;
-  
-  /**
-   * Timestamp when the rule was created
-   */
-  created_at: string;
-}
+export type RuleCriteria = Database['public']['Tables']['cw_rule_criteria']['Row'];
+export type RuleCriteriaInsert = Database['public']['Tables']['cw_rule_criteria']['Insert'];
+export type RuleCriteriaUpdate = Database['public']['Tables']['cw_rule_criteria']['Update'];
 
-/**
- * Rule Criteria model representing rule criteria from the cw_rule_criteria table
- */
-export interface RuleCriteria {
-  /**
-   * Unique identifier for the rule criteria
-   */
-  id: number;
-  
-  /**
-   * The rule group this criteria belongs to
-   */
-  ruleGroupId: string;
-  
-  /**
-   * The key of the value to be compaired (e.g., 'temperature_c', 'humidity')
-   * this is the actual database column name.
-   */
-  subject: string;
-  
-  /**
-   * Comparison operator (e.g., '>', '<', '=')
-   */
-  operator: string;
-  
-  /**
-   * Threshold value for comparison
-   */
-  trigger_value: number;
-
-  /**
-   * This value is used to set the rule's triggered value back to false,
-   */
-  reset_value: number;
-  
-  /**
-   * Timestamp when the criteria was created
-   */
-  created_at: string;
-}
-
-/**
- * Combined model representing a rule with its criteria
- */
-export interface RuleWithCriteria extends Rule {
-  /**
-   * Array of criteria associated with this rule
-   */
-  criteria: RuleCriteria[];
-}
-
-/**
- * Data required to insert a new rule
- */
-export type RuleInsert = Omit<Rule, 'id' | 'created_at'>;
-
-/**
- * Type for updating existing rule
- */
-export type RuleUpdate = Partial<Omit<Rule, 'id' | 'created_at' | 'ruleGroupId'>>;
-
-/**
- * Data required to insert a new rule criteria
- */
-export type RuleCriteriaInsert = Omit<RuleCriteria, 'id' | 'created_at'>;
-
-/**
- * Type for updating existing rule criteria
- */
-export type RuleCriteriaUpdate = Partial<Omit<RuleCriteria, 'id' | 'created_at' | 'ruleGroupId'>>;
\ No newline at end of file
+export type RuleWithCriteria = Rule & {
+	criteria: RuleCriteria[];
+};
diff --git a/src/lib/pdf/pdfDataTable.ts b/src/lib/pdf/pdfDataTable.ts
index 2f3520ac..d34f52c3 100644
--- a/src/lib/pdf/pdfDataTable.ts
+++ b/src/lib/pdf/pdfDataTable.ts
@@ -32,6 +32,67 @@ const DEFAULT_CONFIG: TableConfig = {
 
 const MIN_COLUMN_SCALE = 0.9;
 
+export const rowHasAlert = (row: TableRow) =>
+	[row.header, ...row.cells].some((cell) => cell.bgColor && cell.bgColor !== '#ffffff');
+
+export function sampleDataRowsForTable(
+	dataRows: TableRow[],
+	takeEvery: number = DEFAULT_CONFIG.takeEvery
+): TableRow[] {
+	const samplingInterval = Math.max(1, takeEvery || 1);
+	if (samplingInterval <= 1) return dataRows;
+	return dataRows.filter((row, idx) => idx % samplingInterval === 0 || rowHasAlert(row));
+}
+
+function getRowTimestamp(row: TableRow): number | null {
+	const value = row?.header?.value;
+	if (value instanceof Date) return value.getTime();
+	if (typeof value === 'number') return value;
+	if (typeof value === 'string' && value.length) {
+		const parsed = Date.parse(value);
+		if (!Number.isNaN(parsed)) {
+			return parsed;
+		}
+	}
+	if (row?.header?.label) {
+		const parsed = Date.parse(row.header.label);
+		if (!Number.isNaN(parsed)) {
+			return parsed;
+		}
+	}
+	return null;
+}
+
+export function sampleDataRowsByInterval(
+	dataRows: TableRow[],
+	intervalMinutes: number
+): TableRow[] {
+	const intervalMs = intervalMinutes > 0 ? intervalMinutes * 60 * 1000 : 0;
+	if (!intervalMs) return dataRows;
+	const sampled: TableRow[] = [];
+	let lastKeptTimestamp: number | null = null;
+
+	for (const row of dataRows) {
+		const timestamp = getRowTimestamp(row);
+		const hasAlert = rowHasAlert(row);
+		const shouldInclude =
+			hasAlert ||
+			!sampled.length ||
+			timestamp === null ||
+			lastKeptTimestamp === null ||
+			timestamp - lastKeptTimestamp >= intervalMs;
+
+		if (shouldInclude) {
+			sampled.push(row);
+			if (timestamp !== null) {
+				lastKeptTimestamp = timestamp;
+			}
+		}
+	}
+
+	return sampled;
+}
+
 /**
  * Parse the header.value (epoch ms | ISO | SQL) into a DateTime in the desired zone.
  */
@@ -71,20 +132,7 @@ export function createPDFDataTable({
 }): void {
 	const conf: TableConfig = { ...DEFAULT_CONFIG, ...config };
 
-	// Apply takeEvery filtering (keep every Nth row) plus always keep rows containing any alert/warning cell (bgColor != white)
-	const samplingInterval = Math.max(1, conf.takeEvery || 1);
-	const workingRows =
-		samplingInterval > 1
-			? dataRows.filter((row, idx) => {
-					const onSeries = idx % samplingInterval === 0; // take first (idx 0), then every Nth
-					if (onSeries) return true;
-					// Include any row with an alert/warning (detected by any cell having a non-white bgColor)
-					const hasAlert = [row.header, ...row.cells].some(
-						(c) => (c as any).bgColor && (c as any).bgColor !== '#ffffff'
-					);
-					return hasAlert;
-				})
-			: dataRows;
+	const workingRows = sampleDataRowsForTable(dataRows, conf.takeEvery);
 
 	const { caption, headerHeight, cellWidth, cellHeight, columnsPerPage, columnMargin } = conf;
 
diff --git a/src/lib/repositories/BaseRepository.ts b/src/lib/repositories/BaseRepository.ts
index 8a7ac74f..34c78135 100644
--- a/src/lib/repositories/BaseRepository.ts
+++ b/src/lib/repositories/BaseRepository.ts
@@ -1,4 +1,4 @@
-import type { SupabaseClient } from '@supabase/supabase-js';
+import type { SupabaseClient, PostgrestError } from '@supabase/supabase-js';
 import type { IRepository } from '../interfaces/IRepository';
 import { ErrorHandlingService } from '../errors/ErrorHandlingService';
 
@@ -56,11 +56,13 @@ export abstract class BaseRepository<T, K> implements IRepository<T, K> {
 
 			return data as T;
 		} catch (err) {
-			this.errorHandler.handleDatabaseError(
-				err as Error,
-				`Error finding ${this.entityName} with ID: ${String(id)}`
-			);
-			return null;
+			const message = `Error finding ${this.entityName} with ID: ${String(id)}`;
+			if (isPostgrestError(err)) {
+				this.errorHandler.handleDatabaseError(err, message);
+			} else {
+				this.errorHandler.logError(err as Error);
+				throw new Error(message);
+			}
 		}
 	}
 
@@ -164,3 +166,7 @@ export abstract class BaseRepository<T, K> implements IRepository<T, K> {
 		return data as T;
 	}
 }
+
+function isPostgrestError(err: unknown): err is PostgrestError {
+	return Boolean(err && typeof err === 'object' && 'code' in err && 'message' in err);
+}
diff --git a/src/lib/repositories/DeviceOwnersRepository.ts b/src/lib/repositories/DeviceOwnersRepository.ts
index 22de6dc1..d1032b0f 100644
--- a/src/lib/repositories/DeviceOwnersRepository.ts
+++ b/src/lib/repositories/DeviceOwnersRepository.ts
@@ -205,10 +205,10 @@ export class DeviceOwnersRepository extends BaseRepository<DeviceOwner, number>
 	 * Create a new device owner entry
 	 * @param deviceOwner The device owner data to insert
 	 */
-	async create(deviceOwner: DeviceOwnerInsert): Promise<DeviceOwner | null> {
+	override async create<I>(entity: I): Promise<DeviceOwner> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.insert(deviceOwner)
+			.insert(entity)
 			.select()
 			.single();
 
@@ -224,10 +224,10 @@ export class DeviceOwnersRepository extends BaseRepository<DeviceOwner, number>
 	 * @param id The device owner ID
 	 * @param updates The updates to apply
 	 */
-	async update(id: number, updates: DeviceOwnerUpdate): Promise<DeviceOwner | null> {
+	override async update<U>(id: number, entity: U): Promise<DeviceOwner | null> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.update(updates)
+			.update(entity)
 			.eq(this.primaryKey, id)
 			.select()
 			.single();
@@ -243,12 +243,14 @@ export class DeviceOwnersRepository extends BaseRepository<DeviceOwner, number>
 	 * Delete a device owner entry
 	 * @param id The device owner ID
 	 */
-	async delete(id: number): Promise<void> {
+	override async delete(id: number): Promise<boolean> {
 		const { error } = await this.supabase.from(this.tableName).delete().eq(this.primaryKey, id);
 
 		if (error) {
 			this.errorHandler.handleDatabaseError(error, `Error deleting device owner with ID: ${id}`);
 		}
+
+		return true;
 	}
 
 	/**
diff --git a/src/lib/repositories/DeviceRepository.ts b/src/lib/repositories/DeviceRepository.ts
index 63c7978f..ba5439bd 100644
--- a/src/lib/repositories/DeviceRepository.ts
+++ b/src/lib/repositories/DeviceRepository.ts
@@ -170,10 +170,17 @@ export class DeviceRepository extends BaseRepository<Device, string> {
 			.select('user_id')
 			.eq('dev_eui', devEui)
 			.eq('user_id', userId)
-			.single();
+			.maybeSingle();
 
-		if (ownerData) {
-			return ownerData.user_id;
+		if (ownerError && ownerError.code !== 'PGRST116') {
+			this.errorHandler.handleDatabaseError(
+				ownerError,
+				`Error validating direct ownership for device ${devEui}`
+			);
+		}
+
+		if (ownerData?.user_id === userId) {
+			return { id: userId };
 		}
 
 		const { data, error } = await this.supabase
@@ -181,13 +188,13 @@ export class DeviceRepository extends BaseRepository<Device, string> {
 			.select('id')
 			.eq('dev_eui', devEui)
 			.eq('user_id', userId)
-			.single();
+			.maybeSingle();
 
-		if (error) {
+		if (error && error.code !== 'PGRST116') {
 			return null;
 		}
 
-		return data;
+		return data ? { id: data.id } : null;
 	}
 
 	/**
diff --git a/src/lib/repositories/LocationRepository.ts b/src/lib/repositories/LocationRepository.ts
index 51a9796f..31a1468b 100644
--- a/src/lib/repositories/LocationRepository.ts
+++ b/src/lib/repositories/LocationRepository.ts
@@ -57,10 +57,10 @@ export class LocationRepository extends BaseRepository<Location, number> {
 	 * Create a new location
 	 * @param location The location to create
 	 */
-	async create(location: LocationInsert): Promise<Location> {
+	override async create<I>(entity: I): Promise<Location> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.insert(location)
+			.insert(entity)
 			.select()
 			.single();
 
@@ -76,10 +76,10 @@ export class LocationRepository extends BaseRepository<Location, number> {
 	 * @param id The location ID
 	 * @param location The location with updated values
 	 */
-	async update(id: number, location: LocationUpdate): Promise<Location | null> {
+	override async update<U>(id: number, entity: U): Promise<Location | null> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.update(location)
+			.update(entity)
 			.eq(this.primaryKey, id)
 			.select()
 			.single();
@@ -127,7 +127,12 @@ export class LocationRepository extends BaseRepository<Location, number> {
 			);
 		}
 
-		return (data as LocationUser[]) || [];
+		const normalized = (data ?? []).map((row: any) => ({
+			...row,
+			profile: Array.isArray(row.profile) ? row.profile[0] : row.profile
+		}));
+
+		return normalized as LocationUser[];
 	}
 
 	/**
@@ -209,18 +214,25 @@ export class LocationRepository extends BaseRepository<Location, number> {
 	 * Get a location owner entry by ID
 	 * @param id The location owner entry ID
 	 */
-	async getLocationOwnerById(id: number): Promise<{ LocationUser: any } | null> {
+	async getLocationOwnerById(id: number): Promise<LocationUser | null> {
 		const { data, error } = await this.supabase
 			.from('cw_location_owners')
 			.select('*')
 			.eq('id', id)
-			.single();
+			.maybeSingle();
 
-		if (error) {
+		if (error && error.code !== 'PGRST116') {
+			this.errorHandler.handleDatabaseError(
+				error,
+				`Error finding location owner by record id ${id}`
+			);
+		}
+
+		if (!data) {
 			return null;
 		}
 
-		return data;
+		return data as LocationUser;
 	}
 
 	/**
@@ -315,7 +327,7 @@ export class LocationRepository extends BaseRepository<Location, number> {
 		if (error) {
 			this.errorHandler.handleDatabaseError(
 				error,
-				`Error removing user from location (ID: ${userRecordId})`
+				`Error removing user from location (record id: ${userRecordId})`
 			);
 		}
 	}
@@ -324,18 +336,18 @@ export class LocationRepository extends BaseRepository<Location, number> {
 	 * Remove a user from a location
 	 * @param locationOwnerId The location owner entry ID
 	 */
-	async removeUserFromLocationByUserId(userId: string, location_id: number): Promise<void> {
+	async removeUserFromLocationByUserId(userId: string, locationId: number): Promise<void> {
 		const { error } = await this.supabase
 			.from('cw_location_owners')
 			.delete()
 			.eq('user_id', userId)
-			.eq('location_id', location_id)
+			.eq('location_id', locationId)
 			.single();
 
 		if (error) {
 			this.errorHandler.handleDatabaseError(
 				error,
-				`Error removing user from location (ID: ${userRecordId})`
+				`Error removing user ${userId} from location ${locationId}`
 			);
 		}
 	}
diff --git a/src/lib/repositories/RuleRepository.ts b/src/lib/repositories/RuleRepository.ts
index 47e516b3..0fc24042 100644
--- a/src/lib/repositories/RuleRepository.ts
+++ b/src/lib/repositories/RuleRepository.ts
@@ -49,7 +49,7 @@ export class RuleRepository extends BaseRepository<Rule, number> {
 	 * Find rules and rule Criteria by device EUI
 	 * @param devEui The device EUI
 	 */
-	async getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria | null> {
+	async getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria[]> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
 			.select(
@@ -65,7 +65,15 @@ export class RuleRepository extends BaseRepository<Rule, number> {
 			this.errorHandler.handleDatabaseError(error, `Error finding rules by device EUI: ${devEui}`);
 		}
 
-		return (data as Rule[]) || [];
+		const rules = (data ?? []).map((row: any) => {
+			const { cw_rule_criteria, ...rule } = row ?? {};
+			return {
+				...rule,
+				criteria: cw_rule_criteria ?? []
+			};
+		});
+
+		return rules as RuleWithCriteria[];
 	}
 
 	/**
@@ -75,7 +83,7 @@ export class RuleRepository extends BaseRepository<Rule, number> {
 	async findByProfile(profileId: string): Promise<Rule[]> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.select('*')
+			.select('*, cw_rule_triggered(*)')
 			.eq('profile_id', profileId)
 			.order('name');
 
@@ -176,10 +184,10 @@ export class RuleRepository extends BaseRepository<Rule, number> {
 	 * Create a new rule
 	 * @param rule The rule to create
 	 */
-	async create(rule: RuleInsert): Promise<Rule> {
+	override async create<I>(entity: I): Promise<Rule> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.insert(rule)
+			.insert(entity)
 			.select('*')
 			.single();
 
@@ -213,10 +221,10 @@ export class RuleRepository extends BaseRepository<Rule, number> {
 	 * @param id The rule ID
 	 * @param rule The rule data to update
 	 */
-	async update(id: number, rule: RuleUpdate): Promise<Rule | null> {
+	override async update<U>(id: number, entity: U): Promise<Rule | null> {
 		const { data, error } = await this.supabase
 			.from(this.tableName)
-			.update(rule)
+			.update(entity)
 			.eq(this.primaryKey, id)
 			.select('*')
 			.single();
diff --git a/src/lib/services/DeviceDataService.ts b/src/lib/services/DeviceDataService.ts
index 4d2453bd..6f32da3d 100644
--- a/src/lib/services/DeviceDataService.ts
+++ b/src/lib/services/DeviceDataService.ts
@@ -24,7 +24,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 		const cw_device = await this.getDeviceAndType(devEui);
@@ -81,7 +81,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 		if (!startDate || !endDate) {
@@ -173,7 +173,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 		if (!startDate || !endDate) {
@@ -300,7 +300,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 		const { data: cw_device, error: deviceError } = await this.supabase
@@ -345,7 +345,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 		if (!startDate || !endDate) {
@@ -453,7 +453,7 @@ export class DeviceDataService implements IDeviceDataService {
 		if (!devEui) {
 			throw new Error('Device EUI not specified');
 		}
-		if (!this.checkUserHasAccess(devEui)) {
+		if (!(await this.checkUserHasAccess(devEui))) {
 			throw new Error('User does not have access to this device');
 		}
 
@@ -475,8 +475,6 @@ export class DeviceDataService implements IDeviceDataService {
 	}
 
 	private async checkUserHasAccess(dev_eui: string): Promise<boolean> {
-		// Placeholder for user access check logic
-		// This should be implemented based on your authentication and authorization system
 		const session = await this.supabase.auth.getSession();
 		if (!session || !session.data.session) {
 			return false; // No session means no access
@@ -486,17 +484,34 @@ export class DeviceDataService implements IDeviceDataService {
 			return false; // No user or email means no access
 		}
 
+		// Device owner shortcut
+		const { data: deviceOwner, error: deviceOwnerError } = await this.supabase
+			.from('cw_devices')
+			.select('user_id')
+			.eq('dev_eui', dev_eui)
+			.maybeSingle();
+
+		if (deviceOwnerError && deviceOwnerError.code !== 'PGRST116') {
+			this.errorHandler.logError(deviceOwnerError);
+			return false;
+		}
+		if (deviceOwner?.user_id === user.id) {
+			return true;
+		}
+
 		const { data, error } = await this.supabase
 			.from('cw_device_owners')
-			.select('*')
+			.select('id')
 			.eq('dev_eui', dev_eui)
 			.eq('user_id', user.id)
-			.single();
-		if (error) {
+			.maybeSingle();
+
+		if (error && error.code !== 'PGRST116') {
 			this.errorHandler.logError(error);
-			return false; // Error checking access
+			return false;
 		}
-		return true; // Default to true for now
+
+		return Boolean(data);
 	}
 
 	private aggregateTrafficCounts(records: Record<string, any>[]): DeviceDataRecord[] {
diff --git a/src/lib/services/LocationService.ts b/src/lib/services/LocationService.ts
index 4834da67..3cf77967 100644
--- a/src/lib/services/LocationService.ts
+++ b/src/lib/services/LocationService.ts
@@ -66,13 +66,13 @@ export class LocationService implements ILocationService {
 	 * Delete a location
 	 * @param locationId The location ID
 	 */
-	async deleteLocation(locationId: number, user_id: string): Promise<boolean> {
+	async deleteLocation(locationId: number, userId: string): Promise<boolean> {
 		const location = await this.locationRepository.findById(locationId);
 		if (!location) {
 			throw new Error(`Location with ID ${locationId} not found`);
 		}
-		if (location.owner_id !== user_id) {
-			throw new Error(`User ${user_id} does not have permission to delete this location`);
+		if (location.owner_id !== userId) {
+			throw new Error(`User ${userId} does not have permission to delete this location`);
 		}
 		return this.locationRepository.delete(locationId);
 	}
@@ -214,10 +214,14 @@ export class LocationService implements ILocationService {
 
 						if (existingPermission) {
 							// Update existing permission
-							await this.deviceRepository.updateDevicePermission(
-								existingPermission.id,
-								permissionLevel
-							);
+							if (typeof existingPermission.id === 'number') {
+								await this.deviceRepository.updateDevicePermission(
+									existingPermission.id,
+									permissionLevel
+								);
+							} else {
+								// Direct owners already have full access; nothing to update
+							}
 						} else {
 							// Create new permission
 							await this.deviceRepository.addUserToDevice(device.dev_eui, userId, permissionLevel);
diff --git a/src/lib/services/ReportService.ts b/src/lib/services/ReportService.ts
index 3574c6b9..4e805a11 100644
--- a/src/lib/services/ReportService.ts
+++ b/src/lib/services/ReportService.ts
@@ -19,6 +19,7 @@ import type {
 	ReportUserScheduleInsert,
 	ReportUserScheduleUpdate
 } from '../models/Report';
+import type { DeviceRepository } from '$lib/repositories/DeviceRepository';
 
 /**
  * Implementation of ReportService
@@ -29,7 +30,8 @@ export class ReportService implements IReportService {
 		private reportRepository: ReportRepository,
 		private alertPointRepository: ReportAlertPointRepository,
 		private recipientRepository: ReportRecipientRepository,
-		private scheduleRepository: ReportUserScheduleRepository
+		private scheduleRepository: ReportUserScheduleRepository,
+		private deviceRepository: DeviceRepository
 	) {}
 
 	/**
@@ -39,6 +41,17 @@ export class ReportService implements IReportService {
 		return this.reportRepository.findAll();
 	}
 
+	/**
+	 * Get all reports with devices
+	 */
+	async getAllReportsWithDevices(devEui: string): Promise<Report[]> {
+		let allReports = await this.reportRepository.findAll();
+		for (let report of allReports) {
+			report['cw_device'] = await this.deviceRepository.findById(report.dev_eui);
+		}
+		return allReports;
+	}
+
 	/**
 	 * Get reports by device EUI
 	 */
diff --git a/src/lib/services/RuleService.ts b/src/lib/services/RuleService.ts
index 0fd075bf..67213588 100644
--- a/src/lib/services/RuleService.ts
+++ b/src/lib/services/RuleService.ts
@@ -48,8 +48,8 @@ export class RuleService implements IRuleService {
 	 * Get rules with Criteria by device EUI
 	 * @param devEui The device EUI
 	 */
-	getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria | null> {
-		return this.ruleRepository.findRuleWithCriteria(devEui);
+	getRulesAndCriteriaByDevice(devEui: string): Promise<RuleWithCriteria[]> {
+		return this.ruleRepository.getRulesAndCriteriaByDevice(devEui);
 	}
 
 	/**
diff --git a/src/lib/services/SessionService.ts b/src/lib/services/SessionService.ts
index 898d766a..0d70663f 100644
--- a/src/lib/services/SessionService.ts
+++ b/src/lib/services/SessionService.ts
@@ -9,40 +9,45 @@ import { info, debug } from '../utilities/logger';
  * Refactored to accept a Supabase client directly instead of using IoC injection
  */
 export class SessionService implements ISessionService {
-  private supabaseClient: SupabaseClient;
-  private readonly errorHandler = new ErrorHandlingService();
+	private supabaseClient: SupabaseClient;
+	private readonly errorHandler = new ErrorHandlingService();
 
-  constructor(supabaseClient: SupabaseClient) {
-    this.supabaseClient = supabaseClient;
-  }
+	constructor(supabaseClient: SupabaseClient) {
+		this.supabaseClient = supabaseClient;
+	}
 
-  /**
-   * Gets a validated session by checking both getSession and getUser
-   * Ensures the JWT token is valid before returning the session
-   */
-  async getSafeSession(): Promise<{ session: Session | null; user: User | null }> {
-    try {
-      // First, get the current session
-      const { data: { session } } = await this.supabaseClient.auth.getSession();
-      
-      if (!session) {
-        debug('SessionService: No session found');
-        return { session: null, user: null };
-      }
+	/**
+	 * Gets a validated session by checking both getSession and getUser
+	 * Ensures the JWT token is valid before returning the session
+	 */
+	async getSafeSession(): Promise<{ session: Session | null; user: User | null }> {
+		try {
+			// First, get the current session
+			const {
+				data: { session }
+			} = await this.supabaseClient.auth.getSession();
 
-      // Validate the JWT by getting the user
-      const { data: { user }, error } = await this.supabaseClient.auth.getUser();
-      
-      if (error) {
-        this.errorHandler.logError(error);
-        return { session: null, user: null };
-      }
+			if (!session) {
+				debug('SessionService: No session found');
+				return { session: null, user: null };
+			}
 
-      info('SessionService: Session found and validated for user:', user.email);
-      return { session, user };
-    } catch (error) {
-      this.errorHandler.logError(error as Error);
-      return { session: null, user: null };
-    }
-  }
-}
\ No newline at end of file
+			// Validate the JWT by getting the user
+			const {
+				data: { user },
+				error
+			} = await this.supabaseClient.auth.getUser();
+
+			if (error) {
+				this.errorHandler.logError(error);
+				return { session: null, user: null };
+			}
+
+			info('SessionService: Session found and validated for user:', user?.email ?? 'unknown');
+			return { session, user };
+		} catch (error) {
+			this.errorHandler.logError(error as Error);
+			return { session: null, user: null };
+		}
+	}
+}
diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts
index 1bfa24af..52736228 100644
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -41,15 +41,22 @@ export const themeStore: Writable<ThemeState> = writable(initial);
 function applyDOMTheme(theme: 'light' | 'dark', mode: ThemeMode, system: 'light' | 'dark') {
 	if (typeof document === 'undefined') return;
 	const root = document.documentElement;
+	const body = document.body;
 
-	// Apply/remove Tailwind dark class
-	if (theme === 'dark') root.classList.add('dark');
-	else root.classList.remove('dark');
+	// Apply/remove Tailwind dark class consistently on both html and body
+	const targets = [root, body].filter((el): el is HTMLElement => Boolean(el));
+	targets.forEach((el) => {
+		if (theme === 'dark') el.classList.add('dark');
+		else el.classList.remove('dark');
+	});
 
 	// Data attributes for downstream CSS hooks / debugging
 	root.dataset.theme = theme;
 	root.dataset.mode = mode; // user selected value (light|dark|system)
 	root.dataset.system = system; // current system preference
+	if (body) {
+		body.dataset.theme = theme;
+	}
 	const explicit = mode !== 'system';
 	if (explicit) root.dataset.explicit = 'true';
 	else delete root.dataset.explicit;
@@ -110,6 +117,9 @@ export function initThemeOnce() {
 	const mq = window.matchMedia('(prefers-color-scheme: dark)');
 	mq.addEventListener('change', (e) => {
 		themeStore.update((s) => {
+			if (s.mode !== 'system') {
+				return s;
+			}
 			const system = e.matches ? 'dark' : 'light';
 			const effective = deriveEffective(s.mode, system);
 			applyDOMTheme(effective, s.mode, system);
diff --git a/src/lib/tests/NonTrafficIntegration.test.ts b/src/lib/tests/NonTrafficIntegration.test.ts
index b2cd4ad7..9b323ec5 100644
--- a/src/lib/tests/NonTrafficIntegration.test.ts
+++ b/src/lib/tests/NonTrafficIntegration.test.ts
@@ -1,6 +1,16 @@
 import { describe, it, expect, beforeAll } from 'vitest';
 import { createClient } from '@supabase/supabase-js';
 import { DateTime } from 'luxon';
+import type { Database } from '../../../database.types';
+
+type DeviceRow = Pick<
+	Database['public']['Tables']['cw_devices']['Row'],
+	'dev_eui' | 'name' | 'type'
+>;
+type DeviceTypeRow = Pick<
+	Database['public']['Tables']['cw_device_type']['Row'],
+	'id' | 'name' | 'data_table_v2'
+>;
 
 /**
  * NON-TRAFFIC DEVICE INTEGRATION TESTS
@@ -63,27 +73,31 @@ describe('Non-Traffic Device Integration Tests', () => {
 	// Helper function to get devices for testing
 	async function getDevicesByTable(tableName: string, limit = 1) {
 		// First get devices, then get their types separately to avoid relationship issues
-		const { data: devices, error: devicesError } = await supabase
+		const { data: rawDevices, error: devicesError } = await supabase
 			.from('cw_devices')
 			.select('dev_eui, name, type')
 			.limit(limit * 5); // Get more devices to filter
 
-		if (devicesError || !devices) {
+		if (devicesError || !rawDevices) {
 			console.warn(`Error getting devices:`, devicesError?.message);
 			return [];
 		}
 
+		const devices = rawDevices as DeviceRow[];
+
 		// Get device types
-		const { data: deviceTypes, error: typesError } = await supabase
+		const { data: rawDeviceTypes, error: typesError } = await supabase
 			.from('cw_device_type')
 			.select('id, name, data_table_v2')
 			.eq('data_table_v2', tableName);
 
-		if (typesError || !deviceTypes || deviceTypes.length === 0) {
+		if (typesError || !rawDeviceTypes || rawDeviceTypes.length === 0) {
 			console.warn(`No device types found for table ${tableName}:`, typesError?.message);
 			return [];
 		}
 
+		const deviceTypes = rawDeviceTypes as DeviceTypeRow[];
+
 		// Filter devices by type and format response
 		const typeIds = deviceTypes.map((t) => t.id);
 		const matchingDevices = devices
diff --git a/src/lib/tests/PDFReportIntegration.test.ts b/src/lib/tests/PDFReportIntegration.test.ts
index 9c336102..cc01f3f2 100644
--- a/src/lib/tests/PDFReportIntegration.test.ts
+++ b/src/lib/tests/PDFReportIntegration.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, beforeAll } from 'vitest';
 import { createClient } from '@supabase/supabase-js';
 import { DateTime } from 'luxon';
diff --git a/src/lib/tests/ReportPDFIntegration.test.ts b/src/lib/tests/ReportPDFIntegration.test.ts
index e711fe05..8d59010e 100644
--- a/src/lib/tests/ReportPDFIntegration.test.ts
+++ b/src/lib/tests/ReportPDFIntegration.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, beforeAll } from 'vitest';
 import { createClient } from '@supabase/supabase-js';
 import { DateTime } from 'luxon';
diff --git a/src/lib/tests/TrafficDataIntegration.test.ts b/src/lib/tests/TrafficDataIntegration.test.ts
index 9fefc3b7..61132680 100644
--- a/src/lib/tests/TrafficDataIntegration.test.ts
+++ b/src/lib/tests/TrafficDataIntegration.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, beforeAll } from 'vitest';
 import { createClient } from '@supabase/supabase-js';
 import { DateTime } from 'luxon';
diff --git a/src/lib/tests/mocks/MockSupabase.ts b/src/lib/tests/mocks/MockSupabase.ts
index 556c232c..1fe7bfa8 100644
--- a/src/lib/tests/mocks/MockSupabase.ts
+++ b/src/lib/tests/mocks/MockSupabase.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { SupabaseClient, PostgrestResponse } from '@supabase/supabase-js';
 
 /**
@@ -6,83 +7,83 @@ import type { SupabaseClient, PostgrestResponse } from '@supabase/supabase-js';
  * @returns A mock Supabase client
  */
 export function createMockSupabaseClient(mockData: any = {}): SupabaseClient {
-  const mockFrom = (tableName: string) => {
-    const tableData = mockData[tableName] || [];
-    
-    // Build the query object with chainable methods
-    const query = {
-      select: (columns: string = '*') => {
-        return {
-          ...query,
-          eq: (column: string, value: any) => {
-            const filteredData = tableData.filter((item: any) => item[column] === value);
-            return {
-              ...query,
-              single: () => mockResponse(filteredData[0]),
-              limit: () => ({
-                single: () => mockResponse(filteredData[0])
-              }),
-              order: () => ({
-                limit: () => ({
-                  single: () => mockResponse(filteredData[0])
-                })
-              }),
-              data: filteredData
-            };
-          },
-          gte: () => query,
-          lte: () => query,
-          order: () => query,
-          limit: () => query,
-          single: () => mockResponse(tableData[0]),
-          data: tableData
-        };
-      },
-      insert: (data: any) => {
-        const newItem = { ...data };
-        return {
-          select: () => ({
-            single: () => mockResponse(newItem)
-          })
-        };
-      },
-      update: (data: any) => {
-        return {
-          eq: (column: string, value: any) => {
-            const index = tableData.findIndex((item: any) => item[column] === value);
-            const updatedItem = index >= 0 ? { ...tableData[index], ...data } : null;
-            return {
-              select: () => ({
-                single: () => mockResponse(updatedItem)
-              })
-            };
-          }
-        };
-      },
-      delete: () => {
-        return {
-          eq: () => mockResponse(null)
-        };
-      }
-    };
-    
-    return query;
-  };
+	const mockFrom = (tableName: string) => {
+		const tableData = mockData[tableName] || [];
 
-  const mockResponse = <T>(data: T | null): PostgrestResponse<T> => {
-    return {
-      data,
-      error: null,
-      count: data ? 1 : 0,
-      status: 200,
-      statusText: 'OK'
-    };
-  };
+		// Build the query object with chainable methods
+		const query = {
+			select: (columns: string = '*') => {
+				return {
+					...query,
+					eq: (column: string, value: any) => {
+						const filteredData = tableData.filter((item: any) => item[column] === value);
+						return {
+							...query,
+							single: () => mockResponse(filteredData[0]),
+							limit: () => ({
+								single: () => mockResponse(filteredData[0])
+							}),
+							order: () => ({
+								limit: () => ({
+									single: () => mockResponse(filteredData[0])
+								})
+							}),
+							data: filteredData
+						};
+					},
+					gte: () => query,
+					lte: () => query,
+					order: () => query,
+					limit: () => query,
+					single: () => mockResponse(tableData[0]),
+					data: tableData
+				};
+			},
+			insert: (data: any) => {
+				const newItem = { ...data };
+				return {
+					select: () => ({
+						single: () => mockResponse(newItem)
+					})
+				};
+			},
+			update: (data: any) => {
+				return {
+					eq: (column: string, value: any) => {
+						const index = tableData.findIndex((item: any) => item[column] === value);
+						const updatedItem = index >= 0 ? { ...tableData[index], ...data } : null;
+						return {
+							select: () => ({
+								single: () => mockResponse(updatedItem)
+							})
+						};
+					}
+				};
+			},
+			delete: () => {
+				return {
+					eq: () => mockResponse(null)
+				};
+			}
+		};
 
-  // Return a partial mock implementation of SupabaseClient
-  return {
-    from: mockFrom
-  } as unknown as SupabaseClient;
+		return query;
+	};
+
+	const mockResponse = <T>(data: T | null): PostgrestResponse<T> => {
+		return {
+			data,
+			error: null,
+			count: data ? 1 : 0,
+			status: 200,
+			statusText: 'OK'
+		};
+	};
+
+	// Return a partial mock implementation of SupabaseClient
+	return {
+		from: mockFrom
+	} as unknown as SupabaseClient;
 }
 
 /**
@@ -91,57 +92,60 @@ export function createMockSupabaseClient(mockData: any = {}): SupabaseClient {
  * @param errorMessage Error message to return
  * @returns A mock Supabase client that returns errors
  */
-export function createErrorMockSupabaseClient(errorCode: string = '42P01', errorMessage: string = 'Mock Error'): SupabaseClient {
-  const mockErrorResponse = <T>(): PostgrestResponse<T> => {
-    return {
-      data: null,
-      error: {
-        code: errorCode,
-        message: errorMessage,
-        details: '',
-        hint: ''
-      },
-      count: null,
-      status: 400,
-      statusText: 'Bad Request'
-    };
-  };
+export function createErrorMockSupabaseClient(
+	errorCode: string = '42P01',
+	errorMessage: string = 'Mock Error'
+): SupabaseClient {
+	const mockErrorResponse = <T>(): PostgrestResponse<T> => {
+		return {
+			data: null,
+			error: {
+				code: errorCode,
+				message: errorMessage,
+				details: '',
+				hint: ''
+			},
+			count: null,
+			status: 400,
+			statusText: 'Bad Request'
+		};
+	};
 
-  const mockFrom = () => {
-    return {
-      select: () => ({
-        eq: () => ({
-          single: () => mockErrorResponse(),
-          limit: () => ({
-            single: () => mockErrorResponse()
-          }),
-          order: () => ({
-            limit: () => ({
-              single: () => mockErrorResponse()
-            })
-          }),
-        }),
-        single: () => mockErrorResponse()
-      }),
-      insert: () => ({
-        select: () => ({
-          single: () => mockErrorResponse()
-        })
-      }),
-      update: () => ({
-        eq: () => ({
-          select: () => ({
-            single: () => mockErrorResponse()
-          })
-        })
-      }),
-      delete: () => ({
-        eq: () => mockErrorResponse()
-      })
-    };
-  };
+	const mockFrom = () => {
+		return {
+			select: () => ({
+				eq: () => ({
+					single: () => mockErrorResponse(),
+					limit: () => ({
+						single: () => mockErrorResponse()
+					}),
+					order: () => ({
+						limit: () => ({
+							single: () => mockErrorResponse()
+						})
+					})
+				}),
+				single: () => mockErrorResponse()
+			}),
+			insert: () => ({
+				select: () => ({
+					single: () => mockErrorResponse()
+				})
+			}),
+			update: () => ({
+				eq: () => ({
+					select: () => ({
+						single: () => mockErrorResponse()
+					})
+				})
+			}),
+			delete: () => ({
+				eq: () => mockErrorResponse()
+			})
+		};
+	};
 
-  return {
-    from: mockFrom
-  } as unknown as SupabaseClient;
-}
\ No newline at end of file
+	return {
+		from: mockFrom
+	} as unknown as SupabaseClient;
+}
diff --git a/src/lib/tests/services/DeviceService.test.ts b/src/lib/tests/services/DeviceService.test.ts
index afaccb78..b5eaea36 100644
--- a/src/lib/tests/services/DeviceService.test.ts
+++ b/src/lib/tests/services/DeviceService.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { DeviceService } from '../../services/DeviceService';
 import { DeviceRepository } from '../../repositories/DeviceRepository';
@@ -8,143 +9,143 @@ import type { Device } from '../../models/Device';
 import type { CreateDeviceDto, UpdateDeviceDto } from '../../dtos/DeviceDto';
 
 describe('DeviceService', () => {
-  // Mock data
-  const mockDevices: Device[] = [
-    {
-      dev_eui: 'device-001',
-      name: 'Test Device 1',
-      type: 1,
-      location_id: 100,
-      lat: 40.7128,
-      long: -74.006
-    },
-    {
-      dev_eui: 'device-002',
-      name: 'Test Device 2',
-      type: 2,
-      location_id: 101
-    }
-  ];
-
-  // Mock implementations
-  let deviceService: DeviceService;
-  let mockSupabase: ReturnType<typeof createMockSupabaseClient>;
-  let deviceRepository: DeviceRepository;
-  let errorHandlingService: ErrorHandlingService;
-
-  beforeEach(() => {
-    // Create test mocks
-    mockSupabase = createMockSupabaseClient({
-      'cw_devices': mockDevices
-    });
-    
-    errorHandlingService = new ErrorHandlingService();
-    vi.spyOn(errorHandlingService, 'logError');
-    
-    deviceRepository = new DeviceRepository(mockSupabase, errorHandlingService);
-    deviceService = new DeviceService(deviceRepository);
-  });
-
-  describe('getAllDevices', () => {
-    it('should return all devices', async () => {
-      const devices = await deviceService.getAllDevices();
-      expect(devices).toHaveLength(2);
-      expect(devices[0].dev_eui).toBe('device-001');
-      expect(devices[1].dev_eui).toBe('device-002');
-    });
-
-    it('should handle errors when retrieving devices', async () => {
-      const errorSupabase = createErrorMockSupabaseClient();
-      const errorRepo = new DeviceRepository(errorSupabase, errorHandlingService);
-      const errorService = new DeviceService(errorRepo);
-
-      const result = await errorService.getAllDevices();
-      expect(result).toEqual([]);
-    });
-  });
-
-  describe('getDeviceByEui', () => {
-    it('should return a device by EUI', async () => {
-      const device = await deviceService.getDeviceByEui('device-001');
-      expect(device).not.toBeNull();
-      expect(device?.dev_eui).toBe('device-001');
-      expect(device?.name).toBe('Test Device 1');
-    });
-
-    it('should return null for non-existent device', async () => {
-      vi.spyOn(deviceRepository, 'findById').mockResolvedValue(null);
-      
-      const device = await deviceService.getDeviceByEui('non-existent-device');
-      expect(device).toBeNull();
-    });
-  });
-
-  describe('createDevice', () => {
-    it('should create a new device', async () => {
-      const newDevice: CreateDeviceDto = {
-        dev_eui: 'new-device',
-        name: 'New Test Device',
-        type: 3,
-        location_id: 102
-      };
-
-      vi.spyOn(deviceRepository, 'create').mockResolvedValue({
-        ...newDevice,
-        lat: null,
-        long: null,
-        serial_number: null,
-        upload_interval: null
-      } as Device);
-
-      const createdDevice = await deviceService.createDevice(newDevice);
-      expect(createdDevice.dev_eui).toBe('new-device');
-      expect(createdDevice.name).toBe('New Test Device');
-      expect(deviceRepository.create).toHaveBeenCalledWith(newDevice);
-    });
-  });
-
-  describe('updateDevice', () => {
-    it('should update an existing device', async () => {
-      const updateData: UpdateDeviceDto = {
-        name: 'Updated Device Name',
-        lat: 41.8781,
-        long: -87.6298
-      };
-
-      vi.spyOn(deviceRepository, 'update').mockResolvedValue({
-        ...mockDevices[0],
-        name: updateData.name,
-        lat: updateData.lat,
-        long: updateData.long
-      });
-
-      const updatedDevice = await deviceService.updateDevice('device-001', updateData);
-      expect(updatedDevice).not.toBeNull();
-      expect(updatedDevice?.name).toBe('Updated Device Name');
-      expect(updatedDevice?.lat).toBe(41.8781);
-      expect(deviceRepository.update).toHaveBeenCalledWith('device-001', updateData);
-    });
-
-    it('should throw NotFoundError when device does not exist', async () => {
-      const updateData: UpdateDeviceDto = { name: 'Invalid Update' };
-      
-      vi.spyOn(deviceRepository, 'update').mockImplementation(() => {
-        throw new NotFoundError('Device not found with identifier: non-existent-device');
-      });
-
-      await expect(deviceService.updateDevice('non-existent-device', updateData))
-        .rejects
-        .toThrow(NotFoundError);
-    });
-  });
-
-  describe('deleteDevice', () => {
-    it('should delete an existing device', async () => {
-      vi.spyOn(deviceRepository, 'delete').mockResolvedValue(true);
-      
-      const result = await deviceService.deleteDevice('device-001');
-      expect(result).toBe(true);
-      expect(deviceRepository.delete).toHaveBeenCalledWith('device-001');
-    });
-  });
-});
\ No newline at end of file
+	// Mock data
+	const mockDevices: Device[] = [
+		{
+			dev_eui: 'device-001',
+			name: 'Test Device 1',
+			type: 1,
+			location_id: 100,
+			lat: 40.7128,
+			long: -74.006
+		},
+		{
+			dev_eui: 'device-002',
+			name: 'Test Device 2',
+			type: 2,
+			location_id: 101
+		}
+	];
+
+	// Mock implementations
+	let deviceService: DeviceService;
+	let mockSupabase: ReturnType<typeof createMockSupabaseClient>;
+	let deviceRepository: DeviceRepository;
+	let errorHandlingService: ErrorHandlingService;
+
+	beforeEach(() => {
+		// Create test mocks
+		mockSupabase = createMockSupabaseClient({
+			cw_devices: mockDevices
+		});
+
+		errorHandlingService = new ErrorHandlingService();
+		vi.spyOn(errorHandlingService, 'logError');
+
+		deviceRepository = new DeviceRepository(mockSupabase, errorHandlingService);
+		deviceService = new DeviceService(deviceRepository);
+	});
+
+	describe('getAllDevices', () => {
+		it('should return all devices', async () => {
+			const devices = await deviceService.getAllDevices();
+			expect(devices).toHaveLength(2);
+			expect(devices[0].dev_eui).toBe('device-001');
+			expect(devices[1].dev_eui).toBe('device-002');
+		});
+
+		it('should handle errors when retrieving devices', async () => {
+			const errorSupabase = createErrorMockSupabaseClient();
+			const errorRepo = new DeviceRepository(errorSupabase, errorHandlingService);
+			const errorService = new DeviceService(errorRepo);
+
+			const result = await errorService.getAllDevices();
+			expect(result).toEqual([]);
+		});
+	});
+
+	describe('getDeviceByEui', () => {
+		it('should return a device by EUI', async () => {
+			const device = await deviceService.getDeviceByEui('device-001');
+			expect(device).not.toBeNull();
+			expect(device?.dev_eui).toBe('device-001');
+			expect(device?.name).toBe('Test Device 1');
+		});
+
+		it('should return null for non-existent device', async () => {
+			vi.spyOn(deviceRepository, 'findById').mockResolvedValue(null);
+
+			const device = await deviceService.getDeviceByEui('non-existent-device');
+			expect(device).toBeNull();
+		});
+	});
+
+	describe('createDevice', () => {
+		it('should create a new device', async () => {
+			const newDevice: CreateDeviceDto = {
+				dev_eui: 'new-device',
+				name: 'New Test Device',
+				type: 3,
+				location_id: 102
+			};
+
+			vi.spyOn(deviceRepository, 'create').mockResolvedValue({
+				...newDevice,
+				lat: null,
+				long: null,
+				serial_number: null,
+				upload_interval: null
+			} as Device);
+
+			const createdDevice = await deviceService.createDevice(newDevice);
+			expect(createdDevice.dev_eui).toBe('new-device');
+			expect(createdDevice.name).toBe('New Test Device');
+			expect(deviceRepository.create).toHaveBeenCalledWith(newDevice);
+		});
+	});
+
+	describe('updateDevice', () => {
+		it('should update an existing device', async () => {
+			const updateData: UpdateDeviceDto = {
+				name: 'Updated Device Name',
+				lat: 41.8781,
+				long: -87.6298
+			};
+
+			vi.spyOn(deviceRepository, 'update').mockResolvedValue({
+				...mockDevices[0],
+				name: updateData.name,
+				lat: updateData.lat,
+				long: updateData.long
+			});
+
+			const updatedDevice = await deviceService.updateDevice('device-001', updateData);
+			expect(updatedDevice).not.toBeNull();
+			expect(updatedDevice?.name).toBe('Updated Device Name');
+			expect(updatedDevice?.lat).toBe(41.8781);
+			expect(deviceRepository.update).toHaveBeenCalledWith('device-001', updateData);
+		});
+
+		it('should throw NotFoundError when device does not exist', async () => {
+			const updateData: UpdateDeviceDto = { name: 'Invalid Update' };
+
+			vi.spyOn(deviceRepository, 'update').mockImplementation(() => {
+				throw new NotFoundError('Device not found with identifier: non-existent-device');
+			});
+
+			await expect(deviceService.updateDevice('non-existent-device', updateData)).rejects.toThrow(
+				NotFoundError
+			);
+		});
+	});
+
+	describe('deleteDevice', () => {
+		it('should delete an existing device', async () => {
+			vi.spyOn(deviceRepository, 'delete').mockResolvedValue(true);
+
+			const result = await deviceService.deleteDevice('device-001');
+			expect(result).toBe(true);
+			expect(deviceRepository.delete).toHaveBeenCalledWith('device-001');
+		});
+	});
+});
diff --git a/src/lib/tests/services/LocationService.test.ts b/src/lib/tests/services/LocationService.test.ts
index 74de7f48..a576ac33 100644
--- a/src/lib/tests/services/LocationService.test.ts
+++ b/src/lib/tests/services/LocationService.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { LocationService } from '../../services/LocationService';
 import { LocationRepository } from '../../repositories/LocationRepository';
@@ -6,166 +7,174 @@ import type { Location } from '../../models/Location';
 import type { LocationDto } from '../../dtos/LocationDto';
 
 describe('LocationService', () => {
-  let locationService: LocationService;
-  let mockRepository: any;
-  let mockDeviceRepository: any;
-  let errorHandlingService: ErrorHandlingService;
-  
-  const mockLocations: Location[] = [
-    {
-      id: '1',
-      name: 'Greenhouse 1',
-      coordinates: { lat: 35.6812, lng: 139.7671 },
-      user_id: 'user_123',
-      created_at: '2025-05-01T10:00:00Z'
-    },
-    {
-      id: '2',
-      name: 'Field A',
-      coordinates: { lat: 35.6813, lng: 139.7675 },
-      user_id: 'user_123',
-      created_at: '2025-05-01T11:00:00Z'
-    }
-  ];
-  
-  beforeEach(() => {
-    mockRepository = {
-      findAll: vi.fn(),
-      findById: vi.fn(),
-      findByUserId: vi.fn(),
-      findByOwnerId: vi.fn(),
-      create: vi.fn(),
-      update: vi.fn(),
-      delete: vi.fn()
-    };
-    mockDeviceRepository = {
-      findByLocation: vi.fn(),
-      addUserToDevice: vi.fn(),
-      updateDevicePermission: vi.fn(),
-      findDeviceOwner: vi.fn(),
-      removeUserFromDevice: vi.fn()
-    };
-    errorHandlingService = new ErrorHandlingService();
-    locationService = new LocationService(mockRepository, mockDeviceRepository, errorHandlingService);
-  });
-  
-  describe('getAllLocations', () => {
-    it('should return all locations', async () => {
-      mockRepository.findAll.mockResolvedValue(mockLocations);
-      
-      const result = await locationService.getAllLocations();
-      
-      expect(mockRepository.findAll).toHaveBeenCalled();
-      expect(result).toHaveLength(2);
-      expect(result[0].name).toBe('Greenhouse 1');
-      expect(result[1].name).toBe('Field A');
-    });
-    
-    it('should handle errors when getting all locations', async () => {
-      mockRepository.findAll.mockRejectedValue(new Error('Database error'));
-      
-      await expect(locationService.getAllLocations()).rejects.toThrow('Database error');
-    });
-  });
-  
-  describe('getLocationById', () => {
-    it('should return a location by id', async () => {
-      mockRepository.findById.mockResolvedValue(mockLocations[0]);
-      
-      const result = await locationService.getLocationById('1');
-      
-      expect(mockRepository.findById).toHaveBeenCalledWith('1');
-      expect(result).toBeDefined();
-      expect(result.id).toBe('1');
-      expect(result.name).toBe('Greenhouse 1');
-    });
-    
-    it('should return null when location does not exist', async () => {
-      mockRepository.findById.mockResolvedValue(null);
-      
-      const result = await locationService.getLocationById('999');
-      
-      expect(result).toBeNull();
-    });
-  });
-  
-  describe('getLocationsByOwner', () => {
-    it('should return locations for a user', async () => {
-      mockRepository.findByOwnerId.mockResolvedValue(mockLocations);
-
-      const result = await locationService.getLocationsByOwner('user_123');
-
-      expect(mockRepository.findByOwnerId).toHaveBeenCalledWith('user_123');
-      expect(result).toHaveLength(2);
-      expect(result[0].user_id).toBe('user_123');
-    });
-  });
-  
-  describe('createLocation', () => {
-    it('should create a new location', async () => {
-      const locationDto: LocationDto = {
-        name: 'Greenhouse 2',
-        coordinates: { lat: 35.6820, lng: 139.7680 },
-        user_id: 'user_123'
-      };
-      
-      const createdLocation: Location = {
-        ...locationDto,
-        id: '3',
-        created_at: '2025-05-02T10:00:00Z'
-      };
-      
-      mockRepository.create.mockResolvedValue(createdLocation);
-      
-      const result = await locationService.createLocation(locationDto);
-      
-      expect(mockRepository.create).toHaveBeenCalledWith(locationDto);
-      expect(result).toBeDefined();
-      expect(result.id).toBe('3');
-      expect(result.name).toBe('Greenhouse 2');
-    });
-  });
-  
-  describe('updateLocation', () => {
-    it('should update an existing location', async () => {
-      const locationDto: LocationDto = {
-        name: 'Greenhouse 1 Updated',
-        coordinates: { lat: 35.6812, lng: 139.7671 },
-        user_id: 'user_123'
-      };
-      
-      const updatedLocation: Location = {
-        ...locationDto,
-        id: '1',
-        created_at: '2025-05-01T10:00:00Z'
-      };
-      
-      mockRepository.update.mockResolvedValue(updatedLocation);
-      
-      const result = await locationService.updateLocation('1', locationDto);
-      
-      expect(mockRepository.update).toHaveBeenCalledWith('1', locationDto);
-      expect(result).toBeDefined();
-      expect(result.name).toBe('Greenhouse 1 Updated');
-    });
-    
-    it('should return null when location to update does not exist', async () => {
-      mockRepository.update.mockResolvedValue(null);
-      
-      const result = await locationService.updateLocation('999', { name: 'Test', coordinates: { lat: 0, lng: 0 }, user_id: 'user_123' });
-      
-      expect(result).toBeNull();
-    });
-  });
-  
-  describe('deleteLocation', () => {
-    it('should delete a location', async () => {
-      mockRepository.delete.mockResolvedValue({ success: true });
-      
-      const result = await locationService.deleteLocation('1');
-      
-      expect(mockRepository.delete).toHaveBeenCalledWith('1');
-      expect(result).toEqual({ success: true });
-    });
-  });
-});
\ No newline at end of file
+	let locationService: LocationService;
+	let mockRepository: any;
+	let mockDeviceRepository: any;
+	let errorHandlingService: ErrorHandlingService;
+
+	const mockLocations: Location[] = [
+		{
+			id: '1',
+			name: 'Greenhouse 1',
+			coordinates: { lat: 35.6812, lng: 139.7671 },
+			user_id: 'user_123',
+			created_at: '2025-05-01T10:00:00Z'
+		},
+		{
+			id: '2',
+			name: 'Field A',
+			coordinates: { lat: 35.6813, lng: 139.7675 },
+			user_id: 'user_123',
+			created_at: '2025-05-01T11:00:00Z'
+		}
+	];
+
+	beforeEach(() => {
+		mockRepository = {
+			findAll: vi.fn(),
+			findById: vi.fn(),
+			findByUserId: vi.fn(),
+			findByOwnerId: vi.fn(),
+			create: vi.fn(),
+			update: vi.fn(),
+			delete: vi.fn()
+		};
+		mockDeviceRepository = {
+			findByLocation: vi.fn(),
+			addUserToDevice: vi.fn(),
+			updateDevicePermission: vi.fn(),
+			findDeviceOwner: vi.fn(),
+			removeUserFromDevice: vi.fn()
+		};
+		errorHandlingService = new ErrorHandlingService();
+		locationService = new LocationService(
+			mockRepository,
+			mockDeviceRepository,
+			errorHandlingService
+		);
+	});
+
+	describe('getAllLocations', () => {
+		it('should return all locations', async () => {
+			mockRepository.findAll.mockResolvedValue(mockLocations);
+
+			const result = await locationService.getAllLocations();
+
+			expect(mockRepository.findAll).toHaveBeenCalled();
+			expect(result).toHaveLength(2);
+			expect(result[0].name).toBe('Greenhouse 1');
+			expect(result[1].name).toBe('Field A');
+		});
+
+		it('should handle errors when getting all locations', async () => {
+			mockRepository.findAll.mockRejectedValue(new Error('Database error'));
+
+			await expect(locationService.getAllLocations()).rejects.toThrow('Database error');
+		});
+	});
+
+	describe('getLocationById', () => {
+		it('should return a location by id', async () => {
+			mockRepository.findById.mockResolvedValue(mockLocations[0]);
+
+			const result = await locationService.getLocationById('1');
+
+			expect(mockRepository.findById).toHaveBeenCalledWith('1');
+			expect(result).toBeDefined();
+			expect(result.id).toBe('1');
+			expect(result.name).toBe('Greenhouse 1');
+		});
+
+		it('should return null when location does not exist', async () => {
+			mockRepository.findById.mockResolvedValue(null);
+
+			const result = await locationService.getLocationById('999');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('getLocationsByOwner', () => {
+		it('should return locations for a user', async () => {
+			mockRepository.findByOwnerId.mockResolvedValue(mockLocations);
+
+			const result = await locationService.getLocationsByOwner('user_123');
+
+			expect(mockRepository.findByOwnerId).toHaveBeenCalledWith('user_123');
+			expect(result).toHaveLength(2);
+			expect(result[0].user_id).toBe('user_123');
+		});
+	});
+
+	describe('createLocation', () => {
+		it('should create a new location', async () => {
+			const locationDto: LocationDto = {
+				name: 'Greenhouse 2',
+				coordinates: { lat: 35.682, lng: 139.768 },
+				user_id: 'user_123'
+			};
+
+			const createdLocation: Location = {
+				...locationDto,
+				id: '3',
+				created_at: '2025-05-02T10:00:00Z'
+			};
+
+			mockRepository.create.mockResolvedValue(createdLocation);
+
+			const result = await locationService.createLocation(locationDto);
+
+			expect(mockRepository.create).toHaveBeenCalledWith(locationDto);
+			expect(result).toBeDefined();
+			expect(result.id).toBe('3');
+			expect(result.name).toBe('Greenhouse 2');
+		});
+	});
+
+	describe('updateLocation', () => {
+		it('should update an existing location', async () => {
+			const locationDto: LocationDto = {
+				name: 'Greenhouse 1 Updated',
+				coordinates: { lat: 35.6812, lng: 139.7671 },
+				user_id: 'user_123'
+			};
+
+			const updatedLocation: Location = {
+				...locationDto,
+				id: '1',
+				created_at: '2025-05-01T10:00:00Z'
+			};
+
+			mockRepository.update.mockResolvedValue(updatedLocation);
+
+			const result = await locationService.updateLocation('1', locationDto);
+
+			expect(mockRepository.update).toHaveBeenCalledWith('1', locationDto);
+			expect(result).toBeDefined();
+			expect(result.name).toBe('Greenhouse 1 Updated');
+		});
+
+		it('should return null when location to update does not exist', async () => {
+			mockRepository.update.mockResolvedValue(null);
+
+			const result = await locationService.updateLocation('999', {
+				name: 'Test',
+				coordinates: { lat: 0, lng: 0 },
+				user_id: 'user_123'
+			});
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('deleteLocation', () => {
+		it('should delete a location', async () => {
+			mockRepository.delete.mockResolvedValue({ success: true });
+
+			const result = await locationService.deleteLocation('1');
+
+			expect(mockRepository.delete).toHaveBeenCalledWith('1');
+			expect(result).toEqual({ success: true });
+		});
+	});
+});
diff --git a/src/lib/tests/services/RuleService.test.ts b/src/lib/tests/services/RuleService.test.ts
index a793993a..7941b123 100644
--- a/src/lib/tests/services/RuleService.test.ts
+++ b/src/lib/tests/services/RuleService.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { RuleService } from '../../services/RuleService';
 import { RuleRepository } from '../../repositories/RuleRepository';
@@ -6,307 +7,307 @@ import { ErrorHandlingService } from '../../errors/ErrorHandlingService';
 import type { Rule, RuleCriteria, RuleWithCriteria } from '../../models/Rule';
 
 describe('RuleService', () => {
-  // Mock data
-  const mockRules: Rule[] = [
-    {
-      id: 1,
-      ruleGroupId: 'rule-group-1',
-      name: 'High Temperature Alert',
-      description: 'Alert when temperature exceeds threshold',
-      dev_eui: 'device-001',
-      profile_id: 'profile-123',
-      is_active: true,
-      severity: 'high',
-      notifier_type: 'notification',
-      message: 'Temperature is too high!',
-      created_at: '2025-05-01T10:00:00Z'
-    },
-    {
-      id: 2,
-      ruleGroupId: 'rule-group-2',
-      name: 'Low Moisture Alert',
-      description: 'Alert when moisture falls below threshold',
-      dev_eui: 'device-001',
-      profile_id: 'profile-123',
-      is_active: true,
-      severity: 'medium',
-      notifier_type: 'notification',
-      message: 'Soil moisture is too low!',
-      created_at: '2025-05-01T11:00:00Z'
-    }
-  ] as Rule[];
-
-  const mockCriteria: RuleCriteria[] = [
-    {
-      id: 1,
-      ruleGroupId: 'rule-group-1',
-      sensor_type: 'temperature',
-      operator: '>',
-      value: 30,
-      unit: 'C',
-      created_at: '2025-05-01T10:05:00Z'
-    },
-    {
-      id: 2,
-      ruleGroupId: 'rule-group-2',
-      sensor_type: 'moisture',
-      operator: '<',
-      value: 20,
-      unit: '%',
-      created_at: '2025-05-01T11:05:00Z'
-    }
-  ] as RuleCriteria[];
-
-  // Mock implementations
-  let ruleService: RuleService;
-  let mockSupabase: ReturnType<typeof createMockSupabaseClient>;
-  let ruleRepository: RuleRepository;
-  let errorHandlingService: ErrorHandlingService;
-
-  beforeEach(() => {
-    // Create test mocks
-    mockSupabase = createMockSupabaseClient({
-      'cw_rules': mockRules,
-      'cw_rule_criteria': mockCriteria
-    });
-    
-    errorHandlingService = new ErrorHandlingService();
-    vi.spyOn(errorHandlingService, 'logError');
-    
-    ruleRepository = new RuleRepository(mockSupabase, errorHandlingService);
-    ruleService = new RuleService(ruleRepository);
-  });
-
-  describe('getRuleById', () => {
-    it('should return a rule by its ID', async () => {
-      vi.spyOn(ruleRepository, 'findById').mockResolvedValue(mockRules[0]);
-      
-      const rule = await ruleService.getRuleById(1);
-      expect(rule).not.toBeNull();
-      expect(rule?.id).toBe(1);
-      expect(rule?.name).toBe('High Temperature Alert');
-    });
-
-    it('should return null for non-existent rule ID', async () => {
-      vi.spyOn(ruleRepository, 'findById').mockResolvedValue(null);
-      
-      const rule = await ruleService.getRuleById(999);
-      expect(rule).toBeNull();
-    });
-  });
-
-  describe('getRuleWithCriteria', () => {
-    it('should return a rule with its associated criteria', async () => {
-      const mockRuleWithCriteria: RuleWithCriteria = {
-        ...mockRules[0],
-        criteria: [mockCriteria[0]]
-      };
-      
-      vi.spyOn(ruleRepository, 'findRuleWithCriteria').mockResolvedValue(mockRuleWithCriteria);
-      
-      const rule = await ruleService.getRuleWithCriteria('rule-group-1');
-      expect(rule).not.toBeNull();
-      expect(rule?.name).toBe('High Temperature Alert');
-      expect(rule?.criteria).toHaveLength(1);
-      expect(rule?.criteria[0].sensor_type).toBe('temperature');
-    });
-  });
-
-  describe('getRulesByDevice', () => {
-    it('should return rules for a specific device', async () => {
-      vi.spyOn(ruleRepository, 'findByDevice').mockResolvedValue(mockRules);
-      
-      const rules = await ruleService.getRulesByDevice('device-001');
-      expect(rules).toHaveLength(2);
-      expect(rules[0].dev_eui).toBe('device-001');
-    });
-  });
-
-  describe('getRulesByProfile', () => {
-    it('should return rules for a specific profile', async () => {
-      vi.spyOn(ruleRepository, 'findByProfile').mockResolvedValue(mockRules);
-      
-      const rules = await ruleService.getRulesByProfile('profile-123');
-      expect(rules).toHaveLength(2);
-      expect(rules[0].profile_id).toBe('profile-123');
-    });
-  });
-
-  describe('getRuleCriteriaByGroup', () => {
-    it('should return criteria for a specific rule group', async () => {
-      vi.spyOn(ruleRepository, 'findCriteriaByGroup').mockResolvedValue([mockCriteria[0]]);
-      
-      const criteria = await ruleService.getRuleCriteriaByGroup('rule-group-1');
-      expect(criteria).toHaveLength(1);
-      expect(criteria[0].ruleGroupId).toBe('rule-group-1');
-    });
-  });
-
-  describe('createRule', () => {
-    it('should create a new rule', async () => {
-      const newRule = {
-        ruleGroupId: 'rule-group-3',
-        name: 'New Test Rule',
-        description: 'Test rule description',
-        dev_eui: 'device-002',
-        profile_id: 'profile-123',
-        is_active: true
-      };
-
-      vi.spyOn(ruleRepository, 'create').mockResolvedValue({
-        id: 3,
-        ...newRule,
-        severity: null,
-        notifier_type: null,
-        message: null,
-        created_at: '2025-05-02T12:00:00Z'
-      } as Rule);
-
-      const createdRule = await ruleService.createRule(newRule);
-      expect(createdRule.id).toBe(3);
-      expect(createdRule.name).toBe('New Test Rule');
-      expect(ruleRepository.create).toHaveBeenCalledWith(newRule);
-    });
-  });
-
-  describe('createRuleCriteria', () => {
-    it('should create a new rule criteria', async () => {
-      const newCriteria = {
-        ruleGroupId: 'rule-group-1',
-        sensor_type: 'humidity',
-        operator: '>',
-        value: 80
-      };
-
-      vi.spyOn(ruleRepository, 'createCriteria').mockResolvedValue({
-        id: 3,
-        ...newCriteria,
-        unit: '%',
-        created_at: '2025-05-02T12:00:00Z'
-      } as RuleCriteria);
-
-      const createdCriteria = await ruleService.createRuleCriteria(newCriteria);
-      expect(createdCriteria.id).toBe(3);
-      expect(createdCriteria.sensor_type).toBe('humidity');
-      expect(ruleRepository.createCriteria).toHaveBeenCalledWith(newCriteria);
-    });
-  });
-
-  describe('createRuleWithCriteria', () => {
-    it('should create a rule with associated criteria', async () => {
-      const newRule = {
-        ruleGroupId: 'rule-group-4',
-        name: 'Combined Rule',
-        description: 'Test combined rule',
-        dev_eui: 'device-003',
-        profile_id: 'profile-456',
-        is_active: true
-      };
-
-      const newCriteria = [
-        {
-          sensor_type: 'temperature',
-          operator: '>',
-          value: 25,
-          unit: 'C'
-        },
-        {
-          sensor_type: 'humidity',
-          operator: '<',
-          value: 40,
-          unit: '%'
-        }
-      ];
-
-      // Mock the rule creation
-      vi.spyOn(ruleService, 'createRule').mockResolvedValue({
-        id: 4,
-        ...newRule,
-        severity: null,
-        notifier_type: null,
-        message: null,
-        created_at: '2025-05-02T12:00:00Z'
-      } as Rule);
-
-      // Mock the criteria creation
-      vi.spyOn(ruleService, 'createRuleCriteria')
-        .mockResolvedValueOnce({
-          id: 5,
-          ruleGroupId: newRule.ruleGroupId,
-          ...newCriteria[0],
-          created_at: '2025-05-02T12:00:00Z'
-        } as RuleCriteria)
-        .mockResolvedValueOnce({
-          id: 6,
-          ruleGroupId: newRule.ruleGroupId,
-          ...newCriteria[1],
-          created_at: '2025-05-02T12:00:00Z'
-        } as RuleCriteria);
-
-      const result = await ruleService.createRuleWithCriteria(newRule, newCriteria);
-      
-      expect(result.id).toBe(4);
-      expect(result.name).toBe('Combined Rule');
-      expect(result.criteria).toHaveLength(2);
-      expect(result.criteria[0].sensor_type).toBe('temperature');
-      expect(result.criteria[1].sensor_type).toBe('humidity');
-      
-      expect(ruleService.createRule).toHaveBeenCalledWith(newRule);
-      expect(ruleService.createRuleCriteria).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('updateRule', () => {
-    it('should update an existing rule', async () => {
-      const updateData = {
-        name: 'Updated Rule Name',
-        is_active: false
-      };
-
-      vi.spyOn(ruleRepository, 'update').mockResolvedValue({
-        ...mockRules[0],
-        ...updateData
-      });
-
-      const updatedRule = await ruleService.updateRule(1, updateData);
-      expect(updatedRule?.name).toBe('Updated Rule Name');
-      expect(updatedRule?.is_active).toBe(false);
-      expect(ruleRepository.update).toHaveBeenCalledWith(1, updateData);
-    });
-  });
-
-  describe('deleteRule', () => {
-    it('should delete a rule and its criteria', async () => {
-      vi.spyOn(ruleRepository, 'findById').mockResolvedValue(mockRules[0]);
-      vi.spyOn(ruleRepository, 'deleteCriteriaByGroup').mockResolvedValue(true);
-      vi.spyOn(ruleRepository, 'delete').mockResolvedValue(true);
-      
-      const result = await ruleService.deleteRule(1);
-      
-      expect(result).toBe(true);
-      expect(ruleRepository.deleteCriteriaByGroup).toHaveBeenCalledWith('rule-group-1');
-      expect(ruleRepository.delete).toHaveBeenCalledWith(1);
-    });
-
-    it('should return true when deleting non-existent rule', async () => {
-      vi.spyOn(ruleRepository, 'findById').mockResolvedValue(null);
-      vi.spyOn(ruleRepository, 'deleteCriteriaByGroup').mockResolvedValue(true);
-      vi.spyOn(ruleRepository, 'delete').mockResolvedValue(true);
-      
-      const result = await ruleService.deleteRule(999);
-      expect(result).toBe(true);
-      expect(ruleRepository.deleteCriteriaByGroup).not.toHaveBeenCalled();
-      expect(ruleRepository.delete).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('deleteRuleCriteria', () => {
-    it('should delete a rule criteria', async () => {
-      vi.spyOn(ruleRepository, 'deleteCriteria').mockResolvedValue(true);
-      
-      const result = await ruleService.deleteRuleCriteria(1);
-      expect(result).toBe(true);
-      expect(ruleRepository.deleteCriteria).toHaveBeenCalledWith(1);
-    });
-  });
-});
\ No newline at end of file
+	// Mock data
+	const mockRules: Rule[] = [
+		{
+			id: 1,
+			ruleGroupId: 'rule-group-1',
+			name: 'High Temperature Alert',
+			description: 'Alert when temperature exceeds threshold',
+			dev_eui: 'device-001',
+			profile_id: 'profile-123',
+			is_active: true,
+			severity: 'high',
+			notifier_type: 'notification',
+			message: 'Temperature is too high!',
+			created_at: '2025-05-01T10:00:00Z'
+		},
+		{
+			id: 2,
+			ruleGroupId: 'rule-group-2',
+			name: 'Low Moisture Alert',
+			description: 'Alert when moisture falls below threshold',
+			dev_eui: 'device-001',
+			profile_id: 'profile-123',
+			is_active: true,
+			severity: 'medium',
+			notifier_type: 'notification',
+			message: 'Soil moisture is too low!',
+			created_at: '2025-05-01T11:00:00Z'
+		}
+	] as Rule[];
+
+	const mockCriteria: RuleCriteria[] = [
+		{
+			id: 1,
+			ruleGroupId: 'rule-group-1',
+			sensor_type: 'temperature',
+			operator: '>',
+			value: 30,
+			unit: 'C',
+			created_at: '2025-05-01T10:05:00Z'
+		},
+		{
+			id: 2,
+			ruleGroupId: 'rule-group-2',
+			sensor_type: 'moisture',
+			operator: '<',
+			value: 20,
+			unit: '%',
+			created_at: '2025-05-01T11:05:00Z'
+		}
+	] as RuleCriteria[];
+
+	// Mock implementations
+	let ruleService: RuleService;
+	let mockSupabase: ReturnType<typeof createMockSupabaseClient>;
+	let ruleRepository: RuleRepository;
+	let errorHandlingService: ErrorHandlingService;
+
+	beforeEach(() => {
+		// Create test mocks
+		mockSupabase = createMockSupabaseClient({
+			cw_rules: mockRules,
+			cw_rule_criteria: mockCriteria
+		});
+
+		errorHandlingService = new ErrorHandlingService();
+		vi.spyOn(errorHandlingService, 'logError');
+
+		ruleRepository = new RuleRepository(mockSupabase, errorHandlingService);
+		ruleService = new RuleService(ruleRepository);
+	});
+
+	describe('getRuleById', () => {
+		it('should return a rule by its ID', async () => {
+			vi.spyOn(ruleRepository, 'findById').mockResolvedValue(mockRules[0]);
+
+			const rule = await ruleService.getRuleById(1);
+			expect(rule).not.toBeNull();
+			expect(rule?.id).toBe(1);
+			expect(rule?.name).toBe('High Temperature Alert');
+		});
+
+		it('should return null for non-existent rule ID', async () => {
+			vi.spyOn(ruleRepository, 'findById').mockResolvedValue(null);
+
+			const rule = await ruleService.getRuleById(999);
+			expect(rule).toBeNull();
+		});
+	});
+
+	describe('getRuleWithCriteria', () => {
+		it('should return a rule with its associated criteria', async () => {
+			const mockRuleWithCriteria: RuleWithCriteria = {
+				...mockRules[0],
+				criteria: [mockCriteria[0]]
+			};
+
+			vi.spyOn(ruleRepository, 'findRuleWithCriteria').mockResolvedValue(mockRuleWithCriteria);
+
+			const rule = await ruleService.getRuleWithCriteria('rule-group-1');
+			expect(rule).not.toBeNull();
+			expect(rule?.name).toBe('High Temperature Alert');
+			expect(rule?.criteria).toHaveLength(1);
+			expect(rule?.criteria[0].sensor_type).toBe('temperature');
+		});
+	});
+
+	describe('getRulesByDevice', () => {
+		it('should return rules for a specific device', async () => {
+			vi.spyOn(ruleRepository, 'findByDevice').mockResolvedValue(mockRules);
+
+			const rules = await ruleService.getRulesByDevice('device-001');
+			expect(rules).toHaveLength(2);
+			expect(rules[0].dev_eui).toBe('device-001');
+		});
+	});
+
+	describe('getRulesByProfile', () => {
+		it('should return rules for a specific profile', async () => {
+			vi.spyOn(ruleRepository, 'findByProfile').mockResolvedValue(mockRules);
+
+			const rules = await ruleService.getRulesByProfile('profile-123');
+			expect(rules).toHaveLength(2);
+			expect(rules[0].profile_id).toBe('profile-123');
+		});
+	});
+
+	describe('getRuleCriteriaByGroup', () => {
+		it('should return criteria for a specific rule group', async () => {
+			vi.spyOn(ruleRepository, 'findCriteriaByGroup').mockResolvedValue([mockCriteria[0]]);
+
+			const criteria = await ruleService.getRuleCriteriaByGroup('rule-group-1');
+			expect(criteria).toHaveLength(1);
+			expect(criteria[0].ruleGroupId).toBe('rule-group-1');
+		});
+	});
+
+	describe('createRule', () => {
+		it('should create a new rule', async () => {
+			const newRule = {
+				ruleGroupId: 'rule-group-3',
+				name: 'New Test Rule',
+				description: 'Test rule description',
+				dev_eui: 'device-002',
+				profile_id: 'profile-123',
+				is_active: true
+			};
+
+			vi.spyOn(ruleRepository, 'create').mockResolvedValue({
+				id: 3,
+				...newRule,
+				severity: null,
+				notifier_type: null,
+				message: null,
+				created_at: '2025-05-02T12:00:00Z'
+			} as Rule);
+
+			const createdRule = await ruleService.createRule(newRule);
+			expect(createdRule.id).toBe(3);
+			expect(createdRule.name).toBe('New Test Rule');
+			expect(ruleRepository.create).toHaveBeenCalledWith(newRule);
+		});
+	});
+
+	describe('createRuleCriteria', () => {
+		it('should create a new rule criteria', async () => {
+			const newCriteria = {
+				ruleGroupId: 'rule-group-1',
+				sensor_type: 'humidity',
+				operator: '>',
+				value: 80
+			};
+
+			vi.spyOn(ruleRepository, 'createCriteria').mockResolvedValue({
+				id: 3,
+				...newCriteria,
+				unit: '%',
+				created_at: '2025-05-02T12:00:00Z'
+			} as RuleCriteria);
+
+			const createdCriteria = await ruleService.createRuleCriteria(newCriteria);
+			expect(createdCriteria.id).toBe(3);
+			expect(createdCriteria.sensor_type).toBe('humidity');
+			expect(ruleRepository.createCriteria).toHaveBeenCalledWith(newCriteria);
+		});
+	});
+
+	describe('createRuleWithCriteria', () => {
+		it('should create a rule with associated criteria', async () => {
+			const newRule = {
+				ruleGroupId: 'rule-group-4',
+				name: 'Combined Rule',
+				description: 'Test combined rule',
+				dev_eui: 'device-003',
+				profile_id: 'profile-456',
+				is_active: true
+			};
+
+			const newCriteria = [
+				{
+					sensor_type: 'temperature',
+					operator: '>',
+					value: 25,
+					unit: 'C'
+				},
+				{
+					sensor_type: 'humidity',
+					operator: '<',
+					value: 40,
+					unit: '%'
+				}
+			];
+
+			// Mock the rule creation
+			vi.spyOn(ruleService, 'createRule').mockResolvedValue({
+				id: 4,
+				...newRule,
+				severity: null,
+				notifier_type: null,
+				message: null,
+				created_at: '2025-05-02T12:00:00Z'
+			} as Rule);
+
+			// Mock the criteria creation
+			vi.spyOn(ruleService, 'createRuleCriteria')
+				.mockResolvedValueOnce({
+					id: 5,
+					ruleGroupId: newRule.ruleGroupId,
+					...newCriteria[0],
+					created_at: '2025-05-02T12:00:00Z'
+				} as RuleCriteria)
+				.mockResolvedValueOnce({
+					id: 6,
+					ruleGroupId: newRule.ruleGroupId,
+					...newCriteria[1],
+					created_at: '2025-05-02T12:00:00Z'
+				} as RuleCriteria);
+
+			const result = await ruleService.createRuleWithCriteria(newRule, newCriteria);
+
+			expect(result.id).toBe(4);
+			expect(result.name).toBe('Combined Rule');
+			expect(result.criteria).toHaveLength(2);
+			expect(result.criteria[0].sensor_type).toBe('temperature');
+			expect(result.criteria[1].sensor_type).toBe('humidity');
+
+			expect(ruleService.createRule).toHaveBeenCalledWith(newRule);
+			expect(ruleService.createRuleCriteria).toHaveBeenCalledTimes(2);
+		});
+	});
+
+	describe('updateRule', () => {
+		it('should update an existing rule', async () => {
+			const updateData = {
+				name: 'Updated Rule Name',
+				is_active: false
+			};
+
+			vi.spyOn(ruleRepository, 'update').mockResolvedValue({
+				...mockRules[0],
+				...updateData
+			});
+
+			const updatedRule = await ruleService.updateRule(1, updateData);
+			expect(updatedRule?.name).toBe('Updated Rule Name');
+			expect(updatedRule?.is_active).toBe(false);
+			expect(ruleRepository.update).toHaveBeenCalledWith(1, updateData);
+		});
+	});
+
+	describe('deleteRule', () => {
+		it('should delete a rule and its criteria', async () => {
+			vi.spyOn(ruleRepository, 'findById').mockResolvedValue(mockRules[0]);
+			vi.spyOn(ruleRepository, 'deleteCriteriaByGroup').mockResolvedValue(true);
+			vi.spyOn(ruleRepository, 'delete').mockResolvedValue(true);
+
+			const result = await ruleService.deleteRule(1);
+
+			expect(result).toBe(true);
+			expect(ruleRepository.deleteCriteriaByGroup).toHaveBeenCalledWith('rule-group-1');
+			expect(ruleRepository.delete).toHaveBeenCalledWith(1);
+		});
+
+		it('should return true when deleting non-existent rule', async () => {
+			vi.spyOn(ruleRepository, 'findById').mockResolvedValue(null);
+			vi.spyOn(ruleRepository, 'deleteCriteriaByGroup').mockResolvedValue(true);
+			vi.spyOn(ruleRepository, 'delete').mockResolvedValue(true);
+
+			const result = await ruleService.deleteRule(999);
+			expect(result).toBe(true);
+			expect(ruleRepository.deleteCriteriaByGroup).not.toHaveBeenCalled();
+			expect(ruleRepository.delete).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('deleteRuleCriteria', () => {
+		it('should delete a rule criteria', async () => {
+			vi.spyOn(ruleRepository, 'deleteCriteria').mockResolvedValue(true);
+
+			const result = await ruleService.deleteRuleCriteria(1);
+			expect(result).toBe(true);
+			expect(ruleRepository.deleteCriteria).toHaveBeenCalledWith(1);
+		});
+	});
+});
diff --git a/src/lib/utilities/ConvertSensorDataObject.ts b/src/lib/utilities/ConvertSensorDataObject.ts
index c21d6133..f1bafc05 100644
--- a/src/lib/utilities/ConvertSensorDataObject.ts
+++ b/src/lib/utilities/ConvertSensorDataObject.ts
@@ -1,37 +1,87 @@
-export function convertObject(input: Object | undefined, keepHidden: boolean = false) {
-  if (!input) {
-    return {}; // Return an empty object if input is undefined or null
-  }
-
-  const keysToKeep = [
-    'temperature', 'temperatureC', 'humidity', 'dewPointC', 'rainfall', 'pressure',
-    'wind_speed', 'wind_direction', 'lux', 'uv', 'co2', 'CO2', 'co2_level', 'soil_N', 'soil_P',
-    'soil_K', 'soil_PH', 'ec', 'soil_EC', 'soil_moisture', 'soil_temperatureC', 'temperature_c', 'created_at',
-    'battery_level', 'people_count', 'car_count', 'bicycle_count', 'motorcycle_count',
-    'soil_temperature', 'soil_moisture', 'moisture', 'soil_temperatureC', 'soil_humidity', 'soil_ec',
-    'soil_ph', 'ph', 'soil_nitrogen', 'soil_phosphorus', 'soil_potassium', 'soil_salinity',
-    'soil_n', 'soil_p', 'soil_k', 'temperature_c', 'water_level', 'water_temperature', 'water_ph',
-  ];
-
-  if (keepHidden) {
-    keysToKeep.push('fireAlarm');
-  }
-
-  const output = {};
-
-  keysToKeep.forEach((key) => {
-    if (key in input) {
-      output[key] = input[key];
-    }
-  });
-
-  if ('primaryData' in input && input.primaryData in output && 'primary_data_notation' in input) {
-    output[input.primaryData] = `${output[input.primaryData]} ${input.primary_data_notation}`;
-  }
-
-  if ('secondaryData' in input && input.secondaryData in output && 'secondary_data_notation' in input) {
-    output[input.secondaryData] = `${output[input.secondaryData]} ${input.secondary_data_notation}`;
-  }
-
-  return output;
+type SensorInput = Record<string, unknown> & {
+	primaryData?: string;
+	secondaryData?: string;
+	primary_data_notation?: string;
+	secondary_data_notation?: string;
+};
+
+export function convertObject(
+	input: SensorInput | null | undefined,
+	keepHidden: boolean = false
+): Record<string, unknown> {
+	if (!input) {
+		return {};
+	}
+
+	const keysToKeep: string[] = [
+		'temperature',
+		'temperatureC',
+		'humidity',
+		'dewPointC',
+		'rainfall',
+		'pressure',
+		'wind_speed',
+		'wind_direction',
+		'lux',
+		'uv',
+		'co2',
+		'CO2',
+		'co2_level',
+		'soil_N',
+		'soil_P',
+		'soil_K',
+		'soil_PH',
+		'ec',
+		'soil_EC',
+		'soil_moisture',
+		'soil_temperatureC',
+		'temperature_c',
+		'created_at',
+		'battery_level',
+		'people_count',
+		'car_count',
+		'bicycle_count',
+		'motorcycle_count',
+		'soil_temperature',
+		'soil_moisture',
+		'moisture',
+		'soil_humidity',
+		'soil_ec',
+		'soil_ph',
+		'ph',
+		'soil_nitrogen',
+		'soil_phosphorus',
+		'soil_potassium',
+		'soil_salinity',
+		'soil_n',
+		'soil_p',
+		'soil_k',
+		'water_level',
+		'water_temperature',
+		'water_ph'
+	];
+
+	if (keepHidden) {
+		keysToKeep.push('fireAlarm');
+	}
+
+	const output: Record<string, unknown> = {};
+
+	for (const key of keysToKeep) {
+		if (Object.prototype.hasOwnProperty.call(input, key)) {
+			output[key] = input[key];
+		}
+	}
+
+	if (input.primaryData && input.primaryData in output && input.primary_data_notation) {
+		const targetKey = input.primaryData;
+		output[targetKey] = `${output[targetKey]} ${input.primary_data_notation}`.trim();
+	}
+
+	if (input.secondaryData && input.secondaryData in output && input.secondary_data_notation) {
+		const targetKey = input.secondaryData;
+		output[targetKey] = `${output[targetKey]} ${input.secondary_data_notation}`.trim();
+	}
+
+	return output;
 }
diff --git a/src/lib/utilities/dashboard.ts b/src/lib/utilities/dashboard.ts
index 7518b8a2..9e6e75f2 100644
--- a/src/lib/utilities/dashboard.ts
+++ b/src/lib/utilities/dashboard.ts
@@ -1,11 +1,28 @@
+import type { Location } from '../models/Location';
+
 /**
  * Dashboard utility functions
- * 
+ *
  * These functions are used across the dashboard components to handle
  * common operations like checking device status, formatting data, etc.
  */
 
-// Type imports are handled by the component files to avoid circular dependencies
+type DeviceWithSensorData = {
+	dev_eui: string;
+	upload_interval?: number | null;
+	type?: number | null;
+	name?: string | null;
+	latestData?: Record<string, unknown> | null;
+	deviceType?: {
+		default_upload_interval?: number | null;
+		name?: string | null;
+		isActive?: boolean;
+	};
+};
+
+type LocationWithCount = {
+	cw_devices?: DeviceWithSensorData[] | null;
+};
 
 /**
  * Checks if a device is currently active based on its last update time and upload interval
@@ -14,34 +31,33 @@
  * @returns boolean indicating if the device is active
  */
 export function isDeviceActive(
-  device: DeviceWithSensorData,
-  deviceActiveStatus: Record<string, boolean>
+	device: DeviceWithSensorData,
+	deviceActiveStatus: Record<string, boolean>
 ): boolean {
-  if (!device) return false;
-
-  // Get the device ID
-  const devEui = device.dev_eui as string;
-
-  // Special handling for devices with negative upload intervals (always active)
-  const uploadInterval =
-    device.upload_interval || device.deviceType?.default_upload_interval || 10;
-  if (uploadInterval <= 0) {
-    return true;
-  }
-
-  // Special handling for soil sensors
-  if (isSoilSensor(device)) {
-    if (device.deviceType?.isActive !== undefined) {
-      return Boolean(device.deviceType.isActive);
-    }
-
-    // If the soil sensor has moisture data, consider it active
-    if (device.latestData && 'moisture' in device.latestData) {
-      return true;
-    }
-  }
-
-  return getDeviceActiveStatus(devEui, deviceActiveStatus);
+	if (!device) return false;
+
+	// Get the device ID
+	const devEui = device.dev_eui as string;
+
+	// Special handling for devices with negative upload intervals (always active)
+	const uploadInterval = device.upload_interval || device.deviceType?.default_upload_interval || 10;
+	if (uploadInterval <= 0) {
+		return true;
+	}
+
+	// Special handling for soil sensors
+	if (isSoilSensor(device)) {
+		if (device.deviceType?.isActive !== undefined) {
+			return Boolean(device.deviceType.isActive);
+		}
+
+		// If the soil sensor has moisture data, consider it active
+		if (device.latestData && 'moisture' in device.latestData) {
+			return true;
+		}
+	}
+
+	return getDeviceActiveStatus(devEui, deviceActiveStatus);
 }
 
 /**
@@ -51,10 +67,10 @@ export function isDeviceActive(
  * @returns boolean indicating if the device is active
  */
 export function getDeviceActiveStatus(
-  deviceId: string,
-  deviceActiveStatus: Record<string, boolean>
+	deviceId: string,
+	deviceActiveStatus: Record<string, boolean>
 ): boolean {
-  return Boolean(deviceActiveStatus[deviceId]);
+	return Boolean(deviceActiveStatus[deviceId]);
 }
 
 /**
@@ -63,24 +79,23 @@ export function getDeviceActiveStatus(
  * @returns boolean indicating if the device is a soil sensor
  */
 export function isSoilSensor(device: DeviceWithSensorData): boolean {
-  // Check device name for soil-related terms
-  const deviceName = device.name?.toLowerCase() || '';
-  const deviceTypeName = device.deviceType?.name?.toLowerCase() || '';
-
-  // Check device type (type 17 is soil sensor in your system)
-  if (device.type === 17) {
-    return true;
-  }
-
-  // Check if the device name or type contains soil-related terms
-  return (
-    deviceName.includes('soil') ||
-    deviceName.includes('moisture') ||
-    deviceTypeName.includes('soil') ||
-    deviceTypeName.includes('moisture') ||
-    // Check if the device has soil-specific data points
-    (device.latestData && 'moisture' in device.latestData)
-  );
+	// Check device name for soil-related terms
+	const deviceName = device.name?.toLowerCase() || '';
+	const deviceTypeName = device.deviceType?.name?.toLowerCase() || '';
+
+	// Check device type (type 17 is soil sensor in your system)
+	if (device.type === 17) {
+		return true;
+	}
+
+	// Check if the device name or type contains soil-related terms
+	return (
+		deviceName.includes('soil') ||
+		deviceName.includes('moisture') ||
+		deviceTypeName.includes('soil') ||
+		deviceTypeName.includes('moisture') ||
+		Boolean(device.latestData && 'moisture' in device.latestData)
+	);
 }
 
 /**
@@ -90,28 +105,26 @@ export function isSoilSensor(device: DeviceWithSensorData): boolean {
  * @returns Object with active devices array and status flags
  */
 export function getLocationActiveStatus(
-  location: LocationWithCount,
-  deviceActiveStatus: Record<string, boolean>
-) {
-  if (!location || !location.cw_devices || location.cw_devices.length === 0) {
-    return { activeDevices: [], allActive: false, allInactive: false };
-  }
-
-  const locationDevices = location.cw_devices;
-  // Use isDeviceActive instead of getDeviceActiveStatus for consistency
-  const activeDevices = locationDevices.filter((device) => 
-    isDeviceActive(device, deviceActiveStatus)
-  );
-  
-  const allActive =
-    locationDevices.length > 0 && 
-    locationDevices.every((device) => isDeviceActive(device, deviceActiveStatus));
-  
-  const allInactive =
-    locationDevices.length > 0 && 
-    locationDevices.every((device) => !isDeviceActive(device, deviceActiveStatus));
-
-  return { activeDevices, allActive, allInactive };
+	location: LocationWithCount,
+	deviceActiveStatus: Record<string, boolean>
+): { activeDevices: DeviceWithSensorData[]; allActive: boolean; allInactive: boolean } {
+	const locationDevices = location?.cw_devices ?? [];
+
+	if (locationDevices.length === 0) {
+		return { activeDevices: [], allActive: false, allInactive: false };
+	}
+
+	const activeDevices = locationDevices.filter((device) =>
+		isDeviceActive(device, deviceActiveStatus)
+	);
+
+	const allActive = locationDevices.every((device) => isDeviceActive(device, deviceActiveStatus));
+
+	const allInactive = locationDevices.every(
+		(device) => !isDeviceActive(device, deviceActiveStatus)
+	);
+
+	return { activeDevices, allActive, allInactive };
 }
 
 /**
@@ -120,16 +133,16 @@ export function getLocationActiveStatus(
  * @returns CSS class string
  */
 export function getContainerClass(viewType: string): string {
-  switch (viewType) {
-    case 'grid':
-      return 'grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5';
-    case 'mozaic':
-      return 'columns-[20rem] gap-4 space-y-4';
-    case 'list':
-      return 'flex flex-col gap-4';
-    default:
-      return 'grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5';
-  }
+	switch (viewType) {
+		case 'grid':
+			return 'grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5';
+		case 'mozaic':
+			return 'columns-[20rem] gap-4 space-y-4';
+		case 'list':
+			return 'flex flex-col gap-4';
+		default:
+			return 'grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5';
+	}
 }
 
 /**
@@ -139,12 +152,12 @@ export function getContainerClass(viewType: string): string {
  * @param handleLocationClick - Function to handle location selection
  */
 export function handleKeyDown(
-  e: KeyboardEvent, 
-  location: Location, 
-  handleLocationClick: (location: Location) => void
+	e: KeyboardEvent,
+	location: Location,
+	handleLocationClick: (location: Location) => void
 ): void {
-  if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault();
-    handleLocationClick(location);
-  }
+	if (e.key === 'Enter' || e.key === ' ') {
+		e.preventDefault();
+		handleLocationClick(location);
+	}
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 76412d9b..83c74627 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -132,9 +132,9 @@
 		{/if}
 		<main
 			class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark min-h-screen transition-all duration-300"
-			style="margin-left: {showSidebar ? (sidebarStore.isOpen ? '256px' : '64px') : '0'}; 
-				   padding-top: {showSidebar ? '119px' : '0'};
-				   --sidebar-width: {showSidebar ? (sidebarStore.isOpen ? '256px' : '64px') : '0'};"
+			style="margin-left: {showSidebar ? (sidebarStore.isOpen ? '64px' : '64px') : '0'}; 
+				   padding-top: {showSidebar ? '64px' : '0'};
+				   --sidebar-width: {showSidebar ? (sidebarStore.isOpen ? '64px' : '64px') : '0'};"
 			data-auth-page={page.url.pathname.startsWith('/auth') ? 'true' : undefined}
 		>
 			{@render children?.()}
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 7fad90b2..bd99c575 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,17 +1,14 @@
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals: { supabase } }) => {
-	// Check if there are any devices in the database
-	const { data: devices, error } = await supabase.from('CW_DEVICES').select('id').limit(1);
+	const { count, error } = await supabase
+		.from('cw_devices')
+		.select('dev_eui', { count: 'exact', head: true });
 
 	if (error) {
 		console.error('Error checking devices:', error);
-		return {
-			hasDevices: false
-		};
+		return { hasDevices: false };
 	}
 
-	return {
-		hasDevices: devices && devices.length > 0
-	};
+	return { hasDevices: Boolean(count && count > 0) };
 };
diff --git a/src/routes/api/devices/[devEui]/pdf/+server.ts b/src/routes/api/devices/[devEui]/pdf/+server.ts
index 35665bba..afe19ee4 100644
--- a/src/routes/api/devices/[devEui]/pdf/+server.ts
+++ b/src/routes/api/devices/[devEui]/pdf/+server.ts
@@ -3,7 +3,11 @@ import { i18n } from '$lib/i18n/index.svelte';
 import type { DeviceDataRecord } from '$lib/models/DeviceDataRecord';
 import type { ReportAlertPoint } from '$lib/models/Report';
 import type { TableCell, TableRow } from '$lib/pdf';
-import { createPDFDataTable } from '$lib/pdf/pdfDataTable';
+import {
+	createPDFDataTable,
+	sampleDataRowsForTable,
+	sampleDataRowsByInterval
+} from '$lib/pdf/pdfDataTable';
 import { addFooterPageNumber } from '$lib/pdf/pdfFooterPageNumber';
 import { createPDFLineChartImage } from '$lib/pdf/pdfLineChartImage';
 import { checkMatch, getValue } from '$lib/pdf/utils';
@@ -256,7 +260,10 @@ export const GET: RequestHandler = async ({ params, url, locals: { supabase } })
 		const contentWidth = doc.page.width - marginLeft - marginRight;
 
 		// Title
-		const isWeekly = Math.abs(userEnd.diff(userStart, 'days').days - 7) < 0.1;
+		const totalRangeDays = Math.abs(userEnd.diff(userStart, 'days').days);
+		const isWeekly = Math.abs(totalRangeDays - 7) < 0.1;
+		const chartIntervalMinutes = totalRangeDays > 7 ? 60 : totalRangeDays > 3 ? 30 : 0;
+		const tableDisplayIntervalMinutes = 30;
 		// const titleText = isWeekly ? $_('device_report_weekly') : $_('device_report_monthly');
 		// doc.fontSize(16).text(`${titleText} ${$_('device_report')}`);
 		doc.fontSize(16).text(`${$_('device_report')}`);
@@ -386,6 +393,8 @@ export const GET: RequestHandler = async ({ params, url, locals: { supabase } })
 			cells: [...tableKeyColumns, { label: $_('comment'), width: 40 }]
 		};
 		const dataRowsTable = getDataRows(tableKeys);
+		const sampledTableRows = sampleDataRowsByInterval(dataRowsTable, tableDisplayIntervalMinutes);
+		const tableConfig = { timezone: timezoneParam, takeEvery: 1 };
 
 		// LEFT summary
 		const primaryKey = tableKeys[0] ?? validKeys[0] ?? 'temperature_c';
@@ -440,13 +449,15 @@ export const GET: RequestHandler = async ({ params, url, locals: { supabase } })
 			} else {
 				doc.moveDown(2);
 			}
+			const chartRows = getDataRows([key]);
+			const sampledChartRows = sampleDataRowsByInterval(chartRows, chartIntervalMinutes);
 			createPDFLineChartImage({
 				doc,
 				dataHeader: {
 					header: { label: $_('datetime'), value: '', width: 60 },
 					cells: [{ label: $_(key), value: '', width: 40, color: getColorNameByKey(key) }]
 				},
-				dataRows: getDataRows([key]),
+				dataRows: sampledChartRows,
 				alertPoints,
 				config: { title: $_(key), width: chartWidth, height: chartHeight, timezone: timezoneParam }
 			});
@@ -460,8 +471,8 @@ export const GET: RequestHandler = async ({ params, url, locals: { supabase } })
 		createPDFDataTable({
 			doc,
 			dataHeader: dataHeaderTable,
-			dataRows: dataRowsTable,
-			config: { timezone: timezoneParam }
+			dataRows: sampledTableRows,
+			config: tableConfig
 		});
 
 		// Footer
diff --git a/src/routes/api/devices/[devEui]/pdf/drawRightAlertPanel.ts b/src/routes/api/devices/[devEui]/pdf/drawRightAlertPanel.ts
index b426ddc9..6992b02e 100644
--- a/src/routes/api/devices/[devEui]/pdf/drawRightAlertPanel.ts
+++ b/src/routes/api/devices/[devEui]/pdf/drawRightAlertPanel.ts
@@ -1,9 +1,10 @@
 // src/lib/pdf/drawRightAlertPanel.ts
-import type PDFDocument from 'pdfkit';
 import type { TableRow } from '$lib/pdf';
 import type { ReportAlertPoint } from '$lib/models/Report';
 import { checkMatch } from '$lib/pdf/utils';
 
+type PDFDocument = InstanceType<typeof import('pdfkit')>;
+
 export function drawRightAlertPanel(opts: {
 	doc: PDFDocument;
 	x: number; // left of the panel (e.g., 400)
diff --git a/src/routes/api/devices/[devEui]/pdf/drawSummaryPanel.ts b/src/routes/api/devices/[devEui]/pdf/drawSummaryPanel.ts
index 87663124..da60a9b5 100644
--- a/src/routes/api/devices/[devEui]/pdf/drawSummaryPanel.ts
+++ b/src/routes/api/devices/[devEui]/pdf/drawSummaryPanel.ts
@@ -1,7 +1,8 @@
 // src/lib/pdf/drawSummaryPanel.ts
-import type PDFDocument from 'pdfkit';
 import type { TableRow } from '$lib/pdf';
 
+type PDFDocument = InstanceType<typeof import('pdfkit')>;
+
 export type ClassificationBand = { label: string; min: number; max: number };
 
 export type DrawSummaryPanelOpts = {
diff --git a/src/routes/api/devices/[devEui]/pdf/server.test.ts b/src/routes/api/devices/[devEui]/pdf/server.test.ts
index 0c9d3ec6..db7bfcb7 100644
--- a/src/routes/api/devices/[devEui]/pdf/server.test.ts
+++ b/src/routes/api/devices/[devEui]/pdf/server.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { GET } from './+server';
 import { jest } from '@jest/globals';
 import { createPDFDataTable } from '$lib/pdf/pdfDataTable';
@@ -19,13 +20,11 @@ describe('GET /api/devices/[devEui]/pdf', () => {
 			},
 			from: jest.fn().mockReturnValue({
 				select: jest.fn().mockReturnValue({
-					eq: jest
-						.fn()
-						.mockReturnValue({
-							single: jest
-								.fn()
-								.mockResolvedValue({ data: { full_name: 'Test User', employer: 'Test Company' } })
-						})
+					eq: jest.fn().mockReturnValue({
+						single: jest
+							.fn()
+							.mockResolvedValue({ data: { full_name: 'Test User', employer: 'Test Company' } })
+					})
 				})
 			})
 		};
diff --git a/src/routes/api/locations/[locationId]/devices/+server.ts b/src/routes/api/locations/[locationId]/devices/+server.ts
index c4a53fe2..c79f1f37 100644
--- a/src/routes/api/locations/[locationId]/devices/+server.ts
+++ b/src/routes/api/locations/[locationId]/devices/+server.ts
@@ -19,11 +19,9 @@ export const GET: RequestHandler = async ({ params, locals }) => {
 
 		// Create repositories with per-request Supabase client
 		const deviceRepo = new DeviceRepository(locals.supabase, errorHandler);
-		const dataService = new DeviceDataService(locals.supabase, errorHandler);
-
 		// Create services with repositories
 		const deviceService = new DeviceService(deviceRepo);
-		const deviceDataService = new DeviceDataService(locals.supabase);
+		const deviceDataService = new DeviceDataService(locals.supabase, errorHandler);
 
 		// Get devices for this location - now includes device type info directly
 		const devices = await deviceService.getDevicesByLocation(locationId);
@@ -40,25 +38,7 @@ export const GET: RequestHandler = async ({ params, locals }) => {
 					let latestData = null;
 
 					// Dynamically get latest data based on device type's data_table_v2 value
-					if (deviceType && deviceType.data_table_v2) {
-						try {
-							latestData = await deviceDataService.getLatestDeviceData(device.dev_eui, deviceType);
-						} catch (dataError) {
-							console.error(`Error fetching dynamic data for device ${device.dev_eui}:`, dataError);
-							// Fall back to specific services if dynamic approach fails
-							latestData = null;
-						}
-					}
-
-					// Fallback to specific services if dynamic approach fails or returns no data
-					// This maintains backward compatibility
-					if (!latestData) {
-						// Get latest air data for this device, if available
-						const latestAirData = await deviceDataService.getLatestDeviceData(device.dev_eui);
-
-						// Set latestData to whichever data is available
-						latestData = latestAirData || null;
-					}
+					latestData = await deviceDataService.getLatestDeviceData(device.dev_eui);
 
 					return {
 						...device,
diff --git a/src/routes/app/account-settings/general/+page.server.ts b/src/routes/app/account-settings/general/+page.server.ts
index 8ff48bf5..cfc69506 100644
--- a/src/routes/app/account-settings/general/+page.server.ts
+++ b/src/routes/app/account-settings/general/+page.server.ts
@@ -15,19 +15,35 @@ export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession
 export const actions: Actions = {
 	update: async ({ request, locals: { supabase, safeGetSession } }) => {
 		const formData = await request.formData();
-		const fullName = formData.get('fullName') as string;
-		const username = formData.get('username') as string;
-		const website = formData.get('website') as string;
-		const avatarUrl = formData.get('avatarUrl') as string;
+		const fullName = formData.get('fullName');
+		const username = formData.get('username');
+		const website = formData.get('website');
+		const avatarUrl = formData.get('avatarUrl');
 		const { session } = await safeGetSession();
-		const { error } = await supabase.from('profiles').upsert({
-			id: session?.user.id,
+
+		if (!session?.user) {
+			return fail(401, { error: 'Authentication required' });
+		}
+
+		if (
+			typeof fullName !== 'string' ||
+			typeof username !== 'string' ||
+			typeof website !== 'string' ||
+			typeof avatarUrl !== 'string'
+		) {
+			return fail(400, { error: 'Invalid form submission' });
+		}
+
+		const payload = {
+			id: session.user.id,
 			full_name: fullName,
 			username,
 			website,
 			avatar_url: avatarUrl,
-			updated_at: new Date()
-		});
+			updated_at: new Date().toISOString()
+		};
+
+		const { error } = await supabase.from('profiles').upsert([payload]);
 		if (error) {
 			return fail(500, {
 				fullName,
@@ -48,7 +64,7 @@ export const actions: Actions = {
 		if (!session) redirect(303, '/');
 		await supabase
 			.from('profiles')
-			.update({ line_id: null, updated_at: new Date() })
+			.update({ line_id: null, updated_at: new Date().toISOString() })
 			.eq('id', session.user.id);
 		return { lineDisconnected: true };
 	},
diff --git a/src/routes/app/account-settings/general/line/callback/+server.ts b/src/routes/app/account-settings/general/line/callback/+server.ts
index bb9e1503..fd2e3a94 100644
--- a/src/routes/app/account-settings/general/line/callback/+server.ts
+++ b/src/routes/app/account-settings/general/line/callback/+server.ts
@@ -85,7 +85,7 @@ export const GET: RequestHandler = async ({
 
 	const { error: upErr } = await supabase
 		.from('profiles')
-		.update({ line_id: lineUserId, updated_at: new Date() })
+		.update({ line_id: lineUserId, updated_at: new Date().toISOString() })
 		.eq('id', session.user.id);
 	if (upErr)
 		return redirect(
diff --git a/src/routes/app/account-settings/payment/add-subscription/+page.server.ts b/src/routes/app/account-settings/payment/add-subscription/+page.server.ts
index 200c7d72..d096d644 100644
--- a/src/routes/app/account-settings/payment/add-subscription/+page.server.ts
+++ b/src/routes/app/account-settings/payment/add-subscription/+page.server.ts
@@ -7,7 +7,7 @@ import { PUBLIC_DOMAIN } from '$env/static/public';
 
 // This is your test secret API key.
 const stripe = new Stripe(PRIVATE_STRIPE_SECRET_KEY, {
-	apiVersion: '2025-06-30.basil', // Use the latest API version or a specific one
+	apiVersion: '2025-08-27.basil', // Use the latest API version or a specific one
 	typescript: true
 });
 
diff --git a/src/routes/app/all-devices/+page.svelte b/src/routes/app/all-devices/+page.svelte
index 66c0a229..20504d98 100644
--- a/src/routes/app/all-devices/+page.svelte
+++ b/src/routes/app/all-devices/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Icon from '$lib/components/ui/base/Icon.svelte';
-	import { mdiDevices, mdiMapMarker, mdiIdentifier, mdiAlert, mdiMagnify } from '@mdi/js';
+	import { mdiDevices, mdiMapMarker, mdiIdentifier, mdiAlert, mdiMagnify } from '$lib/icons/mdi';
 
 	let { data } = $props();
 
diff --git a/src/routes/app/all-notifications/+page.server.ts b/src/routes/app/all-notifications/+page.server.ts
new file mode 100644
index 00000000..62c18393
--- /dev/null
+++ b/src/routes/app/all-notifications/+page.server.ts
@@ -0,0 +1,29 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from '../../$types';
+import { SessionService } from '$lib/services/SessionService';
+import { ErrorHandlingService } from '$lib/errors/ErrorHandlingService';
+import { RuleRepository } from '$lib/repositories/RuleRepository';
+import { RuleService } from '$lib/services/RuleService';
+import { DeviceRepository } from '$lib/repositories/DeviceRepository';
+
+export const load: PageServerLoad = async ({ locals: { supabase } }) => {
+	const sessionService = new SessionService(supabase);
+	const { session, user } = await sessionService.getSafeSession();
+
+	if (!session || !user) {
+		throw redirect(302, '/auth/login');
+	}
+
+	const ruleRepository = new RuleRepository(supabase, new ErrorHandlingService());
+	const deviceRepository = new DeviceRepository(supabase, new ErrorHandlingService());
+	const ruleService = new RuleService(ruleRepository);
+
+	const notifications = await ruleService.getRulesByProfile(user.id);
+	for (let notification of notifications) {
+		notification['cw_device'] = await deviceRepository.findById(notification.dev_eui);
+	}
+
+	return {
+		notifications
+	};
+};
diff --git a/src/routes/app/all-notifications/+page.svelte b/src/routes/app/all-notifications/+page.svelte
index 6d356d5f..f2bd45e7 100644
--- a/src/routes/app/all-notifications/+page.svelte
+++ b/src/routes/app/all-notifications/+page.svelte
@@ -1,33 +1,750 @@
 <script lang="ts">
-	import { mdiMagnify } from '@mdi/js';
-	import { onMount } from 'svelte';
+	import Icon from '$lib/components/ui/base/Icon.svelte';
+	import type { Rule } from '$lib/models/Rule';
+	import type { Device } from '$lib/models/Device';
+	import type { Database } from '../../../../database.types';
+	import {
+		mdiAlert,
+		mdiMagnify,
+		mdiSort,
+		mdiSortAscending,
+		mdiSortDescending
+	} from '$lib/icons/mdi';
 
+	let { data } = $props();
+	type RuleTriggered = Database['public']['Tables']['cw_rule_triggered']['Row'];
+	type NotificationRow = Rule & {
+		cw_rule_triggered?: RuleTriggered[];
+		cw_device?: Device | null;
+	};
+
+	const notifications = (data.notifications ?? []) as NotificationRow[];
 	let searchTerm = $state('');
+	let sortColumn = $state<
+		| 'name'
+		| 'dev_eui'
+		| 'send_using'
+		| 'action_recipient'
+		| 'trigger_count'
+		| 'last_triggered'
+		| 'is_triggered'
+	>('name');
+	let sortDirection = $state<'asc' | 'desc'>('asc');
+	let showHistoryModal = $state(false);
+	let selectedNotification = $state<NotificationRow | null>(null);
 
-	onMount(() => {
-		// Initialize search term or any other setup
+	const filteredNotifications = $derived(filterNotifications(notifications));
+	const tableNotifications = $derived(sortNotifications(filteredNotifications));
+	const summaryStats = $derived({
+		total: notifications.length,
+		active: notifications.filter((item) => item.is_triggered).length,
+		totalTriggers: notifications.reduce((sum, item) => sum + (item.trigger_count ?? 0), 0)
 	});
+	const historyEntries = $derived(
+		selectedNotification?.cw_rule_triggered
+			? [...selectedNotification.cw_rule_triggered].sort(
+					(a, b) => parseTimestamp(b.created_at) - parseTimestamp(a.created_at)
+				)
+			: []
+	);
+
+	const columns = [
+		{ key: 'name', label: 'Notification', width: 'w-72', align: 'left', sortable: true },
+		{ key: 'dev_eui', label: 'Device', width: 'w-48', align: 'left', sortable: true },
+		{ key: 'send_using', label: 'Channel', width: 'w-40', align: 'left', sortable: true },
+		{
+			key: 'action_recipient',
+			label: 'Recipients',
+			width: 'flex-1',
+			align: 'left',
+			sortable: true
+		},
+		{ key: 'trigger_count', label: 'Total Calls', width: 'w-32', align: 'right', sortable: true },
+		{
+			key: 'last_triggered',
+			label: 'Last Triggered',
+			width: 'w-48',
+			align: 'left',
+			sortable: true
+		},
+		{ key: 'is_triggered', label: 'Status', width: 'w-32', align: 'center', sortable: true },
+		{ key: 'history', label: 'History', width: 'w-32', align: 'center', sortable: false }
+	] as const;
+
+	function filterNotifications(list: NotificationRow[]): NotificationRow[] {
+		if (!searchTerm.trim()) return list;
+		const term = searchTerm.toLowerCase();
+		return list.filter((notification) => {
+			const fields = [
+				notification.name,
+				notification.dev_eui,
+				notification.action_recipient,
+				notification.send_using
+			]
+				.filter(Boolean)
+				.join(' ')
+				.toLowerCase();
+
+			return fields.includes(term);
+		});
+	}
+
+	function sortNotifications(list: NotificationRow[]): NotificationRow[] {
+		return [...list].sort((a, b) => {
+			const valueA = getSortValue(a, sortColumn);
+			const valueB = getSortValue(b, sortColumn);
+
+			if (valueA < valueB) {
+				return sortDirection === 'asc' ? -1 : 1;
+			}
+
+			if (valueA > valueB) {
+				return sortDirection === 'asc' ? 1 : -1;
+			}
+
+			return 0;
+		});
+	}
+
+	function getSortValue(notification: NotificationRow, key: (typeof columns)[number]['key']) {
+		switch (key) {
+			case 'trigger_count':
+				return notification.trigger_count ?? 0;
+			case 'last_triggered':
+				return notification.last_triggered ? new Date(notification.last_triggered).getTime() : 0;
+			case 'is_triggered':
+				return notification.is_triggered ? 1 : 0;
+			case 'history':
+				return notification.cw_rule_triggered?.length ?? 0;
+			default:
+				return (notification[key] ?? '').toString().toLowerCase();
+		}
+	}
+
+	function handleSort(key: (typeof columns)[number]['key']) {
+		if (sortColumn === key) {
+			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+		} else {
+			sortColumn = key;
+			sortDirection = 'asc';
+		}
+	}
+
+	function formatLastTriggered(timestamp: string | null) {
+		if (!timestamp) return 'Never triggered';
+		const date = new Date(timestamp);
+		return Number.isNaN(date.getTime()) ? 'Never triggered' : date.toLocaleString();
+	}
+
+	function formatRecipients(value?: string | null) {
+		if (!value) return 'No recipients';
+		const recipients = value
+			.split(',')
+			.map((recipient) => recipient.trim())
+			.filter(Boolean);
+
+		return recipients.length ? recipients.join(', ') : 'No recipients';
+	}
+
+	function formatChannel(notification: NotificationRow) {
+		if (notification.send_using) return notification.send_using;
+		if (notification.notifier_type != null) return `Notifier ${notification.notifier_type}`;
+		return 'Not specified';
+	}
+
+	const formatDeviceLabel = (notification: NotificationRow) =>
+		notification.dev_eui || 'All devices';
+
+	function parseTimestamp(value: string) {
+		const timestamp = new Date(value).getTime();
+		return Number.isNaN(timestamp) ? 0 : timestamp;
+	}
+
+	function formatHistoryTimestamp(timestamp: string) {
+		const date = new Date(timestamp);
+		return Number.isNaN(date.getTime()) ? 'Unknown time' : date.toLocaleString();
+	}
+
+	function openHistory(notification: NotificationRow) {
+		if (!notification.cw_rule_triggered?.length) return;
+		selectedNotification = notification;
+		showHistoryModal = true;
+	}
+
+	function closeHistory() {
+		showHistoryModal = false;
+		selectedNotification = null;
+	}
 </script>
 
 <div class="space-y-6 p-6">
 	<!-- Header -->
-	<div class="flex items-center justify-between">
+	<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
 		<div>
 			<h1 class="text-3xl font-bold text-gray-900 dark:text-white">All Notifications</h1>
 			<p class="mt-1 text-gray-600 dark:text-gray-400">
-				Search and manage all your notifications across all devices
+				Review every alert in a single professional table and monitor performance at a glance.
 			</p>
 		</div>
 		<div class="search-container">
 			<div class="relative">
+				<Icon
+					class="absolute top-1/2 left-3 -translate-y-1/2 transform text-gray-400"
+					path={mdiMagnify}
+					size="20"
+				/>
 				<input
 					type="text"
 					bind:value={searchTerm}
-					placeholder="Search devices..."
+					placeholder="Search notifications..."
 					class="search-input"
 				/>
 			</div>
 		</div>
 	</div>
-	<!-- Content -->
+
+	<!-- Summary statistics -->
+	<div class="stats-grid" aria-label="Notification statistics">
+		<div class="stat-card">
+			<p class="stat-label">Total notifications</p>
+			<p class="stat-value">{summaryStats.total}</p>
+		</div>
+		<div class="stat-card">
+			<p class="stat-label">Active right now</p>
+			<p class="stat-value">{summaryStats.active}</p>
+		</div>
+		<div class="stat-card">
+			<p class="stat-label">Total calls</p>
+			<p class="stat-value">{summaryStats.totalTriggers}</p>
+		</div>
+	</div>
+
+	<!-- Notification table -->
+	<div class="table-wrapper" aria-live="polite">
+		{#if tableNotifications.length}
+			<div class="table-shell">
+				<div class="table-head">
+					<div class="table-row--head table-row">
+						{#each columns as column (column.key)}
+							<div
+								class={`table-cell ${column.width} ${
+									column.align === 'center'
+										? 'justify-center'
+										: column.align === 'right'
+											? 'justify-end'
+											: 'justify-start'
+								}`}
+							>
+								{#if column.sortable}
+									<button type="button" onclick={() => handleSort(column.key)} class="sort-button">
+										<span>{column.label}</span>
+										<Icon
+											path={sortColumn === column.key
+												? sortDirection === 'asc'
+													? mdiSortAscending
+													: mdiSortDescending
+												: mdiSort}
+											class={`sort-icon ${sortColumn === column.key ? 'opacity-100' : 'opacity-60'}`}
+											size="18"
+										/>
+									</button>
+								{:else}
+									<span class="font-semibold">{column.label}</span>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				</div>
+
+				<div class="table-body">
+					{#each tableNotifications as notification (notification.id)}
+						<div class="table-row">
+							<div class="table-cell w-72">
+								<p class="cell-title">{notification.name || 'Untitled notification'}</p>
+							</div>
+							<div class="table-cell w-48">
+								<p class="cell-primary">
+									{#if notification.cw_device}
+										<a
+											href={`/app/dashboard/location/${notification.cw_device?.location_id ?? ''}/devices/${notification.dev_eui ?? ''}`}
+											class="underline hover:text-blue-600"
+										>
+											{formatDeviceLabel(notification)}
+										</a>
+									{:else}
+										{formatDeviceLabel(notification)}
+									{/if}
+								</p>
+							</div>
+							<div class="table-cell w-40">
+								<p class="cell-primary">{formatChannel(notification)}</p>
+							</div>
+							<div class="table-cell flex-1">
+								<p class="cell-primary">{formatRecipients(notification.action_recipient)}</p>
+							</div>
+							<div class="table-cell w-32 justify-end">
+								<p class="cell-stat">{notification.trigger_count ?? 0}</p>
+							</div>
+							<div class="table-cell w-48">
+								<p class="cell-primary">{formatLastTriggered(notification.last_triggered)}</p>
+							</div>
+							<div class="table-cell w-32 justify-center">
+								<span
+									class={`status-pill ${notification.is_triggered ? 'status-pill--active' : 'status-pill--idle'}`}
+								>
+									{notification.is_triggered ? 'Active' : 'Idle'}
+								</span>
+							</div>
+							<div class="table-cell w-32 justify-center">
+								<button
+									type="button"
+									class="history-button"
+									disabled={!notification.cw_rule_triggered?.length}
+									onclick={() => openHistory(notification)}
+								>
+									History
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="empty-state">
+				<Icon class="empty-state__icon" path={mdiAlert} size="48" />
+				<p class="empty-state__title">No notifications found</p>
+				<p class="empty-state__body">
+					{searchTerm
+						? 'No notifications match your search. Try a different keyword.'
+						: 'Create a rule to start receiving notifications.'}
+				</p>
+			</div>
+		{/if}
+	</div>
 </div>
+
+{#if showHistoryModal && selectedNotification}
+	<div class="history-modal__backdrop" onclick={closeHistory}>
+		<div
+			class="history-modal__panel"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="history-modal-title"
+			onclick={(event) => event.stopPropagation()}
+		>
+			<header class="history-modal__header">
+				<h2 id="history-modal-title">Trigger history</h2>
+				<button
+					type="button"
+					class="history-modal__close"
+					onclick={closeHistory}
+					aria-label="Close history"
+				>
+					×
+				</button>
+			</header>
+			<div class="history-modal__body">
+				<p class="history-modal__description">
+					{selectedNotification.name || 'Untitled notification'}
+				</p>
+				{#if historyEntries.length}
+					<ul class="history-modal__list">
+						{#each historyEntries as entry (entry.id)}
+							<li class="history-modal__item">
+								<span class="history-modal__time">{formatHistoryTimestamp(entry.created_at)}</span>
+								<span class="history-modal__device">{entry.dev_eui}</span>
+							</li>
+						{/each}
+					</ul>
+				{:else}
+					<p class="history-modal__empty">No trigger history recorded yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.search-container {
+		min-width: 280px;
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 0.5rem 0.75rem 0.5rem 2.5rem;
+		border: 1px solid rgb(209 213 219);
+		border-radius: 0.5rem;
+		background-color: white;
+		color: rgb(17 24 39);
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+	}
+
+	.search-input:focus {
+		outline: none;
+		border-color: rgb(59 130 246);
+		box-shadow: 0 0 0 3px rgba(59 130 246, 0.1);
+	}
+
+	.search-input::placeholder {
+		color: rgb(156 163 175);
+	}
+
+	.stats-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+		gap: 1rem;
+	}
+
+	.stat-card {
+		padding: 1rem 1.25rem;
+		border-radius: 0.75rem;
+		background: var(--cw-surface, rgb(249 250 251));
+		border: 1px solid rgb(229 231 235);
+	}
+
+	.stat-label {
+		font-size: 0.85rem;
+		color: rgb(107 114 128);
+		margin-bottom: 0.35rem;
+	}
+
+	.stat-value {
+		font-size: 1.75rem;
+		font-weight: 600;
+		color: rgb(17 24 39);
+	}
+
+	.table-wrapper {
+		margin-top: 1rem;
+	}
+
+	.table-shell {
+		overflow: hidden;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 1rem;
+		background: white;
+		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
+	}
+
+	.table-head {
+		background: linear-gradient(90deg, #0f172a, #1f2937);
+		color: white;
+	}
+
+	.table-body {
+		background: white;
+	}
+
+	.table-row {
+		display: flex;
+		align-items: stretch;
+		width: 100%;
+	}
+
+	.table-row--head {
+		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+	}
+
+	.table-cell {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.85rem 1rem;
+		font-size: 0.9rem;
+	}
+
+	.table-body .table-row:nth-child(odd) {
+		background: rgb(249 250 251);
+	}
+
+	.table-body .table-row {
+		border-bottom: 1px solid rgb(229 231 235);
+	}
+
+	.table-body .table-row:last-child {
+		border-bottom: none;
+	}
+
+	.sort-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		font-size: 0.8rem;
+		letter-spacing: 0.05em;
+		padding: 0.3rem 0.4rem;
+		border-radius: 0.375rem;
+		transition: background 0.15s ease;
+	}
+
+	.sort-button:hover {
+		background: rgba(255, 255, 255, 0.12);
+	}
+
+	.sort-icon {
+		color: inherit;
+	}
+
+	.cell-title {
+		font-weight: 600;
+		color: rgb(15 23 42);
+	}
+
+	.cell-primary {
+		color: rgb(51 65 85);
+	}
+
+	.cell-stat {
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		color: rgb(15 23 42);
+	}
+
+	.status-pill {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.3rem 0.75rem;
+		font-size: 0.8rem;
+		font-weight: 600;
+		border-radius: 9999px;
+		border: 1px solid transparent;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.status-pill--active {
+		background: rgba(34, 197, 94, 0.15);
+		color: rgb(22 163 74);
+		border-color: rgba(34, 197, 94, 0.3);
+	}
+
+	.status-pill--idle {
+		background: rgba(148, 163, 184, 0.15);
+		color: rgb(100 116 139);
+		border-color: rgba(148, 163, 184, 0.3);
+	}
+
+	.history-button {
+		padding: 0.35rem 0.9rem;
+		border-radius: 9999px;
+		border: 1px solid rgba(59, 130, 246, 0.4);
+		background: rgba(59, 130, 246, 0.12);
+		color: rgb(37 99 235);
+		font-weight: 600;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		transition:
+			background 0.2s ease,
+			color 0.2s ease;
+	}
+
+	.history-button:hover:enabled {
+		background: rgba(59, 130, 246, 0.2);
+		color: rgb(29 78 216);
+	}
+
+	.history-button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.history-modal__backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(15, 23, 42, 0.45);
+		backdrop-filter: blur(2px);
+		padding: 1.5rem;
+		z-index: 50;
+	}
+
+	.history-modal__panel {
+		width: min(520px, 100%);
+		background: white;
+		border-radius: 1rem;
+		box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
+		overflow: hidden;
+	}
+
+	.history-modal__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.25rem;
+		background: linear-gradient(90deg, #1d4ed8, #3b82f6);
+		color: white;
+	}
+
+	.history-modal__close {
+		background: transparent;
+		border: none;
+		color: inherit;
+		font-size: 1.75rem;
+		line-height: 1;
+		cursor: pointer;
+	}
+
+	.history-modal__body {
+		padding: 1.25rem;
+		max-height: 60vh;
+		overflow-y: auto;
+	}
+
+	.history-modal__description {
+		font-weight: 600;
+		margin-bottom: 1rem;
+		color: rgb(15 23 42);
+	}
+
+	.history-modal__list {
+		display: grid;
+		gap: 0.75rem;
+	}
+
+	.history-modal__item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.75rem 1rem;
+		border: 1px solid rgb(226 232 240);
+		border-radius: 0.75rem;
+		background: rgb(248 250 252);
+	}
+
+	.history-modal__time {
+		font-weight: 600;
+		color: rgb(30 64 175);
+	}
+
+	.history-modal__device {
+		font-size: 0.85rem;
+		color: rgb(71 85 105);
+	}
+
+	.history-modal__empty {
+		text-align: center;
+		color: rgb(107 114 128);
+		padding: 1rem 0;
+	}
+
+	.empty-state {
+		border: 1px dashed rgb(209 213 219);
+		border-radius: 1rem;
+		padding: 3rem 1.5rem;
+		text-align: center;
+		background: rgb(249 250 251);
+		color: rgb(75 85 99);
+	}
+
+	.empty-state__icon {
+		margin-bottom: 1rem;
+		color: rgb(156 163 175);
+	}
+
+	.empty-state__title {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin-bottom: 0.35rem;
+	}
+
+	.empty-state__body {
+		font-size: 0.95rem;
+		color: rgb(107 114 128);
+	}
+
+	:global(.dark) .search-input {
+		background-color: rgb(31 41 55);
+		border-color: rgb(55 65 81);
+		color: white;
+	}
+
+	:global(.dark) .search-input:focus {
+		border-color: rgb(147 197 253);
+		box-shadow: 0 0 0 3px rgba(147 197 253, 0.15);
+	}
+
+	:global(.dark) .stat-card {
+		background: rgb(31 41 55);
+		border-color: rgb(55 65 81);
+	}
+
+	:global(.dark) .stat-value {
+		color: white;
+	}
+
+	:global(.dark) .table-shell,
+	:global(.dark) .table-body {
+		background: rgb(17 24 39);
+		border-color: rgb(55 65 81);
+	}
+
+	:global(.dark) .table-body .table-row {
+		border-color: rgb(55 65 81);
+	}
+
+	:global(.dark) .table-body .table-row:nth-child(odd) {
+		background: rgb(31 41 55);
+	}
+
+	:global(.dark) .cell-title,
+	:global(.dark) .cell-primary,
+	:global(.dark) .cell-stat {
+		color: rgb(226 232 240);
+	}
+
+	:global(.dark) .empty-state {
+		background: rgba(30, 41, 59, 0.5);
+		border-color: rgb(55 65 81);
+		color: rgb(209 213 219);
+	}
+
+	:global(.dark) .history-button {
+		border-color: rgba(191, 219, 254, 0.4);
+		background: rgba(191, 219, 254, 0.12);
+		color: rgb(191 219 254);
+	}
+
+	:global(.dark) .history-button:hover:enabled {
+		background: rgba(191, 219, 254, 0.2);
+		color: rgb(224 231 255);
+	}
+
+	:global(.dark) .history-modal__panel {
+		background: rgb(17 24 39);
+		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+	}
+
+	:global(.dark) .history-modal__body {
+		color: rgb(226 232 240);
+	}
+
+	:global(.dark) .history-modal__description {
+		color: rgb(226 232 240);
+	}
+
+	:global(.dark) .history-modal__item {
+		background: rgb(30 41 59);
+		border-color: rgb(51 65 85);
+	}
+
+	:global(.dark) .history-modal__time {
+		color: rgb(191 219 254);
+	}
+
+	:global(.dark) .history-modal__device {
+		color: rgb(148 163 184);
+	}
+
+	:global(.dark) .history-modal__empty {
+		color: rgb(148 163 184);
+	}
+</style>
diff --git a/src/routes/app/all-reports/+page.server.ts b/src/routes/app/all-reports/+page.server.ts
index 988aa2fd..365f7d87 100644
--- a/src/routes/app/all-reports/+page.server.ts
+++ b/src/routes/app/all-reports/+page.server.ts
@@ -9,6 +9,7 @@ import { ReportAlertPointRepository } from '$lib/repositories/ReportAlertPointRe
 import { ReportRecipientRepository } from '$lib/repositories/ReportRecipientRepository';
 import { ReportUserScheduleRepository } from '$lib/repositories/ReportUserScheduleRepository';
 import { ReportRepository } from '$lib/repositories/ReportRepository';
+import { DeviceRepository } from '$lib/repositories/DeviceRepository';
 
 export const load: PageServerLoad = async ({ locals: { supabase } }) => {
 	const sessionService = new SessionService(supabase);
@@ -32,15 +33,18 @@ export const load: PageServerLoad = async ({ locals: { supabase } }) => {
 		supabase,
 		new ErrorHandlingService()
 	);
+	const deviceRepository = new DeviceRepository(supabase, new ErrorHandlingService());
+
 	const reportService = new ReportService(
 		reportRepository,
 		reportAlertPointRepository,
 		recipientRepository,
-		reportUserScheduleRepository
+		reportUserScheduleRepository,
+		deviceRepository
 	);
 	const service = new ReportTemplateService(repo);
 
-	const allReports = await reportService.getAllReports(user.id);
+	const allReports = await reportService.getAllReportsWithDevices(user.id);
 
 	return { allReports };
 };
diff --git a/src/routes/app/all-reports/+page.svelte b/src/routes/app/all-reports/+page.svelte
index eee624ca..a10c780f 100644
--- a/src/routes/app/all-reports/+page.svelte
+++ b/src/routes/app/all-reports/+page.svelte
@@ -5,7 +5,7 @@
 	import { Dialog, DateRangePicker } from 'bits-ui';
 	import type { DateRange } from 'bits-ui';
 	import { CalendarDate } from '@internationalized/date';
-	import { mdiAlert, mdiDownload, mdiFileDocument, mdiMagnify } from '@mdi/js';
+	import { mdiAlert, mdiDownload, mdiFileDocument, mdiMagnify } from '$lib/icons/mdi';
 	import ExportButton from '$lib/components/devices/ExportButton.svelte';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
@@ -577,7 +577,13 @@
 								</div>
 							</td>
 							<td data-title={$_('Device')}>
-								{report.dev_eui ?? $_('N/A')}
+								<a
+									href={`/app/dashboard/location/${report.cw_device?.location_id}/devices/${report.dev_eui}/settings/reports`}
+									class="device-link"
+								>
+									{report.cw_device?.name ?? $_('N/A')}
+									<small>({report.dev_eui ?? $_('N/A')})</small>
+								</a>
 							</td>
 							<td data-title={$_('Created')}>
 								{formatDate(report.created_at)}
diff --git a/src/routes/app/dashboard/+page.svelte b/src/routes/app/dashboard/+page.svelte
index f4d0a68a..8d10967e 100644
--- a/src/routes/app/dashboard/+page.svelte
+++ b/src/routes/app/dashboard/+page.svelte
@@ -648,10 +648,8 @@
 		overflow: auto;
 		/* background-color: var(--color-card); */
 		border-radius: 0.5rem;
-		padding: 1rem;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		padding: 1.25rem;
+		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 	}
 
 	/* @media (max-width: 768px) {
diff --git a/src/routes/app/dashboard/location/$types.ts b/src/routes/app/dashboard/location/$types.ts
deleted file mode 100644
index f69d72b7..00000000
--- a/src/routes/app/dashboard/location/$types.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { PageLoad, PageServerLoad } from './$types.js';
-
-export interface LocationWithDevices {
-  location_id: number;
-  name: string;
-  description?: string | null;
-  lat?: number | null;
-  long?: number | null;
-  owner_id?: string | null;
-  created_at: string;
-  map_zoom?: number | null;
-  cw_devices?: DeviceBasic[];
-}
-
-export interface DeviceBasic {
-  dev_eui: string;
-  name: string;
-  device_type?: string | null;
-  lat?: number | null;
-  long?: number | null;
-  created_at: string;
-}
-
-export interface PageData {
-  locations: LocationWithDevices[];
-}
-
-export type { PageLoad, PageServerLoad };
diff --git a/src/routes/app/dashboard/location/+page.server.ts b/src/routes/app/dashboard/location/+page.server.ts
index bda6098b..1b050e5f 100644
--- a/src/routes/app/dashboard/location/+page.server.ts
+++ b/src/routes/app/dashboard/location/+page.server.ts
@@ -2,59 +2,82 @@ import type { PageServerLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 
 export interface LocationWithDevices {
-  location_id: number;
-  name: string;
-  description?: string | null;
-  lat?: number | null;
-  long?: number | null;
-  owner_id?: string | null;
-  created_at: string;
-  map_zoom?: number | null;
-  cw_devices?: DeviceBasic[];
+	location_id: number;
+	name: string;
+	description?: string | null;
+	lat?: number | null;
+	long?: number | null;
+	owner_id?: string | null;
+	created_at: string;
+	map_zoom?: number | null;
+	cw_devices?: DeviceBasic[];
 }
 
 export interface DeviceBasic {
-  dev_eui: string;
-  name: string;
-  device_type?: string | null;
-  lat?: number | null;
-  long?: number | null;
-  created_at: string;
+	dev_eui: string;
+	name: string;
+	device_type?: string | null;
+	lat?: number | null;
+	long?: number | null;
+	created_at: string;
 }
 
-export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {
-  const session = await safeGetSession();
-  
-  if (!session || !session.user) {
-    throw redirect(303, '/auth/signin');
-  }
-
-  try {
-    // Fetch all locations for the user
-    const { data: locations, error } = await supabase
-      .from('cw_locations')
-      .select(`
+export const load = (async (event) => {
+	const { supabase, safeGetSession } = event.locals;
+	const { session, user } = await safeGetSession();
+
+	if (!session || !user) {
+		throw redirect(303, '/auth/signin');
+	}
+
+	try {
+		// Fetch all locations for the user
+		const { data: locations, error } = await supabase
+			.from('cw_locations')
+			.select(
+				`
         *,
         cw_devices(*)
-        )
-      `)
-      .eq('owner_id', session.user.id)
-      .order('name');
-
-    if (error) {
-      console.error('Error fetching locations:', error);
-      return {
-        locations: []
-      };
-    }
-
-    return {
-      locations: (locations || []) as LocationWithDevices[]
-    };
-  } catch (err) {
-    console.error('Error in load function:', err);
-    return {
-      locations: [] as LocationWithDevices[]
-    };
-  }
-};
+      `
+			)
+			.eq('owner_id', user.id)
+			.order('name');
+
+		if (error) {
+			console.error('Error fetching locations:', error);
+			return {
+				locations: []
+			};
+		}
+
+		const normalizedLocations: LocationWithDevices[] = (locations ?? []).map((loc: any) => ({
+			location_id: loc.location_id,
+			name: loc.name,
+			description: loc.description,
+			lat: loc.lat,
+			long: loc.long,
+			owner_id: loc.owner_id,
+			created_at: loc.created_at,
+			map_zoom: loc.map_zoom,
+			cw_devices: Array.isArray(loc.cw_devices)
+				? loc.cw_devices.map((device: any) => ({
+						dev_eui: device.dev_eui,
+						name: device.name,
+						device_type: device.device_type ?? null,
+						lat: device.lat,
+						long: device.long,
+						created_at: device.created_at ?? ''
+					}))
+				: []
+		}));
+
+		return {
+			locations: normalizedLocations
+		};
+	} catch (err) {
+		console.error('Error in load function:', err);
+		return {
+			locations: [] as LocationWithDevices[]
+		};
+	}
+}) satisfies PageServerLoad;
diff --git a/src/routes/app/dashboard/location/+page.svelte b/src/routes/app/dashboard/location/+page.svelte
index a6d568e5..dfbdeae4 100644
--- a/src/routes/app/dashboard/location/+page.svelte
+++ b/src/routes/app/dashboard/location/+page.svelte
@@ -10,7 +10,7 @@
 		mdiSortAscending,
 		mdiSortDescending,
 		mdiMagnify
-	} from '@mdi/js';
+	} from '$lib/icons/mdi';
 	import Button from '$lib/components/ui/base/Button.svelte';
 	import Card from '$lib/components/ui/base/Card.svelte';
 	import Icon from '$lib/components/ui/base/Icon.svelte';
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
index 746b848a..967ddbaa 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/reports/pdf/+server.ts
@@ -1,3 +1,4 @@
+import type { TableRow } from '$lib/pdf';
 import { createPDFDataTable } from '$lib/pdf/pdfDataTable';
 import { DeviceDataService } from '$lib/services/DeviceDataService';
 import { SessionService } from '$lib/services/SessionService';
@@ -112,8 +113,6 @@ export const GET: RequestHandler = async ({
 			align: 'left'
 		});
 
-		// Generate sample data for the table
-		const dataa: { date: string; values: [] }[] = []; //////////////////////////////////////////////////////////////////
 		const tokyoNow = DateTime.now().setZone('Asia/Tokyo');
 		const startDate = tokyoNow.minus({ months: 1 }).startOf('month').toUTC().toJSDate();
 		const endDate = tokyoNow.minus({ months: 1 }).endOf('month').toUTC().toJSDate();
@@ -129,34 +128,65 @@ export const GET: RequestHandler = async ({
 			throw error(404, 'No data found for the specified device');
 		}
 
-		// Transform DeviceDataRecord[] to TableData[] format
-		const data = deviceData.map((record) => ({
-			date: record.created_at,
-			values: Object.entries(record)
-				.filter(
-					([key, value]) =>
-						key !== 'dev_eui' && key !== 'created_at' && typeof value === 'number' && value !== null
+		// Determine numeric keys across dataset
+		const numericKeys = Array.from(
+			new Set(
+				deviceData.flatMap((record) =>
+					Object.entries(record as Record<string, unknown>)
+						.filter(
+							([key, value]) =>
+								key !== 'dev_eui' && key !== 'created_at' && typeof value === 'number'
+						)
+						.map(([key]) => key)
 				)
-				.map(([_, value]) => value as number)
-		}));
+			)
+		).sort();
 
-		if (!data || data.length === 0) {
-			throw error(404, 'No data found for the specified device');
+		if (numericKeys.length === 0) {
+			throw error(404, 'No numeric data found for the specified device');
 		}
 
-		// Get alert points for the device
-		const alertPoints = await deviceDataService.getAlertPointsForDevice(devEui);
-
-		// Create the alert data structure
-		const alertData = {
-			alert_points: alertPoints,
-			created_at: new Date().toISOString(),
-			dev_eui: devEui,
-			id: 1,
-			name: 'Device Report',
-			report_id: '1'
+		const dataHeaderTable: TableRow = {
+			header: { label: '日時', width: 70 },
+			cells: numericKeys.map((key) => ({
+				label: key,
+				width: 60
+			}))
 		};
-		createPDFDataTable(doc, data, alertData);
+
+		const dataRowsTable: TableRow[] = deviceData.map((record) => {
+			const recordData = record as Record<string, unknown>;
+			const createdAt = record.created_at ?? recordData.created_at;
+			const timestampLabel =
+				typeof createdAt === 'string'
+					? DateTime.fromISO(createdAt, { zone: 'utc' })
+							.setZone('Asia/Tokyo')
+							.toFormat('yyyy-MM-dd HH:mm')
+					: DateTime.now().setZone('Asia/Tokyo').toFormat('yyyy-MM-dd HH:mm');
+
+			return {
+				header: {
+					label: timestampLabel,
+					value: createdAt,
+					width: 70
+				},
+				cells: numericKeys.map((key) => {
+					const value = recordData[key];
+					return {
+						label: key,
+						value: typeof value === 'number' ? value : undefined,
+						width: 60
+					};
+				})
+			};
+		});
+
+		createPDFDataTable({
+			doc,
+			dataHeader: dataHeaderTable,
+			dataRows: dataRowsTable,
+			config: { timezone: 'Asia/Tokyo' }
+		});
 
 		// Add generation timestamp
 		doc
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.server.ts
index 892559ed..8e91cf22 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.server.ts
@@ -96,5 +96,55 @@ export const actions: Actions = {
 			console.error('Error updating device settings:', err);
 			return { success: false, error: 'Internal Server Error' };
 		}
+	},
+	deleteDevice: async ({ params, locals }) => {
+		const { devEui } = params;
+
+		if (!devEui) {
+			return { success: false, error: 'Device EUI is required' };
+		}
+
+		const sessionService = new SessionService(locals.supabase);
+		const { session, user } = await sessionService.getSafeSession();
+
+		if (!session || !user) {
+			return { success: false, error: 'Authentication required' };
+		}
+
+		const errorHandler = new ErrorHandlingService();
+		const deviceRepository = new DeviceRepository(locals.supabase, errorHandler);
+		const deviceService = new DeviceService(deviceRepository);
+		const deviceOwnersRepository = new DeviceOwnersRepository(locals.supabase, errorHandler);
+
+		const device = await deviceService.getDeviceByEui(devEui);
+
+		if (!device) {
+			return { success: false, error: 'Device not found' };
+		}
+
+		const owners = await deviceOwnersRepository.findByDeviceEui(devEui);
+		const isOwner =
+			device.user_id === user.id ||
+			owners.some((owner) => owner.user_id === user.id && owner.permission_level === 1);
+
+		if (!isOwner) {
+			return { success: false, error: 'Unauthorized to delete this device' };
+		}
+
+		try {
+			const deleted = await deviceService.deleteDevice(devEui);
+
+			if (!deleted) {
+				return { success: false, error: 'Failed to delete device' };
+			}
+
+			return { success: true };
+		} catch (err) {
+			console.error('Error deleting device:', err);
+			return {
+				success: false,
+				error: err instanceof Error ? err.message : 'Internal Server Error'
+			};
+		}
 	}
 };
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.svelte
index 02fcb1c1..4c1d4f26 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { formValidation } from '$lib/actions/formValidation';
 	import Button from '$lib/components/UI/buttons/Button.svelte';
@@ -27,29 +26,6 @@
 	);
 
 	let showDeleteDialog = $state(false);
-	let devEui = page.params.devEui;
-
-	async function deleteDevice() {
-		const res = await fetch(`/api/devices/${devEui}`, {
-			method: 'DELETE',
-			headers: {
-				'Content-Type': 'application/json'
-			}
-		});
-		if (res.ok) {
-			goto('/app/dashboard');
-		} else {
-			alert('Failed to delete device');
-		}
-	}
-
-	function showSuccessToast() {
-		success('Success! Operation completed successfully.');
-	}
-
-	function showErrorToast() {
-		error('Error! Something went wrong.');
-	}
 </script>
 
 <svelte:head>
@@ -57,7 +33,7 @@
 </svelte:head>
 
 <div class="flex min-h-screen flex-col gap-6">
-	<section class="flex flex-col gap-4">
+	<section class="surface-card flex flex-col gap-4">
 		<header class="flex flex-row items-center justify-between gap-4">
 			<div>
 				<h2 class="mb-1 text-2xl font-semibold">{$_('General')}</h2>
@@ -168,7 +144,7 @@
 	</section>
 
 	{#if isOwner}
-		<section class="border-danger/50 mt-auto flex flex-col gap-2 rounded-lg border p-4">
+		<section class="surface-card border border-[var(--color-border-subtle)] p-4">
 			<h2 class="text-danger text-lg font-semibold">{$_('Dangerous Zone')}</h2>
 			<div>
 				<Button
@@ -188,23 +164,37 @@
 					{$_('delete_device_warning')}
 				{/snippet}
 				{#snippet footer()}
-					<Button
-						variant="secondary"
-						onclick={() => {
-							showDeleteDialog = false;
-						}}
-					>
-						{$_('Cancel')}
-					</Button>
-					<Button
-						variant="danger"
-						onclick={() => {
-							showDeleteDialog = false;
-							deleteDevice();
-						}}
-					>
-						{$_('Delete')}
-					</Button>
+					<div class="flex gap-2">
+						<Button
+							variant="secondary"
+							onclick={() => {
+								showDeleteDialog = false;
+							}}
+						>
+							{$_('Cancel')}
+						</Button>
+						<form
+							method="POST"
+							action="?/deleteDevice"
+							use:enhance={({ result }) => {
+								if (result.type === 'success' && result.data.success) {
+									showDeleteDialog = false;
+									success($_('Device removed successfully.'));
+									window.location.assign('/app/dashboard');
+								} else {
+									error(
+										result.type === 'failure' && result.data?.error
+											? result.data.error
+											: $_('Failed to delete device.')
+									);
+								}
+							}}
+						>
+							<Button variant="danger" type="submit">
+								{$_('Delete')}
+							</Button>
+						</form>
+					</div>
 				{/snippet}
 			</Dialog>
 		</section>
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
index 090951a6..34783680 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.server.ts
@@ -140,13 +140,19 @@ export const actions: Actions = {
 			const formData = await request.formData();
 			// const name = formData.get('name') as string;
 
-			const name = formData.get('name'); // 'abc'
-			const nameData = { name }; //  { name: 'abc' }
+			const nameEntry = formData.get('name');
+			if (typeof nameEntry !== 'string' || !nameEntry.trim()) {
+				return fail(400, { success: false, error: 'Report name is required' });
+			}
+			const name = nameEntry.trim();
+			const nameData = { name };
 
-			const reportId = formData.get('reportId') as string; // For editing existing reports
-			const alertPointsJson = formData.get('alertPoints') as string;
-			const recipientsJson = formData.get('recipients') as string;
-			const schedulesJson = formData.get('schedules') as string;
+			const reportIdEntry = formData.get('reportId');
+			const reportId =
+				typeof reportIdEntry === 'string' && reportIdEntry.length > 0 ? reportIdEntry : undefined;
+			const alertPointsJson = formData.get('alertPoints');
+			const recipientsJson = formData.get('recipients');
+			const schedulesJson = formData.get('schedules');
 
 			if (!name) {
 				return fail(400, { success: false, error: 'Report name is required' });
@@ -157,9 +163,18 @@ export const actions: Actions = {
 			let schedules = [];
 
 			try {
-				alertPoints = alertPointsJson ? JSON.parse(alertPointsJson) : [];
-				recipients = recipientsJson ? JSON.parse(recipientsJson) : [];
-				schedules = schedulesJson ? JSON.parse(schedulesJson) : [];
+				alertPoints =
+					typeof alertPointsJson === 'string' && alertPointsJson.length > 0
+						? JSON.parse(alertPointsJson)
+						: [];
+				recipients =
+					typeof recipientsJson === 'string' && recipientsJson.length > 0
+						? JSON.parse(recipientsJson)
+						: [];
+				schedules =
+					typeof schedulesJson === 'string' && schedulesJson.length > 0
+						? JSON.parse(schedulesJson)
+						: [];
 			} catch (parseError) {
 				return fail(400, { success: false, error: 'Invalid data format' });
 			}
@@ -197,7 +212,7 @@ export const actions: Actions = {
 			} else {
 				// Create new report
 				report = await reportService.createReport({
-					name,
+					name: nameData.name,
 					dev_eui: devEui
 				});
 			}
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
index 8ec1b4e2..9f8e3e34 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/reports/create/+page.svelte
@@ -10,144 +10,154 @@
 	import { success as toastSuccess, error as toastError } from '$lib/stores/toast.svelte';
 	import type { ReportAlertPoint } from '$lib/models/Report.js';
 	import type { ActionResult } from '@sveltejs/kit';
-	import { untrack } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import CopyButton from '$lib/components/CopyButton.svelte';
 
 	let { data, form } = $props();
 
-	// Extract data properties
+	type AlertPointState = {
+		id: string;
+		name: string;
+		operator: '=' | '>' | '<' | 'range' | 'null';
+		value?: number;
+		min?: number;
+		max?: number;
+		data_point_key?: string;
+		hex_color: string;
+	};
+
+	type RecipientState = {
+		id: string;
+		email: string;
+		name: string;
+	};
+
+	type ScheduleState = {
+		id: string;
+		frequency: 'daily' | 'weekly' | 'monthly';
+		time: string;
+		days?: number[];
+	};
+
+	const getColorHistory = (source: unknown): string[] => {
+		const base = Array.isArray(source) ? source : (source as { data?: unknown })?.data;
+		if (!Array.isArray(base)) return [];
+		return base
+			.map((item) => (item as { hex_color?: string })?.hex_color)
+			.filter((color): color is string => typeof color === 'string' && color.length);
+	};
+
+	const normalizeAlertPoints = (source: unknown): AlertPointState[] => {
+		if (!Array.isArray(source)) return [];
+		return source.map((point: any) => ({
+			id: point.id?.toString() || crypto.randomUUID(),
+			name: point.name || '',
+			operator:
+				point.operator === null || point.operator === 'null'
+					? 'null'
+					: point.operator === 'range'
+						? 'range'
+						: point.operator || ('=' as '=' | '>' | '<' | 'range'),
+			data_point_key: point.data_point_key || '',
+			min: point.min ?? undefined,
+			max: point.max ?? undefined,
+			value: point.value ?? undefined,
+			hex_color: point.hex_color || '#3B82F6'
+		}));
+	};
+
+	const normalizeRecipients = (source: unknown): RecipientState[] => {
+		if (!Array.isArray(source)) return [];
+		return source.map((recipient: any) => ({
+			id: recipient.id?.toString() || crypto.randomUUID(),
+			email: recipient.email || '',
+			name: recipient.name || ''
+		}));
+	};
+
+	const normalizeSchedules = (source: unknown): ScheduleState[] => {
+		if (!Array.isArray(source)) return [];
+		return source.map((schedule: any) => ({
+			id: schedule.id?.toString() || crypto.randomUUID(),
+			frequency: schedule.end_of_week ? 'weekly' : schedule.end_of_month ? 'monthly' : 'daily',
+			time: schedule.time || '09:00',
+			days: schedule.days || []
+		}));
+	};
+
 	const devEui = $derived(data.devEui);
 	const locationId = $derived(data.locationId);
 	const report = $derived(data.report);
 	const isEditing = $derived(data.isEditing);
 	const recipientsData = $derived(data.recipients);
 	const dataKeys = $derived(data.dataKeys);
-	const alertPointsColorHistory = $derived(data.previouslyUsedAlertColors);
 
-	// Form state
-	let reportName = $state('');
+	const initialColorHistory = getColorHistory(data.previouslyUsedAlertColors);
+	let alertPointsColorHistory = $state<string[]>(initialColorHistory);
+
+	const initialReportName = isEditing && report ? report.name || '' : '';
+	let reportName = $state(initialReportName);
 	let isSubmitting = $state(false);
 	let showErrors = $state(false);
 	let formEl: HTMLFormElement;
 
-	// Alert points state - using $state for deep reactivity
-	let alertPoints = $state<
-		Array<{
-			id: string;
-			name: string;
-			operator: '=' | '>' | '<' | 'range' | 'null'; // Allow both
-			value?: number;
-			min?: number;
-			max?: number;
-			data_point_key?: string;
-			hex_color: string;
-		}>
-	>([]);
-
-	// Recipients state
-	let recipients = $state<
-		Array<{
-			id: string;
-			email: string;
-			name: string;
-		}>
-	>([]);
-
-	// Schedules state
-	let schedules = $state<
-		Array<{
-			id: string;
-			frequency: 'daily' | 'weekly' | 'monthly';
-			time: string;
-			days?: number[];
-		}>
-	>([]);
-
-	// Initialize form data from loaded report if editing
-	$effect(() => {
-		if (isEditing && report) {
-			untrack(() => {
-				reportName = report.name || '';
-			});
-		}
+	const initialAlertPoints = isEditing ? normalizeAlertPoints(data.alertPoints) : [];
+	const initialRecipients = isEditing ? normalizeRecipients(recipientsData) : [];
+	const initialSchedules = isEditing ? normalizeSchedules(data.schedules) : [];
 
-		if (previouslyUsedAlertColors) {
-			untrack(() => {
-				previouslyUsedAlertColors.splice(
-					0,
-					previouslyUsedAlertColors.length,
-					...data.previouslyUsedAlertColors.data
-						.map((item: any) => item.hex_color)
-						.filter((color: string) => color)
-				);
-			});
-		}
+	let alertPoints = $state<AlertPointState[]>(initialAlertPoints);
+	let recipients = $state<RecipientState[]>(initialRecipients);
+	let schedules = $state<ScheduleState[]>(initialSchedules);
 
-		if (isEditing && data.alertPoints) {
-			untrack(() => {
-				alertPoints.splice(
-					0,
-					alertPoints.length,
-					...data.alertPoints.map((point: any) => ({
-						id: point.id?.toString() || crypto.randomUUID(),
-						name: point.name || '',
-						operator:
-							// Normalize null values to 'null' string
-							point.operator === null || point.operator === 'null'
-								? 'null'
-								: point.operator === 'range'
-									? 'range'
-									: point.operator || ('=' as '=' | '>' | '<' | 'range'),
-						data_point_key: point.data_point_key || '',
-						min: point.min ?? undefined,
-						max: point.max ?? undefined,
-						value: point.value ?? undefined,
-						hex_color: point.hex_color || '#3B82F6'
-					}))
-				);
-			});
-		}
+	const validationErrors = $derived(() => {
+		const errors: string[] = [];
+		const ranges: Array<{ start: number; end: number; name: string }> = [];
 
-		if (isEditing && recipientsData) {
-			untrack(() => {
-				recipients.splice(
-					0,
-					recipients.length,
-					...data.recipients.map((recipient: any) => ({
-						id: recipient.id?.toString() || crypto.randomUUID(),
-						email: recipient.email || '',
-						name: recipient.name || ''
-					}))
-				);
-			});
-		}
+		alertPoints.forEach((point) => {
+			if (point.operator === 'null' || point.operator === null || !point.operator) {
+				return;
+			}
 
-		if (isEditing && data.schedules) {
-			untrack(() => {
-				schedules.splice(
-					0,
-					schedules.length,
-					...data.schedules.map((schedule: any) => {
-						let frequency: 'daily' | 'weekly' | 'monthly' = schedule.end_of_week
-							? 'weekly'
-							: schedule.end_of_month
-								? 'monthly'
-								: 'daily';
-						return {
-							id: schedule.id?.toString() || crypto.randomUUID(),
-							frequency,
-							time: schedule.time || '09:00',
-							days: schedule.days || []
-						};
-					})
-				);
-			});
-		}
-	});
+			const value = Number(point.value);
+			const min = Number(point.min);
+			const max = Number(point.max);
+
+			let start: number;
+			let end: number;
+
+			if (point.operator === '=') {
+				if (isNaN(value)) return;
+				start = end = value;
+			} else if (point.operator === 'range') {
+				if (isNaN(min) || isNaN(max)) return;
+				start = min;
+				end = max;
+			} else if (point.operator === '>') {
+				if (isNaN(value)) return;
+				start = value;
+				end = Infinity;
+			} else if (point.operator === '<') {
+				if (isNaN(value)) return;
+				start = -Infinity;
+				end = value;
+			} else {
+				return;
+			}
 
-	// Validation errors
-	let validationErrors = $state<string[]>([]);
+			for (const existingRange of ranges) {
+				if (
+					(start <= existingRange.end && end >= existingRange.start) ||
+					(existingRange.start <= end && existingRange.end >= start)
+				) {
+					errors.push(`"${point.name}" overlaps with "${existingRange.name}"`);
+				}
+			}
+
+			ranges.push({ start, end, name: point.name });
+		});
+
+		return errors;
+	});
 
 	// Color palette for alert points
 	const colors = ['#3B82F6', '#EF4444', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899'];
@@ -205,69 +215,7 @@
 		}
 	}
 
-	// Validation logic
-	function validateRanges() {
-		validationErrors.splice(0, validationErrors.length);
-
-		// Check for overlapping ranges
-		const ranges: Array<{ start: number; end: number; name: string }> = [];
-
-		alertPoints.forEach((point) => {
-			debugger;
-			// Exclude Display Only points from validation - check for both 'null' string and null value
-			if (point.operator === 'null' || point.operator === null || !point.operator) {
-				console.log(`Skipping validation for Display Only point: ${point.name}`);
-				return;
-			}
-
-			const value = Number(point.value);
-			const min = Number(point.min);
-			const max = Number(point.max);
-
-			let start: number, end: number;
-
-			if (point.operator === '=') {
-				if (isNaN(value)) return;
-				start = end = value;
-			} else if (point.operator === 'range') {
-				if (isNaN(min) || isNaN(max)) return;
-				start = min;
-				end = max;
-			} else if (point.operator === '>') {
-				if (isNaN(value)) return;
-				start = value;
-				end = Infinity;
-			} else if (point.operator === '<') {
-				if (isNaN(value)) return;
-				start = -Infinity;
-				end = value;
-			} else {
-				return; // Skip invalid points
-			}
-
-			// Check for overlaps with existing ranges
-			for (const existingRange of ranges) {
-				if (
-					(start <= existingRange.end && end >= existingRange.start) ||
-					(existingRange.start <= end && existingRange.end >= start)
-				) {
-					validationErrors.push(`"${point.name}" overlaps with "${existingRange.name}"`);
-				}
-			}
-
-			// ranges.push({ start, end, name: point.name });
-		});
-	}
-
-	// Watch for changes to alert points
-	$effect(() => {
-		// Only track alertPoints changes, not validationErrors changes
-		const points = alertPoints;
-		// Use untrack to prevent reactive loops when updating validationErrors
-		untrack(() => {
-			validateRanges();
-		});
-	});
+	// Validation errors computed from alert points
 
 	// Derived number line points for visualization
 	const numberLinePoints = $derived(
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/rules/+page.server.ts b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/rules/+page.server.ts
index 77f0cfcc..457a4b0c 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/rules/+page.server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/settings/rules/+page.server.ts
@@ -267,8 +267,11 @@ export const actions: Actions = {
 				} else {
 					// Create new criteria for this rule
 					const newCriteriaInsert: RuleCriteriaInsert = {
-						...criteriaData,
-						ruleGroupId: updatedRule.ruleGroupId
+						ruleGroupId: updatedRule.ruleGroupId,
+						subject: item.subject,
+						operator: item.operator,
+						trigger_value: item.trigger_value,
+						reset_value: item.reset_value
 					};
 					const createdCriteria = await ruleService.createRuleCriteria(newCriteriaInsert);
 					if (!createdCriteria) {
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/create/+page.server.ts b/src/routes/app/dashboard/location/[location_id]/devices/create/+page.server.ts
index c4004f6a..93299146 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/create/+page.server.ts
+++ b/src/routes/app/dashboard/location/[location_id]/devices/create/+page.server.ts
@@ -14,141 +14,162 @@ import { ErrorHandlingService } from '$lib/errors/ErrorHandlingService';
 import type { SupabaseClient } from '@supabase/supabase-js';
 
 interface PageData {
-  currentUser: AuthUser;
-  usersInLocation: LocationUser[];
-  permissionTypes: Array<[string, PermissionLevel]>;
-  locationId: number;
-  deviceTypes: Array<{ id: number; name: string }>;
+	currentUser: AuthUser;
+	usersInLocation: LocationUser[];
+	permissionTypes: Array<[string, PermissionLevel]>;
+	locationId: number;
+	deviceTypes: Array<{ id: number; name: string }>;
 }
 
 export const load: PageServerLoad = async (event) => {
-  const { params, locals } = event;
-  const session = locals.session as Session | null; // Assuming session is directly on locals
-
-  if (!session?.user) {
-    throw fail(401, { message: 'Unauthorized' });
-  }
-
-  const currentUser = session.user;
-  const location_id = parseInt(params.location_id || '0', 10);
-
-  if (!location_id) {
-    throw fail(400, { message: 'Invalid location ID' });
-  }
-
-  const supabase = locals.supabase as SupabaseClient;
-  const errorHandler = new ErrorHandlingService();
-  const locationRepository = new LocationRepository(supabase, errorHandler);
-  const deviceRepository = new DeviceRepository(supabase, errorHandler);
-  const locationService = new LocationService(locationRepository, deviceRepository);
-  const deviceTypeRepository = new DeviceTypeRepository(supabase, errorHandler);
-
-
-  try {
-    const usersInLocation = await locationService.getLocationUsers(location_id);
-    const deviceTypes = await deviceTypeRepository.findAll();
-    const permissionTypes = Object.entries(PermissionLevel)
-      .filter(([key]) => isNaN(Number(key))) // Get string keys from enum
-      .map(([key, value]) => [key, value as PermissionLevel]);
-
-    return {
-      currentUser,
-      usersInLocation: usersInLocation.filter(u => u.user_id !== currentUser.id),
-      permissionTypes,
-      locationId: location_id,
-      deviceTypes,
-    } as PageData;
-  } catch (error) {
-    console.error('Error loading data for create device page:', error);
-    throw fail(500, { message: 'Failed to load page data. ' + (error instanceof Error ? error.message : 'Unknown error') });
-  }
+	const { params, locals } = event;
+	const session = locals.session as Session | null; // Assuming session is directly on locals
+
+	if (!session?.user) {
+		throw fail(401, { message: 'Unauthorized' });
+	}
+
+	const currentUser = session.user;
+	const location_id = parseInt(params.location_id || '0', 10);
+
+	if (!location_id) {
+		throw fail(400, { message: 'Invalid location ID' });
+	}
+
+	const supabase = locals.supabase as SupabaseClient;
+	const errorHandler = new ErrorHandlingService();
+	const locationRepository = new LocationRepository(supabase, errorHandler);
+	const deviceRepository = new DeviceRepository(supabase, errorHandler);
+	const locationService = new LocationService(locationRepository, deviceRepository);
+	const deviceTypeRepository = new DeviceTypeRepository(supabase, errorHandler);
+
+	try {
+		const usersInLocation = await locationService.getLocationUsers(location_id);
+		const deviceTypeResults = await deviceTypeRepository.findAll();
+		const deviceTypes = deviceTypeResults.map((type) => ({
+			id: type.id,
+			name: type.name ?? ''
+		}));
+		const permissionTypes: Array<[string, PermissionLevel]> = Object.entries(PermissionLevel)
+			.filter(([key]) => isNaN(Number(key))) // Get string keys from enum
+			.map(([key, value]) => [key, value as PermissionLevel] as [string, PermissionLevel]);
+
+		return {
+			currentUser,
+			usersInLocation: usersInLocation.filter((u) => u.user_id !== currentUser.id),
+			permissionTypes,
+			locationId: location_id,
+			deviceTypes
+		} satisfies PageData;
+	} catch (error) {
+		console.error('Error loading data for create device page:', error);
+		throw fail(500, {
+			message:
+				'Failed to load page data. ' + (error instanceof Error ? error.message : 'Unknown error')
+		});
+	}
 };
 
 export const actions: Actions = {
-  createDevice: async (event) => {
-    const { request, locals, params } = event;
-    const session = locals.session as Session | null; // Assuming session is directly on locals
-
-    if (!session?.user) {
-      return fail(401, { message: 'Unauthorized' });
-    }
-    const currentUserId = session.user.id;
-    const location_id = parseInt(params.location_id || '0', 10);
-
-    if (!location_id) {
-      return fail(400, { message: 'Invalid location ID' });
-    }
-
-    const formData = await request.formData();
-    const name = formData.get('deviceName') as string;
-    const devEui = formData.get('devEui') as string;
-    // Ensure latitude and longitude are parsed as numbers
-    const latitudeStr = formData.get('latitude') as string;
-    const longitudeStr = formData.get('longitude') as string;
-    const userPermissionsData = formData.get('userPermissionsData') as string;
-    const deviceTypeStr = formData.get('deviceType') as string;
-    
-    const latitude = latitudeStr ? parseFloat(latitudeStr) : undefined;
-    const longitude = longitudeStr ? parseFloat(longitudeStr) : undefined;
-    const deviceType = deviceTypeStr ? parseInt(deviceTypeStr, 10) : undefined;
-
-    if (!name || !devEui || userPermissionsData === null) { // lat/long can be optional depending on DB
-      return fail(400, { message: 'Missing required device information or permissions data.' });
-    }
-     if (latitude !== undefined && isNaN(latitude)) {
-        return fail(400, { message: 'Invalid latitude value.'});
-    }
-    if (longitude !== undefined && isNaN(longitude)) {
-        return fail(400, { message: 'Invalid longitude value.'});
-    }
-
-    let parsedUserPermissions: Array<{ userId: string; permissionLevelId: number }> = [];
-    try {
-      parsedUserPermissions = JSON.parse(userPermissionsData);
-    } catch (error) {
-      return fail(400, { message: 'Invalid format for user permissions data.' });
-    }
-
-    const supabase = locals.supabase as SupabaseClient;
-    const errorHandler = new ErrorHandlingService();
-    const deviceRepository = new DeviceRepository(supabase, errorHandler);
-    const deviceService = new DeviceService(deviceRepository);
-
-
-    const deviceToInsert: DeviceInsert = {
-      dev_eui: devEui,
-      name: name,
-      lat: latitude, // Will be undefined if not provided, matching optional DB field
-      long: longitude, // Will be undefined if not provided, matching optional DB field
-      location_id: location_id,
-      user_id: currentUserId, // User who is creating the device
-      type: deviceType, // Add device type from form
-      // upload_interval are omitted, assuming they are nullable or have DB defaults
-    };
-
-    try {
-      const createdDevice = await deviceService.createDevice(deviceToInsert);
-      if (!createdDevice) {
-        // This case might be handled by deviceService.createDevice throwing an error
-        return fail(500, { message: 'Failed to create device record. The service returned no device.' });
-      }
-
-      // Add current user as Admin owner in cw_device_owners
-      await deviceRepository.addUserToDevice(createdDevice.dev_eui, currentUserId, PermissionLevel.Admin);
-
-      // Add other users with specified permissions to cw_device_owners
-      for (const perm of parsedUserPermissions) {
-        if (perm.permissionLevelId !== PermissionLevel.Disabled) { // Only add if not disabled
-          await deviceRepository.addUserToDevice(createdDevice.dev_eui, perm.userId, perm.permissionLevelId);
-        }
-      }
-
-      // Successfully created device and permissions
-      return { success: true, deviceId: createdDevice.dev_eui };
-    } catch (error) {
-      console.error('Error creating device or setting permissions:', error);
-      // errorHandler.handleDatabaseError or a more specific error handler could be used
-      return fail(500, { message: 'Failed to create device or set permissions. ' + (error instanceof Error ? error.message : 'Unknown error') });
-    }
-  }
-};
\ No newline at end of file
+	createDevice: async (event) => {
+		const { request, locals, params } = event;
+		const session = locals.session as Session | null; // Assuming session is directly on locals
+
+		if (!session?.user) {
+			return fail(401, { message: 'Unauthorized' });
+		}
+		const currentUserId = session.user.id;
+		const location_id = parseInt(params.location_id || '0', 10);
+
+		if (!location_id) {
+			return fail(400, { message: 'Invalid location ID' });
+		}
+
+		const formData = await request.formData();
+		const name = formData.get('deviceName') as string;
+		const devEui = formData.get('devEui') as string;
+		// Ensure latitude and longitude are parsed as numbers
+		const latitudeStr = formData.get('latitude') as string;
+		const longitudeStr = formData.get('longitude') as string;
+		const userPermissionsData = formData.get('userPermissionsData') as string;
+		const deviceTypeStr = formData.get('deviceType') as string;
+
+		const latitude = latitudeStr ? parseFloat(latitudeStr) : undefined;
+		const longitude = longitudeStr ? parseFloat(longitudeStr) : undefined;
+		const deviceType = deviceTypeStr ? parseInt(deviceTypeStr, 10) : undefined;
+
+		if (!name || !devEui || userPermissionsData === null) {
+			// lat/long can be optional depending on DB
+			return fail(400, { message: 'Missing required device information or permissions data.' });
+		}
+		if (latitude !== undefined && isNaN(latitude)) {
+			return fail(400, { message: 'Invalid latitude value.' });
+		}
+		if (longitude !== undefined && isNaN(longitude)) {
+			return fail(400, { message: 'Invalid longitude value.' });
+		}
+
+		let parsedUserPermissions: Array<{ userId: string; permissionLevelId: number }> = [];
+		try {
+			parsedUserPermissions = JSON.parse(userPermissionsData);
+		} catch (error) {
+			return fail(400, { message: 'Invalid format for user permissions data.' });
+		}
+
+		const supabase = locals.supabase as SupabaseClient;
+		const errorHandler = new ErrorHandlingService();
+		const deviceRepository = new DeviceRepository(supabase, errorHandler);
+		const deviceService = new DeviceService(deviceRepository);
+
+		const deviceToInsert: DeviceInsert = {
+			dev_eui: devEui,
+			name: name,
+			lat: latitude, // Will be undefined if not provided, matching optional DB field
+			long: longitude, // Will be undefined if not provided, matching optional DB field
+			location_id: location_id,
+			user_id: currentUserId, // User who is creating the device
+			type: deviceType // Add device type from form
+			// upload_interval are omitted, assuming they are nullable or have DB defaults
+		};
+
+		try {
+			const createdDevice = await deviceService.createDevice(deviceToInsert);
+			if (!createdDevice) {
+				// This case might be handled by deviceService.createDevice throwing an error
+				return fail(500, {
+					message: 'Failed to create device record. The service returned no device.'
+				});
+			}
+
+			// Add current user as Admin owner in cw_device_owners
+			await deviceRepository.addUserToDevice(
+				createdDevice.dev_eui,
+				currentUserId,
+				PermissionLevel.Admin
+			);
+
+			// Add other users with specified permissions to cw_device_owners
+			for (const perm of parsedUserPermissions) {
+				if (perm.permissionLevelId !== PermissionLevel.Disabled) {
+					// Only add if not disabled
+					await deviceRepository.addUserToDevice(
+						createdDevice.dev_eui,
+						perm.userId,
+						perm.permissionLevelId
+					);
+				}
+			}
+
+			// Successfully created device and permissions
+			return { success: true, deviceId: createdDevice.dev_eui };
+		} catch (error) {
+			console.error('Error creating device or setting permissions:', error);
+			// errorHandler.handleDatabaseError or a more specific error handler could be used
+			return fail(500, {
+				message:
+					'Failed to create device or set permissions. ' +
+					(error instanceof Error ? error.message : 'Unknown error')
+			});
+		}
+	}
+};
diff --git a/src/routes/auth/login/+page.server.ts b/src/routes/auth/login/+page.server.ts
index da87c430..131b1aa3 100644
--- a/src/routes/auth/login/+page.server.ts
+++ b/src/routes/auth/login/+page.server.ts
@@ -10,19 +10,35 @@ export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession
 export const actions: Actions = {
 	update: async ({ request, locals: { supabase, safeGetSession } }) => {
 		const formData = await request.formData();
-		const fullName = formData.get('fullName') as string;
-		const username = formData.get('username') as string;
-		const website = formData.get('website') as string;
-		const avatarUrl = formData.get('avatarUrl') as string;
+		const fullName = formData.get('fullName');
+		const username = formData.get('username');
+		const website = formData.get('website');
+		const avatarUrl = formData.get('avatarUrl');
 		const { session } = await safeGetSession();
-		const { error } = await supabase.from('profiles').upsert({
-			id: session?.user.id,
+
+		if (!session?.user) {
+			return fail(401, { error: 'Authentication required' });
+		}
+
+		if (
+			typeof fullName !== 'string' ||
+			typeof username !== 'string' ||
+			typeof website !== 'string' ||
+			typeof avatarUrl !== 'string'
+		) {
+			return fail(400, { error: 'Invalid form submission' });
+		}
+
+		const payload = {
+			id: session.user.id,
 			full_name: fullName,
 			username,
 			website,
 			avatar_url: avatarUrl,
-			updated_at: new Date()
-		});
+			updated_at: new Date().toISOString()
+		};
+
+		const { error } = await supabase.from('profiles').upsert([payload]);
 		if (error) {
 			return fail(500, {
 				fullName,
diff --git a/static/build-info.json b/static/build-info.json
index 8f7c4505..6ba75f00 100644
--- a/static/build-info.json
+++ b/static/build-info.json
@@ -1,9 +1,9 @@
 {
-  "commit": "efbc4d6",
-  "branch": "develop",
+  "commit": "95bb936",
+  "branch": "polish",
   "author": "Kevin Cantrell",
-  "date": "2025-10-24T04:18:03.692Z",
+  "date": "2025-11-09T11:24:47.996Z",
   "builder": "kevin@kevin-desktop",
   "ipAddress": "192.168.1.100",
-  "timestamp": 1761279483692
+  "timestamp": 1762687487997
 }
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
index 75788def..11335d2f 100644
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.40.7
\ No newline at end of file
+v2.54.11
\ No newline at end of file