diff --git a/src/main/java/group/goforward/battlbuilder/model/Platform.java b/src/main/java/group/goforward/battlbuilder/model/Platform.java
index 2f47fb0..a2627d8 100644
--- a/src/main/java/group/goforward/battlbuilder/model/Platform.java
+++ b/src/main/java/group/goforward/battlbuilder/model/Platform.java
@@ -33,6 +33,10 @@ public class Platform {
     @Column(name = "deleted_at")
     private OffsetDateTime deletedAt;
 
+    @ColumnDefault("true")
+    @Column(name = "is_active", nullable = false)
+    private Boolean isActive = true;
+
     public Integer getId() {
         return id;
     }
@@ -81,4 +85,12 @@ public class Platform {
         this.deletedAt = deletedAt;
     }
 
+    public Boolean getIsActive() {
+        return isActive;
+    }
+
+    public void setIsActive(Boolean active) {
+        this.isActive = active;
+    }
+
 }
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/views/platform-manager.jsp b/src/main/webapp/WEB-INF/views/platform-manager.jsp
index 5ca88d2..1c90d91 100644
--- a/src/main/webapp/WEB-INF/views/platform-manager.jsp
+++ b/src/main/webapp/WEB-INF/views/platform-manager.jsp
@@ -4,185 +4,118 @@
 <html>
 <head>
     <title>Platform Manager</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        h1 {
-            color: #333;
-        }
-        .form-section {
-            background: #f5f5f5;
-            padding: 20px;
-            border-radius: 8px;
-            margin-bottom: 30px;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: bold;
-        }
-        input[type="text"] {
-            width: 100%;
-            padding: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            box-sizing: border-box;
-        }
-        button {
-            background: #007bff;
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background: #0056b3;
-        }
-        button.delete {
-            background: #dc3545;
-        }
-        button.delete:hover {
-            background: #c82333;
-        }
-        button.edit {
-            background: #28a745;
-            margin-right: 5px;
-        }
-        button.edit:hover {
-            background: #218838;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            background: white;
-        }
-        th, td {
-            padding: 12px;
-            text-align: left;
-            border-bottom: 1px solid #ddd;
-        }
-        th {
-            background: #007bff;
-            color: white;
-        }
-        tr:hover {
-            background: #f5f5f5;
-        }
-        .actions {
-            white-space: nowrap;
-        }
-        .message {
-            padding: 10px;
-            margin-bottom: 20px;
-            border-radius: 4px;
-        }
-        .success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-        .error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-    </style>
+    <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body>
-    <h1>Platform Manager</h1>
-    
-    <div id="message"></div>
-    
-    <div class="form-section">
-        <h2 id="formTitle">Add New Platform</h2>
-        <form id="platformForm">
-            <input type="hidden" id="platformId" name="id">
-            
-            <div class="form-group">
-                <label for="key">Key:</label>
-                <input type="text" id="key" name="key" required>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+        <h1 class="text-4xl font-bold text-gray-800 mb-8">Platform Manager</h1>
+
+        <div id="message" class="hidden"></div>
+
+        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
+            <h2 id="formTitle" class="text-2xl font-semibold text-gray-700 mb-6">Add New Platform</h2>
+            <form id="platformForm">
+                <input type="hidden" id="platformId" name="id">
+
+                <div class="mb-4">
+                    <label for="key" class="block text-sm font-medium text-gray-700 mb-2">Key:</label>
+                    <input type="text" id="key" name="key" required
+                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                </div>
+
+                <div class="mb-6">
+                    <label for="label" class="block text-sm font-medium text-gray-700 mb-2">Label:</label>
+                    <input type="text" id="label" name="label" required
+                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                </div>
+
+                <div class="flex gap-3">
+                    <button type="submit" id="submitBtn"
+                            class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-2 rounded-lg transition duration-200">
+                        Add Platform
+                    </button>
+                    <button type="button" id="cancelBtn" onclick="resetForm()"
+                            class="hidden bg-gray-500 hover:bg-gray-600 text-white font-medium px-6 py-2 rounded-lg transition duration-200">
+                        Cancel
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <div class="bg-white rounded-lg shadow-md overflow-hidden">
+            <div class="px-6 py-4 border-b border-gray-200">
+                <h2 class="text-2xl font-semibold text-gray-700">Existing Platforms</h2>
             </div>
-            
-            <div class="form-group">
-                <label for="label">Label:</label>
-                <input type="text" id="label" name="label" required>
+            <div class="overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-blue-600">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">ID</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Key</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Label</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Created At</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Updated At</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="platformList" class="bg-white divide-y divide-gray-200">
+                        <!-- Platforms will be loaded here -->
+                    </tbody>
+                </table>
             </div>
-            
-            <button type="submit" id="submitBtn">Add Platform</button>
-            <button type="button" id="cancelBtn" onclick="resetForm()" style="display:none; background:#6c757d;">Cancel</button>
-        </form>
-    </div>
-    
-    <div>
-        <h2>Existing Platforms</h2>
-        <table id="platformTable">
-            <thead>
-                <tr>
-                    <th>ID</th>
-                    <th>Key</th>
-                    <th>Label</th>
-                    <th>Created At</th>
-                    <th>Updated At</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody id="platformList">
-                <!-- Platforms will be loaded here -->
-            </tbody>
-        </table>
+        </div>
     </div>
 
     <script>
         const API_BASE = '/api/platforms';
