diff --git a/OneCprogsite/programmer/static/programmer/css/styles_dark.css b/OneCprogsite/programmer/static/programmer/css/styles_dark.css
index 15df81d..0b5f12d 100644
--- a/OneCprogsite/programmer/static/programmer/css/styles_dark.css
+++ b/OneCprogsite/programmer/static/programmer/css/styles_dark.css
@@ -165,7 +165,7 @@ body {
     background: var(--gradient-primary);
     color: white;
     text-decoration: none;
-    padding: 0.875rem 1.75rem;
+    padding: 0.6rem 1.2rem;
     border-radius: var(--radius-lg);
     font-weight: 600;
     transition: var(--transition);
@@ -1187,4 +1187,149 @@ body {
 
 .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
     opacity: 1;
+}
+
+/* ===== MOBILE RESPONSIVE STYLES ===== */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1.125rem;
+        padding: 0 1rem;
+    }
+
+    .page-title {
+        font-size: 2.25rem;
+    }
+
+    .page-subtitle {
+        font-size: 1.125rem;
+        padding: 0 1rem;
+    }
+
+    .grid-2 {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .modern-card {
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .card-title {
+        font-size: 1.375rem;
+    }
+
+    .content-card {
+        padding: 1.5rem;
+    }
+
+    .about-section {
+        padding: 1.5rem;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .competence-item {
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 1.5rem;
+    }
+
+    .competence-scan-container {
+        width: 100%;
+        max-width: 280px;
+        margin: 0 auto;
+    }
+
+    .recall-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .recall-meta {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+
+    .footer-contacts p {
+        justify-content: center;
+    }
+
+    .card-actions {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .modal-content {
+        margin: 5% auto;
+        max-width: 95%;
+    }
+
+    .modal-header {
+        padding: 1.5rem 1.5rem 1rem;
+    }
+
+    .modal-body {
+        padding: 1.5rem;
+    }
+
+    .page-content {
+        padding: 1.5rem;
+    }
+
+    .breadcrumbs {
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+
+    .page-title {
+        font-size: 1.875rem;
+    }
+
+    .modern-card {
+        padding: 1.25rem;
+    }
+
+    .content-card {
+        padding: 1.25rem;
+    }
+
+    .about-section {
+        padding: 1.25rem;
+    }
+
+    .card-title {
+        font-size: 1.25rem;
+    }
+
+    .competence-scan-container {
+        max-width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/OneCprogsite/programmer/static/programmer/css/styles_w.css b/OneCprogsite/programmer/static/programmer/css/styles_w.css
index a2e0cc8..4c1eb3e 100644
--- a/OneCprogsite/programmer/static/programmer/css/styles_w.css
+++ b/OneCprogsite/programmer/static/programmer/css/styles_w.css
@@ -160,7 +160,7 @@ body {
     background: var(--gradient-primary);
     color: white;
     text-decoration: none;
-    padding: 0.875rem 1.75rem;
+    padding: 0.6rem 1.2rem;
     border-radius: var(--radius-lg);
     font-weight: 600;
     transition: var(--transition);
@@ -1071,4 +1071,198 @@ body {
 
 .theme-toggle-checkbox:checked + .theme-toggle-label .theme-icon.moon {
     opacity: 1;
+}
+
+/* ===== MOBILE RESPONSIVE STYLES ===== */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1.125rem;
+        padding: 0 1rem;
+    }
+
+    .page-title {
+        font-size: 2.25rem;
+    }
+
+    .page-subtitle {
+        font-size: 1.125rem;
+        padding: 0 1rem;
+    }
+
+    .grid-2 {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .modern-card {
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .card-title {
+        font-size: 1.375rem;
+    }
+
+    .content-card {
+        padding: 1.5rem;
+    }
+
+    .about-section {
+        padding: 1.5rem;
+    }
+
+    .skills-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .competence-item {
+        flex-direction: column;
+        padding: 1.5rem;
+        gap: 1.5rem;
+    }
+
+    .competence-scan-container {
+        width: 100%;
+        max-width: 280px;
+        margin: 0 auto;
+    }
+
+    .recall-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .recall-meta {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+        text-align: center;
+    }
+
+    .footer-contacts p {
+        justify-content: center;
+    }
+
+    .card-actions {
+        flex-direction: column;
+    }
+
+    .btn {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .modal-content {
+        margin: 5% auto;
+        max-width: 95%;
+    }
+
+    .modal-header {
+        padding: 1.5rem 1.5rem 1rem;
+    }
+
+    .modal-body {
+        padding: 1.5rem;
+    }
+
+    .page-content {
+        padding: 1.5rem;
+    }
+
+    .breadcrumbs {
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+
+    .page-title {
+        font-size: 1.875rem;
+    }
+
+    .modern-card {
+        padding: 1.25rem;
+    }
+
+    .content-card {
+        padding: 1.25rem;
+    }
+
+    .about-section {
+        padding: 1.25rem;
+    }
+
+    .card-title {
+        font-size: 1.25rem;
+    }
+
+    .competence-scan-container {
+        max-width: 100%;
+    }
+}
+
+/* Явные стили для мобильного меню в светлой теме */
+.mobile-menu {
+    background: #FFFFFF !important;
+}
+
+.mobile-menu-header {
+    border-bottom: 1px solid #E2E8F0 !important;
+}
+
+.mobile-menu-close {
+    color: #1A1F36 !important;
+}
+
+.mobile-menu-close:hover {
+    background: #F7FAFC !important;
+}
+
+.mobile-nav-link {
+    color: #1A1F36 !important;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link.active {
+    background: var(--primary) !important;
+    color: white !important;
+}
+
+.mobile-nav-actions {
+    border-top: 1px solid #E2E8F0 !important;
+}
+
+/* Стили для переключателя темы в мобильном меню */
+.mobile-menu .theme-toggle-label {
+    background: #F7FAFC !important;
+    border: 2px solid #CBD5E0 !important;
+}
+
+.mobile-menu .theme-toggle-label:hover {
+    border-color: var(--primary) !important;
+}
+
+.mobile-menu .theme-icon.sun {
+    color: #1A1F36 !important;
+}
+
+.mobile-menu .theme-icon.moon {
+    color: #1A1F36 !important;
 }
\ No newline at end of file
diff --git a/OneCprogsite/programmer/templates/programmer/about.html b/OneCprogsite/programmer/templates/programmer/about.html
index 3a221bc..dde749e 100644
--- a/OneCprogsite/programmer/templates/programmer/about.html
+++ b/OneCprogsite/programmer/templates/programmer/about.html
@@ -104,14 +104,14 @@
                 </div>
                 <div class="skill-category">
                     <h4>💬 Telegram</h4>
-                    <p><strong><a href="https://t.me/odinesina_prog" target="_blank">@odinesina_prog</a></strong></p>
+                    <p><strong><a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="display: inline-flex; padding: 0.5rem 1rem;">@odinesina_prog</a></strong></p>
                 </div>
             </div>
         </div>
     </div>
 
     <div class="text-center mt-4">
-        <div class="card-actions justify-center">
+        <div class="card-actions">
             <a href="{% url 'solution' %}" class="btn btn-primary">📂 Посмотреть мои проекты</a>
             <a href="{% url 'recall' %}" class="btn btn-secondary">⭐ Отзывы клиентов</a>
         </div>
diff --git a/OneCprogsite/programmer/templates/programmer/base.html b/OneCprogsite/programmer/templates/programmer/base.html
index ca22c23..16cc4e6 100644
--- a/OneCprogsite/programmer/templates/programmer/base.html
+++ b/OneCprogsite/programmer/templates/programmer/base.html
@@ -189,6 +189,151 @@
             padding-top: 1rem;
             border-top: 1px solid var(--border-light);
         }
+
+        /* ===== MOBILE RESPONSIVE STYLES ===== */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.5rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1.125rem;
+                padding: 0 1rem;
+            }
+
+            .page-title {
+                font-size: 2.25rem;
+            }
+
+            .page-subtitle {
+                font-size: 1.125rem;
+                padding: 0 1rem;
+            }
+
+            .grid-2 {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+
+            .modern-card {
+                padding: 1.5rem;
+                margin-bottom: 1.5rem;
+            }
+
+            .card-title {
+                font-size: 1.375rem;
+            }
+
+            .content-card {
+                padding: 1.5rem;
+            }
+
+            .about-section {
+                padding: 1.5rem;
+            }
+
+            .skills-grid {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
+
+            .competence-item {
+                flex-direction: column;
+                padding: 1.5rem;
+                gap: 1.5rem;
+            }
+
+            .competence-scan-container {
+                width: 100%;
+                max-width: 280px;
+                margin: 0 auto;
+            }
+
+            .recall-header {
+                flex-direction: column;
+                gap: 1rem;
+                align-items: flex-start;
+            }
+
+            .recall-meta {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+
+            .footer-content {
+                grid-template-columns: 1fr;
+                gap: 2rem;
+                text-align: center;
+            }
+
+            .footer-contacts p {
+                justify-content: center;
+            }
+
+            .card-actions {
+                flex-direction: column;
+            }
+
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .modal-content {
+                margin: 5% auto;
+                max-width: 95%;
+            }
+
+            .modal-header {
+                padding: 1.5rem 1.5rem 1rem;
+            }
+
+            .modal-body {
+                padding: 1.5rem;
+            }
+
+            .page-content {
+                padding: 1.5rem;
+            }
+
+            .breadcrumbs {
+                font-size: 0.8rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .hero-title {
+                font-size: 2rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1rem;
+            }
+
+            .page-title {
+                font-size: 1.875rem;
+            }
+
+            .modern-card {
+                padding: 1.25rem;
+            }
+
+            .content-card {
+                padding: 1.25rem;
+            }
+
+            .about-section {
+                padding: 1.25rem;
+            }
+
+            .card-title {
+                font-size: 1.25rem;
+            }
+
+            .competence-scan-container {
+                max-width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
@@ -215,8 +360,9 @@
 
                 <div class="nav-actions">
                     <a href="https://t.me/odinesina_prog" target="_blank" class="telegram-btn">
-                        <span class="telegram-icon">📱</span>
-                        Telegram
+                        <span class="telegram-icon">
+                            <img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
+                        </span>
                     </a>
 
                     <!-- Theme Toggle Switch -->
@@ -260,8 +406,9 @@
 
         <div class="mobile-nav-actions">
             <a href="https://t.me/odinesina_prog" target="_blank" class="btn btn-primary" style="width: 100%; text-align: center;">
-                <span class="telegram-icon">📱</span>
-                Telegram
+                <span class="telegram-icon">
+                    <img src="{% static 'programmer/images/share_tg.png' %}" alt="Telegram" width="20" height="20">
+                </span>
             </a>
             <div class="theme-switcher" style="justify-content: center;">
                 <input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox">