diff --git a/Assets/Resources/style.txt b/Assets/Resources/style.txt
new file mode 100644
index 0000000..0523165
--- /dev/null
+++ b/Assets/Resources/style.txt
@@ -0,0 +1,309 @@
+/* Общие стили */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #333;
+}
+
+h1 {
+    color: white;
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 3.5rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    width: 100%;
+    max-width: 600px;
+}
+
+/* Основная форма */
+.form-root {
+    background: white;
+    padding: 25px;
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+/* Группы элементов формы */
+.form-group {
+    border: 2px solid #e0e0e0 !important;
+    border-radius: 12px !important;
+    padding: 20px;
+    transition: all 0.3s ease;
+    background: #f8f9fa;
+}
+
+.form-group:hover {
+    border-color: #667eea !important;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
+    transform: translateY(-2px);
+}
+
+.form-group label {
+    display: block;
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 12px;
+    font-size: 2.1rem;
+}
+
+.form-group p {
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+
+/* Стили для range input */
+input[type="range"] {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(to right, #667eea, #764ba2);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: white;
+    border: 3px solid #667eea;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Стили для чекбоксов */
+input[type="checkbox"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 24px;
+    height: 24px;
+    border: 2px solid #cbd5e0;
+    border-radius: 6px;
+    background: white;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+input[type="checkbox"]:checked {
+    background: #667eea;
+    border-color: #667eea;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "✓";
+    position: absolute;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+input[type="checkbox"]:hover {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Стили для радиокнопок */
+input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid #cbd5e0;
+    border-radius: 50%;
+    background: white;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+input[type="radio"]:checked {
+    border-color: #667eea;
+}
+
+input[type="radio"]:checked::after {
+    content: "";
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: #667eea;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+input[type="radio"]:hover {
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+/* Группы радиокнопок */
+.form-group > div {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    transition: background 0.2s ease;
+}
+
+.form-group > div:hover {
+    background: rgba(102, 126, 234, 0.05);
+}
+
+.form-group > div:last-child {
+    margin-bottom: 0;
+}
+
+/* Кнопка отправки */
+input[type="submit"] {
+    background: linear-gradient(to right, #667eea, #764ba2);
+    color: white;
+    border: none;
+    padding: 18px 40px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+    width: 100%;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+input[type="submit"]:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+input[type="submit"]:active {
+    transform: translateY(-1px);
+}
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 768px) {
+    body {
+        padding: 15px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    }
+    
+    h1 {
+        font-size: 1.8rem;
+        margin-bottom: 20px;
+        padding: 0 10px;
+    }
+    
+    .form-root {
+        padding: 20px;
+        border-radius: 16px;
+        gap: 16px;
+    }
+    
+    .form-group {
+        padding: 16px;
+    }
+    
+    .form-group label,
+    .form-group p {
+        font-size: 1rem;
+        margin-bottom: 10px;
+    }
+    
+    input[type="submit"] {
+        padding: 16px 30px;
+        font-size: 1.1rem;
+    }
+    
+    /* Улучшаем тач-таргеты для мобильных */
+    input[type="checkbox"],
+    input[type="radio"],
+    input[type="range"]::-webkit-slider-thumb {
+        min-height: 44px;
+        min-width: 44px;
+    }
+    
+    .form-group > div {
+        padding: 12px 16px;
+        margin-bottom: 8px;
+    }
+}
+
+/* Анимация появления */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.form-group {
+    animation: fadeIn 0.5s ease forwards;
+}
+
+/* Порядок анимаций для групп */
+.form-group:nth-child(1) { animation-delay: 0.1s; }
+.form-group:nth-child(2) { animation-delay: 0.2s; }
+.form-group:nth-child(3) { animation-delay: 0.3s; }
+.form-group:nth-child(4) { animation-delay: 0.4s; }
+.form-group:nth-child(5) { animation-delay: 0.5s; }
+.form-group:nth-child(6) { animation-delay: 0.6s; }
+.form-group:nth-child(7) { animation-delay: 0.7s; }
+.form-group:nth-child(8) { animation-delay: 0.8s; }
+.form-group:nth-child(9) { animation-delay: 0.9s; }
+.form-group:nth-child(10) { animation-delay: 1.0s; }
+.form-group:nth-child(11) { animation-delay: 1.1s; }
+.form-group:nth-child(12) { animation-delay: 1.2s; }
+.form-group:nth-child(13) { animation-delay: 1.3s; }
+.form-group:nth-child(14) { animation-delay: 1.4s; }
+input[type="submit"] { animation-delay: 1.5s; animation: fadeIn 0.5s ease forwards; }
+
+/* Улучшение читаемости на светлом фоне */
+.form-group label[for],
+.form-group p {
+    color: #2d3748;
+}
+
+/* Эффект фокуса для доступности */
+input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
+}
\ No newline at end of file
diff --git a/Assets/Resources/style.txt.meta b/Assets/Resources/style.txt.meta
new file mode 100644
index 0000000..4976e97
--- /dev/null
+++ b/Assets/Resources/style.txt.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: f9ce91e4e61af164c9742222337db425
+TextScriptImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Assets/Scripts/Server/SettingsToHtml.cs b/Assets/Scripts/Server/SettingsToHtml.cs
index 3fcf19c..5f10ab0 100644
--- a/Assets/Scripts/Server/SettingsToHtml.cs
+++ b/Assets/Scripts/Server/SettingsToHtml.cs
@@ -20,9 +20,9 @@ public class SettingsToHtml : MonoBehaviour
     {
         StringBuilder sb = new StringBuilder();
 
-        sb.AppendLine("Настройки фишки:");
+        sb.AppendLine("<h1>Настройки фишки</h1>");
 
-        sb.AppendLine("<form action=\"/upd\" method=\"POST\">");
+        sb.AppendLine("<form action=\"/upd\" method=\"POST\" class=\"form-root\">");
         foreach (Setting setting in settings)
         {
             string view = string.Empty;
@@ -138,11 +138,19 @@ public class SettingsToHtml : MonoBehaviour
 
     private static string Decorate(string content)
     {
-        string res = "<!DOCTYPE html>\r\n<html lang=\"ru\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Настройки Фишки</title>\r\n</head>\r\n<body>";
+        string res = "<!DOCTYPE html>" 
+                + "<html lang=\"ru\">" 
+                + "<head>" 
+                + "<meta charset=\"utf-8\">"
+                + "<link rel=\"stylesheet\" href=\"style.css\">"
+                + "<title>Настройки Фишки</title>" 
+                + "</head>" 
+                + "<body>";
 
         res += content;
 
-        res += "</body>\r\n</html>";
+        res += "</body>" +
+            "</html>";
 
         return res;
     }
diff --git a/Assets/Scripts/Server/WebServer.cs b/Assets/Scripts/Server/WebServer.cs
index 8eba3d5..f112477 100644
--- a/Assets/Scripts/Server/WebServer.cs
+++ b/Assets/Scripts/Server/WebServer.cs
@@ -19,9 +19,13 @@ public class WebServer : MonoBehaviour
     private HttpListener listener;
     private bool isRunning = true;
 
+    private static byte[] css;
+
     async void Start()
     {
         SettingsManager.Initialize();//надо будет убирать
+        LoadCss();
+
         await StartWebServerAsync();
     }
 
@@ -65,6 +69,10 @@ public class WebServer : MonoBehaviour
             {
                 await HandleGetSettingsAsync(context);
             }
+            else if (method == "GET" && path == "/style.css")
+            {
+                await HandleCssRequestAsync(context);
+            }
             else if (method == "POST" && path == "/upd")
             {
                 await HandlePostUpdateAsync(context);
@@ -121,69 +129,39 @@ public class WebServer : MonoBehaviour
         });
     }
 
-    /*
-        async Task HandlePostUpdateAsync(HttpListenerContext context)
+    async Task HandleCssRequestAsync(HttpListenerContext context)
+    {
+        context.Response.ContentType = "text/css";
+        context.Response.ContentLength64 = css.Length;
+        await context.Response.OutputStream.WriteAsync(css, 0, css.Length);
+        context.Response.OutputStream.Close();
+    }
+
+    private static void LoadCss()
+    {
+        TextAsset cssAsset = Resources.Load<TextAsset>("style");
+
+        try
         {
-            try
-            {
-                // Читаем тело POST-запроса
-                string requestBody;
-                using (var reader = new StreamReader(context.Request.InputStream, context.Request.ContentEncoding))
-                {
-                    requestBody = await reader.ReadToEndAsync();
-                }
-
-                Debug.Log($"Получен POST запрос на /upd");
-                Debug.Log($"Тело запроса: {requestBody}");
-
-                // Здесь вы можете обработать данные формы
-                // Обычно данные формы приходят в формате: key1=value1&key2=value2
-                // Вы можете их разобрать:
-                var formData = System.Web.HttpUtility.ParseQueryString(requestBody);
-
-                // Пример: если у вас есть поле "action" в форме
-                string action = formData["action"];
-                string buttonValue = formData["submit"]; // для input type="submit"
-
-                Debug.Log($"Action: {action}, Button value: {buttonValue}");
-
-                // Пример обработки разных кнопок:
-                // Если у вас несколько кнопок с разными именами/значениями
-                if (!string.IsNullOrEmpty(formData["save"]))
-                {
-                    await HandleSaveAction(formData);
-                }
-                else if (!string.IsNullOrEmpty(formData["reset"]))
-                {
-                    await HandleResetAction(formData);
-                }
-
-                // Отправляем ответ обратно
-                string responseHtml = @"
-                    <html>
-                        <head><title>Обновлено</title></head>
-                        <body>
-                            <h1>Данные успешно получены!</h1>
-                            <p>Сервер обработал ваш запрос.</p>
-                            <a href='/'>Вернуться назад</a>
-                            <script>
-                                // Через 3 секунды возвращаемся назад
-                                setTimeout(function() {
-                                    window.location.href = '/';
-                                }, 3000);
-                            </script>
-                        </body>
-                    </html>";
-
-                SendHtmlResponse(context, responseHtml);
-            }
-            catch (Exception ex)
-            {
-                Debug.LogError($"Error handling POST /upd: {ex.Message}");
-                SendHtmlResponse(context, $"<h1>Error: {ex.Message}</h1>", 500);
-            }
+            print(cssAsset.text);
         }
-    */
+        catch (Exception)
+        {
+
+            throw;
+        }
+
+        if (cssAsset != null)
+        {
+            css= Encoding.UTF8.GetBytes(cssAsset.text);
+            Debug.Log("CSS OK");
+        }
+        else
+        {
+            Debug.LogWarning("CSS NOT OK");
+            css = new byte[0];
+        } 
+    }
 
     async Task HandlePostUpdateAsync(HttpListenerContext context)
     {