diff --git a/resource/static/main.css b/resource/static/main.css
index bd3f0c3..4180272 100644
--- a/resource/static/main.css
+++ b/resource/static/main.css
@@ -752,6 +752,10 @@ i.fa-solid.fa-sliders.icon {
     color: #2196f3 !important;
 }
 
+i.icon.outline {
+    color: #ff5722 !important;
+}
+
 .nb-container {
     padding-top: 75px;
     min-height: 100vh;
diff --git a/resource/template/common/footer.html b/resource/template/common/footer.html
index ac78b19..4bb7951 100644
--- a/resource/template/common/footer.html
+++ b/resource/template/common/footer.html
@@ -1,7 +1,7 @@
 {{define "common/footer"}}
 <div class="ui inverted vertical footer segment">
     <div class="ui center aligned is-size-7 container">
-        <b>&copy; 2023 <a style="color:#4caf50;" href="/">{{.Conf.Site.Brand}}</a></b> | <a href="http://www.nange.cn"
+        <b>&copy; 2024 <a style="color:#4caf50;" href="/">{{.Conf.Site.Brand}}</a></b> | <a href="http://www.nange.cn"
                 style="color: #4caf50;" target="_blank" >楠格</a>
     </div>
 </div>
@@ -9,7 +9,7 @@
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.4.1/semantic.min.js"></script>
 <script src="static/semantic-ui-alerts.min.js?v20220423"></script>
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
-<script src="static/main.js?v20221003"></script>
+<script src="static/main.js?v20240208"></script>
 <script src="static/wallpaper.js?v20220423"></script>
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/clipboard.js/2.0.6/clipboard.min.js"></script>
 <script>
diff --git a/resource/template/common/header.html b/resource/template/common/header.html
index 516272d..13a6b92 100644
--- a/resource/template/common/header.html
+++ b/resource/template/common/header.html
@@ -20,7 +20,7 @@
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-logos/0.17/font-logos.min.css" rel="stylesheet">
     <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/flag-icon-css/4.1.5/css/flag-icons.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="static/semantic-ui-alerts.min.css?v20220423">
-    <link rel="stylesheet" type="text/css" href="static/main.css?v20230210">
+    <link rel="stylesheet" type="text/css" href="static/main.css?v2024020812">
     <link rel="shortcut icon" type="image/png" href="static/logo.svg?v20220602" />
 </head>
 <body id="bg">
diff --git a/resource/template/common/menu.html b/resource/template/common/menu.html
index d20ad38..3746996 100644
--- a/resource/template/common/menu.html
+++ b/resource/template/common/menu.html
@@ -11,7 +11,7 @@
         </a>
         {{else}}
         <a class="item" href="http://status.nange.cn/" target="_blank"><i class="server icon"></i>{{tr "Services"}}</a>
-        <a class='item{{if eq .MatchedPath "/network"}} active{{end}}' href="/network"><i class="bi bi-hdd-network icon"></i>{{tr "NetworkStatus"}}</a>
+        <a class='item{{if eq .MatchedPath "/network"}} active{{end}}' href="/network"><i class="dot circle outline icon"></i>{{tr "NetworkStatus"}}</a>
         {{end}}
         <div class="right menu">
             <div class="item">
diff --git a/resource/template/common/network.html b/resource/template/common/network.html
index c53f286..3f30fae 100644
--- a/resource/template/common/network.html
+++ b/resource/template/common/network.html
@@ -17,7 +17,7 @@
     </div>
 </div>
 
-{{template "theme-custom/footer" .}}
+{{template "common/footer" .}}
 <script>
         const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
         const initData = JSON.parse('{{.Servers}}').servers;
diff --git a/resource/template/component/monitor.html b/resource/template/component/monitor.html
new file mode 100644
index 0000000..9edc18c
--- /dev/null
+++ b/resource/template/component/monitor.html
@@ -0,0 +1,110 @@
+{{define "component/monitor"}}
+<div class="ui tiny monitor modal transition hidden">
+  <div class="header">{{tr "AddMonitor"}}</div>
+  <div class="content">
+    <form id="monitorForm" class="ui form">
+      <input type="hidden" name="ID" />
+      <div class="field">
+        <label>{{tr "Name"}}</label>
+        <input type="text" name="Name" placeholder="{{tr "Blog"}}" />
+      </div>
+      <div class="field">
+        <label>{{tr "Target"}}</label>
+        <input
+          type="text"
+          name="Target"
+          placeholder=""
+        />
+      </div>
+      <div class="field">
+        <label>{{tr "Type"}}</label>
+        <select name="Type" class="ui fluid dropdown">
+          <option value="1">TCP-Ping</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>{{tr "Duration"}}</label>
+        <input type="number" name="Duration" placeholder="{{tr "Seconds"}}" />
+      </div>
+      <div class="field">
+        <label>{{tr "Coverage"}}</label>
+        <select name="Cover" class="ui fluid dropdown">
+          <option value="0">{{tr "AllIncludedOnlySpecificServersAreNotRequest"}}</option>
+          <option value="1">{{tr "IgnoreAllRequestOnlyThroughSpecificServers"}}</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>{{tr "SpecificServers"}}</label>
+        <div class="ui fluid multiple servers search selection dropdown">
+          <input type="hidden" name="SkipServersRaw" />
+          <i class="dropdown icon specificServer"></i>
+          <div class="default text">{{tr "EnterIdAndNameToSearch"}}</div>
+          <div class="menu"></div>
+        </div>
+      </div>
+      <div class="field">
+        <label>{{tr "NotificationMethodGroup"}}</label>
+        <input type="text" name="NotificationTag" placeholder="default" />
+      </div>
+      <div class="field">
+        <div class="ui nb-notify checkbox">
+          <input name="Notify" type="checkbox" tabindex="0" class="hidden" />
+          <label>{{tr "EnableFailureNotification"}}</label>
+        </div>
+      </div>
+      <div class="field">
+        <label>{{tr "MaxLatency"}}</label>
+        <input type="number" name="MaxLatency" placeholder="100.88" />
+      </div>
+      <div class="field">
+        <label>{{tr "MinLatency"}}</label>
+        <input type="number" name="MinLatency" placeholder="100.88" />
+      </div>
+      <div class="field">
+        <div class="ui nb-lt-notify checkbox">
+          <input name="LatencyNotify" type="checkbox" tabindex="0" class="hidden" />
+          <label>{{tr "EnableLatencyNotification"}}</label>
+        </div>
+      </div>
+
+      <div class="field">
+        <div class="ui nb-EnableTriggerTask checkbox">
+          <input name="EnableTriggerTask" type="checkbox" tabindex="0" class="hidden" />
+          <label>{{tr "EnableTriggerTask"}}</label>
+        </div>
+      </div>
+
+      <div class="field">
+        <label>{{tr "FailTriggerTasks"}}</label>
+        <div class="ui fluid multiple tasks search selection dropdown">
+          <input type="hidden" name="FailTriggerTasksRaw">
+          <i class="dropdown icon failTask"></i>
+          <div class="default text">{{tr "EnterIdAndNameToSearch"}}</div>
+          <div class="menu"></div>
+        </div>
+      </div>
+      <div class="field">
+        <label>{{tr "RecoverTriggerTasks"}}</label>
+        <div class="ui fluid multiple tasks search selection dropdown">
+          <input type="hidden" name="RecoverTriggerTasksRaw">
+          <i class="dropdown icon recoverTask"></i>
+          <div class="default text">{{tr "EnterIdAndNameToSearch"}}</div>
+          <div class="menu"></div>
+        </div>
+      </div>
+
+    </form>
+    <div class="ui warning message">
+      <p>
+        {{safe (tr "IntroductionOfMonitor")}}
+      </p>
+    </div>
+  </div>
+  <div class="actions">
+    <div class="ui negative button">{{tr "Cancel"}}</div>
+    <button class="ui positive server-primary-btn right labeled icon button">
+      {{tr "Confirm"}}<i class="checkmark icon"></i>
+    </button>
+  </div>
+</div>
+{{end}}
diff --git a/resource/template/dashboard-default/monitor.html b/resource/template/dashboard-default/monitor.html
new file mode 100644
index 0000000..f5378f6
--- /dev/null
+++ b/resource/template/dashboard-default/monitor.html
@@ -0,0 +1,71 @@
+{{define "dashboard-default/monitor"}} {{template "common/header" .}}
+{{template "common/menu" .}}
+<div class="nb-container">
+  <div class="ui container">
+    <div class="ui grid">
+      <div class="right floated right aligned twelve wide column">
+        <button class="ui right labeled server-primary-btn icon button" onclick="addOrEditMonitor()">
+          <i class="add icon"></i> {{tr "AddMonitor"}}
+        </button>
+      </div>
+    </div>
+    <table class="ui very basic table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>{{tr "Name"}}</th>
+          <th>{{tr "Target"}}</th>
+          <th>{{tr "Coverage"}}</th>
+          <th>{{tr "SpecificServers"}}</th>
+          <th>{{tr "Type"}}</th>
+          <th>{{tr "Duration"}}</th>
+          <th>{{tr "NotificationMethodGroup"}}</th>
+          <th>{{tr "FailureNotification"}}</th>
+          <th>{{tr "LatencyNotification"}}</th>
+          <th>{{tr "EnableTriggerTask"}}</th>
+          <th>{{tr "FailTriggerTasks"}}</th>
+          <th>{{tr "RecoverTriggerTasks"}}</th>
+          <th>{{tr "Administration"}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{range $monitor := .Monitors}}
+        <tr>
+          <td>{{$monitor.ID}}</td>
+          <td>{{$monitor.Name}}</td>
+          <td>{{$monitor.Target}}</td>
+          <td>{{if eq $monitor.Cover 0}}{{tr "CoverAll"}}{{else}}{{tr "IgnoreAll"}}{{end}}</td>
+          <td>{{$monitor.SkipServersRaw}}</td>
+          <td>
+            {{if eq $monitor.Type 1}}{{tr "SSLCertificate"}} {{else if eq $monitor.Type
+            2}} ICMP Ping {{else}} {{tr "TCPPort"}} {{end}}
+          </td>
+          <td>{{$monitor.Duration}} {{tr "Seconds"}}</td>
+          <td>{{$monitor.NotificationTag}}</td>
+          <td>{{$monitor.Notify}}</td>
+          <td>{{$monitor.LatencyNotify}}</td>
+          <td>{{$monitor.EnableTriggerTask}}</td>
+          <td>{{$monitor.FailTriggerTasksRaw}}</td>
+          <td>{{$monitor.RecoverTriggerTasksRaw}}</td>
+          <td>
+            <div class="ui mini icon buttons">
+              <button class="ui button" onclick="addOrEditMonitor({{$monitor}})">
+                <i class="edit icon"></i>
+              </button>
+              <button class="ui button"
+                onclick="showConfirm('{{tr "DeleteService"}}','{{tr "ConfirmToDeleteThisService"}}',deleteRequest,'/api/monitor/'+{{$monitor.ID}})">
+                <i class="trash alternate outline icon"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+        {{end}}
+      </tbody>
+    </table>
+  </div>
+</div>
+{{template "component/monitor"}} {{template "common/footer" .}}
+<script>
+  $(".checkbox").checkbox();
+</script>
+{{end}}
\ No newline at end of file
