diff --git a/custom/js/wake_on_lan_hosts.js b/custom/js/wake_on_lan_hosts.js
new file mode 100644
index 0000000..2317459
--- /dev/null
+++ b/custom/js/wake_on_lan_hosts.js
@@ -0,0 +1,186 @@
+const wake_on_lan_new_template = '<div class="col-sm-4" id="{{ .Id }}">\n' +
+    '\t<div class="info-box">\n' +
+    '\t\t<div class="info-box-content">\n' +
+    '\t\t\t<div class="btn-group">\n' +
+    '\t\t\t\t<button type="button" class="btn btn-outline-success btn-sm"\n' +
+    '\t\t\t\t\t\tdata-mac-address="{{ .MacAddress }}">Wake On\n' +
+    '\t\t\t\t</button>\n' +
+    '\t\t\t\t<button type="button"\n' +
+    '\t\t\t\t\t\tclass="btn btn-outline-primary btn-sm btn_modify_wake_on_lan_host"\n' +
+    '\t\t\t\t\t\tdata-toggle="modal" data-target="#modal_wake_on_lan_host"\n' +
+    '\t\t\t\t\t\tdata-name="{{ .Name }}" data-mac-address="{{ .MacAddress }}">Edit\n' +
+    '\t\t\t\t</button>\n' +
+    '\t\t\t\t<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"\n' +
+    '\t\t\t\t\t\tdata-target="#modal_remove_wake_on_lan_host"\n' +
+    '\t\t\t\t\t\tdata-mac-address="{{ .MacAddress }}">Remove\n' +
+    '\t\t\t\t</button>\n' +
+    '\t\t\t</div>\n' +
+    '\t\t\t<hr>\n' +
+    '\t\t\t<span class="info-box-text"><i class="fas fa-address-card"></i> <span class="name">{{ .Name }}</span></span>\n' +
+    '\t\t\t<span class="info-box-text"><i class="fas fa-ethernet"></i> <span class="mac-address">{{ .MacAddress }}</span></span>\n' +
+    '\t\t\t<span class="info-box-text"><i class="fas fa-clock"></i> <span class="latest-used">Unused</span></span>\n' +
+    '\t\t</div>\n' +
+    '\t</div>\n' +
+    '</div>';
+
+jQuery(function ($) {
+   $.validator.addMethod('mac', function (value, element) {
+       return this.optional(element) || /^([0-9A-F]{2}[:]){5}([0-9A-F]{2})$/.test(value);
+   }, 'Please enter a valid MAC Address. ex: 00:00:00:00:00:00');
+});
+
+jQuery.each(["put", "delete"], function (i, method) {
+    jQuery[method] = function (url, data, callback, type) {
+        if (jQuery.isFunction(data)) {
+            type = type || callback;
+            callback = data;
+            data = undefined;
+        }
+
+        return jQuery.ajax({
+            url: url,
+            type: method,
+            dataType: type,
+            data: data,
+            success: callback
+        });
+    };
+});
+
+jQuery(function ($) {
+    let newHostHtml = '<div class="col-sm-2 offset-md-4" style=" text-align: right;"><button style="" id="btn_new_wake_on_lan_host" type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#modal_wake_on_lan_host"><i class="nav-icon fas fa-plus"></i> New Host</button></div>';
+    $('h1').parents(".row").append(newHostHtml);
+});
+
+jQuery(function ($) {
+    $('.btn-outline-success').click(function () {
+        $.put('/wake_on_lan_host/' + $(this).data('mac-address'));
+    });
+});
+
+jQuery(function ($) {
+    let $modal_remove_wake_on_lan_host = $('#modal_remove_wake_on_lan_host');
+    let $remove_client_confirm = $('#remove_wake_on_host_confirm');
+
+    $modal_remove_wake_on_lan_host.on('show.bs.modal', function (event) {
+        const $btn = $(event.relatedTarget);
+        const $modal = $(this);
+
+        const $editBtn = $btn.parents('.btn-group').find('.btn_modify_wake_on_lan_host');
+        $modal.find('.modal-body').text("You are about to remove Wake On Lan Host " + $editBtn.data('name'));
+        $remove_client_confirm.val($editBtn.data('mac-address'));
+    })
+
+    $remove_client_confirm.click(function () {
+        const macAddress = $remove_client_confirm.val().replaceAll(":", "-");
+        $.delete('/wake_on_lan_host/' + macAddress);
+        $('#' + macAddress).remove();
+
+        $modal_remove_wake_on_lan_host.modal('hide');
+    });
+});
+
+jQuery(function ($) {
+    let $modal_wake_on_lan_host = $("#modal_wake_on_lan_host");
+    let $name = $('#frm_wake_on_lan_host_name');
+    let $macAddress = $('#frm_wake_on_lan_host_mac_address');
+    let $oldMacAddress = $('#frm_wake_on_lan_host_old_mac_address');
+    let $contentRow = $('.content .row');
+    let $frm_wake_on_lan_host = $("#frm_wake_on_lan_host");
+
+    // https://jqueryvalidation.org/
+    let validator = $frm_wake_on_lan_host.validate({
+        submitHandler: function () {
+            let data = {
+                name: $name.val(),
+                mac_address: $macAddress.val().toUpperCase(),
+                old_mac_address: $oldMacAddress.val().toUpperCase()
+            };
+            $.ajax({
+                cache: false,
+                method: 'POST',
+                url: '/wake_on_lan_host',
+                dataType: 'json',
+                contentType: "application/json",
+                data: JSON.stringify(data),
+                success: function (response) {
+                    /** @type {string} */
+                    let oldMacAddress = $oldMacAddress.val().toUpperCase();
+
+                    if (oldMacAddress != '') {
+                        let macAddress = response.MacAddress;
+                        let name = response.Name;
+
+                        let $container = $('#' + oldMacAddress.replaceAll(":", "-"));
+                        if (macAddress != oldMacAddress) {
+                            $container.attr('id', macAddress.replaceAll(":", "-"));
+                            $container.find('.mac-address').text(macAddress);
+                            $container.find('[data-mac-address]').data('mac-address', macAddress);
+                        }
+
+                        $container.find('.name').text(name);
+                        $container.find('[data-name]').data('name', name);
+                    } else {
+                        const $template = $(
+                            wake_on_lan_new_template
+                                .replace(/{{ .Id }}/g, response.MacAddress.replaceAll(":", "-").toUpperCase())
+                                .replace(/{{ .MacAddress }}/g, response.MacAddress.toUpperCase())
+                                .replace(/{{ .Name }}/g, response.Name)
+                        );
+
+                        $contentRow.append($template);
+                    }
+                    $modal_wake_on_lan_host.modal('hide');
+                    toastr.success('Wake on Lan Host Save successfully');
+                },
+                error: function (jqXHR, exception) {
+                    const responseJson = jQuery.parseJSON(jqXHR.responseText);
+                    toastr.error(responseJson['message']);
+
+                    if (typeof (console) != 'undefined')
+                        console.log(exception);
+                }
+            });
+
+            return false;
+        },
+        rules: {
+            name: {
+                required: true,
+            },
+            mac_address: {
+                required: true,
+                mac: true,
+            }
+        },
+        messages: {
+            name: {
+                required: "Please enter a name"
+            },
+            mac_address: {
+                required: "Please enter a Mac Address"
+            }
+        },
+        errorElement: 'span',
+        errorPlacement: function (error, element) {
+            error.addClass('invalid-feedback');
+            element.closest('.form-group').append(error);
+        },
+        highlight: function (element) {
+            $(element).addClass('is-invalid');
+        },
+        unhighlight: function (element) {
+            $(element).removeClass('is-invalid');
+        }
+    });
+
+    $modal_wake_on_lan_host.on('show.bs.modal', function (e) {
+        const $btn = $(e.relatedTarget);
+        validator.resetForm();
+        $macAddress.removeClass('is-invalid');
+
+        $name.val($btn.data('name'));
+        $macAddress.val($btn.data('mac-address'));
+        $oldMacAddress.val($btn.data('mac-address'));
+    });
+});