diff --git a/index.html b/index.html
index d76cf32..9e008bc 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
 </head>
 
 <!-- Разработчик: Илья) -->
+
 <body>
     <div class="logo">
         <h1 id="h1">Генератор QR-кодов</h1>
@@ -40,16 +41,20 @@
 
     <div class="inputs">
         <textarea id="text-input" cols="30" rows="3" placeholder="Введите текст"></textarea>
-        <input title="Изменить тему" id="isLightTheme" type="checkbox" >
+        <input title="Изменить тему" id="isLightTheme" type="checkbox">
     </div>
-    <br>
-    <button id="generate-btn">Сгенерировать QR-код</button>
-    <button id="download-qr-btn">Скачать QR-код</button>
-    <button id="del-qr-btn">Очистить поля</button>
+
+    <div class="btns">
+        <button class="btn" id="generate-btn" title="Создать QR-код">Создать</button>
+        <button class="btn" id="download-qr-btn" title="Скачать QR-код">Скачать</button>
+        <button class="btn3" id="del-qr-btn">Очистить поля</button>
+    </div>
+
     <div class="zoom-buttons">
         <button id="zoom-in-btn">Увеличить</button>
         <button id="zoom-out-btn">Уменьшить</button>
     </div>
+
     <p id="error"></p>
     <div id="qr-code"></div>
 
diff --git a/style.css b/style.css
index 10541e2..cf9fb53 100644
--- a/style.css
+++ b/style.css
@@ -47,6 +47,31 @@ button {
     font-size: 16px;
 }
 
+.btns {
+    margin: auto;
+    width: 60%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+}
+
+@media (max-width:500px) {
+    .btns {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto 1fr;
+        gap: 8px;
+    }
+
+    .btn3 {
+        grid-column: 1 / -1; /* Занимает обе колонки */
+    }
+}
+
+.btns button {
+    margin: 0;
+}
+
 textarea {
     color: orangered;
     border: 1px solid #000;
