diff --git a/chat_page.html b/chat_page.html
new file mode 100644
index 0000000..dbe3820
--- /dev/null
+++ b/chat_page.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <title>Les gens</title>
+    <meta charset="UTF-8">
+    <meta name="descriptions" content="">
+    <meta name="keywords" content="Les gens">
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+
+<div id="container">
+    <aside>
+        <div>
+            <input type="text" placeholder="search">
+            <a href="#"><img src="assets/images/ico_search.png"></a>
+        </div>
+        <ul>
+            <li>
+                <a href="#">
+                    <img src="assets/images/chat_avatar_01.jpg"/>
+                    <div>
+                        <h4>Vincent Porter</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_02.jpg"/>
+                    <div><h4>Aiden Chavez</h4>
+                        <p>
+                            <span class="status offline"></span>left 7 min ago
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_03.jpg"/>
+                    <div><h4>Mike Thomas</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_04.jpg"/>
+                    <div><h4>Erika Hughes</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_05.jpg"/>
+                    <div><h4>Ginger Jonston</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_06.jpg"/>
+                    <div><h4>Tracy Carpenter</h4>
+                        <p>
+                            <span class="status offline"></span>left 30 min ago
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_07.jpg"/>
+                    <div><h4>Christian Kelly</h4>
+                        <p>
+                            <span class="status offline"></span>left 10 hours ago
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_08.jpg"/>
+                    <div><h4>Monica Ward</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_09.jpg"/>
+                    <div><h4>Dean Henry</h4>
+                        <p>
+                            <span class="status offline"></span>offline since Oct 28
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_10.jpg"/>
+                    <div><h4>Peyton Mckinney</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a href="#"> <img src="assets/images/chat_avatar_03.jpg"/>
+                    <div><h4>Robin Llopis</h4>
+                        <p>
+                            <span class="status online"></span>online
+                        </p>
+                    </div>
+                </a>
+            </li>
+        </ul>
+
+    </aside>
+    <main>
+        <header>
+            <img src="assets/images/chat_avatar_01.jpg"/>
+            <div>
+                <h3>Chat with Vincent Porter</h3>
+                <p>
+                    <span class="status online"></span>allready 1902 messages
+                </p>
+            </div>
+            <img id="star" src="assets/images/ico_star.png" height="53" width="48"/>
+        </header>
+        <div>
+            <section class="comment interlocutor">
+                <p>
+                    <span class="status online"></span><strong>Vincent</strong> 10:12 AM, Today
+                </p>
+                <p>Are we meeting today? Project has been already
+                    finiched and I have results to show you</p>
+            </section>
+            <section class="comment interlocutor">
+                <p>
+                    <span class="status online"></span><strong>Vincent</strong> 10:12 AM, Today
+                </p>
+                <p>Are we meeting today? Project has been already
+                    finiched and I have results to show you</p>
+            </section>
+            <section class="comment self">
+                <p>
+                    10:14 AM, Today <strong>Olia</strong><span class="status blue"></span>
+                </p>
+                <p>Well I am not sure. The rest of the team is not here yet. Maybe in an hour or so? Have you faced any
+                    problems at the last phase of the project</p>
+            </section>
+            <section class="interlocutor">
+                <p>
+                    <span class="status online"></span><strong>Vincent</strong> 10:20 AM, Today
+                </p>
+                <p>Actually everything was fine. I'm very exited to show this our team.</p>
+            </section>
+            <section class="interlocutor">
+                <p>
+                    <span class="status online"></span><strong>Vincent</strong> 10:22 AM, Today
+                </p>
+                <span class="waiting green1"></span>
+                <span class="waiting green2"></span>
+                <span class="waiting green3"></span>
+            </section>
+        </div>
+        <footer>
+            <textarea name="post_message"></textarea>
+            <div>
+                <a href="#">
+                    <img src="assets/images/ico_picture.png"/>
+                </a>
+                <a href="#">
+                    <img src="assets/images/ico_file.png"/>
+                </a>
+                <p>send</p>
+            </div>
+        </footer>
+
+    </main>
+</div>
+
+</body>
+</html>
