diff --git a/frontend/app/composables/useServers.ts b/frontend/app/composables/useServers.ts
index 63408e9..d6bc3cc 100644
--- a/frontend/app/composables/useServers.ts
+++ b/frontend/app/composables/useServers.ts
@@ -24,10 +24,37 @@ export function useServers() {
     return result
   }
 
+  async function createServer(hostname: string, description: string, owner_id: number | null) {
+    const payload = {
+                hostname: hostname,
+                description: description,
+                owner_id: owner_id
+            }
+    loading.value = true
+    error.value = ""
+
+    const result = await apiFetch("/servers", {
+      method: "POST",
+      body: payload
+    })
+
+    if (isUnauthorized(result)) {
+      loading.value = false
+      return result
+    }
+
+    // Optional: direkt in die Liste einfügen
+    servers.value.push(result)
+
+    loading.value = false
+    return result
+  }
+
   return {
     servers,
     loading,
     error,
-    loadServers
+    loadServers,
+    createServer
   }
 }
diff --git a/frontend/app/pages/servers/index.vue b/frontend/app/pages/servers/index.vue
index f4c51be..ce32284 100644
--- a/frontend/app/pages/servers/index.vue
+++ b/frontend/app/pages/servers/index.vue
@@ -8,7 +8,7 @@ import { ref, onMounted } from "vue"
 import { isUnauthorized } from "~/utils/auth"
 
 const { apiFetch } = useApi()
-const { servers, loadServers } = useServers()
+const { servers, loadServers, createServer } = useServers()
 const { owners, loadOwners } = useOwners()
 
 const newServer = ref({
@@ -65,23 +65,20 @@ async function saveEdit(serverId: number) {
   }
 }
 
-async function createServer() {
+async function save() {
     if (!newServer.value.hostname.trim()) return
 
     try {
-        const server = await apiFetch("/servers", {
-            method: "POST",
-            body: {
-                hostname: newServer.value.hostname,
-                description: newServer.value.description,
-                owner_id: newServer.value.owner_id
-            }
-        })
+        const server = await createServer(
+            newServer.value.hostname,
+            newServer.value.description,
+            newServer.value.owner_id
+        )
         if (isUnauthorized(server)) {
             return server
         }
 
-        servers.value.push(server)
+        // clear form
         newServer.value = { hostname: "", description: "" }
     } catch (e: any) {
         error.value = e.message
@@ -223,7 +220,7 @@ onMounted(async () => {
                 </select>
 
 
-                <button @click="createServer"
+                <button @click="save"
                     class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 self-start">
                     Speichern
                 </button>