diff --git a/pages/articles.html b/pages/articles.html
index 7c899c4..c8caa2f 100644
--- a/pages/articles.html
+++ b/pages/articles.html
@@ -17,5 +17,56 @@
             <a href="/pages/about.html">Про нас</a>
         </div>
     </nav>
+
+    <!-- Content -->
+    <main>
+        <section class="articles-timeline">
+            <h1>Статті</h1>
+            <article class="timeline-item">
+                <div class="timeline-dot"></div>
+                <time>2025-09-20</time>
+                <div class="timeline-content">
+                    <h2>Оптимізація продуктивності</h2>
+                    <p>Провели оптимізацію коду та зображень, щоб сайт швидше завантажувався та працював плавніше на всіх пристроях.</p>
+                </div>
+            </article>
+
+            <article class="timeline-item">
+                <div class="timeline-dot"></div>
+                <time>2025-09-15</time>
+                <div class="timeline-content">
+                    <h2>Додано нові функції</h2>
+                    <p>Інтегрували нові функції, включаючи фільтри для галереї та адаптивний дизайн для мобільних пристроїв.</p>
+                </div>
+            </article>
+
+            <article class="timeline-item">
+                <div class="timeline-dot"></div>
+                <time>2025-09-10</time>
+                <div class="timeline-content">
+                    <h2>Перші відгуки користувачів</h2>
+                    <p>Отримали перші відгуки від тестових користувачів та виявили кілька дрібних багів, які потрібно виправити перед офіційним запуском.</p>
+                </div>
+            </article>
+
+            <article class="timeline-item">
+                <div class="timeline-dot"></div>
+                <time>2025-09-05</time>
+                <div class="timeline-content">
+                    <h2>Запуск тестової версії</h2>
+                    <p>Ми запустили тестову версію веб-сайту для внутрішнього тестування та перевірки основних функцій перед публічним релізом.</p>
+                </div>
+            </article>
+
+            <article class="timeline-item">
+                <div class="timeline-dot"></div>
+                <time>2025-09-01</time>
+                <div class="timeline-content">
+                    <h2>Початок нового проекту</h2>
+                    <p>Ми почали роботу над нашим новим веб-проектом. Це включає розробку сучасного дизайну та інтеграцію нових технологій.</p>
+                </div>
+            </article>
+        </section>
+    </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index d33a7d4..7bfe157 100644
--- a/style.css
+++ b/style.css
@@ -174,3 +174,46 @@ button:active {
     color: var(--primary);
     font-weight: 600;
 }
+
+/* Timeline Articles */
+
+.articles-timeline {
+    position: relative;
+    margin: 2rem auto;
+    max-width: 50rem;
+    padding-left: 2rem;
+    border-left: 2px solid var(--primary);
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: 2rem;
+    padding-left: 1.5rem;
+}
+
+.timeline-dot {
+    position: absolute;
+    left: calc(-2.5rem - 1px);
+    top: 1.5rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--primary);
+    border-radius: 50%;
+}
+
+.timeline-item time {
+    font-size: 0.875rem;
+    color: var(--secondary);
+    display: block;
+    margin-bottom: 0.25rem;
+}
+
+.timeline-content h2 {
+    margin: 0.25rem 0;
+    font-size: 1.25rem;
+}
+
+.timeline-content p {
+    margin: 0.25rem 0 0;
+    line-height: 1.5;
+}