diff --git a/resources/js/components/ServerStatus.vue b/resources/js/components/ServerStatus.vue
new file mode 100644
index 0000000..23599f6
--- /dev/null
+++ b/resources/js/components/ServerStatus.vue
@@ -0,0 +1,32 @@
+<template>
+    <span v-if="status === 'up'"
+          class="text-success">
+
+            正常
+    </span>
+
+    <span v-else-if="status === 'down'"
+          class="text-danger">
+            离线
+    </span>
+
+    <span v-else-if="status === 'maintenance'"
+          class="text-warning">
+            维护
+
+    </span>
+
+</template>
+
+<script setup>
+
+
+defineProps({
+    status: {
+        type: String,
+        required: true
+    }
+})
+
+
+</script>
diff --git a/resources/js/views/Servers/Index.vue b/resources/js/views/Servers/Index.vue
index 2664975..fbea4de 100644
--- a/resources/js/views/Servers/Index.vue
+++ b/resources/js/views/Servers/Index.vue
@@ -13,7 +13,9 @@
             }" class="list-group-item list-group-item-action" aria-current="true">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">{{ server.name }}</h5>
-                       <small>{{ server.status }}</small>
+                       <small>
+                            <server-status :status="server.status"></server-status>
+                       </small>
                    </div>
                    <p class="mb-1">
                        <span class="badge bg-primary" v-show="server.allow_http">HTTP</span>
@@ -36,6 +38,7 @@
 <script setup>
 import {ref} from 'vue'
 import http from '../../plugins/http'
+import ServerStatus from "../../components/ServerStatus.vue";
 
 
 const servers = ref([{