diff --git a/templates/base.html b/templates/base.html
index 848df44..bf7b9ea 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -199,6 +199,25 @@
     .btn-logout {
       color: #fff;
     }
+
+    html, body {
+      height: 100%;
+      overflow: hidden; /* Uniknięcie przewijania na dużych ekranach */
+    }
+
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+    }
+
+    .full-height-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: calc(100vh - 56px);
+    }
   </style>
 
   {% block head %}{% endblock %}
diff --git a/templates/login.html b/templates/login.html
index 8273613..a81e8b7 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -1,19 +1,27 @@
 {% extends "base.html" %}
 {% block head %}
 <style>
+  /* Poprawiona responsywność i centrowanie */
+  .full-height-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding-top: 2rem;
+  }
 
-  @media (max-width: 576px), (max-height: 600px) {
+  @media (max-width: 768px) {
     .full-height-row {
-      min-height: auto !important;
+      min-height: auto;
       padding-top: 1rem;
       padding-bottom: 1rem;
     }
   }
 
-  @media (min-width: 577px) and (min-height: 600px) {
-    .full-height-row {
-      min-height: calc(100vh - 56px) !important;
-    }
+  .card {
+    width: 100%;
+    max-width: 420px;
+    margin: auto;
   }
 </style>
 {% endblock %}
diff --git a/templates/register.html b/templates/register.html
index d07a759..7d416d7 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -1,21 +1,29 @@
 {% extends "base.html" %}
 {% block head %}
 <style>
-<style>
-  @media (max-width: 576px), (max-height: 600px) {
+  /* Poprawiona responsywność i centrowanie */
+  .full-height-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding-top: 2rem;
+  }
+
+  @media (max-width: 768px) {
     .full-height-row {
-      min-height: auto !important;
+      min-height: auto;
       padding-top: 1rem;
       padding-bottom: 1rem;
     }
   }
-  @media (min-width: 577px) and (min-height: 600px) {
-    .full-height-row {
-      min-height: calc(100vh - 56px) !important;
-    }
+
+  .card {
+    width: 100%;
+    max-width: 420px;
+    margin: auto;
   }
 </style>
-</style>
 {% endblock %}
 {% block content %}
 <div class="container">