diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index c4cf897..815f2d2 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -5,385 +5,326 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CZ.Basketball - zápasy</title>
 <link rel="icon" type="image/png" href="https://cz.basketball/img/logo-icon.png">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
 <style>
-    :root {
-        --primary-color: #2c3e50;
-        --secondary-color: #3498db;
-        --accent-color: #e74c3c;
-        --light-bg: #f8f9fa;
-        --dark-text: #2c3e50;
-        --light-text: #7f8c8d;
-        --border-color: #e0e0e0;
-        --success-color: #27ae60;
-        --warning-color: #f39c12;
-        --hover-bg: rgba(52, 152, 219, 0.1);
-    }
+body {
+	font-family: system-ui, -apple-system, sans-serif;
+	margin: 0;
+	padding: 10px;
+	background: #1a1a1a;
+	color: #e0e0e0;
+	min-height: 100vh;
+	font-size: 13px;
+}
 
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-    }
+h1 {
+	text-align: center;
+	margin-bottom: 20px;
+	color: #4ade80;
+	font-size: 1.8rem;
+	text-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
+}
 
-    body {
-        font-family: 'Roboto', Arial, sans-serif;
-        background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
-        color: var(--dark-text);
-        line-height: 1.6;
-        padding: 15px;
-        min-height: 100vh;
-    }
+.container {
+	max-width: 1400px;
+	margin: 0 auto;
+}
 
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-    }
+header {
+	text-align: center;
+	margin-bottom: 25px;
+	padding: 20px;
+}
 
-    header {
-        text-align: center;
-        margin-bottom: 25px;
-        padding: 20px;
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-    }
+.controls {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 10px;
+	padding: 15px;
+	background: #2a2a2a;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+	margin-bottom: 15px;
+	border: 1px solid #3a3a3a;
+}
 
-    h1 {
-        color: var(--primary-color);
-        font-size: 2.2rem;
-        font-weight: 700;
-        margin-bottom: 10px;
-        position: relative;
-        display: inline-block;
-    }
+.control-group {
+	display: flex;
+	flex-direction: column;
+	min-width: 140px;
+}
 
-    h1:after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: 0;
-        width: 60px;
-        height: 3px;
-        background: var(--secondary-color);
-        border-radius: 3px;
-    }
+label {
+	font-weight: 500;
+	margin-bottom: 6px;
+	font-size: 0.9rem;
+	color: #a0a0a0;
+}
 
-    .controls {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 15px;
-        margin-bottom: 20px;
-        justify-content: center;
-        background: white;
-        padding: 20px;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    }
+input, select {
+	padding: 8px 14px;
+	font-size: 13px;
+	border: 1px solid #4ade80;
+	border-radius: 6px;
+	cursor: pointer;
+	background: #2a2a2a;
+	color: #e0e0e0;
+	transition: all 0.2s;
+}
 
-    .control-group {
-        display: flex;
-        flex-direction: column;
-        min-width: 140px;
-    }
+input:focus, select:focus {
+	outline: none;
+	border-color: #4ade80;
+	box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
+}
 
