diff --git a/main.py b/main.py
index 4efc216..ac1a151 100755
--- a/main.py
+++ b/main.py
@@ -47,7 +47,7 @@ NAMESPACE = k8s.NAMESPACE
 SERVERS = list()
 BROKEN_SERVERS = list()
 CLIENTS = dict()
-VERSION = '7'
+VERSION = '8'
 SECRET_LINK_LENGTH = 8
 SECRET_LINK_PREFIX = '$2b$12$'
 SS_PREFIX = "\u0005\u00DC\u005F\u00E0\u0001\u0020"
diff --git a/static/layout.css b/static/layout.css
index 477b42d..7fa6628 100755
--- a/static/layout.css
+++ b/static/layout.css
@@ -383,6 +383,7 @@ a {
         "menu entety-menu content";
     height: var(--app-h);
     justify-content: left;
+    overflow: hidden;
 }
 
 #menu {
@@ -402,9 +403,19 @@ a {
 #content {
     grid-area: content;
     height: 100%;
+    overflow: auto;
 }
 
+.srcollable-list-content {
+    overflow-y: auto;
+}
 @media (max-width: 60em) {
+    #entety-menu {
+        width: 200px;
+    }
+}
+
+@media (max-width: 40em) {
     #layout {
         display: grid;
         grid-template-areas:
@@ -423,4 +434,42 @@ a {
         width: 100vw;
         height: initial;
     }
+
+    .srcollable-list-content{
+        display: flex;
+        overflow-y: auto;
+        scroll-snap-type: x mandatory;
+        column-gap: var(--app-space-1);
+    }
+
+    .srcollable-list-content > * {
+        scroll-snap-align: start;
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: 250px;
+    }
+
+}
+
+.hidden {
+    display: none;
+}
+
+.server-checkbox {
+    display: flex;
+    
+}
+
+.server-checkbox input {
+    margin-right: 8px;
+}
+
+.pure-form-message {
+    padding: 0.2em;
+}
+#search-form {
+    padding: var(--app-space-1);
+}
+#entety-menu-search {
+    width: 100%;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 1c4acea..8e2970e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -120,6 +120,33 @@
             document.addEventListener('click', handleEvent);
         });
     </script>
+    <script>
+        // Поиск по скписк в подменю
+        // entety-menu-search
+        const searchBox = document.getElementById('entety-menu-search')
+        searchBox.addEventListener('change', (event)=>{
+            const text = event.target.value
+            const child = Array.from(document.querySelector('[data-search-box]').children)
+
+            child.forEach((element)=>{
+                if(text.length === 0){
+                    element.classList.remove('hidden')
+                    return
+                }
+                const elementSearchData = element.querySelector('[data-search]').textContent
+                const isEqual = elementSearchData.toLowerCase().includes(text.toLowerCase())
+                if(isEqual){
+                    element.classList.remove('hidden')
+                } else {
+                    element.classList.add('hidden')
+                }
+            })
+
+        })
+
+    </script>
+
+
     {% if nt %}
     <label>
         <input type="checkbox" class="alertCheckbox" autocomplete="off" />
diff --git a/templates/clients.html b/templates/clients.html
index 4f81c05..f8d7e12 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -3,23 +3,31 @@
 {% block content %}
 
 <div id="entety-menu">
-<div id="list">
-    <h1 class="server-content-title">Clients</h1>
-    {% for client, values in CLIENTS.items() %}
-    <div class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g">
-        <div class="" onclick="location.href='/clients?selected_client={{ client }}';">
-            <h5 class="server-name">{{ values["name"] }}</h5>
-            <h4 class="server-info">Allowed {{ values["servers"]|length }} server{% if values["servers"]|length >1 %}s{%endif%}</h4>
+    <div id="list">
+        <h1 class="server-content-title">Clients</h1>
+        <form id="search-form" class="pure-form">
+            <input placeholder="&#128269;" type="text"  id="entety-menu-search" />
+        </form>
+        <div data-search-box class="srcollable-list-content">
+            {% for client, values in CLIENTS.items() %}
+            <div
+                class="server-item server-item-{% if client == selected_client %}unread{% else %}selected{% endif %} pure-g">
+                <div class="" onclick="location.href='/clients?selected_client={{ client }}';">
+                    <h5 data-search class="server-name">{{ values["name"] }}</h5>
+                    <h4 class="server-info">{{ values["servers"]|length }} server{% if values["servers"]|length >1
+                        %}s{%endif%}</h4>
+                </div>
+            </div>
+            {% endfor %}
         </div>
