diff --git a/OneCprogsite/programmer/static/programmer/css/solution-accordion.css b/OneCprogsite/programmer/static/programmer/css/solution-accordion.css
new file mode 100644
index 0000000..d052032
--- /dev/null
+++ b/OneCprogsite/programmer/static/programmer/css/solution-accordion.css
@@ -0,0 +1,67 @@
+/* solution-accordion.css */
+.solution-accordion {
+    margin: 2rem 0;
+}
+
+.accordion-item {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    margin-bottom: 1rem;
+    border: 2px solid var(--border-light);
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.accordion-item:hover {
+    border-color: var(--primary-light);
+}
+
+.accordion-header {
+    padding: 1.5rem;
+    background: var(--gradient-primary);
+    color: white;
+    font-weight: 600;
+    font-size: 1.125rem;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: var(--transition);
+    user-select: none;
+}
+
+.accordion-header:hover {
+    background: var(--primary-dark);
+}
+
+.accordion-content {
+    padding: 0;
+    background: var(--bg-card);
+    line-height: 1.7;
+    color: var(--text-secondary);
+    max-height: 0;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.accordion-content.active {
+    padding: 1.5rem;
+    max-height: 5000px;
+}
+
+.accordion-icon {
+    transition: transform 0.3s ease;
+    font-size: 0.8em;
+}
+
+.accordion-header.active .accordion-icon {
+    transform: rotate(180deg);
+}
+
+.accordion-content p {
+    margin-bottom: 1rem;
+}
+
+.accordion-content p:last-child {
+    margin-bottom: 0;
+}
\ No newline at end of file
diff --git a/OneCprogsite/programmer/static/programmer/js/solution-accordion.js b/OneCprogsite/programmer/static/programmer/js/solution-accordion.js
new file mode 100644
index 0000000..1274669
--- /dev/null
+++ b/OneCprogsite/programmer/static/programmer/js/solution-accordion.js
@@ -0,0 +1,46 @@
+// solution-accordion.js
+function toggleAccordion(header) {
+    const content = header.nextElementSibling;
+    const icon = header.querySelector('.accordion-icon');
+
+    // Переключаем только текущий аккордеон
+    header.classList.toggle('active');
+    content.classList.toggle('active');
+    icon.style.transform = header.classList.contains('active') ? 'rotate(180deg)' : 'rotate(0deg)';
+}
+
+// Функция для открытия всех аккордеонов
+function expandAll() {
+    document.querySelectorAll('.accordion-content').forEach(content => {
+        content.classList.add('active');
+    });
+    document.querySelectorAll('.accordion-header').forEach(header => {
+        header.classList.add('active');
+    });
+    document.querySelectorAll('.accordion-icon').forEach(icon => {
+        icon.style.transform = 'rotate(180deg)';
+    });
+}
+
+// Функция для закрытия всех аккордеонов
+function collapseAll() {
+    document.querySelectorAll('.accordion-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    document.querySelectorAll('.accordion-header').forEach(header => {
+        header.classList.remove('active');
+    });
+    document.querySelectorAll('.accordion-icon').forEach(icon => {
+        icon.style.transform = 'rotate(0deg)';
+    });
+}
+
+// Автоматически открываем первый аккордеон в каждой карточке при загрузке
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.content-card').forEach(card => {
+        const firstAccordion = card.querySelector('.accordion-header');
+        if (firstAccordion) {
+            toggleAccordion(firstAccordion);
+        }
+    });
+});
\ No newline at end of file
diff --git a/OneCprogsite/programmer/templates/programmer/base.html b/OneCprogsite/programmer/templates/programmer/base.html
index e9148f3..09665ea 100644
--- a/OneCprogsite/programmer/templates/programmer/base.html
+++ b/OneCprogsite/programmer/templates/programmer/base.html
@@ -335,6 +335,10 @@
             }
         }
     </style>
+
+    {% block extra_css %}
+    <!-- Дополнительные CSS файлы для конкретных страниц -->
+    {% endblock %}
 </head>
 <body>
     <!-- Header -->
diff --git a/OneCprogsite/programmer/templates/programmer/solution.html b/OneCprogsite/programmer/templates/programmer/solution.html
index aba6238..81e686d 100644
--- a/OneCprogsite/programmer/templates/programmer/solution.html
+++ b/OneCprogsite/programmer/templates/programmer/solution.html
@@ -1,5 +1,10 @@
 {% extends 'programmer/base.html' %}
 {% load django_bootstrap5 %}
+{% load static %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'programmer/css/solution-accordion.css' %}">
+{% endblock %}
 
 {% block content %}
 <h1>{{title}}</h1>
@@ -13,8 +18,9 @@
 
             <div class="solution-accordion">
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Описание задачи</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>📋 Описание задачи</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.description}}
@@ -22,8 +28,9 @@
                 </div>
 
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Описание решения</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>🔧 Описание решения</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.implementation}}
@@ -31,8 +38,9 @@
                 </div>
 
                 <div class="accordion-item">
-                    <div class="accordion-header">
-                        <strong>Результат</strong>
+                    <div class="accordion-header" onclick="toggleAccordion(this)">
+                        <strong>✅ Результат</strong>
+                        <span class="accordion-icon">▼</span>
                     </div>
                     <div class="accordion-content">
                         {{p.closing}}
@@ -56,4 +64,7 @@
 </div>
 {% endif %}
 
+<!-- Подключаем внешний скрипт -->
+<script src="{% static 'programmer/js/solution-accordion.js' %}"></script>
+
 {% endblock %}
\ No newline at end of file