diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor
index 18f5001..f2cadad 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor
@@ -11,18 +11,18 @@
         </a>
     </div>
 
-        <div class="new_chat">
+    <div class="new_chat">
         <div class="chat_message">
             <div class="title_one_frame">New chat</div>
             <div class="title_two_frame">What you're looking for</div>
 
             <div class="switch">
-                <div @onclick="Сhoose_product"class="switch_product" id="choose_product">
+                <button @onclick="Сhoose_product" class="switch_product" id="choose_product">
                     Product
-                </div>
-                <div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
-                    Gift
-                </div>
+                </button>
+                <button text="Gift" hover-text="Сoming soon" onmouseover="showMessage()" onmouseout="hideMessage()"
+                    class="switch_gift" id="choose_gift">
+                </button>
             </div>
 
 
@@ -53,13 +53,13 @@
         </div>
 
         <div class="chat_input">
-            <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
-                placeholder="Describe what you are looking for...." autocomplete="off">
+            <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text"
+                id="chatInput" placeholder="Describe what you are looking for...." autocomplete="off">
             <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
         </div>
 
     </div>
-    
+
 
 </div>
 
@@ -73,11 +73,11 @@
     var choose = "Product";
 
     function switchGift() {
-        choose_gift.style.backgroundColor = "#0052CC";
-        choose_product.style.backgroundColor = "transparent";
-        switchGi.style.color = "white";
-        switchProd.style.color = "#202124";
-        choose = "Gift";
+        // choose_gift.style.backgroundColor = "#0052CC";
+        // choose_product.style.backgroundColor = "transparent";
+        // switchGi.style.color = "white";
+        //switchProd.style.color = "#202124";
+        //choose = "Gift";
 
     }
 
@@ -91,17 +91,10 @@
     }
     function myJavaScriptFunction(wishlistId) {
 
-         UpdateMenu(wishlistId);
+        UpdateMenu(wishlistId);
 
     }
 
-
-
-
-
-
-
-
     document.getElementById('choose_gift').addEventListener('click', switchGift);
     document.getElementById('choose_product').addEventListener('click', switchProduct);
 
@@ -113,14 +106,14 @@
     private void Сhoose_product() {
         selectedChoice = "Product";
     }
-        private void Сhoose_gift() {
+    private void Сhoose_gift() {
         selectedChoice = "Gift";
     }
 
     private async Task UpdateSideMenu(string wishlistId)
     {
 
-    await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
+        await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
 
     }
 
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
index c6cd6ab..7fd361c 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
@@ -26,7 +26,6 @@ namespace ShoppingAssistantWebClient.Web.Pages
         private MessageCreateDto messageCreateDto;
         private string inputValue = "";
 
-
         private async Task CreateNewChat() {
 
           try
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
index 6459264..863df0f 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
@@ -159,7 +159,41 @@
   transition: 0.8s;
   color: #202124;
 }
+button::before {
+  content: attr(text);
 
+}
+
+button:hover::before {
+  content: attr(hover-text);
+}
+button {
+  outline: none; /* Для синий ободки */
+  border: 0;
+  background: transparent;
+}
+.message {
+  right: 0;
+  position: absolute;
+  border-radius: 0.6em;
+  margin: 0.3125em;
+  width: calc(50% - 0.625em);
+  height: calc(100% - 0.625em);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.8s;
+  color: #202124;
+  padding: 4px; /* Добавьте подходящий отступ, если необходимо */
+}
+.hidden {
+  display: none;
+}
+
+.show {
+  display: block;
+}
 .chat_message {
   position: relative;
   overflow-y: auto;