-    </div>
-    {% endfor %}
-    <div onclick="location.href='/clients?add_client=True';" class="server-item server-add pure-g">
+
+        <div onclick="location.href='/clients?add_client=True';" class="server-item server-add pure-g">
             <div class="pure-u-1">
                 +
             </div>
-    </div>
+        </div>
 
-</div>
+    </div>
 </div>
 
 {% if add_client %}
@@ -31,38 +39,43 @@
             </div>
         </div>
         <div class="server-content-body">
-        <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
-            <fieldset>
-                <div class="pure-g">
-                    <div class="pure-u-1 ">
-                        <input type="text" class="" name="name" required placeholder="Name"/>
+            <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
+                <fieldset>
+                    <div class="pure-g">
+                        <div class="pure-u-1 ">
+                            <input type="text" class="" name="name" required placeholder="Name" />
+                        </div>
+                        <div class="pure-u-1 ">
+                            <input type="text" class="" name="comment" placeholder="Comment" />
+                        </div>
+                        <div class="pure-checkbox">
+                            {% for server in SERVERS %}
+                            <div class="server-checkbox">
+                                <input type="checkbox" id="option{{loop.index0}}" name="servers"
+                                    value="{{server.info()['local_server_id']}}">
+                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
+                                    <span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
+                                    <span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
+                                </label>
+                            </div>
+                            {% endfor %}
+
+                        </div>
+
                     </div>
-                    <div class="pure-u-1 ">
-                        <input type="text" class="" name="comment"  placeholder="Comment"/>
-                    </div>
-                            <div class="pure-checkbox">
-                                {% for server in SERVERS %}
-                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["name"]}}
-                                <input type="checkbox" id="option{{loop.index0}}" name="servers" value="{{server.info()['local_server_id']}}"></label>
-
-                                {% endfor %}
-
-                          </div>
-
-                </div>
-                <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
-            </fieldset>
-        </form>
-    </div>
+                    <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
+                </fieldset>
+            </form>
+        </div>
     </div>
 </div>
 {% endif %}
 
 
 {% if selected_client and not add_client %}
-    {% set client = CLIENTS[selected_client] %}
+{% set client = CLIENTS[selected_client] %}
 
-    <div id="content">
+<div id="content">
     <div class="">
         <div class="server-content-header pure-g">
             <div class="">
@@ -73,115 +86,82 @@
             </div>
         </div>
         <div class="server-content-body">
-        <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
-            <fieldset>
-                <div class="pure-g">
-                    <div class="pure-u-1 ">
-                        <input type="text" class="pure-u-1" name="name" required value="{{client['name']}}"/>
-                        <input type="hidden" class="pure-u-1" name="old_name" required value="{{client['name']}}"/>
+            <form action="/add_client" class="pure-form pure-form-stacked" method="POST">
+                <fieldset>
+                    <div class="pure-g">
+                        <div class="pure-u-1 ">
+                            <input type="text" class="pure-u-1" name="name" required value="{{client['name']}}" />
+                            <input type="hidden" class="pure-u-1" name="old_name" required value="{{client['name']}}" />
+                        </div>
+                        <div class="pure-u-1 ">
+                            <input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}" />
+                        </div>
+                        <input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}" />
+
+                        <div class="pure-checkbox">
+
+                            <p>Allow access to:</p>
+
+                            {% for server in SERVERS %}
+                            <div class="server-checkbox">
+                                <input {% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%}
+                                    type="checkbox" id="option{{loop.index0}}" name="servers"
+                                    value="{{server.info()['local_server_id']}}">
+                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["comment"]}}
+                                    <span class="pure-form-message">ID: {{server.info()['local_server_id'][0:8]}}</span>
+                                    <span class="pure-form-message">Comment: {{server.info()["name"]}}</span>
+                                    <span class="pure-form-message">{% if
+                                        server.info()['local_server_id'] in client['servers'] %}Usage: {% for key in
+                                        server.data["keys"] %}{% if key.name == client['name'] %}{{ (key.used_bytes if
+                                        key.used_bytes else 0) | filesizeformat }}{% endif %}{% endfor
+                                        %}{%endif%}</span>
+                                </label>
+                            </div>
+                            {% endfor %}
+                        </div>
+
                     </div>