-    label {
-        font-weight: 500;
-        margin-bottom: 6px;
-        font-size: 0.9rem;
-        color: var(--light-text);
-    }
+.date-controls {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
 
-    input, select {
-        padding: 10px 12px;
-        border: 1px solid var(--border-color);
-        border-radius: 8px;
-        font-size: 1rem;
-        background: #fafafa;
-        transition: all 0.3s ease;
-    }
+.date-btn {
+	background: #2a2a2a;
+	color: #e0e0e0;
+	border: 1px solid #4ade80;
+	border-radius: 6px;
+	padding: 8px 14px;
+	font-size: 13px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s;
+	min-width: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
 
-    input:focus, select:focus {
-        outline: none;
-        border-color: var(--secondary-color);
-        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
-    }
+.date-btn:hover {
+	background: #3a3a3a;
+	border-color: #4ade80;
+}
 
-    /* Nová tlačítka Den+ a Den- */
-    .date-controls {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
+.filter-buttons {
+	display: flex;
+	justify-content: center;
+	gap: 8px;
+	margin-bottom: 15px;
+	padding: 12px;
+	background: #2a2a2a;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+	border: 1px solid #3a3a3a;
+	flex-wrap: wrap;
+}
 
-    .date-btn {
-        background-color: var(--secondary-color);
-        color: white;
-        border: none;
-        border-radius: 8px;
-        padding: 10px 15px;
-        font-size: 1rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        min-width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+.filter-btn {
+	background: #2a2a2a;
+	border: 1px solid #4ade80;
+	color: #e0e0e0;
+	padding: 6px 12px;
+	border-radius: 6px;
+	transition: all 0.2s;
+	font-weight: 500;
+	font-size: 12px;
+	cursor: pointer;
+}
 
-    .date-btn:hover {
-        background-color: #2980b9;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
-    }
+.filter-btn:hover {
+	background: #3a3a3a;
+	border-color: #4ade80;
+}
 
-    .filter-buttons {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        margin: 15px 0;
-        flex-wrap: wrap;
-    }
+.filter-btn.active {
+	background: #4ade80;
+	color: #1a1a1a;
+	box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
+}
 
-    .filter-btn {
-        padding: 10px 20px;
-        background: #f1f8ff;
-        color: var(--secondary-color);
-        border: 1px solid var(--secondary-color);
-        border-radius: 20px;
-        font-weight: 500;
-        transition: all 0.3s ease;
-        cursor: pointer;
-    }
+#loading, #error {
+	text-align: center;
+	margin: 20px 0;
+	padding: 15px;
+	border-radius: 8px;
+	font-weight: 500;
+	display: none;
+	color: #4ade80;
+}
 
-    .filter-btn:hover {
-        background: var(--secondary-color);
-        color: white;
-    }
+#loading {
+	display: block;
+}
 
-    .filter-btn.active {
-        background: var(--secondary-color);
-        color: white;
-        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
-    }
+#error {
+	color: #ef4444;
+}
 
-    .status-indicators {
-        display: flex;
-        justify-content: center;
-        gap: 15px;
-        margin: 15px 0;
-        flex-wrap: wrap;
-    }
+.table-container {
+	background: #2a2a2a;
+	border-radius: 8px;
+	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+	overflow: hidden;
+	margin: 0 auto;
+	max-width: 1400px;
+	width: 100%;
+	border: 1px solid #3a3a3a;
+	overflow-x: auto;
+}
 
-    .status-item {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        font-size: 0.9rem;
-        padding: 6px 12px;
-        border-radius: 20px;
-        background: white;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    }
+table {
+	border-collapse: collapse;
+	width: 100%;
+	min-width: 700px;
+}
 
-    .status-indicator {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        display: inline-block;
-    }
+thead {
+	background: #4ade80;
+	color: #1a1a1a;
+}
 
-    .status-tv { background: var(--success-color); }
-    .status-live { background: var(--warning-color); }
-    .status-all { background: var(--secondary-color); }
+th {
+	padding: 10px 12px;
+	text-align: left;
+	font-weight: 600;
+	font-size: 12px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
 
-    #loading, #error {
-        text-align: center;
-        margin: 20px 0;
-        padding: 15px;
-        border-radius: 8px;
-        font-weight: 500;
-        display: none;
-    }
+td {
+	padding: 10px 12px;
+	border-bottom: 1px solid #3a3a3a;
+	font-size: 12px;
+}
 
-    #loading {
-        background: rgba(52, 152, 219, 0.1);
-        color: var(--secondary-color);
-        display: block;
-    }
+tbody tr {
+	transition: background-color 0.2s;
+}
 
-    #error {
-        background: rgba(231, 76, 60, 0.1);
-        color: var(--accent-color);
-        display: block;
-    }
+tbody tr:hover {
+	background: rgba(74, 222, 128, 0.1);
+}
 
-    .table-container {
-        overflow-x: auto;
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
-        margin-bottom: 25px;
-        border: 1px solid var(--border-color);
-    }
+tbody tr:last-child td {
+	border-bottom: none;
+}
 
-    table {
-        border-collapse: collapse;
-        width: 100%;
-        min-width: 700px;
-    }
+tr.highlight {
+	background-color: rgba(251, 191, 36, 0.2) !important;
+	font-weight: 600;
+}
 
-    /* Zcela tencí a jednoduché záhlaví tabulky */
-    th {
-        background-color: #2c3e50; /* Tmavě modrá - jedna barva */
-        color: white;
-        font-weight: 500;
-        padding: 14px 12px;
-        text-align: left;
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        font-size: 0.95rem;
-        border: none;
-        /* Odstranění jakýchkoli gradientů nebo stínů */
-        box-shadow: none;
-    }
+tr.nymburk {
+	background-color: rgba(74, 222, 128, 0.05);
+}
 
-    td {
-        padding: 14px 12px;
-        border-bottom: 1px solid var(--border-color);
-        font-size: 0.95rem;
-    }
+a {
+	color: #4ade80;
+	text-decoration: none;
+	transition: color 0.2s;
+}
 
-    tr:nth-child(even) {
-        background-color: #f8f9fa;
-    }
+a:hover {
+	color: #6ee7a7;
+	text-decoration: underline;
+}
 
-    tr:hover {
-        background-color: #e3f2fd;
-        transform: translateY(-1px);
-        transition: all 0.2s ease;
-    }
+.footer {
+	text-align: center;
+	padding: 25px 0;
+	color: #808080;
+	font-size: 0.9rem;
+	margin-top: 20px;
+}
 
