diff --git a/assets/js/components/_content-header.js b/assets/js/components/_content-header.js
index 424a91f1..991b0aa7 100644
--- a/assets/js/components/_content-header.js
+++ b/assets/js/components/_content-header.js
@@ -19,7 +19,7 @@ export class ContentHeader extends Component {
         }
 
         return (
-            <div className={`header d-flex justify-content-between ${splitUrl[1] === 'log-view' ? 'mt-1' : 'mt-3'}`}>
+            <div className={`header d-flex justify-content-between ${splitUrl[1] === 'log-view' ? 'pt-1' : 'pt-3'}`}>
                 <div className="title fw-bold">
                     <Icon dataFeather={iconName} className="feather-lg" />
                     <span className="align-middle ms-2">{title}</span>
diff --git a/assets/js/components/_data-table.js b/assets/js/components/_data-table.js
index c96cb453..e23833b1 100644
--- a/assets/js/components/_data-table.js
+++ b/assets/js/components/_data-table.js
@@ -6,7 +6,7 @@ export class DataTable extends Component {
         let { columns, className = "", dataTable, isSortableTable = false } = this.props;
 
         return (
-            <table className={`table table-striped table-responsive table-sortable ${isSortableTable ? 'table-sortable' : ''} ${className}`}>
+            <table className={`table bg-white mt-3 table-striped table-responsive table-sortable ${isSortableTable ? 'table-sortable' : ''} ${className}`}>
                 <thead>
                     <tr className="border-0">
                         {columns.map((item, index) => {
diff --git a/assets/js/components/_form-field.js b/assets/js/components/_form-field.js
index 416fded3..e6c9688e 100644
--- a/assets/js/components/_form-field.js
+++ b/assets/js/components/_form-field.js
@@ -1,30 +1,56 @@
 import React, {Component} from 'react';
 import {Input, Checkbox} from "./index";
-import {WidgetTable} from "./widget/_widget-table";
 import {Select2} from "./_select2";
 import {Select} from "./_select";
 import '../../styles/component/_form-field.scss';
 
+const COMPONENT_TYPE = {
+    SELECT: 'select',
+    SELECT_TYPE_AHEAD: 'selectTypeAhead',
+    CHECKBOX: 'checkbox',
+    NUMBER: 'number'
+}
+
+
 const FormFieldComponent = ({...props}) => {
     let component;
     const {type, children, checkboxlabel } = {...props};
     switch (type) {
-        case 'select':
+        case COMPONENT_TYPE.SELECT:
             component = <Select {...props} > {children} </Select>
             break;
-        case 'selectTypeAhead':
+        case COMPONENT_TYPE.SELECT_TYPE_AHEAD:
             component = <Select2 {...props} > {children} </Select2>
             break;
-        case 'checkbox':
+        case COMPONENT_TYPE.CHECKBOX:
             component = <Checkbox {...props} label={checkboxlabel} />;
             break;
         default:
-            component = <Input {...props} />;
+            component = <Input type={type} {...props} />;
             break;
     }
     return component;
 }
 
+const generateErrorMessage = (componentType) => {
+    let errorMessage = '';
+    switch (componentType) {
+        case COMPONENT_TYPE.SELECT:
+            errorMessage = 'Please select a valid value.';
+            break;
+        case COMPONENT_TYPE.SELECT_TYPE_AHEAD:
+            errorMessage = 'Please select at least one option.';
+            break;
+        case COMPONENT_TYPE.CHECKBOX:
+            errorMessage = 'Please check to this checkbox.';
+            break;
+        default:
+            errorMessage = 'Please fill out this field.';
+            break;
+    }
+    return errorMessage;
+}
+
 export class FormField extends Component {
     render() {
         const {
@@ -38,7 +64,9 @@ export class FormField extends Component {
             isMandatory = false,
             isHiddenLabel = false,
             children,
+            errorMessage,
             errors,
+            type,
             ...rest
         } = this.props;
 
@@ -51,12 +79,13 @@ export class FormField extends Component {
         }
 
         return (
-            <div key={isInvalidField} className={`form-field form-group ${className}`}>
+            <div className={`form-field form-group ${className}`}>
                 {!isHiddenLabel && <label className={isMandatory ? 'required' : ''}>{label}</label>}
                 <FormFieldComponent
                     className={isInvalidField ? 'is-invalid' : ''}
                     name={fieldName}
                     value={value}
+                    type={type}
                     onChange={(e) => {
                         if (onChange) onChange(e);
                     }}
@@ -67,7 +96,7 @@ export class FormField extends Component {
                 >
                     {children}
                 </FormFieldComponent>
-                {isInvalidField && <span className="error invalid-feedback">Please fill out this field</span>}
+                {isInvalidField && <span className="error invalid-feedback">{errorMessage || generateErrorMessage(type)}</span>}
             </div>
         );
     }
diff --git a/assets/js/components/_select.js b/assets/js/components/_select.js
index d75b4b43..717c00f0 100644
--- a/assets/js/components/_select.js
+++ b/assets/js/components/_select.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 export class Select extends Component {
     render() {
         let {className = '', hasEmpty = false, children, ...rest} = this.props;
-        className += ' form-control';
+        className += ' form-select';
 
         return (
             <select className={className} {...rest}>
diff --git a/assets/js/pages/alerts/form.js b/assets/js/pages/alerts/form.js
index 91c0e728..b71cd2d7 100644
--- a/assets/js/pages/alerts/form.js
+++ b/assets/js/pages/alerts/form.js
@@ -1,26 +1,334 @@
-import React, {Component} from "react";
-import ReactDOM from "react-dom";
-import {AlertForm, CardHeader, Link} from "../../components";
+import React, { Component } from "react";
+import { Modal, Size, Button, FormField, FilterDate } from "../../components";
+import { AlertActions } from "../../actions";
+import { DATE_RANGE, TOAST_STATUS } from "../../utils";
+
+const MANDATORY_FIELDS = [
+    "title",
+    "from_table",
+    "query",
+    "threshold",
+    "interval_time",
+    "email",
+    "subject",
+];
+
+const DEFAULT_ALERT = {
+    id: "",
+    title: "",
+    from_table: "",
+    query: "",
+    threshold: "",
+    interval_time: "60",
+    email: "",
+    subject: "",
+    isActive: "0",
+    time_range: {
+        from: DATE_RANGE[0].from,
+        to: DATE_RANGE[0].to,
+        label: DATE_RANGE[0].label,
+    },
+};
+
+export class AlertFormModal extends Component {
+    constructor(props) {
+        super(props);
+
+        this.filterDateRef = React.createRef();
+
+        this.state = {
+            data: DEFAULT_ALERT,
+            isLoading: false,
+            errors: [],
+        };
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        const { editAlertIndex, alertList } = props;
+        const { data, errors } = state;
+
+        const alertElement =
+            parseInt(editAlertIndex) >= 0 ? alertList[editAlertIndex] : DEFAULT_ALERT;
+
+        let newData = { ...data };
+        let newErrors = [...errors];
+
+        if (alertElement.id !== data.id) {
+            if (alertElement.id === null) {
+                newData = DEFAULT_ALERT;
+            } else {
+                newData = { ...alertElement };
+                let dateRange = newData.time_range;
+                if (dateRange.label !== "Custom Range") {
+                    const dateRangeValue = DATE_RANGE.find(
+                        (item) => item.label === dateRange.label
+                    );
+                    if (dateRangeValue) {
+                        dateRange = { ...dateRangeValue };
+                    }
+                } else {
+                    dateRange.from = moment.unix(parseInt(dateRange.from));
+                    dateRange.to = moment.unix(parseInt(dateRange.to));
+                }
+                newData["time_range"] = dateRange;
+            }
+            newErrors = [];
+        }
+
+        return {
+            data: { ...newData },
+            errors: newErrors,
+        };
+    }
+
+    onChangeField = ({ name, value }) => {
+        this.setState((preState) => {
+            const { errors, data } = preState;
+            let newErrors = [...errors];
+            if (MANDATORY_FIELDS.includes(name)) {
+                newErrors = newErrors.filter((item) => item !== name);
+                if (!value) newErrors.push(name);
+            }
+            return {
+                data: {
+                    ...data,
+                    [name]: value,
+                },
+                errors: newErrors,
+            };
+        });
+    };
+
+    onChangeFilter = async (from, to, dateRange) => {
+        this.onChangeField({name: 'time_range', value: dateRange})
+    };
+
+    onSubmit = () => {
+        this.setState({
+            isLoading: true,
+        });
+        const { data } = this.state;
+
+        let payloadData = { ...data };
+
+        const { onSubmitAlertData } = this.props;
+
+        const errors = MANDATORY_FIELDS.filter((item) => {
+            if (!payloadData[item]) return true;
+            return false;
+        });
+
+        if (errors.length > 0) {
+            this.setState({
+                errors,
+                isLoading: false,
+            });
+            return;
+        }
+
+        const { time_range } = data;
+
+        this.setState({ isLoading: true, errors });
+        const label = time_range?.label;
+        let from = time_range?.from;
+        let to = time_range?.to;
+
+        if (typeof from === "object") {
+            from = from.unix();
+        }
+
+        if (typeof to === "object") {
+            to = to.unix();
+        }
+
+        payloadData["time_range"] = `${label}|${from}|${to}`;
+
+        let toastContent = {};
+
+        AlertActions.createOrUpdate(payloadData?.id, payloadData)
+            .then((response) => {
+                if (response.error === 1) {
+                    payloadData["time_range"] = time_range;
+                    this.setState({ errors: response.fields, data });
+                } else {
+                    toastContent = {
+                        color: TOAST_STATUS.success,
+                        message: `${data.id ? "Update" : "Create"} alert successful`,
+                    };
+                    payloadData.id = response.id;
+                }
+            })
+            .catch((e) => {
+                toastContent = {
+                    color: TOAST_STATUS.failed,
+                    message: `${data.id ? "Update" : "Create"} alert failed.`,
+                };
+            })
+            .finally(() => {
+                this.setState({
+                    data: payloadData,
+                    isLoading: false,
+                });
+                onSubmitAlertData(toastContent);
+            });
+    };
 
-class AlertFormPage extends Component {
     render() {
-        let {alertId} = this.props
+        const { isShow, onHidden, tableList } = this.props;
+        const { data, errors, isLoading } = this.state;
+
+        const {
+            id,
+            title,
+            from_table,
+            query,
+            threshold,
+            interval_time,
+            email,
+            subject,
+            isActive,
+            time_range,
+        } = data;
 
         return (
-            <>
-                <div className="card">
-                    <CardHeader title={alertId? 'Update Alert' : 'Create new Alert'} showCollapseButton={false}
-                                showRemoveButton={false}>
-                    </CardHeader>
-                    <div className="card-body">
-                        <AlertForm alertId={alertId}/>
+            <Modal
+                id={`alert-form-${id || "create"}`}
+                size={Size.medium}
+                title={`${id ? "Update" : "Create new"} alert`}
+                showCloseButton={false}
+                show={isShow}
+                isPositionCenter={true}
+                onHidden={() => {
+                    onHidden();
+                    this.setState({
+                        data: DEFAULT_ALERT,
+                        errors: [],
+                    });
+                }}
+            >
+                <form role="form" className="mx-4">
+                    <FormField
+                        className="mb-3"
+                        label="Title"
+                        value={title}
+                        placeholder="New alert"
+                        fieldName="title"
+                        onChange={(e) => this.onChangeField(e.target)}
+                        isMandatory={MANDATORY_FIELDS.includes("title")}
+                        errors={errors}
+                    />
+                    <FormField
+                        className="mb-3"
+                        value={from_table}
+                        label="Select table"
+                        fieldName="from_table"
+                        onChange={(e) => this.onChangeField(e.target)}
+                        isMandatory={MANDATORY_FIELDS.includes("from_table")}
+                        type="select"
+                        errors={errors}
+                    >
+                        <option value="">Select table</option>
+                        {tableList.map((table, key) => (
+                            <option key={key} value={table}>
+                                {table}
+                            </option>
+                        ))}
+                    </FormField>
+                    <FormField
+                        className="mb-3"
+                        label="Criteria to search for in sql mode"
+                        value={query}
+                        placeholder="..."
+                        fieldName="query"
+                        onChange={(e) => this.onChangeField(e.target)}
+                        isMandatory={MANDATORY_FIELDS.includes("query")}
+                        errors={errors}
+                    />
+                    <div className="row mb-3">
+                        <div className="col">
+                            <FormField
+                                label="Limit for alert"
+                                value={threshold}
+                                fieldName="threshold"
+                                type="number"
+                                min="0"
+                                onChange={(e) => this.onChangeField(e.target)}
+                                isMandatory={MANDATORY_FIELDS.includes("threshold")}
+                                errors={errors}
+                            />
+                        </div>
+                        <div className="col">
+                            <FormField
+                                label="Check interval in minutes"
+                                value={interval_time}
+                                type="number"
+                                min="0"
+                                fieldName="interval_time"
+                                onChange={(e) => this.onChangeField(e.target)}
+                                isMandatory={MANDATORY_FIELDS.includes("interval_time")}
+                                errors={errors}
+                            />
+                        </div>
+                    </div>
+                    <div className={`form-group mb-3` + (errors?.time_range ? "is-invalid" : "")}>
+                        <label>Time Range</label>
+                        <FilterDate
+                            ref={this.filterDateRef}
+                            dateRange={time_range}
+                            onDateRangeChanged={this.onChangeFilter}
+                        />
+                        {errors?.time_range && (
+                            <span className="error invalid-feedback">{errors.time_range}</span>
+                        )}
                     </div>
-                </div>
-            </>
-        )
+
+                    <FormField
+                        className="mb-3"
+                        label="Email Address"
+                        value={email}
+                        fieldName="email"
+                        onChange={(e) => this.onChangeField(e.target)}
+                        isMandatory={MANDATORY_FIELDS.includes("email")}
+                        errors={errors}
+                    />
+                    <FormField
+                        className="mb-3"
+                        label="Email Subject"
+                        value={subject}
+                        fieldName="subject"
+                        onChange={(e) => this.onChangeField(e.target)}
+                        isMandatory={MANDATORY_FIELDS.includes("subject")}
+                        errors={errors}
+                    />
+                    <FormField
+                        id="active"
+                        className="mb-3"
+                        type="checkbox"
+                        isHiddenLabel={true}
+                        checkboxlabel="Active"
+                        checked={!!parseInt(isActive)}
+                        value={isActive}
+                        fieldName="isActive"
+                        onChange={(e) => {
+                            const { name, checked } = e.target;
+                            this.onChangeField({ name, value: checked ? "1" : "0" });
+                        }}
+                        isMandatory={MANDATORY_FIELDS.includes("isAdmin")}
+                        errors={errors}
+                    />
+                    <div className="form-group">
+                        <Button
+                            isLoading={isLoading}
+                            type="button"
+                            className="btn-block w-100"
+                            disabled={errors.length > 0}
+                            onClick={this.onSubmit}
+                        >
+                            Save Alert
+                        </Button>
+                    </div>
+                </form>
+            </Modal>
+        );
     }
 }
-
-const root = document.querySelector('#root')
-
-ReactDOM.render(<AlertFormPage {...root.dataset}/>, root);
diff --git a/assets/js/pages/alerts/list.js b/assets/js/pages/alerts/list.js
index 0db04f88..32ff01fc 100644
--- a/assets/js/pages/alerts/list.js
+++ b/assets/js/pages/alerts/list.js
@@ -1,169 +1,262 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
 import ReactDOM from "react-dom";
-import {Button, CardHeader, Icon, Link, Modal, Size} from "../../components";
-import {Alert, AlertActions, GraphActions} from "../../actions";
-import {Table} from "../../components/_table";
+import { Button, Icon, DeleteModal, ContentHeader, DataTable, Toast } from "../../components";
+import { AlertActions, DatabaseActions } from "../../actions";
+import { TOAST_STATUS } from "../../utils";
+import { AlertFormModal } from "./form";
 
 class AlertList extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            data: [],
-            deletingAlert: null,
+            alertList: [],
+            tableList: [],
+            toastContent: {},
+            deleteAlertIndex: null,
+            isShowAlertDetailForm: false,
+            editAlertIndex: null,
         };
-
-        this.getData = this.getData.bind(this)
-        this.updateStatus = this.updateStatus.bind(this)
-        this.deleteAlert = this.deleteAlert.bind(this)
     }
 
-    getData() {
-        AlertActions.listAlert().then((response) => {
-            const {error, data} = response
-            const deletingAlert = null
+    getData = async () => {
+        const { tableList } = this.state;
+        const [alertRes, dataTablesRes] = await Promise.all([
+            AlertActions.listAlert(),
+            tableList.length === 0 ? DatabaseActions.getAllTable() : [],
+        ]);
 
-            if (error === 0) {
-                this.setState({data, deletingAlert})
-            }
-        })
-    }
+        if (!alertRes.error || !dataTablesRes.error) {
+            this.setState({
+                alertList: alertRes.data,
+                tableList: dataTablesRes.data || tableList,
+            });
+        }
+    };
 
     componentDidMount() {
-        this.getData()
+        this.getData();
     }
 
-    deleteAlert() {
-        const $this = this;
-        const {deletingAlert} = this.state;
+    onConfirmDeleteAlert = async () => {
+        const { deleteAlertIndex, alertList } = this.state;
 
-        if (!deletingAlert) {
+        if (parseInt(deleteAlertIndex) < 0) {
             return;
         }
 
-        AlertActions.deleteAlert(deletingAlert.id)
-            .then(res => {
-                const {error} = res;
-                if (error) {
-                    return;
-                }
+        let toastContent = {};
+
+        let newAlertList = [...alertList];
 
-                $this.getData()
-                Alert.success('Delete successful');
+        try {
+            const res = await AlertActions.deleteAlert(newAlertList[deleteAlertIndex].id);
+
+            if (res.error) {
+                toastContent = {
+                    color: TOAST_STATUS.failed,
+                    message: "Delete alert failed",
+                };
+            } else {
+                toastContent = {
+                    color: TOAST_STATUS.success,
+                    message: "Delete alert successful",
+                };
+
+                newAlertList.splice(deleteAlertIndex, 1);
+            }
+        } catch (e) {
+            toastContent = {
+                color: TOAST_STATUS.failed,
+                message: e.message,
+            };
+        } finally {
+            this.setState({
+                toastContent,
+                deleteAlertIndex: null,
+                alertList: newAlertList,
             });
-    }
+        }
+    };
 
-    updateStatus(event) {
-        const $this = this
-        const {id} = event.target.dataset
+    onChangeStatus = async (id, index, newValue) => {
+        const { alertList } = this.state;
 
-        AlertActions.updateStatus(id).then(() => {
-            $this.getData()
-        })
-    }
+        const newAlertList = [...alertList];
+
+        let toastContent = {};
+
+        const toastStr = !!parseInt(newValue) ? "Activate" : "Deactivate";
+
+        try {
+            const res = await AlertActions.updateStatus(id);
+            if (res.error) {
+                toastContent = {
+                    color: TOAST_STATUS.failed,
+                    message: `${toastStr} alert failed`,
+                };
+                return;
+            }
+            toastContent = {
+                color: TOAST_STATUS.success,
+                message: `${toastStr} alert successful`,
+            };
+
+            newAlertList[index].isActive = newValue;
+        } catch (e) {
+            toastContent = {
+                color: TOAST_STATUS.failed,
+                message: `${toastStr} alert failed`,
+            };
+        } finally {
+            this.setState({
+                toastContent,
+                alertList: newAlertList,
+            });
+        }
+    };
 
     render() {
-        const {data, deletingAlert} = this.state
+        const {
+            alertList,
+            deleteAlertIndex,
+            toastContent,
+            isShowAlertDetailForm,
+            editAlertIndex,
+            tableList,
+        } = this.state;
+
+        const columns = [
+            {
+                label: "Title",
+                dataField: "title",
+            },
+            {
+                label: "Table",
+                dataField: "from_table",
+            },
+            {
+                label: "Threshold",
+                dataField: "threshold",
+            },
+            {
+                label: "Interval (min.)",
+                dataField: "interval_time",
+            },
+            {
+                label: "Status",
+                dataField: "isActive",
+                formatter: ({ row, cell, index }) => {
+                    const value = parseInt(cell);
+                    return (
+                        <div className="form-check form-switch">
+                            <input
+                                className="form-check-input"
+                                type="checkbox"
+                                role="switch"
+                                id="isActive"
+                                defaultChecked={!!value}
+                                onChange={() =>
+                                    this.onChangeStatus(row.id, index, !value ? "1" : "0")
+                                }
+                            />
+                        </div>
+                    );
+                },
+            },
+            {
+                formatter: ({ index }) => {
+                    return (
+                        <div className="dropdown float-end">
+                            <button
+                                className="btn text-dark"
+                                id="dropdownMenuLink"
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                            >
+                                <Icon name="ellipsis-h" />
+                            </button>
+                            <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                                <li>
+                                    <Button
+                                        className="dropdown-item text-primary"
+                                        onClick={() => this.setState({ editAlertIndex: index })}
+                                    >
+                                        Edit
+                                    </Button>
+                                </li>
+                                <li>
+                                    <Button
+                                        onClick={() => this.setState({ deleteAlertIndex: index })}
+                                        className="dropdown-item text-danger"
+                                    >
+                                        Delete
+                                    </Button>
+                                </li>
+                            </ul>
+                        </div>
+                    );
+                },
+            },
+        ];
 
         return (
-            <>
-                <Modal
-                    size={Size.medium}
-                    id={'delete-alert'}
-                    title={`Deleting Alert`}
-                    showCloseButton={true}
-                    closeButtonTitle='Abort'
-                    showSaveButton={true}
-                    saveButtonTitle='OK'
-                    saveButtonColor='danger'
-                    saveButtonAction={this.deleteAlert}
-                    show={deletingAlert != null}
-                    onHidden={() => {
-                        this.setState({deletingAlert: null})
-                    }}
-                >
-                    Do you want to delete this alert "{deletingAlert?.title}"?
-                </Modal>
-                <div className="card">
-                    <CardHeader title="Alert List" showCollapseButton={false}
-                                showRemoveButton={false}>
-                        <Link href={'/alert/create'} className={'btn btn-success'}>
-                            Create Alert
-                        </Link>
-                    </CardHeader>
-                    <div className="card-body">
-                        <Table>
-                            <thead>
-                            <tr>
-                                <th>Title</th>
-                                <th>Table</th>
-                                <th>Threshold</th>
-                                <th>Interval</th>
-                                <th>Is Active</th>
-                                <th>&nbsp;</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {data && data.map((item, key) => {
-                                return (
-                                    <tr key={key}>
-                                        <td>{item.title}</td>
-                                        <td>{item.from_table}</td>
-                                        <td>{item.threshold}</td>
-                                        <td>{item.interval_time}</td>
-                                        <td>
-                                            <a href='#'
-                                               onClick={this.updateStatus}>
-                                                {
-                                                    (item.isActive === '1') ?
-                                                        <Icon className="text-success"
-                                                              data-id={item.id}
-                                                              name='check-circle'/> :
-                                                        <Icon className="text-danger"
-                                                              data-id={item.id}
-                                                              name='times-circle'/>
-                                                }
-                                            </a>
-                                        </td>
-                                        <td>
-                                            <Link href={`/alert/${item.id}`}
-                                                  className={'btn btn-success btn-sm me-2'}>
-                                                <Icon name={'edit'}/>
-                                            </Link>
-                                            <Link
-                                                onClick={this.updateStatus}
-                                                className={`btn btn-sm me-2 ${(item.isActive === '1'? 'btn-primary' : 'btn-warning')}`}
-                                                data-id={item.id}>
-                                                {(item.isActive === '1') ?
-                                                    <Icon data-id={item.id}
-                                                          name='check-circle'/> :
-                                                    <Icon data-id={item.id}
-                                                          name='times-circle'/>}
-                                            </Link>
-                                            <Button
-                                                onClick={e => this.setState({deletingAlert: item})}
-                                                className="btn-sm"
-                                                color={'danger'}>
-                                                <Icon name={'trash'}/>
-                                            </Button>
-                                        </td>
-                                    </tr>
-                                )
-                            })}
-                            {data.length < 1 && <tr>
-                                <td colSpan={6}>
-                                    <p>
-                                        No Alert found
-                                    </p>
-                                </td>
-                            </tr>}
-                            </tbody>
-                        </Table>
-                    </div>
+            <div className="alert container-fluid" style={{ backgroundColor: "#F8F9FA" }}>
+                <div className="content ms-2 me-2">
+                    <ContentHeader
+                        iconName="alert-triangle"
+                        actionButtonTitle="Create Alert"
+                        actionButtonIcon="plus"
+                        onClickActionBtn={() => {
+                            this.setState({ isShowAlertDetailForm: true });
+                        }}
+                    />
+                    <Toast
+                        toastContent={toastContent}
+                        onToastClosed={() => {
+                            this.setState({ toastContent: {} });
+                        }}
+                    />
+                    {alertList && alertList.length > 0 ? (
+                        <DataTable columns={columns} dataTable={alertList} className="bg-white" />
+                    ) : (
+                        <div className="d-flex justify-content-center">No alert found</div>
+                    )}
+                    <DeleteModal
+                        data={alertList}
+                        indexSelected={deleteAlertIndex}
+                        objectName="alert"
+                        displayField="title"
+                        closeButtonAction={() => {
+                            this.setState({
+                                deleteAlertIndex: null,
+                            });
+                        }}
+                        saveButtonAction={() => this.onConfirmDeleteAlert()}
+                    />
+                    <AlertFormModal
+                        isShow={isShowAlertDetailForm || parseInt(editAlertIndex) >= 0}
+                        alertList={alertList}
+                        editAlertIndex={editAlertIndex}
+                        tableList={tableList}
+                        onSubmitAlertData={(toastContent) => {
+                            this.getData();
+                            this.setState({
+                                isShowAlertDetailForm: false,
+                                editAlertIndex: null,
+                                toastContent,
+                            });
+                        }}
+                        onHidden={() => {
+                            this.setState({
+                                isShowAlertDetailForm: false,
+                                editAlertIndex: null,
+                            });
+                        }}
+                    />
                 </div>
-            </>
-        )
+            </div>
+        );
     }
 }
 
-ReactDOM.render(<AlertList/>, document.querySelector('#root'));
-
+ReactDOM.render(<AlertList />, document.querySelector("#root"));
diff --git a/assets/js/utils.js b/assets/js/utils.js
index 0ccfc49d..d01146c5 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -3,7 +3,8 @@ import moment from "moment";
 export const PAGE_NAME = {
     dashboard: 'Dashboard',
     table: 'Table',
-    user: 'Users'
+    user: 'Users',
+    alert: 'Alert'
 };
 
 export const TOAST_STATUS = {
diff --git a/assets/styles/_logexplorer.scss b/assets/styles/_logexplorer.scss
index 86c3cd46..349e0f7b 100644
--- a/assets/styles/_logexplorer.scss
+++ b/assets/styles/_logexplorer.scss
@@ -3,6 +3,12 @@
   background: transparent linear-gradient(241deg, var(--bs-primary) 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
 }
 
+.content-wrapper {
+  background-color: #F8F9FA;
+  max-height: 100vh;
+  overflow: auto;
+}
+
 .wrapper {
   width: calc(100% - 254px);
   min-height: 100vh;
diff --git a/templates/alert/form.html.twig b/templates/alert/form.html.twig
deleted file mode 100644
index 61838895..00000000
--- a/templates/alert/form.html.twig
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}{% if alert is defined %}Update{% else %}Create{% endif %} alert{% endblock %}
-
-{% block stylesheets %}
-    {{ encore_entry_link_tags('alerts_form') }}
-{% endblock %}
-
-{% block body %}
-    <div id="root"
-        {% if alert is defined %}
-            data-alert-id="{{ alert.id }}"
-        {% endif %}
-    ></div>
-{% endblock %}
-
-{% block javascripts %}
-    {{ encore_entry_script_tags('alerts_form') }}
-{% endblock %}
-
diff --git a/webpack.config.js b/webpack.config.js
index a5866ebb..0deeab99 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -68,7 +68,6 @@ Encore
 	.addEntry('widget_form', './assets/js/pages/widget/form.js')
   .addEntry('dashboard-page', './assets/js/pages/index/dashboard.js')
   .addEntry('alerts_list', './assets/js/pages/alerts/list.js')
-  .addEntry('alerts_form', './assets/js/pages/alerts/form.js')
   .addEntry('export_list', './assets/js/pages/export/list.js')
 // .addEntry('page1', './assets/page1.js')
 // .addEntry('page2', './assets/page2.js')