diff --git a/app/templates/auth.html b/app/templates/auth.html
index fab9768..b24681b 100644
--- a/app/templates/auth.html
+++ b/app/templates/auth.html
@@ -28,6 +28,64 @@
             backdrop-filter: blur(10px);
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         }
+
+        @media (max-width: 768px) {
+            .container {
+                width: 85%;
+                padding: 30px;
+            }
+            .logo i {
+                font-size: 40px;
+            }
+            h2 {
+                font-size: 22px;
+            }
+            input {
+                padding: 10px 10px 10px 35px;
+                font-size: 15px;
+            }
+            .input-group i {
+                font-size: 16px;
+            }
+            button {
+                padding: 12px;
+                font-size: 15px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                width: 90%;
+                padding: 25px;
+            }
+            .logo i {
+                font-size: 36px;
+            }
+            h2 {
+                font-size: 20px;
+                margin-bottom: 25px;
+            }
+            form {
+                gap: 15px;
+            }
+            input {
+                padding: 10px 10px 10px 32px;
+                font-size: 14px;
+            }
+            .input-group i {
+                font-size: 15px;
+                left: 10px;
+            }
+            button {
+                padding: 10px;
+                font-size: 14px;
+            }
+            .error-message {
+                font-size: 14px;
+                padding: 8px;
+                margin-top: 12px;
+            }
+        }
         .container:hover {
             transform: translateY(-5px);
             box-shadow: 0 20px 40px rgba(0,0,0,0.25);
diff --git a/app/templates/keys_status.html b/app/templates/keys_status.html
index 07e8953..7fcfdf0 100644
--- a/app/templates/keys_status.html
+++ b/app/templates/keys_status.html
@@ -26,6 +26,74 @@
             position: relative;
             margin: 20px auto;
         }
+
+        @media (max-width: 768px) {
+            .container {
+                width: 100%;
+                padding: 20px;
+                margin: 10px auto;
+            }
+            body {
+                padding: 10px;
+            }
+            h1 {
+                font-size: 24px;
+            }
+            .key-list h2 {
+                font-size: 1.2em;
+                flex-direction: column;
+                gap: 10px;
+                align-items: flex-start;
+            }
+            .key-info {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 8px;
+            }
+            li {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .copy-btn {
+                width: 100%;
+                justify-content: center;
+            }
+            .key-text {
+                word-break: break-all;
+            }
+            .scroll-buttons {
+                right: 10px;
+                bottom: 10px;
+            }
+            .scroll-btn {
+                width: 35px;
+                height: 35px;
+                font-size: 16px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .container {
+                padding: 15px;
+            }
+            h1 {
+                font-size: 20px;
+            }
+            .key-list {
+                padding: 15px;
+            }
+            .status-badge {
+                padding: 3px 8px;
+                font-size: 0.8em;
+            }
+            .fail-count {
+                font-size: 0.8em;
+            }
+            .total {
+                font-size: 1em;
+                padding: 12px 20px;
+            }
+        }
         h1 {
             color: #2c3e50;
             text-align: center;