Add Factorio World Management feature to GSM

- Add gsm-frontend to repository (React + Vite + TailwindCSS) - New "Worlds" tab for Factorio server with: - List saved worlds with Start/Delete actions - Create new world with full map generation parameters - Preset selection (Default, Rich Resources, Rail World, etc.) - Save custom configurations as templates - Show which save will be loaded in Overview tab - Lock world management while server is running - Backend changes deployed to server separately 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-05 15:42:14 +01:00
parent 2b1fbb9f02
commit ff6adb093b
44 changed files with 7242 additions and 1234 deletions
--- a/gsm-frontend/.gitignore
+++ b/gsm-frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/gsm-frontend/README.md
+++ b/gsm-frontend/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/gsm-frontend/assets/index-CA30OFan.js
+++ b/gsm-frontend/assets/index-CA30OFan.js
--- a/gsm-frontend/assets/index-pyCQ9v8N.css
+++ b/gsm-frontend/assets/index-pyCQ9v8N.css
--- a/gsm-frontend/eslint.config.js
+++ b/gsm-frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/gsm-frontend/favicon.png
+++ b/gsm-frontend/favicon.png
--- a/gsm-frontend/index.html
+++ b/gsm-frontend/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zeasy GSM</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/gsm-frontend/navbarlogograuer.png
+++ b/gsm-frontend/navbarlogograuer.png
--- a/gsm-frontend/package-lock.json
+++ b/gsm-frontend/package-lock.json
--- a/gsm-frontend/package.json
+++ b/gsm-frontend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0",
+    "recharts": "^3.6.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}
--- a/gsm-frontend/postcss.config.js
+++ b/gsm-frontend/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
--- a/gsm-frontend/public/factorio.png
+++ b/gsm-frontend/public/factorio.png
--- a/gsm-frontend/public/minecraft.png
+++ b/gsm-frontend/public/minecraft.png
--- a/gsm-frontend/public/navbarlogograuer.png
+++ b/gsm-frontend/public/navbarlogograuer.png
--- a/gsm-frontend/public/navbarlogoweiß.png
+++ b/gsm-frontend/public/navbarlogoweiß.png
--- a/gsm-frontend/public/vite.svg
+++ b/gsm-frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/gsm-frontend/public/vrising.png
+++ b/gsm-frontend/public/vrising.png
--- a/gsm-frontend/src/App.css
+++ b/gsm-frontend/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/gsm-frontend/src/App.jsx
+++ b/gsm-frontend/src/App.jsx
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import { UserProvider } from './context/UserContext'
+import Dashboard from './pages/Dashboard'
+import ServerDetail from './pages/ServerDetail'
+
+export default function App() {
+  const [token, setToken] = useState(localStorage.getItem('gsm_token'))
+
+  const handleLogin = (newToken) => {
+    localStorage.setItem('gsm_token', newToken)
+    setToken(newToken)
+  }
+
+  const handleLogout = () => {
+    localStorage.removeItem('gsm_token')
+    setToken(null)
+  }
+
+  return (
+    <UserProvider token={token}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Dashboard onLogin={handleLogin} onLogout={handleLogout} />} />
+          <Route path="/server/:serverId" element={<ServerDetail onLogin={handleLogin} onLogout={handleLogout} />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </UserProvider>
+  )
+}
--- a/gsm-frontend/src/api.js
+++ b/gsm-frontend/src/api.js
@@ -0,0 +1,181 @@
+const API_URL = import.meta.env.VITE_API_URL || 'https://monitor.dimension47.de/api'
+
+async function fetchAPI(endpoint, options = {}) {
+  const response = await fetch(`${API_URL}${endpoint}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+  })
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: 'Request failed' }))
+    throw new Error(error.message || `HTTP ${response.status}`)
+  }
+
+  return response.json()
+}
+
+// Auth
+export async function login(username, password) {
+  return fetchAPI('/auth/login', {
+    method: 'POST',
+    body: JSON.stringify({ username, password }),
+  })
+}
+
+export async function getMe(token) {
+  return fetchAPI('/auth/me', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function changePassword(currentPassword, newPassword) {
+  const token = localStorage.getItem('gsm_token')
+  return fetchAPI('/auth/change-password', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ currentPassword, newPassword }),
+  })
+}
+
+// Servers
+export async function getServers(token) {
+  return fetchAPI('/servers', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function serverAction(token, serverId, action, body = null) {
+  return fetchAPI(`/servers/${serverId}/${action}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    ...(body && { body: JSON.stringify(body) }),
+  })
+}
+
+export async function getWhitelist(token, serverId) {
+  const headers = token ? { Authorization: `Bearer ${token}` } : {}
+  return fetchAPI(`/servers/${serverId}/whitelist`, { headers })
+}
+
+export async function sendRcon(token, serverId, command) {
+  return fetchAPI(`/servers/${serverId}/rcon`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ command }),
+  })
+}
+
+export async function getServerLogs(token, serverId, lines = 50) {
+  return fetchAPI(`/servers/${serverId}/logs?lines=${lines}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+// Metrics
+export async function getMetricsHistory(token, serverId, range = '1h') {
+  return fetchAPI(`/servers/${serverId}/metrics/history?range=${range}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+// Users (admin only)
+export async function getUsers(token) {
+  return fetchAPI('/auth/users', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function createUser(token, userData) {
+  return fetchAPI('/auth/users', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify(userData),
+  })
+}
+
+export async function updateUserRole(token, userId, role) {
+  return fetchAPI(`/auth/users/${userId}/role`, {
+    method: 'PATCH',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ role }),
+  })
+}
+
+export async function updateUserPassword(token, userId, password) {
+  return fetchAPI(`/auth/users/${userId}/password`, {
+    method: 'PATCH',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ password }),
+  })
+}
+
+export async function deleteUser(token, userId) {
+  return fetchAPI(`/auth/users/${userId}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+// Factorio World Management
+export async function getFactorioSaves(token) {
+  return fetchAPI('/servers/factorio/saves', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function getFactorioPresets(token) {
+  return fetchAPI('/servers/factorio/presets', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function getFactorioPreset(token, name) {
+  return fetchAPI(`/servers/factorio/presets/${name}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function getFactorioTemplates(token) {
+  return fetchAPI('/servers/factorio/templates', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function createFactorioTemplate(token, name, settings) {
+  return fetchAPI('/servers/factorio/templates', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ name, settings }),
+  })
+}
+
+export async function deleteFactorioTemplate(token, id) {
+  return fetchAPI(`/servers/factorio/templates/${id}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function createFactorioWorld(token, saveName, settings) {
+  return fetchAPI('/servers/factorio/create-world', {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: JSON.stringify({ saveName, settings }),
+  })
+}
+
+export async function deleteFactorioSave(token, saveName) {
+  return fetchAPI(`/servers/factorio/saves/${encodeURIComponent(saveName)}`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
+
+export async function getFactorioCurrentSave(token) {
+  return fetchAPI('/servers/factorio/current-save', {
+    headers: { Authorization: `Bearer ${token}` },
+  })
+}
--- a/gsm-frontend/src/assets/react.svg
+++ b/gsm-frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/gsm-frontend/src/components/FactorioWorldManager.jsx
+++ b/gsm-frontend/src/components/FactorioWorldManager.jsx
@@ -0,0 +1,331 @@
+import { useState, useEffect } from 'react'
+import {
+  getFactorioSaves,
+  getFactorioPresets,
+  getFactorioPreset,
+  getFactorioTemplates,
+  createFactorioTemplate,
+  deleteFactorioTemplate,
+  createFactorioWorld,
+  deleteFactorioSave,
+  serverAction
+} from '../api'
+import WorldGenForm from './WorldGenForm'
+
+export default function FactorioWorldManager({ server, token, onServerAction }) {
+  const [saves, setSaves] = useState([])
+  const [templates, setTemplates] = useState([])
+  const [presets, setPresets] = useState([])
+  const [defaultSettings, setDefaultSettings] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showCreateWorld, setShowCreateWorld] = useState(false)
+  const [newWorldName, setNewWorldName] = useState('')
+  const [worldSettings, setWorldSettings] = useState(null)
+  const [creating, setCreating] = useState(false)
+  const [deleteConfirm, setDeleteConfirm] = useState(null)
+  const [actionLoading, setActionLoading] = useState(null)
+
+  const fetchData = async () => {
+    try {
+      setLoading(true)
+      const [savesData, presetsData, templatesData] = await Promise.all([
+        getFactorioSaves(token),
+        getFactorioPresets(token),
+        getFactorioTemplates(token)
+      ])
+      setSaves(savesData.saves || [])
+      setPresets(presetsData.presets || [])
+      setDefaultSettings(presetsData.defaultSettings)
+      setWorldSettings(presetsData.defaultSettings)
+      setTemplates(templatesData.templates || [])
+      setError('')
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchData()
+  }, [token])
+
+  const handleLoadPreset = async (presetName) => {
+    try {
+      const data = await getFactorioPreset(token, presetName)
+      setWorldSettings(data.settings)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleLoadTemplate = (templateId) => {
+    const template = templates.find(t => t.id === templateId)
+    if (template) {
+      setWorldSettings(template.settings)
+    }
+  }
+
+  const handleSaveTemplate = async (name) => {
+    try {
+      await createFactorioTemplate(token, name, worldSettings)
+      const templatesData = await getFactorioTemplates(token)
+      setTemplates(templatesData.templates || [])
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleDeleteTemplate = async (id) => {
+    try {
+      await deleteFactorioTemplate(token, id)
+      setTemplates(templates.filter(t => t.id !== id))
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleCreateWorld = async () => {
+    if (!newWorldName.trim()) {
+      setError('World name is required')
+      return
+    }
+
+    if (!/^[a-zA-Z0-9_-]+$/.test(newWorldName)) {
+      setError('World name can only contain letters, numbers, hyphens and underscores')
+      return
+    }
+
+    try {
+      setCreating(true)
+      setError('')
+      await createFactorioWorld(token, newWorldName, worldSettings)
+      setShowCreateWorld(false)
+      setNewWorldName('')
+      setWorldSettings(defaultSettings)
+      await fetchData()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleStartWithSave = async (saveName) => {
+    try {
+      setActionLoading(saveName)
+      await serverAction(token, server.id, 'start', { save: saveName })
+      if (onServerAction) onServerAction()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  const handleDeleteSave = async (saveName) => {
+    try {
+      setActionLoading(saveName)
+      await deleteFactorioSave(token, saveName)
+      setDeleteConfirm(null)
+      await fetchData()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-neutral-400">Loading world data...</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {error && (
+        <div className="alert alert-error">
+          {error}
+        </div>
+      )}
+
+      {/* Create World Modal */}
+      {showCreateWorld && (
+        <div className="modal-backdrop" onClick={() => !creating && setShowCreateWorld(false)}>
+          <div className="modal max-w-3xl fade-in-scale" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3 className="modal-title">Create New World</h3>
+              <button
+                onClick={() => !creating && setShowCreateWorld(false)}
+                disabled={creating}
+                className="btn btn-ghost p-1"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="modal-body">
+              <div className="form-group">
+                <label className="form-label">World Name</label>
+                <input
+                  type="text"
+                  value={newWorldName}
+                  onChange={(e) => setNewWorldName(e.target.value)}
+                  placeholder="my-new-world"
+                  disabled={creating}
+                  className="input"
+                />
+              </div>
+
+              <WorldGenForm
+                settings={worldSettings}
+                onSettingsChange={setWorldSettings}
+                presets={presets}
+                templates={templates}
+                onLoadPreset={handleLoadPreset}
+                onLoadTemplate={handleLoadTemplate}
+                onSaveTemplate={handleSaveTemplate}
+              />
+            </div>
+
+            <div className="modal-footer">
+              <button
+                onClick={() => setShowCreateWorld(false)}
+                disabled={creating}
+                className="btn btn-secondary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateWorld}
+                disabled={creating || !newWorldName.trim()}
+                className="btn btn-primary"
+              >
+                {creating ? 'Creating...' : 'Create World'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {deleteConfirm && (
+        <div className="modal-backdrop" onClick={() => setDeleteConfirm(null)}>
+          <div className="modal max-w-md fade-in-scale" onClick={e => e.stopPropagation()}>
+            <div className="modal-header">
+              <h3 className="modal-title">Delete Save?</h3>
+            </div>
+            <div className="modal-body">
+              <p className="text-neutral-300">
+                Are you sure you want to delete <span className="text-white font-medium">{deleteConfirm}</span>? This action cannot be undone.
+              </p>
+            </div>
+            <div className="modal-footer">
+              <button
+                onClick={() => setDeleteConfirm(null)}
+                className="btn btn-secondary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => handleDeleteSave(deleteConfirm)}
+                disabled={actionLoading === deleteConfirm}
+                className="btn btn-destructive"
+              >
+                {actionLoading === deleteConfirm ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-neutral-300">Saved Worlds</h3>
+        <button
+          onClick={() => setShowCreateWorld(true)}
+          className="btn btn-primary"
+        >
+          + Create New
+        </button>
+      </div>
+
+      {/* Saves List */}
+      {saves.length === 0 ? (
+        <div className="card p-8 text-center">
+          <div className="text-neutral-400">No saved worlds found</div>
+          <div className="text-neutral-500 text-sm mt-1">Create a new world to get started</div>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {saves.map((save) => (
+            <div
+              key={save.name}
+              className="card p-4 card-clickable"
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <span className="text-2xl">🌍</span>
+                  <div>
+                    <div className="text-white font-medium">{save.name}</div>
+                    <div className="text-neutral-500 text-xs mt-1">
+                      {save.size} · {save.modified}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => handleStartWithSave(save.name)}
+                    disabled={actionLoading === save.name || server.running}
+                    className="btn btn-primary text-sm"
+                    title={server.running ? 'Stop server first' : 'Start with this save'}
+                  >
+                    {actionLoading === save.name ? '...' : 'Start'}
+                  </button>
+                  <button
+                    onClick={() => setDeleteConfirm(save.name)}
+                    disabled={actionLoading === save.name}
+                    className="btn btn-ghost text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Templates Section */}
+      {templates.length > 0 && (
+        <div className="mt-8">
+          <h3 className="text-sm font-medium text-neutral-300 mb-3">Saved Templates</h3>
+          <div className="flex flex-wrap gap-2">
+            {templates.map((template) => (
+              <div
+                key={template.id}
+                className="badge badge-secondary flex items-center gap-2 group"
+              >
+                <span>{template.name}</span>
+                <button
+                  onClick={() => handleDeleteTemplate(template.id)}
+                  className="text-neutral-500 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/LoginModal.jsx
+++ b/gsm-frontend/src/components/LoginModal.jsx
@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { login } from '../api'
+
+export default function LoginModal({ onLogin, onClose }) {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const { token } = await login(username, password)
+      onLogin(token)
+      onClose()
+    } catch (err) {
+      setError(err.message || 'Login failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Sign in</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            &times;
+          </button>
+        </div>
+        <div className="modal-body">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <div className="alert alert-error">
+                {error}
+              </div>
+            )}
+
+            <div className="form-group">
+              <label className="form-label">Username</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="input"
+                placeholder="Enter username"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label">Password</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="input"
+                placeholder="Enter password"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="btn btn-primary w-full"
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/MetricsChart.jsx
+++ b/gsm-frontend/src/components/MetricsChart.jsx
@@ -0,0 +1,189 @@
+import { useState, useEffect } from 'react'
+import { AreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import { getMetricsHistory } from '../api'
+import { useUser } from '../context/UserContext'
+
+const GRAFANA_URL = 'https://grafana.dimension47.de'
+
+export default function MetricsChart({ serverId, serverName, expanded = false }) {
+  const { token } = useUser()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [range, setRange] = useState('1h')
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const metrics = await getMetricsHistory(token, serverId, range)
+        setData(metrics)
+      } catch (err) {
+        console.error('Failed to fetch metrics:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchData()
+    const interval = setInterval(fetchData, 60000)
+    return () => clearInterval(interval)
+  }, [token, serverId, range])
+
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  }
+
+  const formatBytes = (bytes) => {
+    if (bytes < 1024) return bytes.toFixed(0) + ' B/s'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB/s'
+    return (bytes / 1024 / 1024).toFixed(1) + ' MB/s'
+  }
+
+  if (loading) {
+    return (
+      <div className="card p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-neutral-500 text-sm">Loading metrics...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (!data || data.cpu.length === 0) {
+    return (
+      <div className="card p-4">
+        <div className="h-20 flex items-center justify-center">
+          <span className="text-neutral-500 text-sm">No data available</span>
+        </div>
+      </div>
+    )
+  }
+
+  const combinedData = data.cpu.map((point, i) => ({
+    timestamp: point.timestamp,
+    cpu: point.value,
+    memory: data.memory[i]?.value || 0,
+    networkRx: data.networkRx[i]?.value || 0,
+    networkTx: data.networkTx[i]?.value || 0
+  }))
+
+  const CustomTooltip = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-neutral-900 border border-neutral-700 rounded-md p-3 text-xs shadow-lg">
+          <div className="text-neutral-400 mb-2">{formatTime(label)}</div>
+          {payload.map((entry, i) => (
+            <div key={i} className="flex justify-between gap-4" style={{ color: entry.color }}>
+              <span>{entry.name}:</span>
+              <span className="font-semibold">
+                {entry.name.includes('Network') ? formatBytes(entry.value) : entry.value.toFixed(1) + '%'}
+              </span>
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const ChartCard = ({ title, dataKey, color, domain, formatter }) => (
+    <div className="card p-4">
+      <div className="flex justify-between items-center mb-3">
+        <span className="text-neutral-400 text-xs uppercase tracking-wide">{title}</span>
+        <span className="text-white text-sm font-semibold">
+          {formatter
+            ? formatter(combinedData[combinedData.length - 1]?.[dataKey] || 0)
+            : (combinedData[combinedData.length - 1]?.[dataKey] || 0).toFixed(1) + '%'
+          }
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height={expanded ? 150 : 80}>
+        <AreaChart data={combinedData}>
+          <defs>
+            <linearGradient id={`gradient-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={color} stopOpacity={0.3}/>
+              <stop offset="95%" stopColor={color} stopOpacity={0.05}/>
+            </linearGradient>
+          </defs>
+          {expanded && (
+            <>
+              <XAxis
+                dataKey="timestamp"
+                tickFormatter={formatTime}
+                tick={{ fill: '#737373', fontSize: 10 }}
+                axisLine={{ stroke: '#404040' }}
+                tickLine={false}
+                minTickGap={50}
+              />
+              <YAxis
+                domain={domain || [0, 'auto']}
+                tick={{ fill: '#737373', fontSize: 10 }}
+                axisLine={{ stroke: '#404040' }}
+                tickLine={false}
+                width={40}
+                tickFormatter={formatter ? (v) => formatBytes(v).split(' ')[0] : (v) => v.toFixed(0)}
+              />
+              <Tooltip content={<CustomTooltip />} />
+            </>
+          )}
+          <Area
+            type="monotone"
+            dataKey={dataKey}
+            name={title}
+            stroke={color}
+            strokeWidth={2}
+            fill={`url(#gradient-${dataKey})`}
+            isAnimationActive={true}
+            animationDuration={500}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <span className="text-neutral-400 text-sm">Metrics History</span>
+        <div className="flex items-center gap-3">
+          <select
+            value={range}
+            onChange={(e) => setRange(e.target.value)}
+            className="select"
+          >
+            <option value="15m">15 min</option>
+            <option value="1h">1 hour</option>
+            <option value="6h">6 hours</option>
+            <option value="24h">24 hours</option>
+          </select>
+          <a
+            href={`${GRAFANA_URL}/d/rYdddlPWk/node-exporter-full?var-job=${serverId}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="btn btn-secondary text-sm"
+          >
+            Grafana
+          </a>
+        </div>
+      </div>
+
+      {/* Charts */}
+      {expanded ? (
+        <div className="space-y-4">
+          <ChartCard title="CPU Usage" dataKey="cpu" color="#22c55e" domain={[0, 100]} />
+          <ChartCard title="Memory Usage" dataKey="memory" color="#3b82f6" domain={[0, 100]} />
+          <div className="grid grid-cols-2 gap-4">
+            <ChartCard title="Network RX" dataKey="networkRx" color="#a855f7" formatter={formatBytes} />
+            <ChartCard title="Network TX" dataKey="networkTx" color="#eab308" formatter={formatBytes} />
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 gap-3">
+          <ChartCard title="CPU" dataKey="cpu" color="#22c55e" domain={[0, 100]} />
+          <ChartCard title="Memory" dataKey="memory" color="#3b82f6" domain={[0, 100]} />
+        </div>
+      )}
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/ServerCard.jsx
+++ b/gsm-frontend/src/components/ServerCard.jsx
@@ -0,0 +1,190 @@
+const serverInfo = {
+  minecraft: {
+    address: 'minecraft.dimension47.de',
+    logo: '/minecraft.png',
+    links: [
+      { label: 'ATM10 Modpack', url: 'https://www.curseforge.com/minecraft/modpacks/all-the-mods-10' }
+    ]
+  },
+  factorio: {
+    hint: 'Serverpasswort: affe',
+    address: 'factorio.dimension47.de',
+    logo: '/factorio.png',
+    links: [
+      { label: 'Steam', url: 'https://store.steampowered.com/app/427520/Factorio/' }
+    ]
+  },
+  vrising: {
+    address: 'Zeasy Software Vampire',
+    logo: '/vrising.png',
+    links: [
+      { label: 'Steam', url: 'https://store.steampowered.com/app/1604030/V_Rising/' }
+    ]
+  }
+}
+
+const getServerInfo = (serverName) => {
+  const name = serverName.toLowerCase()
+  if (name.includes('minecraft') || name.includes('all the mods')) return serverInfo.minecraft
+  if (name.includes('factorio')) return serverInfo.factorio
+  if (name.includes('vrising') || name.includes('v rising')) return serverInfo.vrising
+  return null
+}
+
+export default function ServerCard({ server, onClick, isAuthenticated }) {
+  const info = getServerInfo(server.name)
+
+  const formatUptime = (seconds) => {
+    const hours = Math.floor(seconds / 3600)
+    if (hours > 24) {
+      const days = Math.floor(hours / 24)
+      return days + 'd ' + (hours % 24) + 'h'
+    }
+    const minutes = Math.floor((seconds % 3600) / 60)
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  const getProgressColor = (percent) => {
+    if (percent > 80) return 'progress-bar-danger'
+    if (percent > 60) return 'progress-bar-warning'
+    return 'progress-bar-success'
+  }
+
+  const getStatusBadge = () => {
+    const status = server.status || (server.running ? 'online' : 'offline')
+    switch (status) {
+      case 'online':
+        return { class: 'badge badge-success', text: 'Online' }
+      case 'starting':
+        return { class: 'badge badge-warning', text: 'Starting...' }
+      case 'stopping':
+        return { class: 'badge badge-warning', text: 'Stopping...' }
+      default:
+        return { class: 'badge badge-destructive', text: 'Offline' }
+    }
+  }
+
+  const statusBadge = getStatusBadge()
+
+  return (
+    <div
+      className="card card-clickable p-5"
+      onClick={onClick}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          {info && info.logo && <img src={info.logo} alt="" className="h-8 w-8 object-contain" />}
+          <h3 className="text-lg font-semibold text-white">{server.name}</h3>
+        </div>
+        <span className={statusBadge.class}>
+          {statusBadge.text}
+        </span>
+      </div>
+
+      {/* Server Address & Links */}
+      {info && (
+        <div className="mb-4 flex items-center gap-3 text-sm">
+          <code className="text-neutral-400 bg-neutral-800 px-2 py-0.5 rounded">
+            {info.address}
+          </code>
+          {info.links.map((link, i) => (
+            <a
+              key={i}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="text-blue-400 hover:text-blue-300 hover:underline"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {/* Whitelist notice for Minecraft - only for authenticated users */}
+      {isAuthenticated && server.type === 'minecraft' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          Whitelist erforderlich - im Whitelist-Tab freischalten
+        </div>
+      )}
+
+      {/* Factorio notice - only for authenticated users */}
+      {isAuthenticated && server.type === 'factorio' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          Serverpasswort: affe
+        </div>
+      )}
+
+      {/* V Rising notice - only for authenticated users */}
+      {isAuthenticated && server.type === 'vrising' && (
+        <div className="mb-4 text-xs text-neutral-500">
+          In der Serverliste suchen - Passwort: affe
+        </div>
+      )}
+
+      {/* Metrics */}
+      <div className="space-y-3">
+        {/* CPU */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">CPU</span>
+            <span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(cpuPercent)}
+              style={{ width: cpuPercent + '%' }}
+            />
+          </div>
+        </div>
+
+        {/* RAM */}
+        <div>
+          <div className="flex justify-between text-sm mb-1">
+            <span className="text-neutral-400">Memory</span>
+            <span className="text-white">
+              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
+            </span>
+          </div>
+          <div className="progress">
+            <div
+              className={'progress-bar ' + getProgressColor(memPercent)}
+              style={{ width: memPercent + '%' }}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Stats */}
+      <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
+        <div className="text-neutral-400">
+          <span className="text-white font-medium">{server.players.online}</span>
+          {server.players.max ? ' / ' + server.players.max : ''} players
+        </div>
+        {server.running && (
+          <div className="text-neutral-400">
+            Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Players List */}
+      {server.players?.list?.length > 0 && (
+        <div className="mt-3 pt-3 border-t border-neutral-800">
+          <div className="flex flex-wrap gap-1.5">
+            {server.players.list.map((player, i) => (
+              <span key={i} className="badge badge-secondary">
+                {player}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/ServerDetailModal.jsx
+++ b/gsm-frontend/src/components/ServerDetailModal.jsx
@@ -0,0 +1,337 @@
+import { useState, useEffect, useRef } from 'react'
+import { serverAction, sendRcon, getServerLogs } from '../api'
+import { useUser } from '../context/UserContext'
+import MetricsChart from './MetricsChart'
+import FactorioWorldManager from './FactorioWorldManager'
+
+export default function ServerDetailModal({ server, onClose, onUpdate }) {
+  const { token, isModerator } = useUser()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('overview')
+  const [rconCommand, setRconCommand] = useState('')
+  const [rconHistory, setRconHistory] = useState([])
+  const [logs, setLogs] = useState('')
+  const logsRef = useRef(null)
+  const rconRef = useRef(null)
+
+  const typeIcons = {
+    minecraft: '⛏️',
+    factorio: '⚙️'
+  }
+
+  const handleAction = async (action) => {
+    setLoading(true)
+    try {
+      await serverAction(token, server.id, action)
+      setTimeout(() => {
+        onUpdate()
+        setLoading(false)
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+      setLoading(false)
+    }
+  }
+
+  const handleRcon = async (e) => {
+    e.preventDefault()
+    if (!rconCommand.trim()) return
+
+    const cmd = rconCommand
+    setRconCommand('')
+
+    try {
+      const { response } = await sendRcon(token, server.id, cmd)
+      setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
+    } catch (err) {
+      setRconHistory([...rconHistory, { cmd, res: 'ERROR: ' + err.message, time: new Date(), error: true }])
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const data = await getServerLogs(token, server.id, 100)
+      setLogs(data.logs || '')
+      if (logsRef.current) {
+        logsRef.current.scrollTop = logsRef.current.scrollHeight
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'logs' && isModerator) {
+      fetchLogs()
+      const interval = setInterval(fetchLogs, 5000)
+      return () => clearInterval(interval)
+    }
+  }, [activeTab, isModerator])
+
+  useEffect(() => {
+    if (rconRef.current) {
+      rconRef.current.scrollTop = rconRef.current.scrollHeight
+    }
+  }, [rconHistory])
+
+  useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [onClose])
+
+  const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return `${days}d ${hours}h ${minutes}m`
+    return `${hours}h ${minutes}m`
+  }
+
+  const tabs = [
+    { id: 'overview', label: 'OVERVIEW', icon: '📊' },
+    { id: 'metrics', label: 'METRICS', icon: '📈' },
+    ...(isModerator ? [
+      { id: 'console', label: 'CONSOLE', icon: '💻' },
+      { id: 'logs', label: 'LOGS', icon: '📜' },
+      ...(server.type === 'factorio' ? [{ id: 'worlds', label: 'WORLDS', icon: '🌍' }] : []),
+    ] : []),
+  ]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 modal-backdrop"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-4xl max-h-[90vh] overflow-hidden bg-black/95 border border-[#00ff41]/50 rounded-lg glow-box fade-in-up">
+        {/* Header */}
+        <div className="border-b border-[#00ff41]/30 bg-[#00ff41]/5 p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-4xl">{typeIcons[server.type] || '🎮'}</span>
+              <div>
+                <h2 className="text-2xl font-bold text-[#00ff41] font-mono tracking-wider glow-green">
+                  {server.name.toUpperCase()}
+                </h2>
+                <div className="flex items-center gap-3 mt-1">
+                  <span className={`flex items-center gap-2 text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
+                    <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
+                    {server.running ? 'ONLINE' : 'OFFLINE'}
+                  </span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">|</span>
+                  <span className="text-[#00ff41]/50 text-sm font-mono">
+                    UPTIME: {formatUptime(server.metrics.uptime)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="text-[#00ff41]/60 hover:text-[#00ff41] transition-colors p-2"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-1 mt-4">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`px-4 py-2 font-mono text-sm transition-all duration-300 rounded-t ${
+                  activeTab === tab.id
+                    ? 'bg-[#00ff41]/20 text-[#00ff41] border-t border-l border-r border-[#00ff41]/50'
+                    : 'text-[#00ff41]/50 hover:text-[#00ff41] hover:bg-[#00ff41]/5'
+                }`}
+              >
+                <span className="mr-2">{tab.icon}</span>
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[calc(90vh-200px)]">
+          {/* Overview Tab */}
+          {activeTab === 'overview' && (
+            <div className="space-y-6">
+              {/* Stats Grid */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <StatBox label="CPU" value={`${server.metrics.cpu.toFixed(1)}%`} sub={`${server.metrics.cpuCores} cores`} />
+                <StatBox label="RAM" value={`${server.metrics.memoryUsed?.toFixed(1)} ${server.metrics.memoryUnit}`} sub={`/ ${server.metrics.memoryTotal?.toFixed(1)} ${server.metrics.memoryUnit}`} />
+                <StatBox label="PLAYERS" value={`${server.players.online}`} sub={server.players.max ? `/ ${server.players.max}` : 'unlimited'} />
+                <StatBox label="TYPE" value={server.type.toUpperCase()} sub={server.id} />
+              </div>
+
+              {/* Players List */}
+              {server.players?.list?.length > 0 && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">CONNECTED_USERS:</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {server.players.list.map((player, i) => (
+                      <span
+                        key={i}
+                        className="bg-[#00ff41]/10 border border-[#00ff41]/30 text-[#00ff41] px-3 py-1 rounded font-mono text-sm"
+                      >
+                        {player}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Power Controls */}
+              {isModerator && (
+                <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4">
+                  <h3 className="text-[#00ff41] font-mono text-sm mb-3">POWER_CONTROLS:</h3>
+                  <div className="flex gap-3">
+                    {server.running ? (
+                      <>
+                        <button
+                          onClick={() => handleAction('stop')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-red-500 border-red-500 hover:bg-red-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'STOP'}
+                        </button>
+                        <button
+                          onClick={() => handleAction('restart')}
+                          disabled={loading}
+                          className="btn-matrix px-6 py-2 text-yellow-500 border-yellow-500 hover:bg-yellow-500/20 disabled:opacity-50"
+                        >
+                          {loading ? 'PROCESSING...' : 'RESTART'}
+                        </button>
+                      </>
+                    ) : (
+                      <button
+                        onClick={() => handleAction('start')}
+                        disabled={loading}
+                        className="btn-matrix-solid px-6 py-2 disabled:opacity-50"
+                      >
+                        {loading ? 'PROCESSING...' : 'START'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Metrics Tab */}
+          {activeTab === 'metrics' && (
+            <div className="space-y-4">
+              <MetricsChart serverId={server.id} serverName={server.name} expanded={true} />
+            </div>
+          )}
+
+          {/* Console Tab */}
+          {activeTab === 'console' && isModerator && server.hasRcon && (
+            <div className="space-y-4">
+              <div
+                ref={rconRef}
+                className="terminal rounded h-80 overflow-y-auto p-4"
+              >
+                <div className="text-[#00ff41]/60 font-mono text-sm mb-2">
+                  // RCON Terminal - {server.name}
+                </div>
+                {rconHistory.length === 0 && (
+                  <div className="text-[#00ff41]/40 font-mono text-sm">
+                    Waiting for commands...
+                  </div>
+                )}
+                {rconHistory.map((entry, i) => (
+                  <div key={i} className="mb-2">
+                    <div className="text-[#00ff41] font-mono text-sm">
+                      <span className="text-[#00ff41]/50">[{entry.time.toLocaleTimeString()}]</span> &gt; {entry.cmd}
+                    </div>
+                    <div className={`font-mono text-sm whitespace-pre-wrap pl-4 ${entry.error ? 'text-red-500' : 'text-[#00ff41]/70'}`}>
+                      {entry.res}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <form onSubmit={handleRcon} className="flex gap-2">
+                <span className="text-[#00ff41] font-mono py-2">&gt;</span>
+                <input
+                  type="text"
+                  value={rconCommand}
+                  onChange={(e) => setRconCommand(e.target.value)}
+                  placeholder="Enter RCON command..."
+                  className="input-matrix flex-1 px-4 py-2 rounded font-mono text-sm"
+                />
+                <button
+                  type="submit"
+                  className="btn-matrix-solid px-6 py-2 font-mono text-sm"
+                >
+                  EXECUTE
+                </button>
+              </form>
+            </div>
+          )}
+
+          {/* Logs Tab */}
+          {activeTab === 'logs' && isModerator && (
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-[#00ff41]/60 font-mono text-sm">
+                  // Server Logs - Last 100 lines
+                </span>
+                <button
+                  onClick={fetchLogs}
+                  className="btn-matrix px-4 py-1 text-sm font-mono"
+                >
+                  REFRESH
+                </button>
+              </div>
+              <div
+                ref={logsRef}
+                className="terminal rounded h-96 overflow-y-auto p-4 font-mono text-xs text-[#00ff41]/80 whitespace-pre-wrap"
+              >
+                {logs || 'Loading...'}
+              </div>
+            </div>
+          )}
+
+          {/* Worlds Tab (Factorio only) */}
+          {activeTab === 'worlds' && isModerator && server.type === 'factorio' && (
+            <FactorioWorldManager
+              server={server}
+              token={token}
+              onServerAction={onUpdate}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-[#00ff41]/30 bg-[#00ff41]/5 px-6 py-3">
+          <div className="flex justify-between items-center text-[#00ff41]/40 font-mono text-xs">
+            <span>SERVER_ID: {server.id}</span>
+            <span>PRESS [ESC] TO CLOSE</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatBox({ label, value, sub }) {
+  return (
+    <div className="bg-black/50 border border-[#00ff41]/20 rounded p-4 text-center">
+      <div className="text-[#00ff41]/50 font-mono text-xs mb-1">{label}</div>
+      <div className="text-[#00ff41] font-mono text-2xl font-bold glow-green metric-value">{value}</div>
+      <div className="text-[#00ff41]/40 font-mono text-xs mt-1">{sub}</div>
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/SettingsModal.jsx
+++ b/gsm-frontend/src/components/SettingsModal.jsx
@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { useUser } from '../context/UserContext'
+import { changePassword } from '../api'
+
+export default function SettingsModal({ onClose }) {
+  const { user } = useUser()
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChangePassword = async (e) => {
+    e.preventDefault()
+    setError('')
+    setSuccess('')
+
+    if (newPassword !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
+    if (newPassword.length < 6) {
+      setError('Password must be at least 6 characters')
+      return
+    }
+
+    setLoading(true)
+    try {
+      await changePassword(currentPassword, newPassword)
+      setSuccess('Password changed successfully')
+      setCurrentPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+    } catch (err) {
+      setError(err.message || 'Failed to change password')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="modal-backdrop fade-in" onClick={onClose}>
+      <div className="modal fade-in-scale" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">Settings</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            Close
+          </button>
+        </div>
+
+        <div className="modal-body">
+          <div className="mb-6">
+            <h3 className="text-sm font-medium text-neutral-300 mb-2">Account</h3>
+            <div className="card p-4">
+              <div className="flex justify-between items-center">
+                <span className="text-neutral-400">Username</span>
+                <span className="text-white">{user?.username}</span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-medium text-neutral-300 mb-2">Change Password</h3>
+            <form onSubmit={handleChangePassword} className="space-y-4">
+              {error && (
+                <div className="alert alert-error">{error}</div>
+              )}
+              {success && (
+                <div className="alert alert-success">{success}</div>
+              )}
+
+              <div className="form-group">
+                <label className="form-label">Current Password</label>
+                <input
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">New Password</label>
+                <input
+                  type="password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <div className="form-group">
+                <label className="form-label">Confirm New Password</label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="input"
+                  required
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="btn btn-primary w-full"
+              >
+                {loading ? 'Changing...' : 'Change Password'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/UserManagement.jsx
+++ b/gsm-frontend/src/components/UserManagement.jsx
@@ -0,0 +1,235 @@
+import { useState, useEffect } from 'react'
+import { useUser } from '../context/UserContext'
+import { getUsers, createUser, updateUserRole, updateUserPassword, deleteUser } from '../api'
+
+export default function UserManagement({ onClose }) {
+  const { token } = useUser()
+  const [users, setUsers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showAddUser, setShowAddUser] = useState(false)
+  const [editingUser, setEditingUser] = useState(null)
+
+  // Form state
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [role, setRole] = useState('user')
+  const [formLoading, setFormLoading] = useState(false)
+  const [formError, setFormError] = useState('')
+
+  const fetchUsers = async () => {
+    try {
+      const data = await getUsers(token)
+      setUsers(data)
+      setError('')
+    } catch (err) {
+      setError('Failed to load users')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchUsers()
+  }, [token])
+
+  const resetForm = () => {
+    setUsername('')
+    setPassword('')
+    setRole('user')
+    setFormError('')
+    setShowAddUser(false)
+    setEditingUser(null)
+  }
+
+  const handleAddUser = async (e) => {
+    e.preventDefault()
+    setFormError('')
+    setFormLoading(true)
+
+    try {
+      await createUser(token, { username, password, role })
+      await fetchUsers()
+      resetForm()
+    } catch (err) {
+      setFormError(err.message || 'Failed to create user')
+    } finally {
+      setFormLoading(false)
+    }
+  }
+
+  const handleUpdateUser = async (e) => {
+    e.preventDefault()
+    setFormError('')
+    setFormLoading(true)
+
+    try {
+      // Update role if changed
+      if (role !== editingUser.role) {
+        await updateUserRole(token, editingUser.id, role)
+      }
+      // Update password if provided
+      if (password) {
+        await updateUserPassword(token, editingUser.id, password)
+      }
+      await fetchUsers()
+      resetForm()
+    } catch (err) {
+      setFormError(err.message || 'Failed to update user')
+    } finally {
+      setFormLoading(false)
+    }
+  }
+
+  const handleDeleteUser = async (userId) => {
+    if (!confirm('Are you sure you want to delete this user?')) return
+
+    try {
+      await deleteUser(token, userId)
+      await fetchUsers()
+    } catch (err) {
+      setError(err.message || 'Failed to delete user')
+    }
+  }
+
+  const startEdit = (user) => {
+    setEditingUser(user)
+    setUsername(user.username)
+    setRole(user.role)
+    setPassword('')
+    setShowAddUser(false)
+  }
+
+  const roleLabels = {
+    user: 'Viewer',
+    moderator: 'Operator',
+    superadmin: 'Admin'
+  }
+
+  return (
+    <div className="modal-backdrop fade-in" onClick={onClose}>
+      <div className="modal fade-in-scale" style={{ maxWidth: '32rem' }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2 className="modal-title">User Management</h2>
+          <button onClick={onClose} className="btn btn-ghost">
+            Close
+          </button>
+        </div>
+
+        <div className="modal-body">
+          {error && (
+            <div className="alert alert-error mb-4">{error}</div>
+          )}
+
+          {/* User List */}
+          {loading ? (
+            <div className="text-center py-4 text-neutral-400">Loading users...</div>
+          ) : (
+            <div className="space-y-2 mb-4">
+              {users.map((user) => (
+                <div key={user.id} className="card p-3 flex items-center justify-between">
+                  <div>
+                    <div className="text-white font-medium">{user.username}</div>
+                    <div className="text-xs text-neutral-500">{roleLabels[user.role]}</div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => startEdit(user)}
+                      className="btn btn-ghost text-sm"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => handleDeleteUser(user.id)}
+                      className="btn btn-ghost text-sm text-red-400"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Add/Edit Form */}
+          {(showAddUser || editingUser) ? (
+            <form onSubmit={editingUser ? handleUpdateUser : handleAddUser} className="space-y-4">
+              <div className="border-t border-neutral-800 pt-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">
+                  {editingUser ? 'Edit User' : 'Add New User'}
+                </h3>
+
+                {formError && (
+                  <div className="alert alert-error mb-4">{formError}</div>
+                )}
+
+                {!editingUser && (
+                  <div className="form-group">
+                    <label className="form-label">Username</label>
+                    <input
+                      type="text"
+                      value={username}
+                      onChange={(e) => setUsername(e.target.value)}
+                      className="input"
+                      required
+                    />
+                  </div>
+                )}
+
+                <div className="form-group">
+                  <label className="form-label">
+                    {editingUser ? 'New Password (leave empty to keep current)' : 'Password'}
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="input"
+                    required={!editingUser}
+                  />
+                </div>
+
+                <div className="form-group">
+                  <label className="form-label">Role</label>
+                  <select
+                    value={role}
+                    onChange={(e) => setRole(e.target.value)}
+                    className="select w-full"
+                  >
+                    <option value="user">Viewer</option>
+                    <option value="moderator">Operator</option>
+                    <option value="superadmin">Admin</option>
+                  </select>
+                </div>
+
+                <div className="flex gap-2">
+                  <button
+                    type="submit"
+                    disabled={formLoading}
+                    className="btn btn-primary flex-1"
+                  >
+                    {formLoading ? 'Saving...' : (editingUser ? 'Update User' : 'Add User')}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={resetForm}
+                    className="btn btn-secondary"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </form>
+          ) : (
+            <button
+              onClick={() => setShowAddUser(true)}
+              className="btn btn-primary w-full"
+            >
+              Add User
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/gsm-frontend/src/components/WorldGenForm.jsx
+++ b/gsm-frontend/src/components/WorldGenForm.jsx
@@ -0,0 +1,370 @@
+import { useState } from 'react'
+
+const SLIDER_VALUES = [0, 0.167, 0.5, 1, 2, 3]
+const SLIDER_LABELS = ['None', 'Very Low', 'Low', 'Normal', 'High', 'Very High']
+
+function valueToSlider(value) {
+  if (value === 0 || value === undefined) return 0
+  if (value <= 0.167) return 1
+  if (value <= 0.5) return 2
+  if (value <= 1) return 3
+  if (value <= 2) return 4
+  return 5
+}
+
+function sliderToValue(index) {
+  return SLIDER_VALUES[index]
+}
+
+function ValueSelect({ value, onChange }) {
+  const index = valueToSlider(value)
+  return (
+    <select
+      value={index}
+      onChange={(e) => onChange(sliderToValue(parseInt(e.target.value)))}
+      className="select text-xs py-1 px-2"
+    >
+      {SLIDER_LABELS.map((label, i) => (
+        <option key={i} value={i}>{label}</option>
+      ))}
+    </select>
+  )
+}
+
+function ResourceRow({ label, settings, onChange }) {
+  const freq = settings?.frequency ?? 1
+  const size = settings?.size ?? 1
+  const richness = settings?.richness ?? 1
+
+  return (
+    <div className="grid grid-cols-4 gap-2 items-center py-2 border-b border-neutral-800 last:border-0">
+      <div className="text-neutral-300 text-sm">{label}</div>
+      <ValueSelect value={freq} onChange={(v) => onChange({ ...settings, frequency: v })} />
+      <ValueSelect value={size} onChange={(v) => onChange({ ...settings, size: v })} />
+      <ValueSelect value={richness} onChange={(v) => onChange({ ...settings, richness: v })} />
+    </div>
+  )
+}
+
+function SimpleSlider({ label, value, onChange }) {
+  const sliderIndex = valueToSlider(value)
+
+  return (
+    <div className="flex items-center gap-4 py-2 border-b border-neutral-800 last:border-0">
+      <div className="w-28 text-neutral-300 text-sm">{label}</div>
+      <input
+        type="range"
+        min="0"
+        max="5"
+        value={sliderIndex}
+        onChange={(e) => onChange(sliderToValue(parseInt(e.target.value)))}
+        className="slider flex-1 max-w-48"
+      />
+      <span className="text-neutral-500 text-xs w-16">{SLIDER_LABELS[sliderIndex]}</span>
+    </div>
+  )
+}
+
+function EvolutionSlider({ label, value, onChange }) {
+  const displayValue = (value * 100).toFixed(0)
+
+  return (
+    <div className="flex items-center gap-4 py-2 border-b border-neutral-800 last:border-0">
+      <div className="w-28 text-neutral-300 text-sm">{label}</div>
+      <input
+        type="range"
+        min="0"
+        max="200"
+        value={value * 100}
+        onChange={(e) => onChange(parseInt(e.target.value) / 100)}
+        className="slider flex-1 max-w-48"
+      />
+      <span className="text-neutral-500 text-xs w-16">{displayValue}%</span>
+    </div>
+  )
+}
+
+export default function WorldGenForm({
+  settings,
+  onSettingsChange,
+  presets,
+  templates,
+  onLoadPreset,
+  onLoadTemplate,
+  onSaveTemplate
+}) {
+  const [selectedPreset, setSelectedPreset] = useState('default')
+  const [templateName, setTemplateName] = useState('')
+  const [showSaveTemplate, setShowSaveTemplate] = useState(false)
+
+  const handlePresetChange = (presetName) => {
+    setSelectedPreset(presetName)
+    onLoadPreset(presetName)
+  }
+
+  const handleSaveTemplate = () => {
+    if (templateName.trim()) {
+      onSaveTemplate(templateName.trim())
+      setTemplateName('')
+      setShowSaveTemplate(false)
+    }
+  }
+
+  const updateAutoplace = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      autoplace_controls: {
+        ...settings.autoplace_controls,
+        [key]: value
+      }
+    })
+  }
+
+  const updateCliff = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      cliff_settings: {
+        ...settings.cliff_settings,
+        [key]: value
+      }
+    })
+  }
+
+  const updateProperty = (key, value) => {
+    onSettingsChange({
+      ...settings,
+      property_expression_names: {
+        ...settings.property_expression_names,
+        [key]: value
+      }
+    })
+  }
+
+  return (
+    <div className="space-y-4 max-h-[50vh] overflow-y-auto pr-2">
+      {/* Preset & Template Selection */}
+      <div className="card p-3">
+        <div className="flex flex-wrap gap-3 items-center">
+          <div className="flex items-center gap-2">
+            <span className="text-neutral-400 text-sm">Preset:</span>
+            <select
+              value={selectedPreset}
+              onChange={(e) => handlePresetChange(e.target.value)}
+              className="select"
+            >
+              {presets?.map(p => (
+                <option key={p} value={p}>{p.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase())}</option>
+              ))}
+            </select>
+          </div>
+
+          {templates?.length > 0 && (
+            <div className="flex items-center gap-2">
+              <span className="text-neutral-400 text-sm">Template:</span>
+              <select
+                onChange={(e) => e.target.value && onLoadTemplate(parseInt(e.target.value))}
+                className="select"
+                defaultValue=""
+              >
+                <option value="">Select...</option>
+                {templates.map(t => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <button
+            onClick={() => setShowSaveTemplate(!showSaveTemplate)}
+            className="btn btn-outline text-sm ml-auto"
+          >
+            Save as Template
+          </button>
+        </div>
+
+        {showSaveTemplate && (
+          <div className="flex gap-2 mt-3 pt-3 border-t border-neutral-700">
+            <input
+              type="text"
+              value={templateName}
+              onChange={(e) => setTemplateName(e.target.value)}
+              placeholder="Template name..."
+              className="input flex-1"
+            />
+            <button
+              onClick={handleSaveTemplate}
+              disabled={!templateName.trim()}
+              className="btn btn-primary"
+            >
+              Save
+            </button>
+            <button
+              onClick={() => setShowSaveTemplate(false)}
+              className="btn btn-secondary"
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Terrain Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Terrain</h4>
+
+        <SimpleSlider
+          label="Water"
+          value={settings?.autoplace_controls?.water?.frequency ?? 1}
+          onChange={(v) => updateAutoplace('water', { frequency: v, size: v })}
+        />
+        <SimpleSlider
+          label="Trees"
+          value={settings?.autoplace_controls?.trees?.frequency ?? 1}
+          onChange={(v) => updateAutoplace('trees', { frequency: v, size: v, richness: v })}
+        />
+        <SimpleSlider
+          label="Cliffs"
+          value={settings?.cliff_settings?.richness ?? 1}
+          onChange={(v) => updateCliff('richness', v)}
+        />
+        <SimpleSlider
+          label="Starting Area"
+          value={settings?.starting_area ?? 1}
+          onChange={(v) => onSettingsChange({ ...settings, starting_area: v })}
+        />
+      </div>
+
+      {/* Resources Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Resources</h4>
+
+        <div className="grid grid-cols-4 gap-2 text-neutral-500 text-xs mb-2 pb-2 border-b border-neutral-700">
+          <div></div>
+          <div className="text-center">Frequency</div>
+          <div className="text-center">Size</div>
+          <div className="text-center">Richness</div>
+        </div>
+
+        <ResourceRow
+          label="Iron Ore"
+          settings={settings?.autoplace_controls?.['iron-ore']}
+          onChange={(v) => updateAutoplace('iron-ore', v)}
+        />
+        <ResourceRow
+          label="Copper Ore"
+          settings={settings?.autoplace_controls?.['copper-ore']}
+          onChange={(v) => updateAutoplace('copper-ore', v)}
+        />
+        <ResourceRow
+          label="Coal"
+          settings={settings?.autoplace_controls?.coal}
+          onChange={(v) => updateAutoplace('coal', v)}
+        />
+        <ResourceRow
+          label="Stone"
+          settings={settings?.autoplace_controls?.stone}
+          onChange={(v) => updateAutoplace('stone', v)}
+        />
+        <ResourceRow
+          label="Uranium"
+          settings={settings?.autoplace_controls?.['uranium-ore']}
+          onChange={(v) => updateAutoplace('uranium-ore', v)}
+        />
+        <ResourceRow
+          label="Crude Oil"
+          settings={settings?.autoplace_controls?.['crude-oil']}
+          onChange={(v) => updateAutoplace('crude-oil', v)}
+        />
+      </div>
+
+      {/* Enemies Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Enemies</h4>
+
+        <div className="grid grid-cols-4 gap-2 text-neutral-500 text-xs mb-2 pb-2 border-b border-neutral-700">
+          <div></div>
+          <div className="text-center">Frequency</div>
+          <div className="text-center">Size</div>
+          <div className="text-center">Richness</div>
+        </div>
+
+        <ResourceRow
+          label="Biter Bases"
+          settings={settings?.autoplace_controls?.['enemy-base']}
+          onChange={(v) => updateAutoplace('enemy-base', v)}
+        />
+
+        <div className="flex items-center gap-3 mt-3 pt-3 border-t border-neutral-700">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={settings?.peaceful_mode ?? false}
+              onChange={(e) => onSettingsChange({ ...settings, peaceful_mode: e.target.checked })}
+              className="w-4 h-4 rounded border-neutral-600 bg-neutral-800 text-white focus:ring-neutral-500"
+            />
+            <span className="text-neutral-300 text-sm">Peaceful Mode</span>
+          </label>
+        </div>
+      </div>
+
+      {/* Evolution Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Evolution</h4>
+
+        <EvolutionSlider
+          label="Time Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-time'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-time', v)}
+        />
+        <EvolutionSlider
+          label="Pollution Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-pollution'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-pollution', v)}
+        />
+        <EvolutionSlider
+          label="Destroy Factor"
+          value={settings?.property_expression_names?.['enemy-evolution-factor-by-killing-spawners'] ?? 1}
+          onChange={(v) => updateProperty('enemy-evolution-factor-by-killing-spawners', v)}
+        />
+      </div>
+
+      {/* Advanced Section */}
+      <div className="card p-4">
+        <h4 className="text-white font-medium text-sm mb-3">Advanced</h4>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="form-label">Seed (empty = random)</label>
+            <input
+              type="text"
+              value={settings?.seed ?? ''}
+              onChange={(e) => onSettingsChange({ ...settings, seed: e.target.value ? parseInt(e.target.value) : null })}
+              placeholder="Random"
+              className="input"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="form-label">Width (0=infinite)</label>
+              <input
+                type="number"
+                value={settings?.width ?? 0}
+                onChange={(e) => onSettingsChange({ ...settings, width: parseInt(e.target.value) || 0 })}
+                className="input"
+              />
+            </div>
+            <div>
+              <label className="form-label">Height (0=infinite)</label>
+              <input
+                type="number"
+                value={settings?.height ?? 0}
+                onChange={(e) => onSettingsChange({ ...settings, height: parseInt(e.target.value) || 0 })}
+                className="input"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/gsm-frontend/src/context/UserContext.jsx
+++ b/gsm-frontend/src/context/UserContext.jsx
@@ -0,0 +1,50 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+import { getMe } from '../api'
+
+const UserContext = createContext(null)
+
+export function UserProvider({ children, token, onLogout }) {
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!token) {
+      setUser(null)
+      setLoading(false)
+      return
+    }
+
+    getMe(token)
+      .then(data => {
+        setUser(data)
+        setLoading(false)
+      })
+      .catch(() => {
+        onLogout()
+        setLoading(false)
+      })
+  }, [token])
+
+  const value = {
+    user,
+    token,
+    loading,
+    role: user?.role || 'user',
+    isModerator: ['moderator', 'superadmin'].includes(user?.role),
+    isSuperadmin: user?.role === 'superadmin'
+  }
+
+  return (
+    <UserContext.Provider value={value}>
+      {children}
+    </UserContext.Provider>
+  )
+}
+
+export function useUser() {
+  const context = useContext(UserContext)
+  if (!context) {
+    throw new Error('useUser must be used within UserProvider')
+  }
+  return context
+}
--- a/gsm-frontend/src/index.css
+++ b/gsm-frontend/src/index.css
@@ -0,0 +1,641 @@
+@import "tailwindcss";
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #404040 #171717;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #171717;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #404040;
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: #525252;
+}
+
+body {
+  background-color: #0a0a0a;
+  color: #fafafa;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* Buttons */
+button {
+  background: transparent;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  transition: all 0.15s ease;
+  cursor: pointer;
+  border: none;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: #fafafa;
+  color: #0a0a0a;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: #e5e5e5;
+}
+
+.btn-secondary {
+  background-color: #262626;
+  color: #fafafa;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #363636;
+}
+
+.btn-destructive {
+  background-color: #dc2626;
+  color: #fafafa;
+}
+
+.btn-destructive:hover:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid #404040;
+  color: #fafafa;
+}
+
+.btn-outline:hover:not(:disabled) {
+  background-color: #262626;
+  border-color: #525252;
+}
+
+.btn-ghost {
+  background: transparent;
+  color: #a3a3a3;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background-color: #262626;
+  color: #fafafa;
+}
+
+/* Cards */
+.card {
+  background-color: #171717;
+  border: 1px solid #262626;
+  border-radius: 0.5rem;
+}
+
+.card-clickable {
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.card-clickable:hover {
+  background-color: #1c1c1c;
+  border-color: #404040;
+}
+
+/* Inputs */
+.input {
+  display: flex;
+  width: 100%;
+  border-radius: 0.375rem;
+  border: 1px solid #404040;
+  background-color: #171717;
+  color: #fafafa;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #737373;
+  box-shadow: 0 0 0 2px rgba(115, 115, 115, 0.2);
+}
+
+.input::placeholder {
+  color: #737373;
+}
+
+/* Select */
+.select {
+  display: flex;
+  border-radius: 0.375rem;
+  border: 1px solid #404040;
+  background-color: #171717;
+  color: #fafafa;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.select:focus {
+  outline: none;
+  border-color: #737373;
+}
+
+.select option {
+  background-color: #171717;
+  color: #fafafa;
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge-success {
+  background-color: #14532d;
+  color: #86efac;
+}
+
+.badge-destructive {
+  background-color: #450a0a;
+  color: #fca5a5;
+}
+
+.badge-secondary {
+  background-color: #262626;
+  color: #a3a3a3;
+}
+
+.badge-warning {
+  background-color: #422006;
+  color: #fcd34d;
+}
+
+/* Progress */
+.progress {
+  height: 0.5rem;
+  background-color: #262626;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #fafafa;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+.progress-bar-success {
+  background-color: #22c55e;
+}
+
+.progress-bar-warning {
+  background-color: #eab308;
+}
+
+.progress-bar-danger {
+  background-color: #ef4444;
+}
+
+/* Tabs */
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 1px solid #262626;
+}
+
+.tab {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #737373;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: transparent;
+}
+
+.tab:hover {
+  color: #a3a3a3;
+}
+
+.tab-active {
+  color: #fafafa;
+  border-bottom-color: #fafafa;
+}
+
+/* Status */
+.status-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+
+.status-online {
+  background-color: #22c55e;
+}
+
+.status-offline {
+  background-color: #ef4444;
+}
+
+/* Terminal/Logs */
+.terminal {
+  background-color: #0a0a0a;
+  border: 1px solid #262626;
+  border-radius: 0.375rem;
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+}
+
+.logs-container {
+  height: 320px;
+  max-height: 320px;
+  min-height: 320px;
+  overflow-y: scroll;
+}
+
+/* Layout */
+.container-main {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+/* Utilities */
+.gap-6 {
+  gap: 1.5rem;
+}
+
+.gap-8 {
+  gap: 2rem;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.2s ease-out;
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+.fade-in-scale {
+  animation: fadeInScale 0.2s ease-out;
+}
+
+.slide-in-right {
+  animation: slideInRight 0.3s ease-out;
+}
+
+.slide-in-left {
+  animation: slideInLeft 0.3s ease-out;
+}
+
+/* Page transitions */
+.page-enter {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+/* Tab content transitions */
+.tab-content {
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.modal {
+  background-color: #171717;
+  border: 1px solid #262626;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #262626;
+}
+
+.modal-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #fafafa;
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #262626;
+}
+
+/* Form */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #a3a3a3;
+  margin-bottom: 0.5rem;
+}
+
+/* Table */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th,
+.table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #262626;
+}
+
+.table th {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #737373;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.table td {
+  font-size: 0.875rem;
+  color: #fafafa;
+}
+
+.table tbody tr:hover {
+  background-color: #1c1c1c;
+}
+
+/* Alert */
+.alert {
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.alert-error {
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}
+
+.alert-success {
+  background-color: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
+/* Slider */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: #404040;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #fafafa;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #fafafa;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Matrix Theme Styles */
+.btn-matrix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  border: 1px solid #00ff41;
+  background: transparent;
+  color: #00ff41;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-matrix:hover:not(:disabled) {
+  background: rgba(0, 255, 65, 0.1);
+  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
+}
+
+.btn-matrix:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-matrix-solid {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  border: 1px solid #00ff41;
+  background: rgba(0, 255, 65, 0.2);
+  color: #00ff41;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-matrix-solid:hover:not(:disabled) {
+  background: rgba(0, 255, 65, 0.3);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
+}
+
+.btn-matrix-solid:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.input-matrix {
+  border: 1px solid rgba(0, 255, 65, 0.3);
+  background: rgba(0, 0, 0, 0.5);
+  color: #00ff41;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.input-matrix:focus {
+  outline: none;
+  border-color: #00ff41;
+  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
+}
+
+.input-matrix::placeholder {
+  color: rgba(0, 255, 65, 0.4);
+}
+
+.glow-green {
+  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
+}
+
+.glow-box {
+  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
+}
+
+.slider-matrix {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  background: rgba(0, 255, 65, 0.2);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.slider-matrix::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #00ff41;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.slider-matrix::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: 0 0 12px rgba(0, 255, 65, 0.7);
+}
+
+.slider-matrix::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #00ff41;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
+}
+
+.metric-value {
+  transition: text-shadow 0.3s ease;
+}
+
+.metric-value:hover {
+  text-shadow: 0 0 15px rgba(0, 255, 65, 0.7);
+}
+/* 04 Jan 2026 23:35:31 */
--- a/gsm-frontend/src/main.jsx
+++ b/gsm-frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/gsm-frontend/src/pages/Dashboard.jsx
+++ b/gsm-frontend/src/pages/Dashboard.jsx
@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { getServers } from '../api'
+import { useUser } from '../context/UserContext'
+import ServerCard from '../components/ServerCard'
+import SettingsModal from '../components/SettingsModal'
+import UserManagement from '../components/UserManagement'
+import LoginModal from '../components/LoginModal'
+
+export default function Dashboard({ onLogin, onLogout }) {
+  const navigate = useNavigate()
+  const { user, token, loading: userLoading, isSuperadmin, role } = useUser()
+  const [servers, setServers] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showSettings, setShowSettings] = useState(false)
+  const [showUserMgmt, setShowUserMgmt] = useState(false)
+  const [showLogin, setShowLogin] = useState(false)
+
+  const isAuthenticated = !!token
+
+  const fetchServers = async () => {
+    try {
+      const data = await getServers(token)
+      setServers(data)
+      setError('')
+    } catch (err) {
+      if (err.message.includes('401') || err.message.includes('403')) {
+        if (isAuthenticated) {
+          onLogout()
+        }
+      } else {
+        setError('Failed to connect to server')
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!userLoading) {
+      fetchServers()
+      const interval = setInterval(fetchServers, 10000)
+      return () => clearInterval(interval)
+    }
+  }, [token, userLoading])
+
+  const roleLabels = {
+    user: 'Viewer',
+    moderator: 'Operator',
+    superadmin: 'Admin'
+  }
+
+  if (userLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Loading...</div>
+      </div>
+    )
+  }
+
+  const onlineCount = servers.filter(s => s.running).length
+  document.title = 'Dashboard | Zeasy GSM'
+  const totalPlayers = servers.reduce((sum, s) => sum + (s.players?.online || 0), 0)
+
+  return (
+    <div className="min-h-screen page-enter">
+      {/* Header */}
+      <header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container-main py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <a href="https://zeasy.software" target="_blank" rel="noopener noreferrer" className="relative block group"><img src="/navbarlogograuer.png" alt="Logo" className="h-8 transition-opacity duration-300 group-hover:opacity-0" /><img src="/navbarlogoweiß.png" alt="Logo" className="h-8 absolute top-0 left-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100" /></a>
+              <span className="text-xl font-semibold text-white hidden sm:inline">Gameserver Management</span>
+            </div>
+            <div className="hidden md:flex items-center gap-4 text-sm text-neutral-400">
+              <span>
+                <span className="text-white font-medium">{onlineCount}</span>/{servers.length} online
+              </span>
+              <span className="text-neutral-600">|</span>
+              <span>
+                <span className="text-white font-medium">{totalPlayers}</span> players
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              {isAuthenticated ? (
+                <>
+                  <div className="hidden sm:block text-right mr-2">
+                    <div className="text-sm text-white">{user?.username}</div>
+                    <div className="text-xs text-neutral-500">{roleLabels[role]}</div>
+                  </div>
+                  {isSuperadmin && (
+                    <button
+                      onClick={() => setShowUserMgmt(true)}
+                      className="btn btn-ghost"
+                    >
+                      Users
+                    </button>
+                  )}
+                  <button
+                    onClick={() => setShowSettings(true)}
+                    className="btn btn-ghost"
+                  >
+                    Settings
+                  </button>
+                  <button
+                    onClick={onLogout}
+                    className="btn btn-outline"
+                  >
+                    Sign out
+                  </button>
+                </>
+              ) : (
+                <button
+                  onClick={() => setShowLogin(true)}
+                  className="btn btn-primary"
+                >
+                  Sign in
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="container-main py-8">
+        {error && (
+          <div className="mb-6 alert alert-error fade-in">
+            {error}
+          </div>
+        )}
+        {loading ? (
+          <div className="text-center py-12">
+            <div className="text-neutral-400">Loading servers...</div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {servers.map((server, index) => (
+              <div
+                key={server.id}
+                className="fade-in-up"
+                style={{ animationDelay: index * 50 + 'ms', animationFillMode: 'both' }}
+              >
+                <ServerCard
+                  server={server}
+                  onClick={() => navigate('/server/' + server.id)}
+                  isAuthenticated={isAuthenticated}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* Modals */}
+      {showSettings && (
+        <SettingsModal onClose={() => setShowSettings(false)} />
+      )}
+      {showUserMgmt && (
+        <UserManagement onClose={() => setShowUserMgmt(false)} />
+      )}
+      {showLogin && (
+        <LoginModal onLogin={onLogin} onClose={() => setShowLogin(false)} />
+      )}
+    </div>
+  )
+}
--- a/gsm-frontend/src/pages/ServerDetail.jsx
+++ b/gsm-frontend/src/pages/ServerDetail.jsx
@@ -0,0 +1,488 @@
+import { useState, useEffect, useRef } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { getServers, serverAction, sendRcon, getServerLogs, getWhitelist, getFactorioCurrentSave } from '../api'
+import { useUser } from '../context/UserContext'
+import MetricsChart from '../components/MetricsChart'
+import FactorioWorldManager from '../components/FactorioWorldManager'
+
+const getServerLogo = (serverName) => {
+  const name = serverName.toLowerCase()
+  if (name.includes("minecraft") || name.includes("all the mods")) return "/minecraft.png"
+  if (name.includes("factorio")) return "/factorio.png"
+  if (name.includes("vrising") || name.includes("v rising")) return "/vrising.png"
+  return null
+}
+export default function ServerDetail() {
+  const { serverId } = useParams()
+  const navigate = useNavigate()
+  const { token, isModerator } = useUser()
+  const [server, setServer] = useState(null)
+  const [loading, setLoading] = useState(true)
+  
+  const [activeTab, setActiveTab] = useState('overview')
+  const [rconCommand, setRconCommand] = useState('')
+  const [rconHistory, setRconHistory] = useState([])
+  const [logs, setLogs] = useState('')
+  const [whitelistPlayers, setWhitelistPlayers] = useState([])
+  
+  const [whitelistInput, setWhitelistInput] = useState('')
+  const [whitelistLoading, setWhitelistLoading] = useState(false)
+  const [currentSave, setCurrentSave] = useState(null)
+  const logsRef = useRef(null)
+  const rconRef = useRef(null)
+
+  const fetchCurrentSave = async () => {
+    if (token && serverId === 'factorio') {
+      try {
+        const result = await getFactorioCurrentSave(token)
+        setCurrentSave(result)
+      } catch (err) {
+        console.error('Failed to fetch current save:', err)
+      }
+    }
+  }
+
+  const fetchServer = async () => {
+    try {
+      const servers = await getServers(token)
+      const found = servers.find(s => s.id === serverId)
+      if (found) {
+        setServer(found); document.title = found.name + " | Zeasy GSM"
+      } else {
+        navigate('/')
+      }
+    } catch (err) {
+      console.error(err)
+      navigate('/')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchServer()
+    fetchCurrentSave()
+    const interval = setInterval(fetchServer, 10000)
+    return () => clearInterval(interval)
+  }, [token, serverId])
+
+  const handleAction = async (action) => {
+    // Immediately set status locally
+    const newStatus = action === 'start' ? 'starting' : (action === 'stop' ? 'stopping' : 'starting')
+    setServer(prev => ({ ...prev, status: newStatus }))
+    try {
+      await serverAction(token, server.id, action)
+      setTimeout(() => {
+        fetchServer()
+        
+      }, 2000)
+    } catch (err) {
+      console.error(err)
+      
+    }
+  }
+
+  const handleRcon = async (e) => {
+    e.preventDefault()
+    if (!rconCommand.trim()) return
+    const cmd = rconCommand
+    setRconCommand('')
+    try {
+      const { response } = await sendRcon(token, server.id, cmd)
+      setRconHistory([...rconHistory, { cmd, res: response, time: new Date() }])
+    } catch (err) {
+      setRconHistory([...rconHistory, { cmd, res: 'Error: ' + err.message, time: new Date(), error: true }])
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const data = await getServerLogs(token, server.id, 20)
+      setLogs(data.logs || '')
+      if (logsRef.current) {
+        logsRef.current.scrollTop = logsRef.current.scrollHeight
+      }
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'console' && isModerator && server) {
+      fetchLogs()
+      const interval = setInterval(fetchLogs, 5000)
+      return () => clearInterval(interval)
+    }
+  }, [activeTab, isModerator, server])
+
+  useEffect(() => {
+    if (activeTab === 'whitelist' && isModerator && server?.type === 'minecraft') {
+      fetchWhitelist()
+    }
+  }, [activeTab, server])
+
+  useEffect(() => {
+    if (rconRef.current) {
+      rconRef.current.scrollTop = rconRef.current.scrollHeight
+    }
+  }, [rconHistory])
+
+  
+  const fetchWhitelist = async () => {
+    if (!server?.hasRcon) return
+    try {
+      const { players } = await getWhitelist(token, server.id)
+      setWhitelistPlayers(players)
+    } catch (err) {
+      console.error("Failed to fetch whitelist:", err)
+    }
+  }
+
+  const addToWhitelist = async (e) => {
+    e.preventDefault()
+    if (!whitelistInput.trim()) return
+    setWhitelistLoading(true)
+    try {
+      await sendRcon(token, server.id, 'whitelist add ' + whitelistInput.trim())
+      setWhitelistInput('')
+      await fetchWhitelist()
+    } catch (err) {
+      console.error('Failed to add to whitelist:', err)
+    } finally {
+      setWhitelistLoading(false)
+    }
+  }
+
+  const removeFromWhitelist = async (player) => {
+    setWhitelistLoading(true)
+    try {
+      await sendRcon(token, server.id, 'whitelist remove ' + player)
+      await fetchWhitelist()
+    } catch (err) {
+      console.error('Failed to remove from whitelist:', err)
+    } finally {
+      setWhitelistLoading(false)
+    }
+  }
+
+const formatUptime = (seconds) => {
+    const days = Math.floor(seconds / 86400)
+    const hours = Math.floor((seconds % 86400) / 3600)
+    const minutes = Math.floor((seconds % 3600) / 60)
+    if (days > 0) return days + 'd ' + hours + 'h ' + minutes + 'm'
+    return hours + 'h ' + minutes + 'm'
+  }
+
+  const tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'metrics', label: 'Metrics' },
+    ...(isModerator ? [
+      { id: 'console', label: 'Console' },
+    ] : []),
+    ...(isModerator && server?.type === 'minecraft' ? [
+      { id: 'whitelist', label: 'Whitelist' },
+    ] : []),
+    ...(isModerator && server?.type === 'factorio' ? [
+      { id: 'worlds', label: 'Worlds' },
+    ] : []),
+  ]
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Loading...</div>
+      </div>
+    )
+  }
+
+  if (!server) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-neutral-400">Server not found</div>
+      </div>
+    )
+  }
+
+  const cpuPercent = Math.min(server.metrics.cpu, 100)
+  const memPercent = Math.min(server.metrics.memory, 100)
+
+  const getStatusBadge = () => {
+    const status = server.status || (server.running ? 'online' : 'offline')
+    switch (status) {
+      case 'online':
+        return { class: 'badge badge-success', text: 'Online' }
+      case 'starting':
+        return { class: 'badge badge-warning', text: 'Starting...' }
+      case 'stopping':
+        return { class: 'badge badge-warning', text: 'Stopping...' }
+      default:
+        return { class: 'badge badge-destructive', text: 'Offline' }
+    }
+  }
+
+  const statusBadge = getStatusBadge()
+
+  return (
+    <div className="min-h-screen page-enter">
+      {/* Header */}
+      <header className="border-b border-neutral-800 bg-neutral-900/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container-main py-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => navigate('/')}
+              className="btn btn-ghost"
+            >
+              Back
+            </button>
+            <div className="flex-1">
+              <div className="flex items-center gap-3">
+                {getServerLogo(server.name) && <img src={getServerLogo(server.name)} alt="" className="h-8 w-8 object-contain" />}
+                <h1 className="text-xl font-semibold text-white">{server.name}</h1>
+                <span className={statusBadge.class}>
+                  {statusBadge.text}
+                </span>
+              </div>
+              {server.running && (
+                <p className="text-sm text-neutral-400 mt-1">
+                  Uptime: {formatUptime(server.metrics.uptime)}
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Tabs */}
+          <div className="tabs mt-4">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={'tab ' + (activeTab === tab.id ? 'tab-active' : '')}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container-main py-6">
+        {/* Overview Tab */}
+        {activeTab === 'overview' && (
+          <div className="space-y-6 tab-content">
+            {/* Stats Grid */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">CPU Usage</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpu.toFixed(1)}%</div>
+                <div className="progress mt-2">
+                  <div className="progress-bar" style={{ width: cpuPercent + '%' }} />
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">Memory</div>
+                <div className="text-2xl font-semibold text-white mt-1">
+                  {server.metrics.memoryUsed?.toFixed(1)} {server.metrics.memoryUnit}
+                </div>
+                <div className="text-xs text-neutral-500 mt-1">
+                  of {server.metrics.memoryTotal?.toFixed(1)} {server.metrics.memoryUnit}
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">Players</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.players.online}</div>
+                <div className="text-xs text-neutral-500 mt-1">
+                  {server.players.max ? 'of ' + server.players.max + ' max' : 'No limit'}
+                </div>
+              </div>
+              <div className="card p-4">
+                <div className="text-sm text-neutral-400">CPU Cores</div>
+                <div className="text-2xl font-semibold text-white mt-1">{server.metrics.cpuCores}</div>
+              </div>
+            </div>
+
+            {/* Players List */}
+            {server.players?.list?.length > 0 && (
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">Online Players</h3>
+                <div className="flex flex-wrap gap-2">
+                  {server.players.list.map((player, i) => (
+                    <span key={i} className="badge badge-secondary">{player}</span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Power Controls */}
+            {isModerator && (
+              <div className="card p-4">
+                <h3 className="text-sm font-medium text-neutral-300 mb-3">Server Controls</h3>
+
+                {/* Factorio: Show which save will be loaded */}
+                {server.type === 'factorio' && !server.running && currentSave?.save && (
+                  <div className="text-sm text-neutral-400 mb-3">
+                    Will load: <span className="text-white font-medium">{currentSave.save}</span>
+                    {currentSave.source === 'newest' && <span className="text-neutral-500 ml-1">(newest save)</span>}
+                  </div>
+                )}
+
+                <div className="flex flex-wrap gap-3">
+                  {(server.status === 'online' || (server.running && server.status !== 'starting' && server.status !== 'stopping')) ? (
+                    <>
+                      <button
+                        onClick={() => handleAction('stop')}
+                        disabled={server.status === 'stopping' || server.status === 'starting'}
+                        className="btn btn-destructive"
+                      >
+                        {server.status === 'stopping' ? 'Stopping...' : 'Stop Server'}
+                      </button>
+                      <button
+                        onClick={() => handleAction('restart')}
+                        disabled={server.status === 'stopping' || server.status === 'starting'}
+                        className="btn btn-secondary"
+                      >
+                        {server.status === 'starting' ? 'Starting...' : 'Restart Server'}
+                      </button>
+                    </>
+                  ) : (
+                    <button
+                      onClick={() => handleAction('start')}
+                      disabled={server.status === 'stopping' || server.status === 'starting'}
+                      className="btn btn-primary"
+                    >
+                      {server.status === 'starting' ? 'Starting...' : 'Start Server'}
+                    </button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Metrics Tab */}
+        {activeTab === 'metrics' && (
+          <div className="tab-content"><MetricsChart serverId={server.id} serverName={server.name} expanded={true} /></div>
+        )}
+
+        {/* Console Tab - Logs + RCON */}
+        {activeTab === 'console' && isModerator && (
+          <div className="space-y-4 tab-content">
+            {/* Logs */}
+            <div className="flex justify-between items-center">
+              <span className="text-sm text-neutral-400">Server Logs (last 20 lines)</span>
+              <button onClick={fetchLogs} className="btn btn-secondary">
+                Refresh
+              </button>
+            </div>
+            <div
+              ref={logsRef}
+              className="terminal p-4 logs-container text-xs text-neutral-300 whitespace-pre-wrap"
+            >
+              {logs || 'Loading...'}
+            </div>
+
+            {/* RCON History */}
+            {rconHistory.length > 0 && (
+              <div ref={rconRef} className="terminal p-4 max-h-40 overflow-y-auto">
+                <div className="text-neutral-500 text-xs mb-2">RCON History</div>
+                {rconHistory.map((entry, i) => (
+                  <div key={i} className="mb-2 text-sm">
+                    <div className="text-neutral-400">
+                      <span className="text-neutral-600">[{entry.time.toLocaleTimeString('de-DE')}]</span> &gt; {entry.cmd}
+                    </div>
+                    <div className={'whitespace-pre-wrap pl-4 ' + (entry.error ? 'text-red-400' : 'text-neutral-300')}>
+                      {entry.res}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* RCON Input */}
+            {server.hasRcon && (
+              <form onSubmit={handleRcon} className="flex gap-2">
+                <input
+                  type="text"
+                  value={rconCommand}
+                  onChange={(e) => setRconCommand(e.target.value)}
+                  placeholder="RCON command..."
+                  className="input flex-1"
+                />
+                <button type="submit" className="btn btn-primary">
+                  Send
+                </button>
+              </form>
+            )}
+          </div>
+        )}
+      
+        {/* Whitelist Tab - Minecraft only */}
+        {activeTab === 'whitelist' && isModerator && server.type === 'minecraft' && (
+          <div className="space-y-4 tab-content">
+            <div className="card p-4">
+              <h3 className="text-sm font-medium text-neutral-300 mb-3">Add to Whitelist</h3>
+              <form onSubmit={addToWhitelist} className="flex gap-2">
+                <input
+                  type="text"
+                  value={whitelistInput}
+                  onChange={(e) => setWhitelistInput(e.target.value)}
+                  placeholder="Minecraft username..."
+                  className="input flex-1"
+                  disabled={whitelistLoading || !server.running}
+                />
+                <button type="submit" className="btn btn-primary" disabled={whitelistLoading || !server.running}>
+                  {whitelistLoading ? 'Adding...' : 'Add'}
+                </button>
+              </form>
+            </div>
+
+            <div className="card p-4">
+              <div className="flex justify-between items-center mb-3">
+                <h3 className="text-sm font-medium text-neutral-300">Whitelisted Players ({whitelistPlayers.length})</h3>
+                <button onClick={fetchWhitelist} className="btn btn-ghost text-sm">
+                  Refresh
+                </button>
+              </div>
+              {whitelistPlayers.length > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {whitelistPlayers.map((player, i) => (
+                    <div key={i} className="flex items-center gap-1 bg-neutral-800 rounded-full pl-3 pr-1 py-1">
+                      <span className="text-sm text-neutral-200">{player}</span>
+                      <button
+                        onClick={() => removeFromWhitelist(player)}
+                        disabled={whitelistLoading || !server.running}
+                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-neutral-700 text-neutral-400 hover:text-red-400"
+                      >
+                        x
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-neutral-500 text-sm">No players whitelisted</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Worlds Tab - Factorio only */}
+        {activeTab === 'worlds' && isModerator && server.type === 'factorio' && (
+          <div className="tab-content">
+            {server.running || server.status === 'starting' || server.status === 'stopping' ? (
+              <div className="card p-8 text-center">
+                <div className="text-neutral-400 mb-2">World management is locked while the server is running</div>
+                <div className="text-neutral-500 text-sm">Stop the server to manage saves</div>
+              </div>
+            ) : (
+              <FactorioWorldManager
+                server={server}
+                token={token}
+                onServerAction={fetchServer}
+              />
+            )}
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
--- a/gsm-frontend/tailwind.config.js
+++ b/gsm-frontend/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/gsm-frontend/transparent_hellgrau.png
+++ b/gsm-frontend/transparent_hellgrau.png
--- a/gsm-frontend/vite.config.js
+++ b/gsm-frontend/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>