diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index bb86bd0..59e40c6 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Header from "$lib/components/Header.svelte";
 	import Router from "$lib/router/Router.svelte";
 	import { Toaster } from "svelte-sonner";
 	import { Close } from '$wails/main/App'
diff --git a/frontend/src/lib/components/Lamp.svelte b/frontend/src/lib/components/Lamp.svelte
index 6d8893d..a5c3254 100644
--- a/frontend/src/lib/components/Lamp.svelte
+++ b/frontend/src/lib/components/Lamp.svelte
@@ -1,34 +1,21 @@
-<script>
-  export let brightnessChange = (brightness) => {};
+<script lang="ts">
+	export let brightnessChange = (brightness: number) => {};
+	export let brightness: number;
 
-  let brightness = 50; // Default brightness level
-
-  function handleBrightnessChange(event) {
-    brightness = event.target.value;
-    brightnessChange(brightness); // Call the callback with the current brightness
-  }
+	function handleBrightnessChange(event) {
+		brightness = event.target.value;
+		brightnessChange(brightness);
+	}
 </script>
 
 <div class="flex flex-col items-center justify-center p-4">
-  <div
-    class="w-48 h-48 rounded-full overflow-hidden mb-4"
-    style="background-color: #FFD700; filter: brightness({brightness}%)"
-  >
-    <svg
-      class="w-48 h-48 fill-current text-yellow-800"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-    >
-      <path d="M12 2L2 22h20Z" />
-    </svg>
-  </div>
-  <input
-    type="range"
-    min="0"
-    max="100"
-    step="1"
-    value={brightness}
-    on:input={handleBrightnessChange}
-    class="w-4/5"
-  />
-</div>
\ No newline at end of file
+	<div
+		class="w-48 h-48 rounded-full overflow-hidden mb-4"
+		style="background-color: #FFD700; filter: brightness({brightness}%)"
+	>
+		<svg class="w-48 h-48 fill-current text-yellow-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+			<path d="M12 2L2 22h20Z" />
+		</svg>
+	</div>
+	<input type="range" min="0" max="100" step="1" value={brightness} on:input={handleBrightnessChange} class="w-4/5" />
+</div>
diff --git a/frontend/src/lib/router/routes/Home.svelte b/frontend/src/lib/router/routes/Home.svelte
index 33749e4..52600be 100644
--- a/frontend/src/lib/router/routes/Home.svelte
+++ b/frontend/src/lib/router/routes/Home.svelte
@@ -1,10 +1,23 @@
 <script lang="ts">
 	import Lamp from "../../components/Lamp.svelte";
+	import { GetLamps } from "$wails/main/App";
+
+	let lamps: number[] = [0, 0];
+	GetLamps().then(apilamps => {
+		console.log(apilamps);
+		for (let i = 0; i < apilamps.length; i++) {
+			lamps[i] = Number(apilamps[i]);
+		}
+	});
+
+	function handleBrightnessChange(brightness: number) {
+		console.log(brightness);
+	}
 </script>
 
 <template>
 	<div class="flex flex-row justify-center items-center">
-		<Lamp />
-		<Lamp />
+		<Lamp brightness={lamps[0]} brightnessChange={handleBrightnessChange} />
+		<Lamp brightness={lamps[1]} brightnessChange={handleBrightnessChange} />
 	</div>
 </template>
\ No newline at end of file
diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
index 7e3d876..17a1abd 100644
--- a/frontend/wailsjs/go/main/App.d.ts
+++ b/frontend/wailsjs/go/main/App.d.ts
@@ -2,3 +2,7 @@
 // This file is automatically generated. DO NOT EDIT
 
 export function Close():Promise<void>;
+
+export function GetLamps():Promise<Array<string>>;
+
+export function SetLampBrightness(arg1:number,arg2:number):Promise<string>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
index abd085d..b9aee50 100644
--- a/frontend/wailsjs/go/main/App.js
+++ b/frontend/wailsjs/go/main/App.js
@@ -5,3 +5,11 @@
 export function Close() {
   return window['go']['main']['App']['Close']();
 }
+
+export function GetLamps() {
+  return window['go']['main']['App']['GetLamps']();
+}
+
+export function SetLampBrightness(arg1, arg2) {
+  return window['go']['main']['App']['SetLampBrightness'](arg1, arg2);
+}