diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index b21ecdd..f8581bc 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -7,164 +7,277 @@
 <title>TVCOM Přenosy</title>
 <style>
 body {
-	font-family: system-ui, sans-serif;
-	margin: 20px;
-	background: #f5f5f5;
-	color: #333;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background: linear-gradient(135deg, #1a5f23 0%, #ff8c00 100%);
+  color: #333;
+  min-height: 100vh;
 }
 
 h1 {
-	text-align: center;
-	margin-bottom: 20px;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #fff;
+  font-size: 2.8rem;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+  background: linear-gradient(to right, #ff8c00, #32cd32);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
 .filters {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 10px;
-	margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 15px;
+  padding: 20px;
+  background: rgba(46, 139, 87, 0.9);
+  border-radius: 15px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+  margin-bottom: 30px;
+  backdrop-filter: blur(10px);
 }
 
 input, select, button {
-	padding: 8px 16px;
-	font-size: 15px;
-	border: 1px solid #ddd;
-	border-radius: 5px;
-	cursor: pointer;
+  padding: 12px 20px;
+  font-size: 16px;
+  border: 2px solid #32cd32;
+  border-radius: 25px;
+  cursor: pointer;
+  background: #fff;
+  color: #1a5f23;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 }
 
-button {
-	background: white;
-	transition: all 0.2s;
+input:focus, select:focus {
+  outline: none;
+  border-color: #ff8c00;
+  box-shadow: 0 2px 10px rgba(255, 140, 0, 0.3);
 }
 
 button:hover {
-	background: #f0f0f0;
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  background: linear-gradient(45deg, #32cd32, #ff8c00);
+  color: #fff;
+}
+
+button:active {
+  transform: translateY(0);
+  background: linear-gradient(45deg, #ff8c00, #32cd32);
 }
 
 button.active {
-	background: #4a90e2;
-	color: white;
-	border-color: #4a90e2;
+  background: linear-gradient(45deg, #32cd32, #ff8c00);
+  color: #fff;
+  border-color: #32cd32;
+  box-shadow: 0 5px 15px rgba(50, 205, 50, 0.4);
 }
 
 .sport-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	justify-content: center;
-	margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 30px;
+  padding: 15px;
+  background: rgba(46, 139, 87, 0.9);
+  border-radius: 15px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+  backdrop-filter: blur(10px);
+}
+
+.sport-buttons button {
+  background: linear-gradient(45deg, #32cd32 0%, #ff8c00 100%);
+  border: none;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 30px;
+  transition: all 0.3s ease;
+  font-weight: 600;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.sport-buttons button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
+  background: linear-gradient(45deg, #ff8c00, #32cd32);
+}
+
+.sport-buttons button.active {
+  background: linear-gradient(45deg, #32cd32, #ff8c00);
+  box-shadow: 0 5px 15px rgba(50, 205, 50, 0.4);
 }
 
 .table-container {
-	background: white;
-	border-radius: 10px;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	overflow: hidden;
+  background: rgba(46, 139, 87, 0.95);
+  border-radius: 15px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+  overflow: hidden;
+  margin: 0 auto;
+  max-width: 1400px;
+  width: 100%;
+  backdrop-filter: blur(10px);
 }
 
 table {
-	width: 100%;
-	border-collapse: collapse;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 thead {
-	background: #4a90e2;
-	color: white;
+  background: linear-gradient(45deg, #32cd32, #ff8c00);
+  color: #fff;
 }
 
 th {
-	padding: 12px;
-	text-align: left;
-	font-weight: 600;
-	font-size: 14px;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
+  padding: 16px;
+  text-align: left;
+  font-weight: 700;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 2px solid rgba(255,255,255,0.2);
+  color: #fff;
 }
 
 td {
-	padding: 12px;
-	border-bottom: 1px solid #e0e0e0;
+  padding: 16px;
+  border-bottom: 1px solid #eee;
 }
 
 tbody tr {
-	transition: background-color 0.2s;
+  transition: all 0.3s ease;
+  border-bottom: 1px solid #eee;
 }
 
 tbody tr:hover {
-	background-color: #f8f9fa;
-}
-
-tbody tr:last-child td {
-	border-bottom: none;
+  background: linear-gradient(90deg, rgba(50, 205, 50, 0.1) 0%, rgba(255, 140, 0, 0.1) 100%);
+  transform: scale(1.01);
 }
 
 .thumbnail {
-	width: 80px;
-	height: 60px;
-	object-fit: cover;
-	border-radius: 5px;
+  width: 100px;
+  height: 70px;
+  object-fit: cover;
+  border-radius: 10px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+  border: 2px solid #fff;
 }
 
 .title-cell {
-	font-weight: 500;
-	color: #333;
+  font-weight: 600;
+  color: #333;
+  font-size: 18px;
 }
 
 .title-cell a {
-	color: #333;
-	text-decoration: none;
+  color: #32cd32;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  font-weight: 600;
 }
 
 .title-cell a:hover {
-	color: #4a90e2;
-	text-decoration: underline;
+  color: #ff8c00;
+  text-decoration: underline;
+  transform: scale(1.05);
 }
 
 .time-cell {
-	white-space: nowrap;
-	color: #666;
-	font-size: 14px;
+  white-space: nowrap;
+  color: #ff8c00;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .sport-cell {
-	color: #666;
-	font-size: 14px;
+  color: #32cd32;
+  font-size: 15px;
+  font-weight: 600;
 }
 
 .league-cell {
-	color: #888;
-	font-size: 13px;
+  color: #555;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .no-results {
-	text-align: center;
-	padding: 40px;
-	color: #666;
-	font-size: 16px;
+  text-align: center;
+  padding: 60px;
+  color: #1a5f23;
+  font-size: 18px;
+  background: rgba(46, 139, 87, 0.7);
+  border-radius: 10px;
+  margin: 20px;
 }
 
 #loading {
-	text-align: center;
-	font-size: 1.2em;
-	margin-top: 30px;
+  text-align: center;
+  font-size: 1.5em;
+  margin-top: 50px;
+  color: #fff;
+  font-weight: 600;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+  background: linear-gradient(45deg, #32cd32, #ff8c00);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.loading-spinner {
+  border: 5px solid rgba(50, 205, 50, 0.3);
+  border-radius: 50%;
+  border-top: 5px solid #ff8c00;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+  margin: 20px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 @media (max-width: 768px) {
-	th, td {
-		padding: 8px;
-		font-size: 13px;
-	}
-	
-	.thumbnail {
-		width: 60px;
-		height: 45px;
-	}
-	
-	th:nth-child(4), td:nth-child(4) {
-		display: none;
-	}
+  .filters {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .sport-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  th, td {
+    padding: 12px 8px;
+    font-size: 14px;
+  }
+  
+  .thumbnail {
+    width: 70px;
+    height: 50px;
+  }
+  
+  h1 {
+    font-size: 2.2rem;
+  }
+  
+  th:nth-child(4), td:nth-child(4) {
+    display: none;
+  }
 }
 </style>
 </head>