-                    <div class="pure-u-1 ">
-                        <input type="text" class="pure-u-1" name="comment" value="{{client['comment']}}"/>
+                    <div class="pure-g pure-form pure-form-stacked">
+                        <div class="pure-u-1-2">
+                            <button type="submit" class="pure-button pure-button-primary button">Save and apply</button>
+                        </div>
                     </div>
-                    <input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}"/>
 
-                            <div class="pure-checkbox">
-                                <p>Allow access to:</p>
-                                {% for server in SERVERS %}
-                                <label class="pure-checkbox" for="option{{loop.index0}}">{{server.info()["name"]}}{% if server.info()['local_server_id'] in client['servers'] %} ( Used {% for key in server.data["keys"] %}{% if key.name == client['name'] %}{{ (key.used_bytes if key.used_bytes else 0) | filesizeformat }}{% endif %}{% endfor %}){%endif%}
-                                <input
-                                        {% if server.info()['local_server_id'] in client['servers'] %}checked{%endif%}
-                                        type="checkbox" id="option{{loop.index0}}" name="servers" value="{{server.info()['local_server_id']}}"></label>
+                </fieldset>
+            </form>
+            <form action="/del_client" class="pure-form pure-form-stacked" method="POST">
+                <input type="hidden" name="name" required value="{{client['name']}}" />
+                <input type="hidden" name="user_id" value="{{selected_client}}" />
+                <button type="submit" class="pure-button pure-button-primary delete-button button">Delete
+                    Client</button>
+                <input type="checkbox" id="agree" name="agree" required>
+            </form>
 
-                                {% endfor %}
-
-                          </div>
-
-                </div>
-                <button type="submit" class="pure-button pure-input-1 pure-button-primary">Save and apply</button>
-            </fieldset>
-        </form>
-
-        <div>
-            <h3>Invite text</h3><hr>
+            <div>
+                <h3>Invite text</h3>
+                <hr>
                 <p>Install Outline VPN. Copy and paste the keys below into the Outline client.
-                The same keys can be used simultaneously on multiple devices.</p>
+                    The same keys can be used simultaneously on multiple devices.</p>
                 {% for server in SERVERS -%}
