diff --git a/luckydiamond/src/assets/css/ElementsStyles/chat.css b/luckydiamond/src/assets/css/ElementsStyles/chat.css
index e69de29..1959586 100644
--- a/luckydiamond/src/assets/css/ElementsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ElementsStyles/chat.css
@@ -0,0 +1,35 @@
+.chat__content {
+    width: 30%;
+}
+
+.chat__container--title {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    user-select: none;
+}
+
+.chat__title {
+    width: 100%;
+    margin: 13px 0px 0px 16px;
+    border-radius: 8px;
+    background: #30323E;
+    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.chat__container--title h2 {
+    padding: 3px 11px 6px 7px;
+    color: #A9A99D;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+}
+
+.chat__icon {
+    margin-top: 10px;
+    margin-left: -2px;
+    padding: 6px 6px 6px 7px;
+    border-radius: 6px;
+    background: #3D3F48;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/assets/icons-chat/chat-icon.png b/luckydiamond/src/assets/icons-chat/chat-icon.png
new file mode 100644
index 0000000..b4efe02
Binary files /dev/null and b/luckydiamond/src/assets/icons-chat/chat-icon.png differ
diff --git a/luckydiamond/src/pages/ChatElement.vue b/luckydiamond/src/pages/ChatElement.vue
index b148ea5..284e622 100644
--- a/luckydiamond/src/pages/ChatElement.vue
+++ b/luckydiamond/src/pages/ChatElement.vue
@@ -1,7 +1,14 @@
 <template>
   <aside class="chat">
     <div class="chat__content">
-      <h1>CHAT</h1>
+      <div class="chat__container--title">
+        <div class="chat__title">
+          <h2>Чат</h2>
+        </div>
+        <div class="chat__icon">
+          <img src="@/assets/icons-chat/chat-icon.png">
+        </div>
+      </div>
     </div>
   </aside>
 </template>