-    tr.highlight {
-        background-color: #fff9c4 !important;
-        font-weight: 600;
-        box-shadow: 0 0 0 2px #fbc02d;
-    }
+.match-time {
+	font-weight: 700;
+	color: #e0e0e0;
+	white-space: nowrap;
+}
 
-    tr.nymburk {
-        background-color: #e3f2fd;
-    }
+.team-name {
+	font-weight: 500;
+	color: #e0e0e0;
+}
 
-    a {
-        color: var(--secondary-color);
-        text-decoration: none;
-        font-weight: 500;
-        transition: all 0.2s;
-        padding: 4px 8px;
-        border-radius: 4px;
-    }
+.league-name {
+	font-weight: 500;
+	color: #4ade80;
+}
 
-    a:hover {
-        background: rgba(52, 152, 219, 0.1);
-        text-decoration: underline;
-    }
+/* Responsive design */
+@media (max-width: 768px) {
+	th, td {
+		padding: 8px 6px;
+		font-size: 11px;
+	}
+	
+	h1 {
+		font-size: 1.5rem;
+	}
+	
+	.controls {
+		flex-direction: column;
+		align-items: stretch;
+	}
+	
+	.control-group {
+		min-width: 100%;
+	}
+}
 
-    .footer {
-        text-align: center;
-        padding: 25px 0;
-        color: var(--light-text);
-        font-size: 0.9rem;
-        border-top: 1px solid var(--border-color);
-        margin-top: 20px;
-    }
+@media (max-width: 480px) {
+	body {
+		padding: 10px;
+	}
+	
+	header {
+		padding: 15px;
+	}
+	
+	h1 {
+		font-size: 1.5rem;
+	}
+	
+	.controls {
+		padding: 15px;
+	}
+}
 
-    .match-time {
-        font-weight: 700;
-        color: var(--primary-color);
-    }
+/* Animation */
+@keyframes fadeIn {
+	from { opacity: 0; transform: translateY(10px); }
+	to { opacity: 1; transform: translateY(0); }
+}
 
-    .team-name {
-        font-weight: 500;
-    }
+.fade-in {
+	animation: fadeIn 0.3s ease-out;
+}
 
-    .league-name {
-        font-weight: 500;
-        color: var(--secondary-color);
-    }
+.loading-spinner {
+	border: 4px solid #3a3a3a;
+	border-radius: 50%;
+	border-top: 4px solid #4ade80;
+	width: 40px;
+	height: 40px;
+	animation: spin 1s linear infinite;
+	margin: 20px auto;
+}
 
-    /* Responsive design */
-    @media (max-width: 768px) {
-        .controls {
-            flex-direction: column;
-            align-items: stretch;
-        }
-        
-        .control-group {
-            min-width: 100%;
-        }
-        
-        .filter-buttons {
-            flex-direction: column;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .filter-btn {
-            width: 100%;
-            max-width: 200px;
-        }
-        
-        h1 {
-            font-size: 1.8rem;
-        }
-        
-        th, td {
-            padding: 10px 8px;
-            font-size: 0.9rem;
-        }
-    }
-
-    @media (max-width: 480px) {
-        body {
-            padding: 10px;
-        }
-        
-        header {
-            padding: 15px;
-        }
-        
-        h1 {
-            font-size: 1.5rem;
-        }
-        
-        .controls {
-            padding: 15px;
-        }
-        
-        .status-indicators {
-            flex-direction: column;
-            align-items: center;
-        }
-    }
-
-    /* Animation */
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    .fade-in {
-        animation: fadeIn 0.3s ease-out;
-    }
+@keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
 </style>
 </head>
 <body>
 <div class="container">
     <header>
-        <h1>CZ.Basketball – zápasy</h1>
-        <p>Nejnovější zápasy a streamy</p>
+        <h1>🏀 CZ.Basketball – zápasy</h1>
     </header>
 
     <div class="controls">
@@ -423,9 +364,9 @@
             <thead>
                 <tr>
                     <th>Čas</th>
-                    <th>Liga</th>
                     <th>Domácí</th>
                     <th>Hosté</th>
+                    <th>Liga</th>
                     <th>Preview</th>
                     <th>Live</th>
                     <th>TV</th>
@@ -585,9 +526,9 @@ function renderMatches(matches) {
 
         tr.innerHTML = `
             <td class="match-time">${match.status}</td>
-            <td class="league-name">${league}</td>
             <td class="team-name">${match.home.name}</td>
             <td class="team-name">${match.away.name}</td>
+            <td class="league-name">${league}</td>
             <td>${previewUrl ? '<a href="'+previewUrl+'" target="_blank">Preview</a>' : ''}</td>
             <td>${liveUrl ? '<a href="'+liveUrl+'" target="_blank">Live</a>' : ''}</td>
             <td>${tvUrl ? '<a href="'+tvUrl+'" target="_blank">TV</a>' : ''}</td>