diff --git a/FlaskWebProject/FlaskWebProject/static/style.css b/FlaskWebProject/FlaskWebProject/static/style.css
index d13043f..4aec8cc 100644
--- a/FlaskWebProject/FlaskWebProject/static/style.css
+++ b/FlaskWebProject/FlaskWebProject/static/style.css
@@ -1,43 +1,123 @@
+:root {
+    --barca-blue: #002147;
+    --barca-red: #A50044;
+    --barca-gold: #FDB913;
+	--polska-red-dark: #DC143C;
+  	--polska-red: #E30B17;
+  	--polska-white: #FFFFFF;
+}
+
 /* Podstawowy styl */
 body {
-	font-family: 'Arial', sans-serif;
+	font-family: 'Segoe UI', sans-serif;
 	margin: 0;
 	padding: 0;
-	background: #f7f7f7;
+	background: white;
 	color: #222;
 	transition: all 0s ease;
 	display: flex;
 	flex-direction: column;
-	align-items: center; /* Wyśrodkowanie elementów w poziomie */
+	align-items: stretch; /* Wyśrodkowanie elementów w poziomie */
 	justify-content: flex-start; /* Ustalamy początek na górze */
 	min-height: 100vh;
 }
 
 /* Styl nawigacji */
-nav {
-	background: #d32f2f;
-	padding: 0px;
+.navbar {
+  	background: linear-gradient(to right, #002147, #A50044);
+	/*background: linear-gradient(to right, #E30B17, #FFFFFF);*/
+  	color: white;
+  	padding: 1rem 1rem;
+	height: 1.5rem;
+	position: sticky;
+	top: 0;
+	left: 0;
+	width: 100% - 2rem;
+	z-index: 999;
 	display: flex;
-	justify-content: center; /* Wyśrodkowanie linków */
-	width: 100%;
-	color: white;
+	justify-content: space-between;
+	align-items: center;
+  	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
 
-	nav a, nav button {
-		color: white;
-		text-decoration: none;
-		font-weight: bold;
-		background: none;
-		border: none;
-		cursor: pointer;
-		margin: 0 15px; /* Odstęp między elementami */
-	}
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--barca-gold);
+}
+
+.nav-links {
+  display: flex;
+  gap: 0rem;
+  list-style: none;
+}
+
+.nav-links li a,
+.nav-links li button {
+  background-color: rgba(255, 255, 255, 0.05);
+  padding: 1rem 1.25rem; /* dopasowane do .navbar padding */
+  height: 100%;
+  border-radius: 0;
+  color: var(--barca-gold);
+  text-decoration: none;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: 0.3s ease;
+  align-items: center;
+}
+
+.nav-links li a:hover,
+.nav-links li button:hover {
+  background-color: var(--barca-gold, #FDB913);
+  color: var(--barca-blue, #002147);
+}
+
+.hamburger {
+  display: none;
+  font-size: 2rem;
+  color: var(--barca-gold);
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
+    flex-direction: column;
+    background-color: #002147;
+    position: absolute;
+    top: 2.5rem;
+    right: 0rem;
+    padding: 0rem;
+	gap: 0;
+    width: 200px;
+  }
+.nav-links li {
+  width: 100%;
+}
+
+.nav-links li a,
+.nav-links li button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 1rem;
+  margin: 0;
+  border-radius: 0; /* brak zaokrągleń w mobilnym menu */
+}
+
+  .nav-links.show {
+    display: flex;
+  }
+
+  .hamburger {
+    display: block;
+  }
+}
 
 /* Wyśrodkowanie głównej zawartości */
 main {
-	padding: 0px;
-	width: 100%;
-	max-width: 980px; /* Maksymalna szerokość treści */
+	padding: 0px; /* Maksymalna szerokość treści */
 	text-align: center; /* Wyśrodkowanie tekstu */
 }
 
@@ -110,29 +190,51 @@ header button {
 	transition: background-color 0.3s;
 }
 
-	header button:hover {
+header button:hover {
 		background-color: #0056b3;
 	}
 
 /* Style dla listy meczów */
-ul {
-	list-style: none;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	align-items: center; /* Wyśrodkowanie listy */
+.section-stats {
+  	background: linear-gradient(135deg, #002147, #A50044);
+  	color: white;
+  	border-radius: 20px;
+ 	box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+  	padding: 2rem 2rem;
+	max-width: 1000px;
+    margin: 0 auto;
+	margin-bottom: 10px;
+    }
+
+.section-stats h2 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--barca-red);
+    }
+.stats {
+  	display: flex;
+  	justify-content: space-around;
+  	text-align: center;
+  	margin-top: 2rem;
+  	flex-wrap: wrap;
+  	gap: 2rem;
 }
 
-	ul li {
-		background-color: #eaeaea;
-		margin-bottom: 10px;
-		padding: 10px;
-		border-radius: 5px;
-		transition: background-color 0.3s;
-		width: 90%; /* Szerokość li z marginesem */
-		max-width: 800px; /* Maksymalna szerokość elementu */
-	}
-
-		ul li:hover {
-			background-color: #d1d1d1;
-		}
+.stat-box {
+  	background-color: rgba(255, 255, 255, 0.1);
+  	border: 2px solid var(--barca-gold);
+  	color: white;
+  	padding: 2rem;
+ 	border-radius: 15px;
+  	width: 160px;
+  	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+  	transition: transform 0.3s ease;
+}
+.stat-box h3 {
+    font-size: 2.5rem;
+  	margin-bottom: 0.5rem;
+    color: var(--barca-gold);
+    }
+.stat-box p {
+  	font-size: 1.1rem;
+}
diff --git a/FlaskWebProject/FlaskWebProject/templates/base.html b/FlaskWebProject/FlaskWebProject/templates/base.html
index 35454d4..ebb1df3 100644
--- a/FlaskWebProject/FlaskWebProject/templates/base.html
+++ b/FlaskWebProject/FlaskWebProject/templates/base.html
@@ -14,11 +14,16 @@
     <meta property="og:image:width" content = "100">
 </head>
 <body>
-    <nav>
-        <a href="/">🏠 Strona główna</a> |
-        <a href="/mecze">📅 Mecze</a> |
-        <a href="/statystyki">📊 Statystyki</a> |
-        <button id="theme-toggle" onclick="toggleTheme()">🌙 / 🌞</button>
+    <nav class="navbar">
+		<div class="logo">Robert Lewandowski</div>
+		<ul class="nav-links">
+        <li><a href="/">🏠 Strona główna</a></li>
+        <li><a href="/mecze">📅 Mecze</a></li>
+        <li><a href="/statystyki">📊 Statystyki</a></li>
+		<li><a href="/statystyki">📊 Statystyki</a></li>
+        <!--<li><button id="theme-toggle" onclick="toggleTheme()">🌙 / 🌞</button></li>-->
+		</ul>
+		<div class="hamburger">☰</div>
     </nav>
 
     <header>
@@ -31,7 +36,12 @@
     <main>
         {% block content %}{% endblock %}
     </main>
-
+	<script>
+		const hamburger = document.querySelector('.hamburger');
+ 		const navLinks = document.querySelector('.nav-links');
+  		hamburger.addEventListener('click', () => {
+    	navLinks.classList.toggle('show');});
+	</script>
     <script>
         function toggleTheme() {
             const currentMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
diff --git a/FlaskWebProject/FlaskWebProject/templates/stats.html b/FlaskWebProject/FlaskWebProject/templates/stats.html
index e0c56e1..666225b 100644
--- a/FlaskWebProject/FlaskWebProject/templates/stats.html
+++ b/FlaskWebProject/FlaskWebProject/templates/stats.html
@@ -3,10 +3,38 @@
 {% block title %}Statystyki{% endblock %}
 
 {% block content %}
-<h2>Statystyki Roberta Lewandowskiego</h2>
-<ul>
-    <li>Gole: {{ stats.goals }}</li>
-    <li>Asysty: {{ stats.assists }}</li>
-    <li>Mecze: {{ stats.matches }}</li>
-</ul>
+<section class="section-stats">
+<h2>All time stats</h2>
+<div class="stats">
+    <div class="stat-box">
+		<h3>{{ stats.goals }}</h3>
+		<p>Goals</p>
+	</div>
+    <div class="stat-box">
+		<h3>{{ stats.assists }}</h3>
+		<p>Assists</p>
+	</div>
+    <div class="stat-box">
+		<h3>{{ stats.matches }}</h3>
+		<p>Apps</p>
+	</div>
+</div>
+</section>
+<section class="section-stats">
+<h2>All time stats</h2>
+<div class="stats">
+    <div class="stat-box">
+		<h3>{{ stats.goals }}</h3>
+		<p>Goals</p>
+	</div>
+    <div class="stat-box">
+		<h3>{{ stats.assists }}</h3>
+		<p>Assists</p>
+	</div>
+    <div class="stat-box">
+		<h3>{{ stats.matches }}</h3>
+		<p>Apps</p>
+	</div>
+</div>
+</section>
 {% endblock %}