diff --git a/cms/server/admin/handlers/base.py b/cms/server/admin/handlers/base.py
index 767688a99f..972c982b32 100644
--- a/cms/server/admin/handlers/base.py
+++ b/cms/server/admin/handlers/base.py
@@ -446,13 +446,8 @@ def render_params(self) -> dict:
         if self.current_user is not None:
             params["admin"] = self.current_user
         if self.contest is not None:
-            params["unanswered"] = (
-                self.sql_session.query(Question)
-                .join(Participation)
-                .filter(Participation.contest_id == self.contest.id)
-                .filter(Question.reply_timestamp.is_(None))
-                .filter(Question.ignored.is_(False))
-                .count()
+            params["unanswered"] = count_unanswered_questions(
+                self.sql_session, self.contest.id
             )
             params["unanswered_delay_requests"] = (
                 self.sql_session.query(DelayRequest)
@@ -535,15 +530,10 @@ def render_params_for_training_program(
         Returns:
             The initialized r_params dict.
         """
-        managing_contest = training_program.managing_contest
+        self.contest = training_program.managing_contest
         self.r_params = self.render_params()
         self.r_params["training_program"] = training_program
-        self.r_params["contest"] = managing_contest
-
-        # Count unanswered questions for the managing contest (used in sidebar)
-        self.r_params["unanswered"] = count_unanswered_questions(
-            self.sql_session, managing_contest.id
-        )
+        self.r_params["contest"] = self.contest
 
         # Add notification counts for training days
         (
diff --git a/cms/server/admin/static/aws_style.css b/cms/server/admin/static/aws_style.css
index 4fcf61c37b..daaa84e3d0 100644
--- a/cms/server/admin/static/aws_style.css
+++ b/cms/server/admin/static/aws_style.css
@@ -1178,7 +1178,7 @@ body.admin .notifications .notification {
 
 body.admin .notifications .communication {
     background-color: #DDE6F7;
-        border: 0.143em solid #5A6B84;
+    border: 0.143em solid #5A6B84;
 }
 
 body.admin .notifications .ignored {
diff --git a/cms/server/admin/static/aws_tp_styles.css b/cms/server/admin/static/aws_tp_styles.css
index de8b6a7caa..e8c78a63eb 100644
--- a/cms/server/admin/static/aws_tp_styles.css
+++ b/cms/server/admin/static/aws_tp_styles.css
@@ -2589,7 +2589,7 @@
 }
 
 .tp-groups-table input[type="number"] {
-    width: 40px;
+    width: 50px;
     padding: 8px 6px;
 }
 
@@ -2605,6 +2605,17 @@
     color: var(--tp-text-lighter);
 }
 
+/* Override table font-size for buttons to maintain normal size */
+.tp-groups-table .tp-btn-primary,
+.tp-groups-table .tp-btn-secondary,
+.tp-groups-table .tp-btn-remove {
+    font-size: 0.9rem !important;
+    padding: 6px 16px !important;
+}
+
+.tp-groups-table .tp-btn-remove {
+    padding: 4px 10px;
+}
 .tp-btn-add-group {
     display: inline-flex;
     align-items: center;
@@ -2626,3 +2637,196 @@
 .tp-btn-remove:hover {
     background: var(--tp-danger-border);
 }
+
+/* ==========================================================================
+   Modern Grid & Card Layout (Redesign)
+   ========================================================================== */
+
+/* Main Grid Container */
+.tp-grid-layout {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+    align-items: start;
+}
+
+/* Card Component */
+.tp-card {
+    background: var(--tp-bg-white);
+    border: 1px solid var(--tp-border);
+    border-radius: 12px;
+    box-shadow: var(--tp-shadow-sm);
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Card Header */
+.tp-card-header-modern {
+    padding: 16px 20px;
+    background: var(--tp-bg-white);
+    border-bottom: 1px solid var(--tp-border-light);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.tp-card-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: var(--tp-info-light);
+    color: var(--tp-primary);
+    border-radius: 8px;
+}
+
+.tp-card-title-modern {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--tp-text-primary);
+    margin: 0;
+}
+
+/* Card Body */
+.tp-card-body {
+    padding: 24px;
+    flex: 1;
+}
+
+/* Grid Spans */
+.col-span-12 {
+    grid-column: span 12;
+}
+
+.col-span-6 {
+    grid-column: span 6;
+}
+
+
+@media (max-width: 1100px) {
+
+    .col-span-6 {
+        grid-column: span 12;
+    }
+}
+
+/* Modern Toggle Switch */
+.tp-toggle-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--tp-bg-gray);
+}
+
+.tp-toggle-wrapper:last-child {
+    border-bottom: none;
+}
+
+.tp-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.95rem;
+    color: var(--tp-text-secondary);
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.tp-toggle-input {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 44px;
+    height: 24px;
+    background: #e2e8f0;
+    border-radius: 24px;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    transition: background 0.3s ease;
+    flex-shrink: 0;
+}
+
+.tp-toggle-input::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.tp-toggle-input:checked {
+    background: var(--tp-primary);
+}
+
+.tp-toggle-input:checked::after {
+    transform: translateX(20px);
+}
+
+.tp-toggle-input:focus-visible {
+    box-shadow: 0 0 0 2px var(--tp-bg-white), 0 0 0 4px var(--tp-primary-light);
+}
+
+/* Language Grid */
+.tp-language-container {
+    max-height: 250px;
+    overflow-y: auto;
+    border: 1px solid var(--tp-border);
+    border-radius: 8px;
+    padding: 8px;
+    background-color: var(--tp-bg-gray);
+}
+
+.tp-language-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 8px;
+}
+
+.tp-checkbox-card {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    transition: background 0.2s;
+}
+
+.tp-checkbox-card:hover {
+    background: #e2e8f0;
+}
+
+.tp-checkbox-card input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    accent-color: var(--tp-primary);
+    margin: 0;
+}
+
+.tp-checkbox-card span {
+    font-size: 0.85rem;
+    color: var(--tp-text-secondary);
+    line-height: 1.1;
+}
+
+/* Floating Actions Panel - Only when .tp-form-actions-float class is applied */
+.tp-form-actions.tp-form-actions-float {
+    position: sticky;
+    top: 20px;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+}
+
+.tp-form-actions.tp-form-actions-float:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
diff --git a/cms/server/admin/templates/add_training_day.html b/cms/server/admin/templates/add_training_day.html
index 4e43b9b2e8..af23095662 100644
--- a/cms/server/admin/templates/add_training_day.html
+++ b/cms/server/admin/templates/add_training_day.html
@@ -56,31 +56,10 @@ <h3 class="tp-form-section-title">Basic Information</h3>
                 </div>
             </div>
 
-            <div class="tp-form-section">
-                <h3 class="tp-form-section-title">Main Groups Configuration</h3>
-                <p class="tp-form-section-desc">Configure which student tags represent main groups for this training day. Students must have exactly one main group tag to participate. Leave empty if all students can participate.</p>
-
-                <div class="tp-groups-table-container">
-                    <table class="tp-groups-table" id="main-groups-table">
-                        <thead>
-                            <tr>
-                                <th>Tag Name</th>
-                                <th>Start Time ({{ timezone_name }})</th>
-                                <th>Duration</th>
-                                <th style="text-align: center;">Alphabetical Order</th>
-                                <th style="width: 80px;"></th>
-                            </tr>
-                        </thead>
-                        <tbody id="groups-tbody">
-                        </tbody>
-                    </table>
-                </div>
-
-                <button type="button" id="add-group-btn" class="tp-btn-secondary tp-btn-add-group">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                    Add Main Group
-                </button>
-            </div>
+            <!-- Include unified groups configuration in CREATE mode -->
+            {% with mode='create' %}
+                {% include "fragments/training_day_groups.html" %}
+            {% endwith %}
 
             <div class="tp-form-actions">
                 <a href="{{ url("training_program", training_program.id, "training_days") }}" class="tp-btn-secondary">Cancel</a>
@@ -89,118 +68,4 @@ <h3 class="tp-form-section-title">Main Groups Configuration</h3>
         </form>
     </div>
 </div>
-
-<script>
-var allStudentTags = {{ all_student_tags | default([]) | tojson }};
-var groupRowIndex = 0;
-
-function addGroupRow() {
-    var tbody = document.getElementById('groups-tbody');
-    var row = document.createElement('tr');
-    row.id = 'group-row-' + groupRowIndex;
-
-    var tagCell = document.createElement('td');
-    var tagInput = document.createElement('input');
-    tagInput.type = 'text';
-    tagInput.name = 'group_tag_name[]';
-    tagInput.placeholder = 'Select a student tag';
-    tagInput.style.width = '160px';
-    tagCell.appendChild(tagInput);
-    row.appendChild(tagCell);
-
-    var startCell = document.createElement('td');
-    var startInput = document.createElement('input');
-    startInput.type = 'datetime-local';
-    startInput.name = 'group_start_time[]';
-    startCell.appendChild(startInput);
-    row.appendChild(startCell);
-
-    var durationCell = document.createElement('td');
-    var durationDiv = document.createElement('div');
-    durationDiv.className = 'tp-group-duration';
-    var hoursInput = document.createElement('input');
-    hoursInput.type = 'number';
-    hoursInput.name = 'group_duration_hours[]';
-    hoursInput.min = '0';
-    hoursInput.placeholder = '0';
-    durationDiv.appendChild(hoursInput);
-    var hLabel = document.createElement('span');
-    hLabel.textContent = 'h';
-    durationDiv.appendChild(hLabel);
-    var minutesInput = document.createElement('input');
-    minutesInput.type = 'number';
-    minutesInput.name = 'group_duration_minutes[]';
-    minutesInput.min = '0';
-    minutesInput.max = '59';
-    minutesInput.placeholder = '0';
-    durationDiv.appendChild(minutesInput);
-    var mLabel = document.createElement('span');
-    mLabel.textContent = 'm';
-    durationDiv.appendChild(mLabel);
-    durationCell.appendChild(durationDiv);
-    row.appendChild(durationCell);
-
-    var alphaCell = document.createElement('td');
-    alphaCell.style.textAlign = 'center';
-
-    var groupIdInput = document.createElement('input');
-    groupIdInput.type = 'hidden';
-    groupIdInput.name = 'group_id[]';
-    groupIdInput.value = groupRowIndex;
-    alphaCell.appendChild(groupIdInput);
-
-    var alphaInput = document.createElement('input');
-    alphaInput.type = 'checkbox';
-    alphaInput.name = 'alphabetical_' + groupRowIndex;
-    alphaCell.appendChild(alphaInput);
-    row.appendChild(alphaCell);
-
-    var actionsCell = document.createElement('td');
-    var removeBtn = document.createElement('button');
-    removeBtn.type = 'button';
-    removeBtn.className = 'tp-btn-remove';
-    removeBtn.textContent = 'Remove';
-    actionsCell.appendChild(removeBtn);
-    row.appendChild(actionsCell);
-
-    tbody.appendChild(row);
-
-    var tagifyInstance = null;
-    if (typeof Tagify !== 'undefined') {
-        tagifyInstance = new Tagify(tagInput, {
-            mode: 'select',
-            whitelist: allStudentTags,
-            enforceWhitelist: true,
-            dropdown: {
-                maxItems: 20,
-                enabled: 0,
-                closeOnSelect: true
-            },
-            originalInputValueFormat: function(valuesArr) {
-                return valuesArr.length ? valuesArr[0].value : '';
-            }
-        });
-        tagifyInstance.DOM.scope.style.width = '160px';
-    }
-
-    removeBtn.onclick = function() {
-        if (tagifyInstance) {
-            tagifyInstance.destroy();
-        }
-        row.remove();
-    };
-
-    groupRowIndex++;
-}
-
-document.getElementById('add-group-btn').addEventListener('click', addGroupRow);
-
-document.querySelector('form[name="add_training_day"]').addEventListener('submit', function() {
-    var groupIds = document.querySelectorAll('#groups-tbody input[name="group_id[]"]');
-    groupIds.forEach(function(input, index) {
-        input.value = index;
-    });
-});
-</script>
-
 {% endblock core %}
diff --git a/cms/server/admin/templates/base.html b/cms/server/admin/templates/base.html
index a9013a6121..db33bb9b4a 100644
--- a/cms/server/admin/templates/base.html
+++ b/cms/server/admin/templates/base.html
@@ -493,7 +493,7 @@ <h2 class="sidebar-section-title">
           <ul class="menu">
             <li class="menu_entry">
               <span class="menu-icon">
-                <svg class="icon" width="18" height="18"><use href="#icon-home"/></svg>
+                <svg class="icon" width="18" height="18"><use href="#icon-settings"/></svg>
               </span>
               <a class="menu_link" href="{{ url("training_program", training_program.id) }}">General</a>
             </li>
@@ -603,7 +603,7 @@ <h2 class="sidebar-section-title">
           <ul class="menu">
             <li class="menu_entry">
               <span class="menu-icon">
-                <svg class="icon" width="18" height="18"><use href="#icon-home"/></svg>
+                <svg class="icon" width="18" height="18"><use href="#icon-settings"/></svg>
               </span>
               <a class="menu_link" href="{{ url("contest", contest.id) }}">General</a>
             </li>
diff --git a/cms/server/admin/templates/contest.html b/cms/server/admin/templates/contest.html
index c69ed8c13c..95b5f794c8 100644
--- a/cms/server/admin/templates/contest.html
+++ b/cms/server/admin/templates/contest.html
@@ -1,43 +1,71 @@
 {% extends "base.html" %}
 
 {% block core %}
-<div class="core_title">
-  <h1>Contest configuration</h1>
-</div>
+<div class="content-constraint">
+    <!-- Header -->
+    <div class="page-title">
+        <h1>Contest Configuration</h1>
+        <div class="page-subtitle">Configure settings for {{ contest.name }}</div>
+    </div>
+
+    {% include "fragments/overload_warning.html" %}
+
+    {% if contest.training_day is not none %}
+        <!-- Separate forms for group actions to avoid nested forms inside edit_contest -->
+        <form id="update-groups-form" action="{{ url("contest", contest.id, "training_day_groups", "update") }}" method="POST">
+            {{ xsrf_form_html|safe }}
+        </form>
+        <form id="add-group-form" action="{{ url("contest", contest.id, "training_day_group", "add") }}" method="POST">
+            {{ xsrf_form_html|safe }}
+        </form>
+    {% endif %}
+
+    <form enctype="multipart/form-data" action="{{ url("contest", contest.id) }}" method="POST" name="edit_contest" style="display:inline;">
+        {{ xsrf_form_html|safe }}
+
+        <!-- Actions Bar (Moved to Top) -->
+        <div class="tp-form-actions tp-form-actions-float" style="margin-bottom: 24px; margin-top: 0; background: var(--tp-bg-white); border: 1px solid var(--tp-border); border-radius: 12px; padding: 16px 24px;">
+            <div class="tp-form-submit-group">
+                 <button type="submit" class="tp-btn-primary" {% if not admin.permission_all %}disabled{% endif %}>Update Configuration</button>
+                 <input type="reset" class="tp-btn-secondary" value="Reset Changes">
+            </div>
+
+            <div style="display: flex; gap: 10px; align-items: center;">
+                <a href="{{ url("contest", contest.id, "export") }}" class="tp-btn-secondary">
+                    <svg class="icon" width="16" height="16"><use href="#icon-download"/></svg>
+                    Export
+                </a>
+            </div>
+        </div>
 
-{% include "fragments/overload_warning.html" %}
-
-<!-- Training day groups configuration (shown at top for training day contests) -->
-{% include "fragments/training_day_groups.html" %}
-
-<!-- We use "multipart/form-data" to have Tornado distinguish between missing and empty values. -->
-<form enctype="multipart/form-data" action="{{ url("contest", contest.id) }}" method="POST" name="edit_contest" style="display:inline;">
-  {{ xsrf_form_html|safe }}
-  <table class="sub_table">
-    {% with show_folder=true, show_name=true, show_description=true, show_login_section=true, show_analysis_section=true %}
-      {% include "fragments/contest_config_fields.html" %}
-    {% endwith %}
-  </table>
-  <input type="submit"
-         value="Update"
-{% if not admin.permission_all %}
-         disabled
-{% endif %}
-         >
-  <input type="reset" value="Reset">
-  <a href="{{ url("contest", contest.id, "export") }}"> ⇩ Export </a>
-</form>
-
-<form action="{{ url("contests") }}" method="POST" style="display:inline;">
-    {{ xsrf_form_html|safe }}
-    <input type="hidden" name="contest_id" value="{{ contest.id }}"/>
-    <input type="submit"
-         name="operation"
-         value="Remove" style="float: right;"
-{% if not admin.permission_all %}
-         disabled
-{% endif %}
-         />
-</form>
+        <div class="tp-grid-layout">
+
+            <!-- Main Groups Card (Full Width) - Only for Training Day Contests -->
+            {% if contest.training_day is not none %}
+            <div class="col-span-12">
+                 {% include "fragments/training_day_groups.html" %}
+            </div>
+            {% endif %}
+
+            <!-- The rest of the config cards -->
+            {% with show_folder=true, show_name=true, show_description=true, show_login_section=true, show_analysis_section=true %}
+                {% include "fragments/contest_config_fields.html" %}
+            {% endwith %}
+
+        </div>
+    </form>
+
+    <!-- Remove Action -->
+    <div style="margin-top: 24px; text-align: right;">
+        <form action="{{ url("contests") }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to remove this contest? This cannot be undone.');">
+            {{ xsrf_form_html|safe }}
+            <input type="hidden" name="contest_id" value="{{ contest.id }}"/>
+                <button type="submit" name="operation" value="Remove" class="tp-btn-remove" {% if not admin.permission_all %}disabled{% endif %}>
+                    <svg class="icon" width="14" height="14" style="vertical-align: text-bottom;"><use href="#icon-trash"/></svg>
+                    Remove Contest
+                </button>
+        </form>
+    </div>
+</div>
 
 {% endblock core %}
diff --git a/cms/server/admin/templates/fragments/contest_config_fields.html b/cms/server/admin/templates/fragments/contest_config_fields.html
index 1bfa98ba6b..384d729e64 100644
--- a/cms/server/admin/templates/fragments/contest_config_fields.html
+++ b/cms/server/admin/templates/fragments/contest_config_fields.html
@@ -26,329 +26,396 @@
 {% set show_login_section = show_login_section|default(true) %}
 {% set show_analysis_section = show_analysis_section|default(true) %}
 
-<tr><td colspan=2><h2>Contest information</h2></td></tr>
-{% if show_name %}
-<tr>
-  <td>
-    <span class="info" title="A short name for the contest, preferably using only letters, numbers and underscores."></span>
-    Name
-  </td>
-  <td><input type="text" name="name" value="{{ contest.name }}"></td>
-</tr>
-{% endif %}
-{% if show_description %}
-<tr>
-  <td>
-    <span class="info" title="The name of the contest as seen by the contestants."></span>
-    Description
-  </td>
-  <td><textarea name="description">{{ contest.description }}</textarea></td>
-</tr>
-{% endif %}
-{% if show_folder and all_folders is defined %}
-<tr>
-  <td>
-    <span class="info" title="Folder that contains this contest. Leave as (root) for top-level."></span>
-    Folder
-  </td>
-  <td>
-    <select name="folder_id">
-      <option value="none">(root)</option>
-      {% for f in all_folders %}
-        <option value="{{ f.id }}" {{ 'selected' if contest.folder is not none and contest.folder.id == f.id else '' }}>{{ f.description }}</option>
-      {% endfor %}
-    </select>
-  </td>
-</tr>
-{% endif %}
-<tr>
-  <td>
-    <span class="info" title="The list of languages that contestants can use, or empty for allowing any language.
-                              Example: 'en,ja' (without quotes)."></span>
-    Allowed localizations
-  </td>
-  <td><input type="text" name="allowed_localizations" value="{{ contest.allowed_localizations|join(",") }}"/></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Programming languages that contestants can use to solve the tasks.
-                              All the allowed languages must have task support, for example in managed tasks."></span>
-    Allowed programming languages
-  </td>
-  <td class="wrapping-options">
-    {% for lang in LANGUAGES %}
-      <label><input type="checkbox" name="languages" value="{{ lang.name }}" {{ "checked" if lang.name in contest.languages else "" }}>{{ lang.name }}</label>
-    {% endfor %}
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Whether contestants can download their own submissions."></span>
-    <label for="submissions_download_allowed">Submissions download allowed</label>
-  </td>
-  <td>
-    <input type="checkbox" id="submissions_download_allowed" name="submissions_download_allowed" {{ "checked" if contest.submissions_download_allowed else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Whether contestants can submit questions."></span>
-    <label for="allow_questions">Allow questions</label>
-  </td>
-  <td>
-    <input type="checkbox" id="allow_questions" name="allow_questions" {{ "checked" if contest.allow_questions else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="If checked, contestants will be able to submit delay requests for this contest."></span>
-    <label for="allow_delay_requests">Allow delay requests</label>
-  </td>
-  <td>
-    <input type="checkbox" id="allow_delay_requests" name="allow_delay_requests" {{ "checked" if contest.allow_delay_requests else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Whether contestants can submit user tests."></span>
-    <label for="allow_user_tests">Allow user tests</label>
-  </td>
-  <td>
-    <input type="checkbox" id="allow_user_tests" name="allow_user_tests" {{ "checked" if contest.allow_user_tests else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The number of decimal places the scores will be rounded to.
-                              Example: '2' to allow 98.76."></span>
-    Score decimal places
-  </td>
-  <td><input type="text" name="score_precision" value="{{ contest.score_precision }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Allow contestant to make unofficial submission before analysis mode"></span>
-    Allow unofficial submission before analysis mode
-  </td>
-  <td>
-    <input type="checkbox" id="allow_unofficial_submission_before_analysis_mode" name="allow_unofficial_submission_before_analysis_mode" {{ "checked" if contest.allow_unofficial_submission_before_analysis_mode else "" }}/>
-  </td>
-</tr>
+<!-- 1. Contest Information (Mixed Layout) -->
+<div class="tp-card col-span-12">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-info"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Contest information</h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-form-row">
+            {% if show_name %}
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="name">
+                    Name
+                    <span class="tp-form-info" title="A short name for the contest, preferably using only letters, numbers and underscores.">?</span>
+                </label>
+                <input type="text" id="name" name="name" value="{{ contest.name }}" class="tp-form-input">
+            </div>
+            {% endif %}
+
+            {% if show_folder and all_folders is defined %}
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="folder_id">
+                    Folder
+                    <span class="tp-form-info" title="Folder that contains this contest. Leave as (root) for top-level.">?</span>
+                </label>
+                <select id="folder_id" name="folder_id" class="tp-form-input">
+                    <option value="none">(root)</option>
+                    {% for f in all_folders %}
+                    <option value="{{ f.id }}" {{ 'selected' if contest.folder is not none and contest.folder.id == f.id else '' }}>{{ f.description }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            {% endif %}
+        </div>
+
+        {% if show_description %}
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="description">
+                Description
+                <span class="tp-form-info" title="The name of the contest as seen by the contestants.">?</span>
+            </label>
+            <textarea id="description" name="description" class="tp-form-input" rows="3">{{ contest.description }}</textarea>
+        </div>
+        {% endif %}
+
+        <!-- Two Column Section: Languages & Features -->
+        <div class="tp-grid-layout">
+            <!-- Left Column: Allowed programming languages -->
+            <div class="col-span-6">
+                <fieldset class="tp-form-group">
+                    <legend class="tp-form-label">
+                        Allowed programming languages
+                        <span class="tp-form-info" title="Programming languages that contestants can use to solve the tasks. All the allowed languages must have task support, for example in managed tasks.">?</span>
+                    </legend>
+                    <div class="tp-language-container">
+                        <div class="tp-language-grid">
+                            {% for lang in LANGUAGES %}
+                            <label class="tp-checkbox-card">
+                                <input type="checkbox" name="languages" value="{{ lang.name }}" {{ "checked" if lang.name in contest.languages else "" }}>
+                                <span>{{ lang.name }}</span>
+                            </label>
+                            {% endfor %}
+                        </div>
+                    </div>
+                </fieldset>
+
+                <div class="tp-form-group">
+                    <label class="tp-form-label" for="allowed_localizations">
+                        Allowed localizations
+                        <span class="tp-form-info" title="The list of languages that contestants can use, or empty for allowing any language. Example: 'en,ja' (without quotes).">?</span>
+                    </label>
+                    <input type="text" id="allowed_localizations" name="allowed_localizations" value="{{ contest.allowed_localizations|join(",") }}" class="tp-form-input"/>
+                </div>
+            </div>
 
+            <!-- Right Column: Features & Rules -->
+            <div class="col-span-6">
+                <!-- Toggles -->
+                <div class="tp-toggle-wrapper">
+                    <label class="tp-toggle-label" for="submissions_download_allowed">
+                        Submissions download allowed
+                        <span class="tp-form-info" title="Whether contestants can download their own submissions.">?</span>
+                    </label>
+                    <input type="checkbox" id="submissions_download_allowed" name="submissions_download_allowed" class="tp-toggle-input" {{ "checked" if contest.submissions_download_allowed else "" }}/>
+                </div>
+
+                <div class="tp-toggle-wrapper">
+                    <label class="tp-toggle-label" for="allow_questions">
+                        Allow questions
+                        <span class="tp-form-info" title="Whether contestants can submit questions.">?</span>
+                    </label>
+                    <input type="checkbox" id="allow_questions" name="allow_questions" class="tp-toggle-input" {{ "checked" if contest.allow_questions else "" }}/>
+                </div>
+
+                <div class="tp-toggle-wrapper">
+                    <label class="tp-toggle-label" for="allow_delay_requests">
+                        Allow delay requests
+                        <span class="tp-form-info" title="If checked, contestants will be able to submit delay requests for this contest.">?</span>
+                    </label>
+                    <input type="checkbox" id="allow_delay_requests" name="allow_delay_requests" class="tp-toggle-input" {{ "checked" if contest.allow_delay_requests else "" }}/>
+                </div>
+
+                <div class="tp-toggle-wrapper">
+                    <label class="tp-toggle-label" for="allow_user_tests">
+                        Allow user tests
+                        <span class="tp-form-info" title="Whether contestants can submit user tests.">?</span>
+                    </label>
+                    <input type="checkbox" id="allow_user_tests" name="allow_user_tests" class="tp-toggle-input" {{ "checked" if contest.allow_user_tests else "" }}/>
+                </div>
+
+                <div class="tp-toggle-wrapper">
+                    <label class="tp-toggle-label" for="allow_unofficial_submission_before_analysis_mode">
+                        Allow unofficial submission before analysis mode
+                        <span class="tp-form-info" title="Allow contestant to make unofficial submission before analysis mode">?</span>
+                    </label>
+                    <input type="checkbox" id="allow_unofficial_submission_before_analysis_mode" name="allow_unofficial_submission_before_analysis_mode" class="tp-toggle-input" {{ "checked" if contest.allow_unofficial_submission_before_analysis_mode else "" }}/>
+                </div>
+
+                <div class="tp-form-group" style="margin-top: 16px;">
+                    <label class="tp-form-label" for="score_precision">
+                        Score decimal places
+                        <span class="tp-form-info" title="The number of decimal places the scores will be rounded to. Example: '2' to allow 98.76.">?</span>
+                    </label>
+                    <input type="text" id="score_precision" name="score_precision" value="{{ contest.score_precision }}" class="tp-form-input" style="max-width: 100px;">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 3. Logging In (Half Width) -->
 {% if show_login_section %}
-<tr><td colspan=2><h2>Logging in</h2></td></tr>
-<tr>
-  <td>
-    <span class="info" title="If checked, contestants that are marked as hidden in this contest will not be able to log in."></span>
-    <label for="block_hidden_participations">Block hidden participations</label>
-  </td>
-  <td>
-    <input type="checkbox" id="block_hidden_participations" name="block_hidden_participations" {{ "checked" if contest.block_hidden_participations else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="If checked, contestants will be able to log in using username and password."></span>
-    <label for="allow_password_authentication">Allow password authentication</label>
-  </td>
-  <td>
-    <input type="checkbox" id="allow_password_authentication" name="allow_password_authentication" {{ "checked" if contest.allow_password_authentication else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="If checked, contestants will be able to autonomously create a user account and a participation in the contest."></span>
-    <label for="allow_registration">Allow registration</label>
-  </td>
-  <td>
-    <input type="checkbox" id="allow_registration" name="allow_registration" {{ "checked" if contest.allow_registration else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="If true, contestants with an IP address specified for this contest will only be able to log in from that address."></span>
-    <label for="ip_restriction">IP based login restriction</label>
-  </td>
-  <td>
-    <input type="checkbox" id="ip_restriction" name="ip_restriction" {{ "checked" if contest.ip_restriction else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="If true, contestants with an IP address specified for this contest will be automatically logged in when connecting from that address."></span>
-    <label for="ip_autologin">IP based autologin</label>
-  </td>
-  <td>
-    <input type="checkbox" id="ip_autologin" name="ip_autologin" {{ "checked" if contest.ip_autologin else "" }}/>
-  </td>
-</tr>
+<div class="tp-card col-span-6">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-user"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Logging in</h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="block_hidden_participations">
+                Block hidden participations
+                <span class="tp-form-info" title="If checked, contestants that are marked as hidden in this contest will not be able to log in.">?</span>
+            </label>
+            <input type="checkbox" id="block_hidden_participations" name="block_hidden_participations" class="tp-toggle-input" {{ "checked" if contest.block_hidden_participations else "" }}/>
+        </div>
+
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="allow_password_authentication">
+                Allow password authentication
+                <span class="tp-form-info" title="If checked, contestants will be able to log in using username and password.">?</span>
+            </label>
+            <input type="checkbox" id="allow_password_authentication" name="allow_password_authentication" class="tp-toggle-input" {{ "checked" if contest.allow_password_authentication else "" }}/>
+        </div>
+
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="allow_registration">
+                Allow registration
+                <span class="tp-form-info" title="If checked, contestants will be able to autonomously create a user account and a participation in the contest.">?</span>
+            </label>
+            <input type="checkbox" id="allow_registration" name="allow_registration" class="tp-toggle-input" {{ "checked" if contest.allow_registration else "" }}/>
+        </div>
+
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="ip_restriction">
+                IP based login restriction
+                <span class="tp-form-info" title="If true, contestants with an IP address specified for this contest will only be able to log in from that address.">?</span>
+            </label>
+            <input type="checkbox" id="ip_restriction" name="ip_restriction" class="tp-toggle-input" {{ "checked" if contest.ip_restriction else "" }}/>
+        </div>
+
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="ip_autologin">
+                IP based autologin
+                <span class="tp-form-info" title="If true, contestants with an IP address specified for this contest will be automatically logged in when connecting from that address.">?</span>
+            </label>
+            <input type="checkbox" id="ip_autologin" name="ip_autologin" class="tp-toggle-input" {{ "checked" if contest.ip_autologin else "" }}/>
+        </div>
+    </div>
+</div>
 {% endif %}
 
-<tr><td colspan=2><h2>Tokens parameters{% if rtd_version is defined %} (<a href="https://cms.readthedocs.io/en/{{ rtd_version }}/Configuring%20a%20contest.html#feedback-to-contestants" target="_blank" rel="noopener noreferrer">documentation</a>){% endif %}</h2></td></tr>
-<tr>
-  <td>
-    <span class="info" title="Select 'disabled' to remove tokens completely, 'infinite' for allowing any number of tokens, or 'finite' to specify the amount with the following parameters.
-                              If you prefer to control tokens at the task level, select 'infinite' here."></span>
-    Token mode
-  </td>
-  <td>
-    <select name="token_mode">
-      <option value="{{ TOKEN_MODE_DISABLED }}" {{ "selected" if contest.token_mode == TOKEN_MODE_DISABLED else "" }}>Disabled</option>
-      <option value="{{ TOKEN_MODE_FINITE }}" {{ "selected" if contest.token_mode == TOKEN_MODE_FINITE else "" }}>Finite</option>
-      <option value="{{ TOKEN_MODE_INFINITE }}" {{ "selected" if contest.token_mode == TOKEN_MODE_INFINITE else "" }}>Infinite</option>
-    </select>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The maximum number of tokens a contestant can use in the whole contest.
-                              It is used only if tokens are finite."></span>
-    Maximum number of tokens
-  </td>
-  <td><input type="text" name="token_max_number" value="{{ contest.token_max_number if contest.token_max_number is not none else "" }}" size="3"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The minimum amount of time (in seconds) that a contestant needs to wait after using a token before being able to use another.
-                              It is used only if tokens are finite."></span>
-    Minimum interval between tokens
-  </td>
-  <td><input type="text" name="token_min_interval" value="{{ contest.token_min_interval.total_seconds()|int }}" size="3"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The number of tokens that a contestant has available when their contest time starts.
-                              It is used only if tokens are finite."></span>
-    Initial number of tokens
-  </td>
-  <td><input type="text" name="token_gen_initial" value="{{ contest.token_gen_initial }}" size="3"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The number of tokens that are generated periodically.
-                              It is used only if tokens are finite."></span>
-    Token generation number
-  </td>
-  <td><input type="text" name="token_gen_number" value="{{ contest.token_gen_number }}" size="3"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The amount of time (in minutes) between two token generation events.
-                              It is used only if tokens are finite."></span>
-    Token generation period
-  </td>
-  <td><input type="text" name="token_gen_interval" value="{{ contest.token_gen_interval.total_seconds()|int // 60 }}" size="3"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Maximum number of tokens available to a contestant at any given time during the contest.
-                              It is used only if tokens are finite."></span>
-    Maximum accumulated tokens
-  </td>
-  <td><input type="text" name="token_gen_max" value="{{ contest.token_gen_max if contest.token_gen_max is not none else "" }}" size="3"></td>
-</tr>
-
-<tr><td colspan=2><h2>Times</h2></td></tr>
-<tr>
-  <td>
-    <span class="info" title="Start time of the contest in {{ timezone_name|default('the UTC') }} timezone.
-                              Example: '2015-12-31 15:00:00'."></span>
-    Start time (in {{ timezone_name|default('UTC') }})
-  </td>
-  <td><input type="text" name="start" value="{% if timezone is defined %}{{ contest.start|format_datetime_input(timezone) }}{% else %}{{ contest.start }}{% endif %}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="End time of the contest in {{ timezone_name|default('the UTC') }} timezone.
-                              Example: '2015-12-31 18:00:00'."></span>
-    End time (in {{ timezone_name|default('UTC') }})
-  </td>
-  <td><input type="text" name="stop" value="{% if timezone is defined %}{{ contest.stop|format_datetime_input(timezone) }}{% else %}{{ contest.stop }}{% endif %}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Timezone of the server, used to display start, end times and the current server time to contestants.
-                              Example: 'Europe/Rome', 'America/New_York', ..."></span>
-    Timezone
-  </td>
-  <td><input type="text" name="timezone" value="{{ contest.timezone if contest.timezone is not none else "" }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Length of the contest (in seconds) for each contestant.
-                              If not specified, each contestant can submit solutions for the whole duration of the contest.
-                              If specified, only up to this length after the first log in (or up to the end of the contest, whichever comes first)."></span>
-    Length of the contest
-  </td>
-  <td><input type="text" name="per_user_time" value="{{ contest.per_user_time.total_seconds()|int if contest.per_user_time is not none else "" }}"></td>
-</tr>
-
-<tr><td colspan=2><h2>Limits</h2></td></tr>
-<tr>
-  <td>
-    <span class="info" title="Maximum number of submissions each contestant can submit, for the whole contest.
-                              Leave empty for no limits."></span>
-    Maximum number of submissions
-  </td>
-  <td><input type="text" name="max_submission_number" value="{{ contest.max_submission_number if contest.max_submission_number is not none else "" }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Maximum number of user tests each contestant can submit, for the whole contest.
-                              Leave empty for no limits."></span>
-    Maximum number of user tests
-  </td>
-  <td><input type="text" name="max_user_test_number" value="{{ contest.max_user_test_number if contest.max_user_test_number is not none else "" }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The minimum amount of time (in seconds) that a contestant needs to wait after a submission before being able to submit another.
-                              Leave empty for no limits."></span>
-    Minimum interval between submissions
-  </td>
-  <td><input type="text" name="min_submission_interval" value="{{ contest.min_submission_interval.total_seconds()|int if contest.min_submission_interval is not none else "" }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The amount of time (in seconds) until the end of participation in which the minimum interval between submissions is not enforced."></span>
-    Minimum submission interval grace period
-  </td>
-  <td><input type="text" name="min_submission_interval_grace_period" value="{{ contest.min_submission_interval_grace_period.total_seconds()|int if contest.min_submission_interval_grace_period is not none else "" }}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="The minimum amount of time (in seconds) that a contestant needs to wait after a user test before being able to send another.
-                              Leave empty for no limits."></span>
-    Minimum interval between user tests
-  </td>
-  <td><input type="text" name="min_user_test_interval" value="{{ contest.min_user_test_interval.total_seconds()|int if contest.min_user_test_interval is not none else "" }}"></td>
-</tr>
+<!-- 4. Times (Half Width) -->
+<div class="tp-card col-span-6">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-clock"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Times</h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="timezone">
+                Timezone
+                <span class="tp-form-info" title="Timezone of the server, used to display start, end times and the current server time to contestants. Example: 'Europe/Rome', 'America/New_York', ...">?</span>
+            </label>
+            <input type="text" id="timezone" name="timezone" value="{{ contest.timezone if contest.timezone is not none else "" }}" class="tp-form-input">
+        </div>
+
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="start">
+                    Start time (in {{ timezone_name|default('UTC') }})
+                    <span class="tp-form-info" title="Start time of the contest in {{ timezone_name|default('the UTC') }} timezone. Example: '2015-12-31 15:00:00'.">?</span>
+                </label>
+                <input type="text" id="start" name="start" value="{% if timezone_name is defined %}{{ contest.start|format_datetime_input(timezone) }}{% else %}{{ contest.start }}{% endif %}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="stop">
+                    End time (in {{ timezone_name|default('UTC') }})
+                    <span class="tp-form-info" title="End time of the contest in {{ timezone_name|default('the UTC') }} timezone. Example: '2015-12-31 18:00:00'.">?</span>
+                </label>
+                <input type="text" id="stop" name="stop" value="{% if timezone_name is defined %}{{ contest.stop|format_datetime_input(timezone) }}{% else %}{{ contest.stop }}{% endif %}" class="tp-form-input">
+            </div>
+        </div>
+
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="per_user_time">
+                Length of the contest
+                <span class="tp-form-info" title="Length of the contest (in seconds) for each contestant. If not specified, each contestant can submit solutions for the whole duration of the contest. If specified, only up to this length after the first log in (or up to the end of the contest, whichever comes first).">?</span>
+            </label>
+            <input type="text" id="per_user_time" name="per_user_time" value="{{ contest.per_user_time.total_seconds()|int if contest.per_user_time is not none else "" }}" class="tp-form-input">
+        </div>
+    </div>
+</div>
+
+<!-- 5. Limits (Half Width) -->
+<div class="tp-card col-span-6">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-sliders"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Limits</h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="max_submission_number">
+                    Maximum number of submissions
+                    <span class="tp-form-info" title="Maximum number of submissions each contestant can submit, for the whole contest. Leave empty for no limits.">?</span>
+                </label>
+                <input type="text" id="max_submission_number" name="max_submission_number" value="{{ contest.max_submission_number if contest.max_submission_number is not none else "" }}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="max_user_test_number">
+                    Maximum number of user tests
+                    <span class="tp-form-info" title="Maximum number of user tests each contestant can submit, for the whole contest. Leave empty for no limits.">?</span>
+                </label>
+                <input type="text" id="max_user_test_number" name="max_user_test_number" value="{{ contest.max_user_test_number if contest.max_user_test_number is not none else "" }}" class="tp-form-input">
+            </div>
+        </div>
+
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="min_submission_interval">
+                    Min interval between submissions
+                    <span class="tp-form-info" title="The minimum amount of time (in seconds) that a contestant needs to wait after a submission before being able to submit another. Leave empty for no limits.">?</span>
+                </label>
+                <input type="text" id="min_submission_interval" name="min_submission_interval" value="{{ contest.min_submission_interval.total_seconds()|int if contest.min_submission_interval is not none else "" }}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="min_submission_interval_grace_period">
+                    Submission interval grace period
+                    <span class="tp-form-info" title="The amount of time (in seconds) until the end of participation in which the minimum interval between submissions is not enforced.">?</span>
+                </label>
+                <input type="text" id="min_submission_interval_grace_period" name="min_submission_interval_grace_period" value="{{ contest.min_submission_interval_grace_period.total_seconds()|int if contest.min_submission_interval_grace_period is not none else "" }}" class="tp-form-input">
+            </div>
+        </div>
 
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="min_user_test_interval">
+                Minimum interval between user tests
+                <span class="tp-form-info" title="The minimum amount of time (in seconds) that a contestant needs to wait after a user test before being able to send another. Leave empty for no limits.">?</span>
+            </label>
+            <input type="text" id="min_user_test_interval" name="min_user_test_interval" value="{{ contest.min_user_test_interval.total_seconds()|int if contest.min_user_test_interval is not none else "" }}" class="tp-form-input">
+        </div>
+    </div>
+</div>
+
+<!-- 6. Tokens (Full or 2/3 Width) -->
+<div class="tp-card col-span-6">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-database"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">
+            Tokens parameters
+            {% if rtd_version is defined %} (<a href="https://cms.readthedocs.io/en/{{ rtd_version }}/Configuring%20a%20contest.html#feedback-to-contestants" target="_blank" rel="noopener noreferrer">documentation</a>){% endif %}
+        </h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="token_mode">
+                Token mode
+                <span class="tp-form-info" title="Select 'disabled' to remove tokens completely, 'infinite' for allowing any number of tokens, or 'finite' to specify the amount with the following parameters. If you prefer to control tokens at the task level, select 'infinite' here.">?</span>
+            </label>
+            <select id="token_mode" name="token_mode" class="tp-form-input">
+                <option value="{{ TOKEN_MODE_DISABLED }}" {{ "selected" if contest.token_mode == TOKEN_MODE_DISABLED else "" }}>Disabled</option>
+                <option value="{{ TOKEN_MODE_FINITE }}" {{ "selected" if contest.token_mode == TOKEN_MODE_FINITE else "" }}>Finite</option>
+                <option value="{{ TOKEN_MODE_INFINITE }}" {{ "selected" if contest.token_mode == TOKEN_MODE_INFINITE else "" }}>Infinite</option>
+            </select>
+        </div>
+
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_max_number">
+                    Maximum number of tokens
+                    <span class="tp-form-info" title="The maximum number of tokens a contestant can use in the whole contest. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_max_number" name="token_max_number" value="{{ contest.token_max_number if contest.token_max_number is not none else "" }}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_min_interval">
+                    Minimum interval between tokens
+                    <span class="tp-form-info" title="The minimum amount of time (in seconds) that a contestant needs to wait after using a token before being able to use another. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_min_interval" name="token_min_interval" value="{{ contest.token_min_interval.total_seconds()|int if contest.token_min_interval is not none else '' }}" class="tp-form-input">
+            </div>
+        </div>
+
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_gen_initial">
+                    Initial number of tokens
+                    <span class="tp-form-info" title="The number of tokens that a contestant has available when their contest time starts. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_gen_initial" name="token_gen_initial" value="{{ contest.token_gen_initial }}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_gen_number">
+                    Token generation number
+                    <span class="tp-form-info" title="The number of tokens that are generated periodically. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_gen_number" name="token_gen_number" value="{{ contest.token_gen_number }}" class="tp-form-input">
+            </div>
+        </div>
+
+        <div class="tp-form-row">
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_gen_interval">
+                    Token generation period
+                    <span class="tp-form-info" title="The amount of time (in minutes) between two token generation events. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_gen_interval" name="token_gen_interval" value="{{ (contest.token_gen_interval.total_seconds()|int // 60) if contest.token_gen_interval is not none else '' }}" class="tp-form-input">
+            </div>
+            <div class="tp-form-group">
+                <label class="tp-form-label" for="token_gen_max">
+                    Maximum accumulated tokens
+                    <span class="tp-form-info" title="Maximum number of tokens available to a contestant at any given time during the contest. It is used only if tokens are finite.">?</span>
+                </label>
+                <input type="text" id="token_gen_max" name="token_gen_max" value="{{ contest.token_gen_max if contest.token_gen_max is not none else "" }}" class="tp-form-input">
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 7. Analysis Mode (Half Width) -->
 {% if show_analysis_section %}
-<tr><td colspan=2><h2>Analysis mode</h2></td></tr>
-<tr>
-  <td>
-    <span class="info" title="If true, analysis mode for this contest will be enabled."></span>
-    Enabled
-  </td>
-  <td>
-    <input type="checkbox" id="analysis_enabled" name="analysis_enabled" {{ "checked" if contest.analysis_enabled else "" }}/>
-  </td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="Start time of the analysis mode in {{ timezone_name|default('the UTC') }} timezone.
-                              Example: '2015-12-31 15:00:00'."></span>
-    Analysis mode start time (in {{ timezone_name|default('UTC') }})
-  </td>
-  <td><input type="text" name="analysis_start" value="{% if timezone is defined %}{{ contest.analysis_start|format_datetime_input(timezone) }}{% else %}{{ contest.analysis_start }}{% endif %}"></td>
-</tr>
-<tr>
-  <td>
-    <span class="info" title="End time of the analysis mode in {{ timezone_name|default('the UTC') }} timezone.
-                              Example: '2015-12-31 18:00:00'."></span>
-    Analysis mode end time (in {{ timezone_name|default('UTC') }})
-  </td>
-  <td><input type="text" name="analysis_stop" value="{% if timezone is defined %}{{ contest.analysis_stop|format_datetime_input(timezone) }}{% else %}{{ contest.analysis_stop }}{% endif %}"></td>
-</tr>
+<div class="tp-card col-span-6">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-eye"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Analysis mode</h3>
+    </div>
+    <div class="tp-card-body">
+        <div class="tp-toggle-wrapper">
+            <label class="tp-toggle-label" for="analysis_enabled">
+                Enabled
+                <span class="tp-form-info" title="If true, analysis mode for this contest will be enabled.">?</span>
+            </label>
+            <input type="checkbox" id="analysis_enabled" name="analysis_enabled" class="tp-toggle-input" {{ "checked" if contest.analysis_enabled else "" }}/>
+        </div>
+
+        <div class="tp-form-group" style="margin-top: 16px;">
+            <label class="tp-form-label" for="analysis_start">
+                Analysis mode start time (in {{ timezone_name|default('UTC') }})
+                <span class="tp-form-info" title="Start time of the analysis mode in {{ timezone_name|default('the UTC') }} timezone. Example: '2015-12-31 15:00:00'.">?</span>
+            </label>
+            <input type="text" id="analysis_start" name="analysis_start" value="{% if timezone is defined %}{{ contest.analysis_start|format_datetime_input(timezone) }}{% else %}{{ contest.analysis_start }}{% endif %}" class="tp-form-input">
+        </div>
+        <div class="tp-form-group">
+            <label class="tp-form-label" for="analysis_stop">
+                Analysis mode end time (in {{ timezone_name|default('UTC') }})
+                <span class="tp-form-info" title="End time of the analysis mode in {{ timezone_name|default('the UTC') }} timezone. Example: '2015-12-31 18:00:00'.">?</span>
+            </label>
+            <input type="text" id="analysis_stop" name="analysis_stop" value="{% if timezone is defined %}{{ contest.analysis_stop|format_datetime_input(timezone) }}{% else %}{{ contest.analysis_stop }}{% endif %}" class="tp-form-input">
+        </div>
+    </div>
+</div>
 {% endif %}
diff --git a/cms/server/admin/templates/fragments/info_alert.html b/cms/server/admin/templates/fragments/info_alert.html
index ee08a78c01..6be4667ef2 100644
--- a/cms/server/admin/templates/fragments/info_alert.html
+++ b/cms/server/admin/templates/fragments/info_alert.html
@@ -11,17 +11,9 @@
 <div class="tp-info-alert tp-info-alert-{{ type }}">
     <div class="tp-info-alert-icon">
         {% if type == 'warning' %}
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
-            <line x1="12" y1="9" x2="12" y2="13"></line>
-            <line x1="12" y1="17" x2="12.01" y2="17"></line>
-        </svg>
+        <svg class="icon" width="20" height="20"><use href="#icon-alert-triangle"/></svg>
         {% else %}
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="10"></circle>
-            <line x1="12" y1="16" x2="12" y2="12"></line>
-            <line x1="12" y1="8" x2="12.01" y2="8"></line>
-        </svg>
+        <svg class="icon" width="20" height="20"><use href="#icon-info"/></svg>
         {% endif %}
     </div>
     <div class="tp-info-alert-content">
diff --git a/cms/server/admin/templates/fragments/svg_icons.html b/cms/server/admin/templates/fragments/svg_icons.html
index 9a6ab4e444..532968649d 100644
--- a/cms/server/admin/templates/fragments/svg_icons.html
+++ b/cms/server/admin/templates/fragments/svg_icons.html
@@ -219,5 +219,78 @@
       <path d="M1 3h22v5H1z"/>
       <path d="M10 12h4"/>
     </symbol>
+
+    <!-- Upload icon (arrow pointing up) -->
+    <symbol id="icon-upload" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="17 8 12 3 7 8"/>
+      <line x1="12" y1="3" x2="12" y2="15"/>
+    </symbol>
+
+    <!-- Download icon (arrow pointing down) -->
+    <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+      <polyline points="7 10 12 15 17 10"/>
+      <line x1="12" y1="15" x2="12" y2="3"/>
+    </symbol>
+
+    <!-- Tag icon -->
+    <symbol id="icon-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
+      <line x1="7" y1="7" x2="7.01" y2="7"/>
+    </symbol>
+
+    <!-- Alert triangle icon (warning) -->
+    <symbol id="icon-alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+      <line x1="12" y1="9" x2="12" y2="13"/>
+      <line x1="12" y1="17" x2="12.01" y2="17"/>
+    </symbol>
+
+    <!-- Star icon -->
+    <symbol id="icon-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+    </symbol>
+
+    <!-- User icon (single person) -->
+    <symbol id="icon-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
+      <circle cx="12" cy="7" r="4"/>
+    </symbol>
+
+    <!-- Database icon -->
+    <symbol id="icon-database" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <ellipse cx="12" cy="5" rx="9" ry="3"/>
+      <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
+      <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
+    </symbol>
+
+    <!-- Eye icon -->
+    <symbol id="icon-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+      <circle cx="12" cy="12" r="3"/>
+    </symbol>
+
+    <!-- Unlock icon -->
+    <symbol id="icon-unlock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+      <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
+    </symbol>
+
+    <!-- Duration icon (brackets) -->
+    <symbol id="icon-duration" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M6 2v6h.01L6 8l4 4-4 4 .01.01H6V22"/>
+      <path d="M18 2v6h-.01L18 8l-4 4 4 4-.01.01H18V22"/>
+      <line x1="6" y1="2" x2="18" y2="2"/>
+      <line x1="6" y1="22" x2="18" y2="22"/>
+    </symbol>
+
+    <!-- Settings icon (cog/gear) -->
+    <symbol id="icon-settings" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2"
+            stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="3"/>
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06 a2 2 0 0 1 0 2.83 a2 2 0 0 1-2.83 0l-.06-.06 a1.65 1.65 0 0 0-1.82-.33 a1.65 1.65 0 0 0-1 1.51V21 a2 2 0 0 1-2 2 a2 2 0 0 1-2-2v-.09 a1.65 1.65 0 0 0-1-1.51 a1.65 1.65 0 0 0-1.82.33l-.06.06 a2 2 0 0 1-2.83 0 a2 2 0 0 1 0-2.83l.06-.06 a1.65 1.65 0 0 0 .33-1.82 a1.65 1.65 0 0 0-1.51-1H3 a2 2 0 0 1-2-2 a2 2 0 0 1 2-2h.09 a1.65 1.65 0 0 0 1.51-1 a1.65 1.65 0 0 0-.33-1.82l-.06-.06 a2 2 0 0 1 0-2.83 a2 2 0 0 1 2.83 0l.06.06 a1.65 1.65 0 0 0 1.82.33H9 a1.65 1.65 0 0 0 1-1.51V3 a2 2 0 0 1 2-2 a2 2 0 0 1 2 2v.09 a1.65 1.65 0 0 0 1 1.51 a1.65 1.65 0 0 0 1.82-.33l.06-.06 a2 2 0 0 1 2.83 0 a2 2 0 0 1 0 2.83l-.06.06 a1.65 1.65 0 0 0-.33 1.82V9 a1.65 1.65 0 0 0 1.51 1H21 a2 2 0 0 1 2 2 a2 2 0 0 1-2 2h-.09 a1.65 1.65 0 0 0-1.51 1z"/>
+    </symbol>
   </defs>
 </svg>
diff --git a/cms/server/admin/templates/fragments/training_day_groups.html b/cms/server/admin/templates/fragments/training_day_groups.html
index 54e69ed64e..4b0749c6ca 100644
--- a/cms/server/admin/templates/fragments/training_day_groups.html
+++ b/cms/server/admin/templates/fragments/training_day_groups.html
@@ -1,20 +1,170 @@
-{% if contest.training_day is not none %}
-<h2>Main Groups Configuration</h2>
-<p class="hint">Configure which student tags represent main groups for this training day. Students must have exactly one main group tag to participate.</p>
+{% set mode = mode|default('edit') %}
+{% set is_create = mode == 'create' %}
+
+{% if not is_create %}
+<div class="tp-card">
+    <div class="tp-card-header-modern">
+        <div class="tp-card-header-icon">
+            <svg class="icon" width="18" height="18"><use href="#icon-users"/></svg>
+        </div>
+        <h3 class="tp-card-title-modern">Main Groups Configuration</h3>
+    </div>
+
+    <div class="tp-card-body">
+{% else %}
+<!-- Create mode: no card wrapper, just a section -->
+<div class="tp-form-section">
+    <h3 class="tp-form-section-title">Main Groups Configuration</h3>
+    <p class="tp-form-section-desc">Configure which student tags represent main groups. Students must have exactly one main group tag to participate.</p>
+{% endif %}
+
+        <style>
+            /* Fix Tagify height to match standard inputs */
+            .tp-groups-table .tagify {
+                --tags-border-color: var(--tp-border);
+                --tags-hover-border-color: var(--tp-border-dark);
+                --tags-focus-border-color: var(--tp-primary);
+                border-radius: 6px;
+                background: #fff;
+
+                /* Match standard input height/padding */
+                min-height: 38px;
+                padding: 3px 8px;
+                display: flex;
+                align-items: center;
+                width: 100%;
+                box-sizing: border-box;
+                margin: 0;
+                font-size: 1rem; /* Ensure consistent font size */
+            }
+
+            .tp-groups-table .tagify__input {
+                margin: 0;
+                line-height: 1.5;
+            }
+
+            .tp-groups-table .tagify__tag {
+                margin: 2px 4px 2px 0;
+            }
+
+            /* Ensure table cells align content vertically */
+            .tp-groups-table td {
+                vertical-align: middle;
+            }
+
+            /* Consistent input styling within table */
+            .tp-groups-table .tp-form-input {
+                font-family: inherit;
+                font-size: 1rem; /* Fix small font issue */
+            }
+        </style>
+
+        <div class="tp-groups-table-container">
+            <table class="tp-groups-table" id="main-groups-table">
+                <thead>
+                    <tr>
+                        <th style="width: 25%;">Tag Name</th>
+                        <th style="width: 25%;">Start Time ({{ timezone_name }})</th>
+                        <th style="width: 20%;">Duration</th>
+                        <th style="width: 20%; text-align: center;">Alphabetical Order</th>
+                        <th style="width: 10%;"></th>
+                    </tr>
+                </thead>
+                <tbody id="groups-tbody">
+                    {% if not is_create %}
+                        {# --- EDIT MODE: Existing Groups --- #}
+                        {% for group in contest.training_day.groups %}
+                        <tr>
+                            <td>
+                                <div class="tp-form-input" style="background-color: #f9fafb; border: 1px solid transparent; color: #374151; font-weight: 500; padding: 8px 10px; min-height: 38px; box-sizing: border-box; display: flex; align-items: center;">
+                                    {{ group.tag_name }}
+                                </div>
+                                <input type="hidden" name="group_id[]" value="{{ group.id }}" form="update-groups-form"/>
+                            </td>
+                            <td>
+                                <input type="datetime-local" name="start_time[]" value="{{ group.start_time|format_datetime_input(timezone) if group.start_time else '' }}" class="tp-form-input" style="padding: 8px 10px; height: 38px; box-sizing: border-box;" form="update-groups-form"/>
+                            </td>
+                            <td>
+                                {% set duration_seconds = (group.end_time - group.start_time).total_seconds() if group.start_time and group.end_time else 0 %}
+                                {% set duration_hours = (duration_seconds // 3600)|int %}
+                                {% set duration_minutes = ((duration_seconds % 3600) // 60)|int %}
+                                <div class="tp-group-duration" style="height: 38px; align-items: center;">
+                                    <input type="number" name="duration_hours[]" min="0" value="{{ duration_hours if duration_seconds > 0 else '' }}" placeholder="0" class="tp-form-input" form="update-groups-form"/>
+                                    <span>h</span>
+                                    <input type="number" name="duration_minutes[]" min="0" max="59" value="{{ duration_minutes if duration_seconds > 0 else '' }}" placeholder="0" class="tp-form-input" form="update-groups-form"/>
+                                    <span>m</span>
+                                </div>
+                            </td>
+                            <td style="text-align: center;">
+                                <input type="checkbox" name="alphabetical_{{ group.id }}" {{ "checked" if group.alphabetical_task_order else "" }} style="width: 18px; height: 18px; cursor: pointer;" form="update-groups-form"/>
+                            </td>
+                            <td style="text-align: right;">
+                                <button type="button" class="tp-btn-remove" onclick="removeMainGroup('{{ url("contest", contest.id, "training_day_group", group.id, "remove") }}');" {% if not admin.permission_all %} disabled{% endif %}>Remove</button>
+                            </td>
+                        </tr>
+                        {% endfor %}
+
+                        {# --- EDIT MODE: Add New Group Row --- #}
+                        <tr style="background-color: #f8fafc; border-top: 2px solid #e2e8f0;">
+                            <td style="position: relative;">
+                                <input type="text" name="tag_name" placeholder="New Group Tag" class="tp-form-input" style="background: white;" required form="add-group-form"/>
+                            </td>
+                            <td>
+                                <input type="datetime-local" name="start_time" class="tp-form-input" style="background: white; padding: 8px 10px; height: 38px; box-sizing: border-box;" form="add-group-form"/>
+                            </td>
+                            <td>
+                                <div class="tp-group-duration" style="height: 38px; align-items: center;">
+                                    <input type="number" name="duration_hours" min="0" placeholder="0" class="tp-form-input" style="background: white;" form="add-group-form"/>
+                                    <span>h</span>
+                                    <input type="number" name="duration_minutes" min="0" max="59" placeholder="0" class="tp-form-input" style="background: white;" form="add-group-form"/>
+                                    <span>m</span>
+                                </div>
+                            </td>
+                            <td style="text-align: center;">
+                                <input type="checkbox" name="alphabetical_task_order" style="width: 18px; height: 18px; cursor: pointer;" form="add-group-form"/>
+                            </td>
+                            <td style="text-align: right;">
+                                <button type="submit" id="add-group-submit-btn" class="tp-btn-primary" style="display: none; padding: 6px 12px; font-size: 0.9em;" form="add-group-form" {% if not admin.permission_all %} disabled{% endif %}>
+                                    + Add
+                                </button>
+                            </td>
+                        </tr>
+                    {% endif %}
+                </tbody>
+            </table>
+        </div>
+
+        {% if is_create %}
+            <!-- CREATE MODE: Button to add dynamic JS rows -->
+            <button type="button" id="add-group-btn" class="tp-btn-secondary tp-btn-add-group">
+                <svg class="icon" width="16" height="16"><use href="#icon-plus"/></svg>
+                Add Main Group
+            </button>
+        {% else %}
+            <!-- EDIT MODE: Save changes button -->
+            <div style="margin-top: 16px; text-align: right;">
+                <button type="submit" class="tp-btn-primary" form="update-groups-form" {% if not admin.permission_all %} disabled{% endif %}>Save Group Changes</button>
+            </div>
+        {% endif %}
+
+    {% if not is_create %}
+    </div>
+</div>
+{% else %}
+</div>
+{% endif %}
 
-<style>
-.tagify-tag-select { width: 160px; }
-</style>
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-    var tagInput = document.querySelector('input[name="tag_name"]');
-    if (tagInput && typeof Tagify !== 'undefined') {
-        var whitelist = {{ all_student_tags | tojson }};
-        var tagify = new Tagify(tagInput, {
+/* ... (Keep existing script content) ... */
+// Shared Tagify Configuration
+var allStudentTags = {{ all_student_tags | default([]) | tojson }};
+
+function initTagify(input, onTagChangeCallback) {
+    if (typeof Tagify !== 'undefined' && input) {
+        var tagifyInstance = new Tagify(input, {
             mode: 'select',
-            whitelist: whitelist,
+            whitelist: allStudentTags,
             enforceWhitelist: true,
-            editTags: false,
             dropdown: {
                 maxItems: 20,
                 enabled: 0,
@@ -24,8 +174,166 @@ <h2>Main Groups Configuration</h2>
                 return valuesArr.length ? valuesArr[0].value : '';
             }
         });
-        tagify.DOM.scope.classList.add('tagify-tag-select');
+
+        // Callback when tags are added/removed
+        if (onTagChangeCallback) {
+            tagifyInstance.on('add', onTagChangeCallback);
+            tagifyInstance.on('remove', onTagChangeCallback);
+        }
+
+        return tagifyInstance;
     }
+    return null;
+}
+
+{% if is_create %}
+// --- CREATE MODE LOGIC ---
+var groupRowIndex = 0;
+
+function addGroupRow() {
+    var tbody = document.getElementById('groups-tbody');
+    var row = document.createElement('tr');
+    row.id = 'group-row-' + groupRowIndex;
+
+    // Tag Name
+    var tagCell = document.createElement('td');
+    var tagInput = document.createElement('input');
+    tagInput.type = 'text';
+    tagInput.name = 'group_tag_name[]';
+    tagInput.placeholder = 'Select a student tag';
+    tagInput.className = 'tp-form-input';
+    tagInput.style.background = 'white';
+    tagCell.appendChild(tagInput);
+    row.appendChild(tagCell);
+
+    // Start Time
+    var startCell = document.createElement('td');
+    var startInput = document.createElement('input');
+    startInput.type = 'datetime-local';
+    startInput.name = 'group_start_time[]';
+    startInput.className = 'tp-form-input';
+    startInput.style.padding = '8px 10px';
+    startInput.style.height = '38px';
+    startInput.style.boxSizing = 'border-box';
+    startCell.appendChild(startInput);
+    row.appendChild(startCell);
+
+    // Duration
+    var durationCell = document.createElement('td');
+    var durationDiv = document.createElement('div');
+    durationDiv.className = 'tp-group-duration';
+    durationDiv.style.height = '38px';
+    durationDiv.style.alignItems = 'center';
+
+    var hoursInput = document.createElement('input');
+    hoursInput.type = 'number';
+    hoursInput.name = 'group_duration_hours[]';
+    hoursInput.min = '0';
+    hoursInput.placeholder = '0';
+    hoursInput.className = 'tp-form-input';
+    durationDiv.appendChild(hoursInput);
+
+    var hLabel = document.createElement('span');
+    hLabel.textContent = 'h';
+    durationDiv.appendChild(hLabel);
+
+    var minutesInput = document.createElement('input');
+    minutesInput.type = 'number';
+    minutesInput.name = 'group_duration_minutes[]';
+    minutesInput.min = '0';
+    minutesInput.max = '59';
+    minutesInput.placeholder = '0';
+    minutesInput.className = 'tp-form-input';
+    durationDiv.appendChild(minutesInput);
+
+    var mLabel = document.createElement('span');
+    mLabel.textContent = 'm';
+    durationDiv.appendChild(mLabel);
+
+    durationCell.appendChild(durationDiv);
+    row.appendChild(durationCell);
+
+    // Alpha Order
+    var alphaCell = document.createElement('td');
+    alphaCell.style.textAlign = 'center';
+
+    var groupIdInput = document.createElement('input');
+    groupIdInput.type = 'hidden';
+    groupIdInput.name = 'group_id[]';
+    groupIdInput.value = groupRowIndex;
+    alphaCell.appendChild(groupIdInput);
+
+    var alphaInput = document.createElement('input');
+    alphaInput.type = 'checkbox';
+    alphaInput.name = 'alphabetical_' + groupRowIndex;
+    alphaInput.style.width = '18px';
+    alphaInput.style.height = '18px';
+    alphaInput.style.cursor = 'pointer';
+    alphaCell.appendChild(alphaInput);
+    row.appendChild(alphaCell);
+
+    // Remove Action
+    var actionsCell = document.createElement('td');
+    actionsCell.style.textAlign = 'right';
+    var removeBtn = document.createElement('button');
+    removeBtn.type = 'button';
+    removeBtn.className = 'tp-btn-remove';
+    removeBtn.textContent = 'Remove';
+    actionsCell.appendChild(removeBtn);
+    row.appendChild(actionsCell);
+
+    tbody.appendChild(row);
+
+    var tagifyInstance = initTagify(tagInput);
+
+    removeBtn.onclick = function() {
+        if (tagifyInstance) {
+            tagifyInstance.destroy();
+        }
+        row.remove();
+    };
+
+    groupRowIndex++;
+}
+
+document.getElementById('add-group-btn').addEventListener('click', addGroupRow);
+
+// Update group IDs and alphabetical checkbox names on submit to ensure mapping works
+var mainForm = document.querySelector('form[name="add_training_day"]');
+if (mainForm) {
+    mainForm.addEventListener('submit', function() {
+        var groupIds = document.querySelectorAll('#groups-tbody input[name="group_id[]"]');
+        groupIds.forEach(function(input, index) {
+            input.value = index;
+        });
+        // Also renumber alphabetical_* checkbox names to align with group_id[] indices
+        var alphabeticalCheckboxes = document.querySelectorAll('#groups-tbody input[type="checkbox"][name^="alphabetical_"]');
+        alphabeticalCheckboxes.forEach(function(input, index) {
+            input.name = 'alphabetical_' + index;
+            input.id = 'alphabetical_' + index;
+            // Update associated label if present
+            var label = document.querySelector('label[for="' + input.id + '"]');
+            if (label) {
+                label.setAttribute('for', 'alphabetical_' + index);
+            }
+        });
+    });
+}
+{% else %}
+// --- EDIT MODE LOGIC ---
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Tagify for the "Add New Group" row
+    var newGroupInput = document.querySelector('input[name="tag_name"]');
+    var addBtn = document.getElementById('add-group-submit-btn');
+
+    initTagify(newGroupInput, function(e) {
+        // Toggle button visibility based on whether tags exist
+        if (e.detail.tagify.value.length > 0) {
+            addBtn.style.display = 'inline-block';
+        } else {
+            addBtn.style.display = 'none';
+        }
+    });
 });
 
 function removeMainGroup(url) {
@@ -52,103 +360,5 @@ <h2>Main Groups Configuration</h2>
         alert('Error: ' + error);
     });
 }
-</script>
-
-{% set has_groups = contest.training_day.groups|length > 0 %}
-{% if has_groups %}
-<form action="{{ url("contest", contest.id, "training_day_groups", "update") }}" method="POST" id="update-groups-form">
-  {{ xsrf_form_html|safe }}
-{% endif %}
-<table class="sub_table" id="main-groups-table">
-  <thead>
-    <tr>
-      <th>Tag Name</th>
-      <th>Start Time ({{ timezone_name }})</th>
-      <th>Duration</th>
-      <th>Alphabetical Task Order</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% if has_groups %}
-    {% for group in contest.training_day.groups %}
-    <tr>
-      <td>
-        {{ group.tag_name }}
-        <input type="hidden" name="group_id[]" value="{{ group.id }}"/>
-      </td>
-      <td>
-        <input type="datetime-local" name="start_time[]" value="{{ group.start_time|format_datetime_input(timezone) if group.start_time else '' }}"/>
-      </td>
-      <td>
-        {% set duration_seconds = (group.end_time - group.start_time).total_seconds() if group.start_time and group.end_time else 0 %}
-        {% set duration_hours = (duration_seconds // 3600)|int %}
-        {% set duration_minutes = ((duration_seconds % 3600) // 60)|int %}
-        <input type="number" name="duration_hours[]" min="0" style="width: 60px;" value="{{ duration_hours if duration_seconds > 0 else '' }}" placeholder="0"/> h
-        <input type="number" name="duration_minutes[]" min="0" max="59" style="width: 60px;" value="{{ duration_minutes if duration_seconds > 0 else '' }}" placeholder="0"/> m
-      </td>
-      <td style="text-align: center;">
-        <input type="checkbox" name="alphabetical_{{ group.id }}" {{ "checked" if group.alphabetical_task_order else "" }}/>
-      </td>
-      <td>
-        <button type="button" class="btn btn-danger btn-small" onclick="removeMainGroup('{{ url("contest", contest.id, "training_day_group", group.id, "remove") }}');"{% if not admin.permission_all %} disabled{% endif %}>Remove</button>
-      </td>
-    </tr>
-    {% endfor %}
-    {% else %}
-    <tr>
-      <td colspan="5" style="text-align: center; color: #666;">No main groups configured. All students can participate.</td>
-    </tr>
-    {% endif %}
-  </tbody>
-</table>
-{% if has_groups %}
-<input type="submit" value="Save Group Changes"{% if not admin.permission_all %} disabled{% endif %}/>
-</form>
-{% endif %}
-
-<h3>Add Main Group</h3>
-<form action="{{ url("contest", contest.id, "training_day_group", "add") }}" method="POST">
-  {{ xsrf_form_html|safe }}
-  <table class="sub_table">
-    <tr>
-      <td>
-        <span class="info" title="The student tag that identifies this main group."></span>
-        Tag Name
-      </td>
-      <td><input type="text" name="tag_name" required placeholder="Select a student tag" style="width: 160px;"/></td>
-    </tr>
-    <tr>
-      <td>
-        <span class="info" title="Custom start time for this group in contest timezone (optional). Leave empty to use contest default."></span>
-        Start Time ({{ timezone_name }})
-      </td>
-      <td><input type="datetime-local" name="start_time"/></td>
-    </tr>
-    <tr>
-      <td>
-        <span class="info" title="Duration for this group (optional). Leave empty to use contest default."></span>
-        Duration
-      </td>
-      <td>
-        <input type="number" name="duration_hours" min="0" style="width: 60px;" placeholder="0"/> hours
-        <input type="number" name="duration_minutes" min="0" max="59" style="width: 60px;" placeholder="0"/> minutes
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <span class="info" title="If checked, tasks will be displayed alphabetically by name instead of custom order."></span>
-        <label for="alphabetical_task_order">Alphabetical Task Order</label>
-      </td>
-      <td>
-        <input type="checkbox" id="alphabetical_task_order" name="alphabetical_task_order"/>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <input type="submit" value="Add Group"{% if not admin.permission_all %} disabled{% endif %}/>
-      </td>
-    </tr>
-  </table>
-</form>
 {% endif %}
+</script>
diff --git a/cms/server/admin/templates/fragments/user_detail_layout.html b/cms/server/admin/templates/fragments/user_detail_layout.html
index a6d2f891b7..b528c41f11 100644
--- a/cms/server/admin/templates/fragments/user_detail_layout.html
+++ b/cms/server/admin/templates/fragments/user_detail_layout.html
@@ -13,9 +13,7 @@
             type="button"
             aria-label="Close"
             style="cursor: pointer; position: absolute; top: 8px; right: 8px; background: none; border: 0; padding: 0;">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false">
-        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
-      </svg>
+      <svg class="icon" width="16" height="16"><use href="#icon-x"/></svg>
     </button>
     <div id="UserDetail_header">
       <div id="UserDetail_summary">
diff --git a/cms/server/admin/templates/student_tasks.html b/cms/server/admin/templates/student_tasks.html
index d88ffa9a80..f9421eca82 100644
--- a/cms/server/admin/templates/student_tasks.html
+++ b/cms/server/admin/templates/student_tasks.html
@@ -176,12 +176,7 @@ <h2>Assigned Tasks ({{ student_tasks|length }})</h2>
                             <form action="{{ url("training_program", training_program.id, "student", selected_user.id, "task", st.task.id, "remove") }}" method="POST" style="margin: 0;">
                                 {{ xsrf_form_html|safe }}
                                 <button type="submit" class="btn-icon-only" {% if not admin.permission_all %}disabled{% endif %} onclick="return confirm('Are you sure you want to remove this task from the student\'s archive?');" title="Remove task">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="3 6 5 6 21 6"></polyline>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                                        <line x1="10" y1="11" x2="10" y2="17"></line>
-                                        <line x1="14" y1="11" x2="14" y2="17"></line>
-                                    </svg>
+                                    <svg class="icon" width="18" height="18"><use href="#icon-trash"/></svg>
                                 </button>
                             </form>
                         </div>
diff --git a/cms/server/admin/templates/training_program.html b/cms/server/admin/templates/training_program.html
index ad6fed9b4c..27dc316afc 100644
--- a/cms/server/admin/templates/training_program.html
+++ b/cms/server/admin/templates/training_program.html
@@ -1,45 +1,84 @@
 {% extends "base.html" %}
 
 {% block core %}
-<div class="core_title">
-  <h1>Training Program</h1>
-</div>
+<div class="content-constraint">
+
+    <div class="page-title">
+        <h1>Training Program</h1>
+        <div class="page-subtitle">Manage settings for {{ training_program.name }}</div>
+    </div>
+
+    <form enctype="multipart/form-data" action="{{ url("training_program", training_program.id) }}" method="POST" name="edit_training_program">
+        {{ xsrf_form_html|safe }}
+
+        <!-- Actions (Moved to Top) -->
+        <div class="tp-form-actions tp-form-actions-float" style="margin-bottom: 24px; margin-top: 0; background: var(--tp-bg-white); border: 1px solid var(--tp-border); border-radius: 12px; padding: 16px 24px;">
+            <div class="tp-form-submit-group">
+                <button type="submit" class="tp-btn-primary" {% if not admin.permission_all %}disabled{% endif %}>Update Program</button>
+                <input type="reset" class="tp-btn-secondary" value="Reset">
+            </div>
+
+            <a href="{{ url("training_program", training_program.id, "export") }}" class="tp-btn-secondary">
+                <svg class="icon" width="16" height="16"><use href="#icon-download"/></svg>
+                Export all tasks
+            </a>
+        </div>
+
+        <div class="tp-grid-layout">
 
-<!-- We use "multipart/form-data" to have Tornado distinguish between missing and empty values. -->
-<form enctype="multipart/form-data" action="{{ url("training_program", training_program.id) }}" method="POST" name="edit_training_program" style="display:inline;">
-  {{ xsrf_form_html|safe }}
-  <table class="sub_table">
-    <tr><td colspan=2><h2>Training Program Information</h2></td></tr>
-    <tr>
-      <td>
-        <span class="info" title="A short name for the training program, preferably using only letters, numbers and underscores."></span>
-        Name
-      </td>
-      <td><input type="text" name="name" value="{{ training_program.name }}"/></td>
-    </tr>
-    <tr>
-      <td>
-        <span class="info" title="The name of the training program as seen by users."></span>
-        Description
-      </td>
-      <td><textarea name="description">{{ training_program.description }}</textarea></td>
-    </tr>
-
-    {# Include contest configuration fields for the managing contest #}
-    {% set contest = training_program.managing_contest %}
-    {% with show_folder=false, show_name=false, show_description=false, show_login_section=true, show_analysis_section=false %}
-      {% include "fragments/contest_config_fields.html" %}
-    {% endwith %}
-  </table>
-  <input type="submit" value="Update"{% if not admin.permission_all %} disabled{% endif %}/>
-  <input type="reset" value="Reset">
-  <a href="{{ url("training_program", training_program.id, "export") }}"> ⇩ Export all tasks </a>
-</form>
-
-<form action="{{ url("training_programs") }}" method="POST" style="display:inline;">
-  {{ xsrf_form_html|safe }}
-  <input type="hidden" name="training_program_id" value="{{ training_program.id }}"/>
-  <input type="submit" name="operation" value="Remove" style="float: right;"/>
-</form>
+            <!-- TP Information Card -->
+            <div class="tp-card col-span-12">
+                <div class="tp-card-header-modern">
+                        <div class="tp-card-header-icon">
+                            <svg class="icon" width="18" height="18"><use href="#icon-graduation-cap"/></svg>
+                        </div>
+                        <h3 class="tp-card-title-modern">Training Program Information</h3>
+                </div>
+                <div class="tp-card-body">
+                    <div class="tp-form-group">
+                        <label class="tp-form-label" for="name">
+                            Name
+                            <span class="tp-form-info" title="A short name for the training program, preferably using only letters, numbers and underscores.">?</span>
+                        </label>
+                        <input type="text" id="name" name="name" value="{{ training_program.name }}" class="tp-form-input"/>
+                    </div>
+
+                    <div class="tp-form-group">
+                        <label class="tp-form-label" for="description">
+                            Description
+                            <span class="tp-form-info" title="The name of the training program as seen by users.">?</span>
+                        </label>
+                        <textarea id="description" name="description" class="tp-form-input" rows="3">{{ training_program.description }}</textarea>
+                    </div>
+                </div>
+            </div>
+
+            {# Include contest configuration fields #}
+            {% set contest = training_program.managing_contest %}
+            {% with show_folder=false, show_name=false, show_description=false, show_login_section=true, show_analysis_section=false %}
+                {% include "fragments/contest_config_fields.html" %}
+            {% endwith %}
+
+        </div>
+    </form>
+
+    <div style="margin-top: 24px; text-align: right;">
+        {% if admin.permission_all %}
+        <form action="{{ url("training_programs") }}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to remove this training program?');">
+            {{ xsrf_form_html|safe }}
+            <input type="hidden" name="training_program_id" value="{{ training_program.id }}"/>
+            <button type="submit" name="operation" value="Remove" class="tp-btn-remove" {% if not admin.permission_all %}disabled{% endif %}>
+                <svg class="icon" width="14" height="14" style="vertical-align: text-bottom;"><use href="#icon-trash"/></svg>
+                Remove Program
+            </button>
+        </form>
+        {% else %}
+        <button type="button" class="tp-btn-remove" disabled title="Read-only" aria-disabled="true">
+            <svg class="icon" width="14" height="14" style="vertical-align: text-bottom;"><use href="#icon-trash"/></svg>
+            Remove Program
+        </button>
+        {% endif %}
+    </div>
+</div>
 
 {% endblock core %}
diff --git a/cms/server/admin/templates/training_program_students.html b/cms/server/admin/templates/training_program_students.html
index b22d3c38da..44924494f6 100644
--- a/cms/server/admin/templates/training_program_students.html
+++ b/cms/server/admin/templates/training_program_students.html
@@ -21,30 +21,20 @@ <h1>Students</h1>
                 {% if not admin.permission_all %}disabled{% endif %}
                 onchange="if(this.files.length) this.form.submit();" />
             <label for="students-file-input" class="btn-outline" style="{% if admin.permission_all %}cursor: pointer;{% else %}opacity: 0.5; cursor: not-allowed;{% endif %}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                    <polyline points="17 8 12 3 7 8"></polyline>
-                    <line x1="12" y1="3" x2="12" y2="15"></line>
-                </svg>
+                <svg class="icon" width="18" height="18"><use href="#icon-upload"/></svg>
                 Add Students from List
             </label>
         </form>
 
         <!-- Bulk Assign Task Button -->
         <button type="button" class="btn-outline" onclick="openBulkAssignModal()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
-                <line x1="7" y1="7" x2="7.01" y2="7"></line>
-            </svg>
+            <svg class="icon" width="18" height="18"><use href="#icon-tag"/></svg>
             Bulk Assign Task
         </button>
 
         <!-- Add Student Button -->
         <button type="button" class="btn-filled-primary" onclick="document.getElementById('add-student-dialog').showModal()">
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-            </svg>
+            <svg class="icon" width="18" height="18"><use href="#icon-plus"/></svg>
             Add Student
         </button>
     </div>
@@ -186,12 +176,7 @@ <h2>All Students ({{ training_program.students|length }})</h2>
                                     {% if not admin.permission_all %}disabled{% endif %}
                                     onclick="return confirm('Are you sure you want to remove {{ u.username }} from the training program?');"
                                     title="Remove from program">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="3 6 5 6 21 6"></polyline>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                                        <line x1="10" y1="11" x2="10" y2="17"></line>
-                                        <line x1="14" y1="11" x2="14" y2="17"></line>
-                                    </svg>
+                                    <svg class="icon" width="18" height="18"><use href="#icon-trash"/></svg>
                                 </button>
                             </div>
                         </td>
diff --git a/cms/server/admin/templates/training_program_tasks.html b/cms/server/admin/templates/training_program_tasks.html
index f6f63fff27..9dd5799372 100644
--- a/cms/server/admin/templates/training_program_tasks.html
+++ b/cms/server/admin/templates/training_program_tasks.html
@@ -60,14 +60,7 @@ <h2>All Tasks ({{ training_program.managing_contest.tasks|length }})</h2>
                         <!-- Drag handle -->
                         <td class="grip-cell">
                             <div class="grip-handle" title="Drag to reorder">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                                    <circle cx="9" cy="5" r="1.5"/>
-                                    <circle cx="15" cy="5" r="1.5"/>
-                                    <circle cx="9" cy="12" r="1.5"/>
-                                    <circle cx="15" cy="12" r="1.5"/>
-                                    <circle cx="9" cy="19" r="1.5"/>
-                                    <circle cx="15" cy="19" r="1.5"/>
-                                </svg>
+                                <svg class="icon" width="16" height="16"><use href="#icon-grip"/></svg>
                             </div>
                         </td>
 
@@ -109,10 +102,7 @@ <h2>All Tasks ({{ training_program.managing_contest.tasks|length }})</h2>
                                     {% if not admin.permission_all %}disabled{% endif %}
                                     onclick="return confirm('Detach this task from the archived training day? It will become available for new training days.');"
                                     title="Detach from archived training day">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                                      <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
-                                    </svg>
+                                    <svg class="icon" width="18" height="18"><use href="#icon-unlock"/></svg>
                                 </button>
                                 {% endif %}
                                 <!-- Remove button - opens modal -->
@@ -124,12 +114,7 @@ <h2>All Tasks ({{ training_program.managing_contest.tasks|length }})</h2>
                                     data-is-active="{{ 'true' if (t.training_day and t.training_day.contest) else 'false' }}"
                                     {% if not admin.permission_all %}disabled{% endif %}
                                     title="Remove from program">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="3 6 5 6 21 6"></polyline>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                                        <line x1="10" y1="11" x2="10" y2="17"></line>
-                                        <line x1="14" y1="11" x2="14" y2="17"></line>
-                                    </svg>
+                                    <svg class="icon" width="18" height="18"><use href="#icon-trash"/></svg>
                                 </button>
                             </div>
                         </td>
diff --git a/cmstestsuite/functionaltestframework.py b/cmstestsuite/functionaltestframework.py
index ecd9abd91f..f09d1ed4e0 100644
--- a/cmstestsuite/functionaltestframework.py
+++ b/cmstestsuite/functionaltestframework.py
@@ -241,9 +241,9 @@ def add_contest(self, **kwargs):
         # Contest ID is returned as HTTP response.
         page = resp.text
         match = re.search(
-            r'<form enctype="multipart/form-data" '
-            r'action="../contest/([0-9]+)" '
-            r'method="POST" name="edit_contest" style="display:inline;">',
+            r'<form(?=[^>]*\bname=["\']edit_contest["\'])'
+            r'(?=[^>]*\baction=["\'][^"\']*contest/([0-9]+))'
+            r'[^>]*>',
             page)
         if match is not None:
             contest_id = int(match.groups()[0])