-                    {% if server.info()['local_server_id'] in client['servers'] %}
-                    {% set salt = bcrypt.gensalt() %}
-                    {% set secret_string = server.info()['local_server_id'] + selected_client %}
-                    {% set hash_secret = bcrypt.hashpw(
-                        password=secret_string.encode('utf-8'),
-                        salt=salt).decode('utf-8') %}
-
-                <p><b>Server location:</b> {{server.info()['name']}}</p>
-                <p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}ssconf://{{ dynamic_hostname }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{% endif %}{% endfor %}</p>
-                {% endif %}
-                {%- endfor -%}
-        </div>
-            <hr>
-<div>
-    <div class="pure-u-1">
-        <h3>Dynamic Access Keys</h3>
-        <table class="pure-table">
-            <thead>
-                <tr>
-                    <th>Server</th>
-                    <th>Dynamic</th>
-                </tr>
-            </thead>
-            <tbody>
-            {% for server in SERVERS %}
                 {% if server.info()['local_server_id'] in client['servers'] %}
                 {% set salt = bcrypt.gensalt() %}
                 {% set secret_string = server.info()['local_server_id'] + selected_client %}
                 {% set hash_secret = bcrypt.hashpw(
-                    password=secret_string.encode('utf-8'),
-                    salt=salt).decode('utf-8') %}
-                <tr>
-                    <td>{{ server.info()['name'] }}</td>
-                    <td>
-                        <p style="font-size: 10pt">{% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}ssconf://{{ dynamic_hostname }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{% endif %}{% endfor %}</p>
-                    </td>
-                </tr>
+                password=secret_string.encode('utf-8'),
+                salt=salt).decode('utf-8') %}
+
+                <p><b>Server location:</b> {{server.info()['name']}}</p>
+                <p><b>Client link:</b> {% for key in server.data["keys"] %}{% if key.key_id == client['name']
+                    %}ssconf://{{ dynamic_hostname
+                    }}/dynamic/{{server.info()['local_server_id'][0:SECRET_LINK_LENGTH]}}{{selected_client[0:SECRET_LINK_LENGTH]}}{{hash_secret[SECRET_LINK_PREFIX|length:]}}#{{server.info()['comment']}}{%
+                    endif %}{% endfor %}</p>
                 {% endif %}
