diff --git a/frontend/index.html b/frontend/index.html
index 0bf670a..adc261c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -103,16 +103,14 @@
                             </mdui-tab>
 
                             <mdui-tab-panel slot="panel" value="chats">
-                                <div class="chats">
-                                    <a href="#" id="chat1but">
-                                        <img src="./src/images/default-avatar.png" alt=""> 
-                                        Общий чат
-                                    </a>
-                                    <a href="#" id="chat1but2">
-                                        <img src="./src/images/default-avatar.png" alt="">
-                                        Общий чат 2
-                                    </a>
-                                </div>
+                                <mdui-list>
+                                    <mdui-list-item headline="Общий чат" description="Вы: Последнее сообщение" id="chat1but">
+                                        <img src="./src/images/default-avatar.png" alt="" slot="icon" />
+                                    </mdui-list-item>
+                                    <mdui-list-item headline="Общий чат 2" description="Вы: Последнее сообщение" id="chat1but2">
+                                        <img src="./src/images/default-avatar.png" alt="" slot="icon" />
+                                    </mdui-list-item>
+                                </mdui-list>
                             </mdui-tab-panel>
                             <mdui-tab-panel slot="panel" value="channels">ertgergert</mdui-tab-panel>
                             <mdui-tab-panel slot="panel" value="contacts">erhnbftgynftdhge4w</mdui-tab-panel>
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 40e850b..cab3e70 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -92,35 +92,17 @@
     }
 
     .chat-tabs {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
         margin-top: 5px;
         width: 100%;
         --mdui-color-surface: $color-dark-surface-container;
         --mdui-color-surface-variant: transparent;
 
-        a {
-            display: flex;
-            text-decoration: none;
-            padding: 10px;
-            border:  solid 3px $color-dark-surface;
-            box-shadow: 0px 3px 0px black 0.9;
-            margin-left: 20px;
-            margin-right: 20px;
-            background-color: $color-dark-on-surface-variant;
-            color: $color-dark-shadow;
-            font-weight: 20px;
-            border-radius: 20px;
-            align-items: center;
-
-            img {
-                width: 45px;
-                height: 45px;
-                border-radius: 20%;
-                object-fit: cover;
-                margin-right: 1rem;
-            }
+        img {
+            width: 45px;
+            height: 45px;
+            border-radius: 20%;
+            object-fit: cover;
+            margin-right: 1rem;
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/src/material.ts b/frontend/src/material.ts
index da37671..da8a561 100644
--- a/frontend/src/material.ts
+++ b/frontend/src/material.ts
@@ -1,6 +1,10 @@
 import 'mdui/components/tabs.js';
 import 'mdui/components/tab.js';
 import 'mdui/components/tab-panel.js';
+import 'mdui/components/list.js';
+import 'mdui/components/list-item.js';
+import 'mdui/components/list-subheader.js';
+
 import { setColorScheme } from 'mdui/functions/setColorScheme.js';
 
 setColorScheme("#91cef4");
\ No newline at end of file