diff --git a/app.js b/app.js
index e69de29..208c6b8 100644
--- a/app.js
+++ b/app.js
@@ -0,0 +1,71 @@
+const HabitTrackerApp = {
+    elements: {
+        habitGrid: null,
+        addHabitForm: null,
+        addHabbitButton: null
+    },
+
+    init: function() {
+        this.loadElements();
+        this.render();
+    },
+
+    setupEventListeners: function() {
+        this.elements.addHabbitButton.addEventListener('click', () => {
+            this.elements.addHabitForm.style.display = 'block';
+        });
+    },
+
+    loadElements: function() {
+        this.elements.habitGrid = document.getElementById('habits-grid');
+        this.elements.addHabitForm = document.getElementById('add-habit-form');
+        this.elements.addHabbitButton = document.getElementById('add-habbit-button');
+    },
+
+    render: function() {
+        const habitsHTML = HabitManager.habits.map(habit => {
+            const cardClass = `habit-card ${habit.isCompleted ? 'habit-card--completed' : ''}`;
+            const progress = (habit.currentCount / habit.targetCount) * 100;
+
+            return `<div class="${cardClass}" data-habit-id="${habit.id}">
+                        <div class="habit-card__header">
+                            <div class="habit-card__icon">💧</div>
+                            <h3 class="habit-card__title">${habit.name}</h3>
+                        </div>
+
+                        <p class="habit-card__description">${habit.description}</p>
+
+                        <div class="habit-card__progress">
+                            <div class="habit-card__progress-info">
+                                <span>Прогресс</span>
+                                <span>${progress}%</span>
+                            </div>
+                            <div class="habit-card__progress-bar">
+                                <div class="habit-card__progress-fill" style="width: ${progress}%"></div>
+                            </div>
+                        </div>
+
+                        <div class="habit-card__actions">
+                            <button class="button button--primary">${habit.isCompleted ? 'Выполнено' : 'Отметить выполнение'}</button>
+                            <button class="button button--secondary">Подробнее</button>
+                        </div>
+                </div>
+                `
+        }).join('');
+
+        this.elements.habitGrid.innerHTML = habitsHTML;
+    }
+}
+
+HabitTrackerApp.loadFromLocalStorage = function() {
+    HabitManager.loadFromLocalStorage();
+
+    if (HabitManager.habits.length == 0) {
+        HabitManager.createHabit('Учить js', 'Писать не менее 1000000000 строк кода в день', 8);
+    } 
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    HabitTrackerApp.loadFromLocalStorage();
+    HabitTrackerApp.init();
+});
\ No newline at end of file
diff --git a/habbit-manager.html b/habbit-manager.html
index 70492b6..db623af 100644
--- a/habbit-manager.html
+++ b/habbit-manager.html
@@ -235,84 +235,14 @@
         </header>
         
         <!-- Сетка карточек привычек -->
-        <div class="habits-grid">
-            <!-- Карточка 1 -->
-            <div class="habit-card">
-                <div class="habit-card__header">
-                    <div class="habit-card__icon">💧</div>
-                    <h3 class="habit-card__title">Пить воду</h3>
-                </div>
-                <p class="habit-card__description">8 стаканов воды в день для поддержания водного баланса организма</p>
-                
-                <div class="habit-card__progress">
-                    <div class="habit-card__progress-info">
-                        <span>Прогресс</span>
-                        <span>75%</span>
-                    </div>
-                    <div class="habit-card__progress-bar">
-                        <div class="habit-card__progress-fill" style="width: 75%"></div>
-                    </div>
-                </div>
-                
-                <div class="habit-card__actions">
-                    <button class="button button--primary">Отметить выполнение</button>
-                    <button class="button button--secondary">Подробнее</button>
-                </div>
-            </div>
+        <div class="habits-grid" id="habits-grid">
             
-            <!-- Карточка 2 -->
-            <div class="habit-card habit-card--important">
-                <div class="habit-card__header">
-                    <div class="habit-card__icon">📚</div>
-                    <h3 class="habit-card__title">Читать книги</h3>
-                </div>
-                <p class="habit-card__description">20 минут чтения развивающей литературы каждый вечер</p>
-                
-                <div class="habit-card__progress">
-                    <div class="habit-card__progress-info">
-                        <span>Прогресс</span>
-                        <span>45%</span>
-                    </div>
-                    <div class="habit-card__progress-bar">
-                        <div class="habit-card__progress-fill" style="width: 45%"></div>
-                    </div>
-                </div>
-                
-                <div class="habit-card__actions">
-                    <button class="button button--primary">Отметить выполнение</button>
-                    <button class="button button--secondary">Подробнее</button>
-                </div>
-            </div>
-            
-            <!-- Карточка 3 -->
-            <div class="habit-card habit-card--completed">
-                <div class="habit-card__header">
-                    <div class="habit-card__icon">🏃</div>
-                    <h3 class="habit-card__title">Утренняя зарядка</h3>
-                </div>
-                <p class="habit-card__description">15 минут физических упражнений каждое утро</p>
-                
-                <div class="habit-card__progress">
-                    <div class="habit-card__progress-info">
-                        <span>Прогресс</span>
-                        <span>100%</span>
-                    </div>
-                    <div class="habit-card__progress-bar">
-                        <div class="habit-card__progress-fill" style="width: 100%"></div>
-                    </div>
-                </div>
-                
-                <div class="habit-card__actions">
-                    <button class="button button--primary" disabled>Выполнено</button>
-                    <button class="button button--secondary">Подробнее</button>
-                </div>
-            </div>
         </div>
         
         <!-- Форма добавления новой привычки -->
-        <div class="new-habit-form">
-            <h2 class="new-habit-form__title">➕ Добавить новую привычку</h2>
-            <!-- Здесь студенты будут добавлять форму -->
+        <div class="new-habit-form" id="new-habit-form">
+            <h2 class="new-habit-form__title" id="add-habbit-button">➕ Добавить новую привычку</h2>
+            
         </div>
     </div>
     <script src="app.js"></script>