diff --git a/plugins/endpoints/frontend/views/ServerCertSettings.vue b/plugins/endpoints/frontend/views/ServerCertSettings.vue
index e8a53a7d..2262f218 100644
--- a/plugins/endpoints/frontend/views/ServerCertSettings.vue
+++ b/plugins/endpoints/frontend/views/ServerCertSettings.vue
@@ -268,158 +268,148 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'ServerCertSettings',
-  data() {
-    return {
-      loading: false,
-      busy: false,
-      message: '',
-      error: '',
-      cert: null,
-      thumbprintCopied: false,
-      generateForm: {
-        cn: 'localhost',
-        san: 'DNS:localhost,IP:192.168.100.1',
-        days: 365
-      },
-      uploadForm: {
-        certFile: null,
-        keyFile: null
-      }
-    }
-  },
-  mounted() {
-    this.loadCertificate()
-  },
-  methods: {
-    async loadCertificate() {
-      this.loading = true
-      this.error = ''
-      try {
-        const response = await fetch('/api/endpoints/settings/server-cert')
-        const data = await response.json()
-        if (data.status === 'success') {
-          this.cert = data.data
-        } else {
-          this.error = data.data?.error?.message || 'Failed to load certificate'
-        }
-      } catch (err) {
-        this.error = `Failed to load certificate: ${err.message}`
-      } finally {
-        this.loading = false
-      }
-    },
-
-    async generateCertificate() {
-      if (!this.generateForm.cn) {
-        this.error = 'Common Name is required'
-        return
-      }
-
-      if (!confirm(
-        'Generate a new self-signed certificate? This will replace the current certificate. ' +
-        'Agents using thumbprint pinning will need to be reconfigured.'
-      )) {
-        return
-      }
-
-      this.busy = true
-      this.error = ''
-      this.message = ''
-
-      try {
-        const response = await fetch('/api/endpoints/settings/server-cert/generate', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(this.generateForm)
-        })
-
-        const data = await response.json()
-
-        if (data.status === 'success') {
-          this.message = 'Certificate generated successfully. Nginx is restarting...'
-          await this.loadCertificate()
-        } else {
-          this.error = data.data?.error?.message || 'Failed to generate certificate'
-        }
-      } catch (err) {
-        this.error = `Failed to generate certificate: ${err.message}`
-      } finally {
-        this.busy = false
-      }
-    },
-
-    onCertFileChange(event) {
-      this.uploadForm.certFile = event.target.files[0]
-    },
-
-    onKeyFileChange(event) {
-      this.uploadForm.keyFile = event.target.files[0]
-    },
-
-    async uploadCertificate() {
-      if (!this.uploadForm.certFile || !this.uploadForm.keyFile) {
-        this.error = 'Both certificate and private key files are required'
-        return
-      }
-
-      if (!confirm(
-        'Upload new certificate? This will replace the current certificate and restart nginx.'
-      )) {
-        return
-      }
-
-      this.busy = true
-      this.error = ''
-      this.message = ''
-
-      try {
-        const formData = new FormData()
-        formData.append('cert', this.uploadForm.certFile)
-        formData.append('key', this.uploadForm.keyFile)
-
-        const response = await fetch('/api/endpoints/settings/server-cert/upload', {
-          method: 'POST',
-          body: formData
-        })
-
-        const data = await response.json()
-
-        if (data.status === 'success') {
-          this.message = 'Certificate uploaded successfully. Nginx is restarting...'
-          await this.loadCertificate()
-          // Clear file inputs
-          document.getElementById('cert-file').value = ''
-          document.getElementById('key-file').value = ''
-          this.uploadForm.certFile = null
-          this.uploadForm.keyFile = null
-        } else {
-          this.error = data.data?.error?.message || 'Failed to upload certificate'
-        }
-      } catch (err) {
-        this.error = `Failed to upload certificate: ${err.message}`
-      } finally {
-        this.busy = false
-      }
-    },
-
-    copyThumbprint() {
-      navigator.clipboard.writeText(this.cert.thumbprint)
-      this.thumbprintCopied = true
-      setTimeout(() => {
-        this.thumbprintCopied = false
-      }, 2000)
-    },
-
-    formatDate(dateString) {
-      if (!dateString) return 'N/A'
-      const date = new Date(dateString)
-      return date.toLocaleString()
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '@/api'
+
+const loading = ref(false)
+const busy = ref(false)
+const message = ref('')
+const error = ref('')
+const cert = ref(null)
+const thumbprintCopied = ref(false)
+
+const generateForm = ref({
+  cn: 'localhost',
+  san: 'DNS:localhost,IP:192.168.100.1',
+  days: 365
+})
+
+const uploadForm = ref({
+  certFile: null,
+  keyFile: null
+})
+
+onMounted(() => {
+  loadCertificate()
+})
+
+async function loadCertificate() {
+  loading.value = true
+  error.value = ''
+  try {
+    const response = await api.get('/endpoints/settings/server-cert')
+    if (response.data.status === 'success') {
+      cert.value = response.data.data
+    } else {
+      error.value = response.data.data?.error?.message || 'Failed to load certificate'
     }
+  } catch (err) {
+    error.value = `Failed to load certificate: ${err.message}`
+  } finally {
+    loading.value = false
   }
 }
+
+async function generateCertificate() {
+  if (!generateForm.value.cn) {
+    error.value = 'Common Name is required'
+    return
+  }
+
+  if (!confirm(
+    'Generate a new self-signed certificate? This will replace the current certificate. ' +
+    'Agents using thumbprint pinning will need to be reconfigured.'
+  )) {
+    return
+  }
+
+  busy.value = true
+  error.value = ''
+  message.value = ''
+
+  try {
+    const response = await api.post('/endpoints/settings/server-cert/generate', generateForm.value)
+
+    if (response.data.status === 'success') {
+      message.value = 'Certificate generated successfully. Nginx is restarting...'
+      await loadCertificate()
+    } else {
+      error.value = response.data.data?.error?.message || 'Failed to generate certificate'
+    }
+  } catch (err) {
+    error.value = `Failed to generate certificate: ${err.message}`
+  } finally {
+    busy.value = false
+  }
+}
+
+function onCertFileChange(event) {
+  uploadForm.value.certFile = event.target.files[0]
+}
+
+function onKeyFileChange(event) {
+  uploadForm.value.keyFile = event.target.files[0]
+}
+
+async function uploadCertificate() {
+  if (!uploadForm.value.certFile || !uploadForm.value.keyFile) {
+    error.value = 'Both certificate and private key files are required'
+    return
+  }
+
+  if (!confirm(
+    'Upload new certificate? This will replace the current certificate and restart nginx.'
+  )) {
+    return
+  }
+
+  busy.value = true
+  error.value = ''
+  message.value = ''
+
+  try {
+    const formData = new FormData()
+    formData.append('cert', uploadForm.value.certFile)
+    formData.append('key', uploadForm.value.keyFile)
+
+    const response = await api.post('/endpoints/settings/server-cert/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+
+    if (response.data.status === 'success') {
+      message.value = 'Certificate uploaded successfully. Nginx is restarting...'
+      await loadCertificate()
+      // Clear file inputs
+      document.getElementById('cert-file').value = ''
+      document.getElementById('key-file').value = ''
+      uploadForm.value.certFile = null
+      uploadForm.value.keyFile = null
+    } else {
+      error.value = response.data.data?.error?.message || 'Failed to upload certificate'
+    }
+  } catch (err) {
+    error.value = `Failed to upload certificate: ${err.message}`
+  } finally {
+    busy.value = false
+  }
+}
+
+function copyThumbprint() {
+  navigator.clipboard.writeText(cert.value.thumbprint)
+  thumbprintCopied.value = true
+  setTimeout(() => {
+    thumbprintCopied.value = false
+  }, 2000)
+}
+
+function formatDate(dateString) {
+  if (!dateString) return 'N/A'
+  const date = new Date(dateString)
+  return date.toLocaleString()
+}
 </script>
 
 <style scoped>