diff --git a/frontend/index.html b/frontend/index.html
index e75d476..0136314 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -82,8 +82,8 @@
     </div>
   </div>
 
-  <!-- Group 4: appearance settings -->
-  <div class="hgroup">
+  <!-- Group 4: appearance settings (button stacked under the scale slider) -->
+  <div class="hgroup hgroup-scale">
     <div class="field zoom-field">
       <label for="zoom-slider">Масштаб: <span id="zoom-label">12 месяцев</span></label>
       <input type="range" id="zoom-slider" min="0" max="9" step="1" value="3" />
@@ -94,7 +94,10 @@
     </div>
   </div>
 
-  <div id="status"></div>
+  <!-- Group 5: counters, boxed inline with the other gray blocks -->
+  <div class="hgroup hgroup-status">
+    <div id="status"></div>
+  </div>
 </header>
 
 <div id="chart-wrap">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3f624a8..a0c6627 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -56,14 +56,16 @@ input[type=date] {
   min-width: 180px;
   box-sizing: border-box;
 }
-/* Compact 2-column layout for the checkbox group. */
+/* Compact single-column layout: the three checkboxes stack in three rows so the
+   block takes as little horizontal space as possible. */
 .hgroup-checks {
-  display: grid;
-  grid-template-columns: auto auto;
-  column-gap: 18px;
-  row-gap: 4px;
-  align-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 6px;
 }
+.hgroup-checks .checkbox-field { align-self: flex-start; }
 
 .brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
 .brand-name { font-size: 18px; font-weight: 700; white-space: nowrap; }
@@ -78,7 +80,14 @@ input[type=text] {
   font-size: 13px;
   min-width: 180px;
 }
-#status { font-size: 12px; color: #888; margin-left: auto; align-self: center; line-height: 1.4; text-align: right; }
+/* Counters as a compact gray block, pushed to the end of the header row so it
+   sits in line with the other boxed groups instead of floating below. */
+.hgroup-status { margin-left: auto; align-items: center; }
+#status { font-size: 12px; color: #888; line-height: 1.4; white-space: nowrap; }
+
+/* Scale group: stack the "Оформление" button under the zoom slider. */
+.hgroup-scale { flex-direction: column; align-items: flex-start; gap: 10px; }
+.hgroup-scale .decor-wrap { align-self: flex-start; }
 
 .checkbox-field { flex-direction: row; align-items: center; gap: 6px; align-self: center; }
 .checkbox-field label {