diff --git a/src/ambient.d.ts b/src/ambient.d.ts
new file mode 100644
index 0000000..b44af06
--- /dev/null
+++ b/src/ambient.d.ts
@@ -0,0 +1,14 @@
+type WeatherDataCurrent = {
+    time: Date;
+    temperature2m: number;
+    relativeHumidity2m: number;
+    isDay: number;
+    precipitation: number;
+    cloudCover: number;
+    pressureMsl: number;
+    windSpeed10m: number;
+}
+
+type WeatherData = {
+    current: WeatherDataCurrent
+}
\ No newline at end of file
diff --git a/src/app.d.ts b/src/app.d.ts
index da08e6d..51099a7 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export {};
+export { };
diff --git a/src/lib/generators/air-quality/air-quality-generator.svelte b/src/lib/generators/air-quality/AirQualityGen.svelte
similarity index 100%
rename from src/lib/generators/air-quality/air-quality-generator.svelte
rename to src/lib/generators/air-quality/AirQualityGen.svelte
diff --git a/src/lib/generators/air-quality/index.ts b/src/lib/generators/air-quality/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/generators/satelites/index.ts b/src/lib/generators/satelites/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/generators/satelites/satellites-generator.svelte b/src/lib/generators/satelites/satellites-generator.svelte
deleted file mode 100644
index 8bcc860..0000000
--- a/src/lib/generators/satelites/satellites-generator.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- TODO: ADD TONEJS GENERATOR -->
-<!-- https://www.npmjs.com/package/tonal -->
-<!-- https://www.npmjs.com/package/tone -->
diff --git a/src/lib/generators/weather/WeatherGen.svelte b/src/lib/generators/weather/WeatherGen.svelte
new file mode 100644
index 0000000..3c52da0
--- /dev/null
+++ b/src/lib/generators/weather/WeatherGen.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Synth, Loop, type SynthOptions, getTransport } from 'tone';
+
+	let { currentWeather } = $props();
+
+	const synthOptions = {
+		oscillator: {
+			type: 'triangle'
+		},
+		envelope: {
+			attack: 0.005,
+			decay: 0.3,
+			sustain: 0.1,
+			release: 0.1
+		}
+	} as SynthOptions;
+
+	// getTransport().scheduleRepeat((time) => {
+	// 	// use the callback time to schedule events
+	// 	osc.start(time).stop(time + 0.1);
+	// }, '8n');
+	// // transport must be started before it starts invoking events
+	// Tone.Transport.start();
+
+	function setupAndPlay() {
+		getTransport().bpm.value = 60;
+		const synth = new Synth(synthOptions).toDestination();
+		const loop = new Loop((time) => {
+			synth.triggerAttackRelease('C2', '8n');
+		}, '8n').start(0);
+		getTransport().stop();
+	}
+
+	setupAndPlay();
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center">WEATHERGEN</div>
diff --git a/src/lib/generators/weather/index.ts b/src/lib/generators/weather/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/generators/weather/weather-generator.svelte b/src/lib/generators/weather/weather-generator.svelte
deleted file mode 100644
index 8bcc860..0000000
--- a/src/lib/generators/weather/weather-generator.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- TODO: ADD TONEJS GENERATOR -->
-<!-- https://www.npmjs.com/package/tonal -->
-<!-- https://www.npmjs.com/package/tone -->
diff --git a/src/routes/on-out/+page.svelte b/src/routes/on-out/+page.svelte
index addf8f6..79327a3 100644
--- a/src/routes/on-out/+page.svelte
+++ b/src/routes/on-out/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { page } from '$app/state';
+	import WeatherGen from '$lib/generators/weather/WeatherGen.svelte';
 
-	const lat = $derived(page.url.searchParams.get('lat'));
-	const long = $derived(page.url.searchParams.get('long'));
+	import type { PageProps } from './$types';
 
-	$inspect(lat);
-	$inspect(long);
+	const { data }: PageProps = $props();
+	const currentWeather = data.current;
 </script>
+
+<WeatherGen {currentWeather}></WeatherGen>
diff --git a/src/routes/on-out/+page.ts b/src/routes/on-out/+page.ts
index d0748e6..59a5a0c 100644
--- a/src/routes/on-out/+page.ts
+++ b/src/routes/on-out/+page.ts
@@ -1,32 +1,38 @@
-//TODO: LOAD ALL API DATA FOR WEATHER, AIR QUALITY, ETC
 import { fetchWeatherApi } from 'openmeteo';
+import type { PageLoad } from './$types';
 
-const params = {
-    "latitude": 52.52,
-    "longitude": 13.41,
-    "current": ["temperature_2m", "relative_humidity_2m", "is_day", "precipitation", "cloud_cover", "pressure_msl", "wind_speed_10m"]
-};
-const url = "https://api.open-meteo.com/v1/forecast";
-const responses = await fetchWeatherApi(url, params);
+export const load: PageLoad = async ({ url }) => {
 
-// Process first location. Add a for-loop for multiple locations or weather models
-const response = responses[0];
+    const lat = url.searchParams.get('lat');
+    const long = url.searchParams.get('long');
 
-// Attributes for timezone and location
-const utcOffsetSeconds = response.utcOffsetSeconds();
+    const apiParams = {
+        "latitude": lat,
+        "longitude": long,
+        "current": ["temperature_2m", "relative_humidity_2m", "is_day", "precipitation", "cloud_cover", "pressure_msl", "wind_speed_10m"]
+    };
 
-const current = response.current()!;
+    const apiUrl = "https://api.open-meteo.com/v1/forecast";
+    const responses = await fetchWeatherApi(apiUrl, apiParams);
 
-// Note: The order of weather variables in the URL query and the indices below need to match!
-const weatherData = {
-    current: {
-        time: new Date((Number(current.time()) + utcOffsetSeconds) * 1000),
-        temperature2m: current.variables(0)!.value(),
-        relativeHumidity2m: current.variables(1)!.value(),
-        isDay: current.variables(2)!.value(),
-        precipitation: current.variables(3)!.value(),
-        cloudCover: current.variables(4)!.value(),
-        pressureMsl: current.variables(5)!.value(),
-        windSpeed10m: current.variables(6)!.value(),
-    },
+    const response = responses[0];
+    const utcOffsetSeconds = response.utcOffsetSeconds();
+
+    const current = response.current()!;
+
+    // Note: The order of weather variables in the URL query and the indices below need to match!
+    const weatherData: WeatherData = {
+        current: {
+            time: new Date((Number(current.time()) + utcOffsetSeconds) * 1000),
+            temperature2m: current.variables(0)!.value(),
+            relativeHumidity2m: current.variables(1)!.value(),
+            isDay: current.variables(2)!.value(),
+            precipitation: current.variables(3)!.value(),
+            cloudCover: current.variables(4)!.value(),
+            pressureMsl: current.variables(5)!.value(),
+            windSpeed10m: current.variables(6)!.value(),
+        },
+    };
+
+    return weatherData
 };
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 0b2d886..65ce6b3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,4 +16,4 @@
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
 	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+}
\ No newline at end of file