diff --git a/public/index.html b/public/index.html
index 4f7e146..cca9798 100644
--- a/public/index.html
+++ b/public/index.html
@@ -185,27 +185,30 @@
                 // metall: DataTypes.INTEGER,
                 // gold: DataTypes.INTEGER,
                 // diamond: DataTypes.INTEGER,)
-                // выводим весь склад и добавляем прогрессбар заполненности (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
+                // выводим красиво, количество каждого ресурса и добавляем в конце прогрессбар заполненности в виде кольца со статистикой, сколько занимает каждый ресурс (warehouseCapacity это максимальная вместимость совокупности всех ресурсов)
                 const warehouseDiv = document.getElementById("warehouse");
                 warehouseDiv.innerHTML = "";
-                const warehouseCapacity = warehouse.capacity;
-                const resources = Object.keys(warehouse).filter(key => key !== 'capacity' && key !== 'createdAt' && key !== 'updatedAt');
-                resources.forEach(resource => {
-                    const amount = warehouse[resource];
-                    const progress = (amount / warehouseCapacity) * 100;
-                    const div = document.createElement("div");
-                    div.innerHTML = `
-                        <strong>${getResourceName(resource)}</strong><br>
-                        Количество: ${amount}<br>
-                        Вместимость: ${warehouseCapacity}
+                const resources = ['wood', 'coal', 'oil', 'metall', 'gold', 'diamond'];
+                resources.forEach(res => {
+                    const resourceDiv = document.createElement("div");
+                    resourceDiv.classList.add("resource");
+                    resourceDiv.innerHTML = `
+                        <strong>${getResourceName(res)}</strong>: ${warehouse[res]}
                     `;
+                    // Добавляем прогрессбар заполненности склада
+                    const progress = (warehouse[res] / warehouse.warehouseCapacity) * 100;
                     const progressBar = document.createElement("div");
                     progressBar.classList.add("progress-bar");
-                    progressBar.innerHTML = `<div class="progress-bar-inner" style="width: ${progress}%"></div>`;
-                    div.appendChild(progressBar);
-                    warehouseDiv.appendChild(div);
+                    progressBar.innerHTML = `
+                        <svg class="circle" width="100" height="100">
+                            <circle class="background-ring" cx="50" cy="50" r="40"></circle>
+                            <circle class="progress-ring" cx="50" cy="50" r="40" style="stroke-dashoffset: ${251 - (251 * progress / 100)}"></circle>
+                        </svg>
+                        <div class="circle-text">${warehouse[res]}</div>
+                    `;
+                    resourceDiv.appendChild(progressBar);
+                    warehouseDiv.appendChild(resourceDiv);
                 });
-                
             })
             .catch(err => {
                 console.error("Ошибка загрузки данных:", err);