-        
+
         // Load platforms on page load
         document.addEventListener('DOMContentLoaded', function() {
             loadPlatforms();
         });
-        
+
         // Form submission
         document.getElementById('platformForm').addEventListener('submit', function(e) {
             e.preventDefault();
-            
+
             const id = document.getElementById('platformId').value;
             const platform = {
                 key: document.getElementById('key').value,
                 label: document.getElementById('label').value
             };
-            
+
             if (id) {
                 updatePlatform(id, platform);
             } else {
                 addPlatform(platform);
             }
         });
-        
+
         function loadPlatforms() {
             fetch(API_BASE)
                 .then(response => response.json())
                 .then(platforms => {
                     const tbody = document.getElementById('platformList');
                     tbody.innerHTML = '';
-                    
+
                     platforms.forEach(platform => {
                         const row = document.createElement('tr');
+                        row.className = 'hover:bg-gray-50 transition duration-150';
                         row.innerHTML = `
-                            <td>\${platform.id}</td>
-                            <td>\${platform.key}</td>
-                            <td>\${platform.label}</td>
-                            <td>\${formatDate(platform.createdAt)}</td>
-                            <td>\${formatDate(platform.updatedAt)}</td>
-                            <td class="actions">
-                                <button class="edit" onclick="editPlatform(\${platform.id}, '\${escapeHtml(platform.key)}', '\${escapeHtml(platform.label)}')">Edit</button>
-                                <button class="delete" onclick="deletePlatform(\${platform.id})">Delete</button>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">\${platform.id}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">\${platform.key}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">\${platform.label}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">\${formatDate(platform.createdAt)}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">\${formatDate(platform.updatedAt)}</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                <button onclick="editPlatform(\${platform.id}, '\${escapeHtml(platform.key)}', '\${escapeHtml(platform.label)}')"
+                                        class="text-white bg-green-600 hover:bg-green-700 px-3 py-1 rounded mr-2 transition duration-200">
+                                    Edit
+                                </button>
+                                <button onclick="deletePlatform(\${platform.id})"
+                                        class="text-white bg-red-600 hover:bg-red-700 px-3 py-1 rounded transition duration-200">
+                                    Delete
+                                </button>
                             </td>
                         `;
                         tbody.appendChild(row);
@@ -190,7 +123,7 @@
                 })
                 .catch(error => showMessage('Error loading platforms: ' + error, 'error'));
         }
-        
+
         function addPlatform(platform) {
             fetch(API_BASE + '/add', {
                 method: 'POST',
@@ -210,20 +143,20 @@
             })
             .catch(error => showMessage('Error: ' + error, 'error'));
         }
-        
+
         function editPlatform(id, key, label) {
             document.getElementById('platformId').value = id;
             document.getElementById('key').value = key;
             document.getElementById('label').value = label;
             document.getElementById('formTitle').textContent = 'Edit Platform';
             document.getElementById('submitBtn').textContent = 'Update Platform';
-            document.getElementById('cancelBtn').style.display = 'inline-block';
+            document.getElementById('cancelBtn').classList.remove('hidden');
             window.scrollTo(0, 0);
         }
-        
+
         function updatePlatform(id, platform) {
             platform.id = parseInt(id);
-            
+
             fetch(API_BASE + '/add', {
                 method: 'POST',
                 headers: {
@@ -242,7 +175,7 @@
             })
             .catch(error => showMessage('Error: ' + error, 'error'));
         }
-        
+
         function deletePlatform(id) {
             if (confirm('Are you sure you want to delete this platform?')) {
                 fetch(API_BASE + '/delete/' + id, {
@@ -259,31 +192,33 @@
                 .catch(error => showMessage('Error: ' + error, 'error'));
             }
         }
-        
+
         function resetForm() {
             document.getElementById('platformForm').reset();
             document.getElementById('platformId').value = '';
             document.getElementById('formTitle').textContent = 'Add New Platform';
             document.getElementById('submitBtn').textContent = 'Add Platform';
-            document.getElementById('cancelBtn').style.display = 'none';
+            document.getElementById('cancelBtn').classList.add('hidden');
         }
-        
+
         function showMessage(message, type) {
             const messageDiv = document.getElementById('message');
-            messageDiv.className = 'message ' + type;
+            messageDiv.className = type === 'success'
+                ? 'mb-6 p-4 rounded-lg bg-green-100 border border-green-400 text-green-700'
+                : 'mb-6 p-4 rounded-lg bg-red-100 border border-red-400 text-red-700';
             messageDiv.textContent = message;
-            messageDiv.style.display = 'block';
+            messageDiv.classList.remove('hidden');
             setTimeout(() => {
-                messageDiv.style.display = 'none';
+                messageDiv.classList.add('hidden');
             }, 5000);
         }
-        
+
         function formatDate(dateString) {
             if (!dateString) return '';
             const date = new Date(dateString);
             return date.toLocaleString();
         }
-        
+
         function escapeHtml(text) {
             return text.replace(/'/g, "\\'");
         }