-            {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    <div class="pure-u-1 pure-u-md-1">
-        <h3>SS Links</h3>
-        <table class="pure-table">
-            <thead>
-                <tr>
-                    <th>Server</th>
-                    <th>SSlink</th>
-                </tr>
-            </thead>
-            <tbody>
-            {% for server in SERVERS %}
-                {% if server.info()['local_server_id'] in client['servers'] %}
-                <tr>
-                    <td>{{ server.info()['name'] }}</td>
-                    <td>
-                        <pre style="font-size: 10pt">{% for key in server.data["keys"] %}{% if key.key_id == client['name'] %}{{ key.access_url }}{% endif %}{% endfor %}</pre>
-                    </td>
-                </tr>
-                {% endif %}
-            {% endfor %}
-            </tbody>
-        </table>
-    </div>
-    <hr>
-    </div>
-         <form action="/del_client" class="pure-form pure-form-stacked" method="POST">
-            <input type="hidden" class="pure-u-1" name="name" required value="{{client['name']}}"/>
-            <input type="hidden" class="pure-u-1" name="user_id" value="{{selected_client}}"/>
-            <button type="submit" class="pure-button button-error pure-input-1 ">Delete</button>
-         </form>
-    </div>
+                {%- endfor -%}
+            </div>
+
+        </div>
     </div>
 </div>
 {% endif %}
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 1ba8014..316e47f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,7 @@
 <div id="entety-menu">
 <div>
     <h1 class="server-content-title">Servers</h1>
+    <div class="srcollable-list-content">
     {% for server in SERVERS %}
         {% set total_traffic = namespace(total_bytes=0) %}
         {% for key in server.data["keys"] %}
@@ -28,6 +29,7 @@
         </div>
     </div>
     {% endfor %}
+</div>
     <div onclick="location.href='/?add_server=True';" class="server-item server-add pure-g">
             <div class="pure-u-1">
                 +
@@ -49,15 +51,14 @@
         <form action="/add_server" class="pure-form pure-form-stacked" method="POST">
             <fieldset>
                 <div >
-                    <div >
-                        <input type="text"  name="url" placeholder="Server management URL"/>
-                    </div>
-                    <div >
-                        <input type="text" name="cert" placeholder="Certificate"/>
-                    </div>
-                    <div >
-                        <input type="text"  name="comment"  placeholder="Comment"/>
-                    </div>
+                    <label for="url">Server management URL</label>
+                    <input type="text" class="pure-u-1" name="url" placeholder="https://example.com:5743/KSsdywe6Sdb..."/>
+                    <label for="cert">Server management Certificate</label>
+                    <input type="text" class="pure-u-1" name="cert" placeholder="B5DD2443DAF..."/>
+                    <label for="cert">Server Comment
+                        <span class="pure-form-message">This will be exposed to client and will be used as "Server name" in client Outline app</span>
+                    </label>
+                    <input type="text" class="pure-u-1" name="comment"  placeholder="e.g. server location"/>
                 </div>
                 <button type="submit" class="pure-button pure-input-1 pure-button-primary">Add</button>
             </fieldset>
@@ -75,7 +76,7 @@
       {% set server = SERVERS[selected_server|int] %}
     {% endif %}
     <div id="content">
-    <div id="main" >
+    <div >
         <div class="server-content">
             <div class="server-content-header pure-g">
                 <div>
@@ -100,32 +101,35 @@
         <fieldset>
             <div class="pure-g">
                 <div class="pure-u-1 ">
-                    <label for="name">Server Name</br>This will not be exposed to client</label>
-                    <input type="text" id="name" class="" name="name" value="{{server.info()['name']}}"/>
+                    <label for="name">Server Name
+                        <span class="pure-form-message">This will not be exposed to client</span>
+                    </label>
+                    <input type="text" id="name" class="pure-u-1" name="name" value="{{server.info()['name']}}"/>
                 </div>
                 <div class="pure-u-1 ">
-                    <label for="comment">Comment</br>This will be exposed to client and will be used as "Server name" in client Outline app</label>
-                    <input type="text" id="comment" class="" name="comment" value="{{server.info()['comment']}}"/>
+                    <label for="comment">Comment</br>
+                        <span class="pure-form-message">This will be exposed to client and will be used as "Server name" in client Outline app</span></label>
+                    <input type="text" id="comment" class="pure-u-1" name="comment" value="{{server.info()['comment']}}"/>
                 </div>
                 <div class="pure-u-1">
                     <label for="port_for_new_access_keys">Port For New Access Keys</label>
-                    <input type="text" id="port_for_new_access_keys"  name="port_for_new_access_keys" value="{{server.info()['port_for_new_access_keys']}}"/>
+                    <input type="text" id="port_for_new_access_keys" class="pure-u-1" name="port_for_new_access_keys" value="{{server.info()['port_for_new_access_keys']}}"/>
                 </div>
                 <div class="pure-u-1 ">
                     <label for="hostname_for_access_keys">Hostname For Access Keys</label>
-                    <input type="text" id="hostname_for_access_keys"  name="hostname_for_access_keys" value="{{server.info()['hostname_for_access_keys']}}"/>
+                    <input type="text" id="hostname_for_access_keys" class="pure-u-1" name="hostname_for_access_keys" value="{{server.info()['hostname_for_access_keys']}}"/>
                 </div>
                 <div class="pure-u-1 ">
                     <label for="url">Server URL</label>
-                    <input type="text" readonly id="url"  name="url" value="{{server.info()['url']}}"/>
+                    <input type="text" readonly id="url" class="pure-u-1" name="url" value="{{server.info()['url']}}"/>
                 </div>
                 <div class="pure-u-1 ">
                     <label for="cert">Server Access Certificate</label>
-                    <input type="text" readonly id="cert"  name="cert" value="{{server.info()['cert']}}"/>
+                    <input type="text" readonly id="cert" class="pure-u-1" name="cert" value="{{server.info()['cert']}}"/>
                 </div>
                 <div class="pure-u-1 ">
                     <label for="created_timestamp_ms">Created</label>
-                    <input type="text" readonly id="created_timestamp_ms"  name="created_timestamp_ms" value="{{format_timestamp(server.info()['created_timestamp_ms']) }}"/>
+                    <input type="text" readonly id="created_timestamp_ms" class="pure-u-1" name="created_timestamp_ms" value="{{format_timestamp(server.info()['created_timestamp_ms']) }}"/>
                 </div>
                 <input type="hidden" readonly id="server_id"  name="server_id" value="{{server.info()['local_server_id']}}"/>
             </div>