diff --git a/static/aerbimCSS.css b/static/aerbimCSS.css
index 61fcbb9..0665d8d 100644
--- a/static/aerbimCSS.css
+++ b/static/aerbimCSS.css
@@ -1295,4 +1295,84 @@ body.n_scroll{
     height: 100%;
     font-size: 36px;
     padding: 26px 0;
+}
+
+/* contacts */
+
+/*.b_contacts{*/
+/*    margin: 100px 0;*/
+/*}*/
+
+.title_of_the_page_contacts{
+    font-size: 36px;
+    font-weight: 600;
+    text-transform: uppercase;
+    text-align: left;
+    width: 100%;
+}
+
+.cards_contacts_container {
+    padding: 80px 70px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.card_contacts{
+    width: 45%;
+    margin: 0 2.5%;
+}
+
+.container_img_card_contacts{
+    width: 100%;
+    height: 300px;
+}
+
+.img_card_contacts{
+    width: 100%;
+    height: 100%;
+    border-radius: 5px 5px 0 0;
+}
+
+.description_contact{
+    width: 90.5%;
+    padding: 25px;
+    border-radius: 0 0 5px 5px;
+    background: #FFF;
+    box-shadow: 1px 1px 11.3px 0 rgba(16, 33, 43, 0.12);
+}
+
+.name_contact{
+    font-size: 30px;
+    font-weight: 600;
+    padding-bottom: 10px;
+}
+
+.description_office_contact{
+    font-size: 20px;
+    font-weight: 400;
+    padding-bottom: 20px;
+}
+
+.label_work_time{
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.work_time_office{
+    font-weight: 400;
+    font-size: 20px;
+    padding-bottom: 20px;
+}
+
+.label_contact{
+    display: inline-block;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.text_contact{
+    display: inline-block;
+    font-size: 20px;
+    font-weight: 400;
 }
\ No newline at end of file
diff --git a/templates/pages/p_contacts.html b/templates/pages/p_contacts.html
index 42c8f10..ccf47b7 100644
--- a/templates/pages/p_contacts.html
+++ b/templates/pages/p_contacts.html
@@ -1,29 +1,17 @@
 {% extends 'tb_base.html' %}
+{% load static %}
+{% load i18n %}
 {% block CONTENT %}
-
-    <div>
-        Контакты
-        <div>
-            {% for office in offices %}
-                <div>
-                    {% if office.picture %}
-                        <img src="{{ MEDIA_URL }}{{ office.picture }}" alt="{{ office.city }}" />
-                    {% endif %}
-                    <div>{{ office.city }}</div>
-                    <div>{{ office.address }}</div>
-                    Часы работы:
-                    <div>{{ office.work_time_from }} - {{ office.work_time_to }}</div>
-                    <div>{{ office.work_time }}</div>
-                    <div>
-                        {% for contact in office.contacts %}
-                            <div>
-                                {% if contact.contact_label %}{{ contact.contact_label }}: {% endif %}{{ contact.get_prefix_w_data }}
-                            </div>
-                        {% endfor %}
-                    </div>
+    <div {% include "block_settings/blocks_settings.html" %}>
+        <div class="cut-width">
+            <div class="b_contacts">
+                <div class="title_of_the_page_contacts">{% translate 'Контакты' %}</div>
+                <div class="cards_contacts_container">
+                    {% for office in offices %}
+                        {% include "widgets/w_card_office.html" %}
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
-
 {% endblock %}
\ No newline at end of file
diff --git a/templates/widgets/w_card_office.html b/templates/widgets/w_card_office.html
new file mode 100644
index 0000000..1d29361
--- /dev/null
+++ b/templates/widgets/w_card_office.html
@@ -0,0 +1,30 @@
+{% load static %}
+{% load i18n %}
+
+<div class="card_contacts">
+    <div class="container_img_card_contacts">
+        <img class="img_card_contacts" src="{{ office.picture.url }}">
+    </div>
+    <div class="description_contact">
+        <div class="name_contact">
+            {{ office.name }}
+        </div>
+        <div class="description_office_contact">
+            {{ office.address }}
+        </div>
+        <div class="label_work_time">
+            Часы работы:
+        </div>
+        <div class="work_time_office">
+            <div class="work_time_from_to{% if office.work_time %} margin{% endif %}">{{ office.work_time_from }} - {{ office.work_time_to }}</div>
+            {% if office.work_time %}<div class="letters_work_time">{{ office.work_time }}</div>{% endif %}
+        </div>
+        {% for contact in office.contacts %}
+            <div class="office_data">   
+                {% if contact.contact_label %}<div class="label_contact">{{ contact.contact_label }}: </div>{% endif %}
+                <div class="text_contact">{{ contact.get_prefix_w_data }}</div> 
+            </div>
+{#                        <div class="office_data">{{ office.phone }}</div>#}
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file