diff --git a/resources/js/main.js b/resources/js/main.js
index 6f84d78..e54c967 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -1,6 +1,70 @@
-window.onload = startup;
+function group_name({ name }) {
+    return (
+        <tr>
+            <td>{name}</td>
+        </tr>
+    );
+}
 
-async function startup() {
+function table_header() {
+    return (
+        <tr>
+            <td>Name</td>
+            <td>LED</td>
+            <td>Power</td>
+            <td>Power Draw</td>
+        </tr>
+    );
+}
+
+function table_row({ row_data }) {
+    return (
+        <tr>
+            {/* Name */}
+            <td>
+                <input id={"name_" + row_data.device_id} readonly="true">{row_data.device_name}</input>
+                <button on_click={async () => { await change_name(row_data.device_id) }}>
+                    <i class="fa fa-pencil-square-o"></i>
+                </button>
+            </td>
+
+            {/* LED */}
+            <td>
+                <label id={"led_" + row_data.device_id}>{row_data.led_state}</label>
+                <button on_click={async () => { await led_on(row_data.device_id) }}>On</button>
+                <button on_click={async () => { await led_off(row_data.device_id) }}>Off</button>
+            </td>
+
+            {/* Power */}
+            <td>
+                <label id={"power_" + row_data.device_id}>{row_data.power_state}</label>
+                {
+                    row_data.power_control &&
+                    <button on_click={async () => { await power_on(row_data.device_id) }}>On</button> &&
+                    <button on_click={async () => { await power_off(row_data.device_id) }}>Off</button>
+                }
+            </td>
+
+            {/* Power Draw */}
+            <td>
+                <label>{row_data.power_draw} W</label>
+                <button><i class="fa fa-line-chart"></i></button>
+            </td>
+        </tr >
+    );
+}
+
+function create_table(group, device_data) {
+    return (
+        <table>
+            <group_name name={group} />
+            <table_header />
+            <table_row row_data={device_data} />
+        </table>
+    );
+}
+
+export default async function MyApp() {
     const response = await fetch(
         "/devices",
         {
@@ -8,37 +72,10 @@ async function startup() {
         }
     );
 
-    let table = document.createElement('table');
-    table.className = "pure-table pure-table-bordered";
     let json = JSON.parse(await response.json());
 
-    console.log(json);
-
     for (const [group_name, devices] of Object.entries(json)) {
-        let row_group = document.createElement('tr');
-        let data_group = document.createElement('td');
-        let group_label = document.createElement('label');
-        group_label.innerText = group_name;
-
-        data_group.appendChild(group_label);
-        row_group.appendChild(data_group);
-        table.appendChild(row_group);
-
-        let row_header = document.createElement('tr');
-        let header_name_entry = document.createElement('td');
-        header_name_entry.innerText = "Name"
-        let header_led_entry = document.createElement('td');
-        header_led_entry.innerText = "LED"
-        let header_power_entry = document.createElement('td');
-        header_power_entry.innerText = "Power"
-        let header_power_draw_entry = document.createElement('td');
-        header_power_draw_entry.innerText = "Power Draw";
-
-        row_header.appendChild(header_name_entry);
-        row_header.appendChild(header_led_entry);
-        row_header.appendChild(header_power_entry);
-        row_header.appendChild(header_power_draw_entry);
-        table.appendChild(row_header);
+        let device_infos = [];
 
         for (let i = 0; i < devices.length; i++) {
             let device_id = devices[i][0];
@@ -50,33 +87,6 @@ async function startup() {
                 device_descriptor = devices[i][1];
             }
 
-            let row_device = document.createElement('tr');
-
-            // create device name column
-            let device_name_entry = document.createElement('td');
-            let device_name = document.createElement('input');
-            device_name.className = "pure-u-2";
-            device_name.value = device_descriptor;
-            device_name.readOnly = true;
-            let device_name_edit = document.createElement('button');
-            device_name_edit.className = "pure-button";
-            device_name_edit.onclick = async () => {
-                if (device_name.readOnly) {
-                    device_name.readOnly = false;
-                    device_name.focus();
-                } else {
-                    device_name.readOnly = true;
-                    await change_device_name(device_id, device_name.value);
-                }
-            }
-            let button_icon = document.createElement('i');
-            button_icon.className = "fa fa-pencil-square-o";
-
-            device_name_entry.appendChild(device_name);
-            device_name_edit.appendChild(button_icon);
-            device_name_entry.appendChild(device_name_edit);
-            row_device.appendChild(device_name_entry);
-
             // get plug status
             const device_status_response = await fetch(
                 "/plug_state/" + device_id,
@@ -87,72 +97,32 @@ async function startup() {
 
             let device_state = JSON.parse(await device_status_response.json());
 
-            // create device led state column
-            let device_led_state_entry = document.createElement('td');
-            let device_led_state = document.createElement('label');
-            device_led_state.innerText = device_state["led"];
-            device_led_state.className = "pure-u-2";
-            device_led_state.id = "led_" + device_id;
-            let device_led_on = document.createElement('button');
-            device_led_on.innerText = "On";
-            device_led_on.className = "pure-button";
-            device_led_on.onclick = async () => { await led_on(device_id) };
-            let device_led_off = document.createElement('button');
-            device_led_off.innerText = "Off"
-            device_led_off.className = "pure-button";
-            device_led_off.onclick = async () => { await led_off(device_id) };
+            let device_info = {
+                device_id: device_id,
+                device_descriptor: device_descriptor,
+                led_state: device_state["led"],
+                power_state: device_state["power"],
+                power_control: devices[i][2] && device_state["power_draw"] < 15,
+                power_draw: device_state["power_draw"],
+            };
 
-            device_led_state_entry.appendChild(device_led_state);
-            device_led_state_entry.appendChild(device_led_on);
-            device_led_state_entry.appendChild(device_led_off);
-            row_device.appendChild(device_led_state_entry);
-
-            // create device power state column
-            let device_power_state_entry = document.createElement('td');
-            let device_power_state = document.createElement('label');
-            device_power_state.innerText = device_state["power"];
-            device_power_state.className = "pure-u-2";
-            device_power_state.id = "power_" + device_id;
-
-            device_power_state_entry.appendChild(device_power_state);
-
-            if (devices[i][2] == true && device_state["power_draw"] < 15) {
-                let device_power_on = document.createElement('button');
-                device_power_on.innerText = "On"
-                device_power_on.className = "pure-button";
-                device_power_on.onclick = async () => { await power_on(device_id) };
-                let device_power_off = document.createElement('button');
-                device_power_off.innerText = "Off"
-                device_power_off.className = "pure-button";
-                device_power_off.onclick = async () => { await power_off(device_id) };
-
-                device_power_state_entry.appendChild(device_power_on);
-                device_power_state_entry.appendChild(device_power_off);
-            }
-
-            row_device.appendChild(device_power_state_entry);
-
-            // create device power draw column
-            let device_power_draw_entry = document.createElement('td');
-            let device_power_draw = document.createElement('label');
-            device_power_draw.className = "pure-u-2";
-            device_power_draw.innerText = device_state["power_draw"] + " W";
-            let device_power_draw_graph_button = document.createElement('button');
-            device_power_draw_graph_button.className = "pure-button";
-            device_power_draw_graph_button.onclick = async () => { await render_graph(device_id, device_descriptor) };
-            let device_power_draw_graph_button_icon = document.createElement('i');
-            device_power_draw_graph_button_icon.className = "fa fa-line-chart";
-
-            device_power_draw_graph_button.appendChild(device_power_draw_graph_button_icon);
-            device_power_draw_entry.appendChild(device_power_draw);
-            device_power_draw_entry.appendChild(device_power_draw_graph_button);
-            row_device.appendChild(device_power_draw_entry);
-
-            table.appendChild(row_device);
+            device_infos.push(device_info);
         }
-    }
 
-    document.getElementById("main").appendChild(table);
+        document.getElementById("main").appendChild(create_table(group_name, device_infos));
+    }
+}
+
+async function change_name(device_id) {
+    let device_name = document.getElementById("name_" + device_id);
+
+    if (device_name.readOnly) {
+        device_name.readOnly = false;
+        device_name.focus();
+    } else {
+        device_name.readOnly = true;
+        await change_device_name(device_id, device_name.value);
+    }
 }
 
 async function change_plug_state(plug, module, state) {
diff --git a/resources/static/index.html b/resources/static/index.html
index 4c4d4e3..fe588b1 100644
--- a/resources/static/index.html
+++ b/resources/static/index.html
@@ -13,6 +13,15 @@
         integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.korzh.com/metroui/v4/css/metro-all.min.css">
     <link href="/css/index.css" rel="stylesheet">
+
+    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"
+        integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"
+        integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
 </head>
 
 <body>
@@ -24,6 +33,7 @@
     <script type="text/javascript" src="/js/main.js"></script>
     <script src="https://cdn.korzh.com/metroui/v4/js/metro.min.js"></script>
 
+
     <input id="start" type="text" data-role="calendarpicker">
     <input id="end" type="text" data-role="calendarpicker">
     <div id="graph">