diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor b/ShoppingAssistantWebClient.Web/Pages/Cards.razor
index d5064d9..1bc92c2 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor
@@ -1,39 +1,11 @@
 ﻿@page "/cards/{wishlistName}/{chatId}"
 
-@inject IJSRuntime JSRuntime
 @inject NavigationManager navigationManager;
 
 <head>
     <link rel="stylesheet" href="css/Cards.css" />
 </head>
 
-<script>
-    function adjustButtonContainerPosition() {
-        var cardElements = document.querySelectorAll('.card, .back-card, .card-text');
-        var buttonContainer = document.querySelector('.buttons-container');
-
-        if (cardElements.length > 0 && buttonContainer) {
-            var totalHeight = Array.from(cardElements).reduce((max, card) => {
-                return Math.max(max, card.offsetHeight);
-            }, 0);
-
-            if (window.matchMedia('(max-width: 440px)').matches) {
-                buttonContainer.style.top = `calc(20% + ${totalHeight}px + 60px)`;
-            } else if (window.matchMedia('(max-width: 769px)').matches) {
-                buttonContainer.style.top = `calc(12% + ${totalHeight}px + 60px)`;
-            } else if (window.matchMedia('(max-width: 992px)').matches) {
-                buttonContainer.style.top = `calc(8% + ${totalHeight}px + 60px)`;
-            } else {
-                buttonContainer.style.top = `calc(3% + ${totalHeight}px + 60px)`;
-            }
-        }
-    }
-
-    window.addEventListener('load', adjustButtonContainerPosition);
-    window.addEventListener('resize', adjustButtonContainerPosition);
-
-</script>
-
 <div class="card-page">
     <button class="back-button button-animation" @onclick="NavigateToMain"></button>
     <div class="container">
@@ -41,20 +13,27 @@
             <p class="header-text">@wishlistName</p>
         </div>
     
-        <div class="content" data-generalTop="3%" data-largeTop="8%" mediumTop="12%" smallTop="20%">
+        <div class="content">
             <div class="back-card"></div>
             @if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
                 <div class="card">
                     <div class="slider-container">
                         <div class="slider">
-                            @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
-                                string image = Products[currentProduct].ImagesUrls[i];
-                                if (currentImage == image) {
-                                    <img src="@image" class="slider-image" alt="product image"/>
+                            @if(Products[currentProduct].ImagesUrls.Length > 0) {
+                                @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
+                                    string image = Products[currentProduct].ImagesUrls[i];
+                                    if (currentImage == image) {
+                                        <img src="@image" class="slider-image" alt="product image"/>
+                                    }
                                 }
+                                <img class="next-image" src="/images/next-image.png" alt="next image" @onclick="(() => ShowNextImage(currentImage))"/>
+                                <img class="prev-image" src="/images/prev-image.png" alt="previous image" @onclick="(() => ShowPreviousImage(currentImage))"/>
+                            } 
+                            else 
+                            {
+                                <img src="" class="slider-image" alt="product image"/>
                             }
-                            <img class="next-image" src="/images/next-image.png" alt="next image" @onclick="(() => ChangeImage(currentImage))"/>
-                            <img class="prev-image" src="/images/prev-image.png" alt="previous image" @onclick="(() => ChangeImage(currentImage))"/>
+                            
                         </div>
                         <div class="dots">
                             @for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
@@ -99,10 +78,6 @@
                     </div>
                 </div>
 
-                if(!isProductsNull) {
-                    isProductsNull = true;
-                    StateHasChanged();
-                }
             }
             else {
                 <style>
@@ -121,26 +96,17 @@
                         <button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
                     </div>
                 </div>
-
-                if(isProductsNull) {
-                    isProductsNull = false;
-                    StateHasChanged();
-                }
             }
         </div>
     </div>
 </div>
 
+
 @code {
     [Parameter] public string wishlistName { get; set; }
 
     [Parameter] public string chatId {get; set;}
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await JSRuntime.InvokeVoidAsync("adjustButtonContainerPosition");
-    }
-
     private void NavigateToMain() {
         navigationManager.NavigateTo($"/chat/{chatId}");
     }
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
index f1f000b..c0bf1b9 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
@@ -25,11 +25,9 @@ public partial class Cards
     private bool isProductsNull = false;
 
     //private static string[] Images = {
-    //    "/images/image2.png",
-    //    "/images/image1.png",
     //    "/images/return-card.png",
-    //    "/images/amazon.png",
-    //    "/images/avatar.png"
+    //    "/images/exit.png",
+    //    "/images/avatar.jpg"
     //};
 
     //public List<Product> Products = new()
@@ -41,25 +39,40 @@ public partial class Cards
     //};
     
     public List<Product> Products {get; set;}
-    public List<String> productsNames {get; set;}
+    //public List<String> productsNames {get; set;}
 
     protected override async Task OnInitializedAsync()
     {   
         if (Products != null) {
-            currentImage = Products[currentProduct].ImagesUrls[currentIndex];
+            if(Products[currentProduct].ImagesUrls.Length > 0) {
+                currentImage = Products[currentProduct].ImagesUrls[currentIndex];
+            }
         }
         else {
-            productsNames = _searchService.Products;
+            //productsNames = _searchService.Products;
             currentImage = "";
             isProductsNull = true;
         } 
     }
 
-    private void ChangeImage(string image) 
+    private void ShowNextImage(string image) 
     {
         currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
         currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length;
-        currentIndex = currentIndex >= 3 ? 0 : currentIndex;
+        if(currentIndex >= 3 || currentIndex >= Products[currentProduct].ImagesUrls.Length) {
+            currentIndex = 0;
+        }
+        currentImage = Products[currentProduct].ImagesUrls[currentIndex];
+        StateHasChanged();
+    }
+
+    private void ShowPreviousImage(string image) 
+    {
+        currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
+        currentIndex = (currentIndex - 1) % Products[currentProduct].ImagesUrls.Length;
+        if(currentIndex < 0) {
+            currentIndex = Products[currentProduct].ImagesUrls.Length > 2 ? 2 : Products[currentProduct].ImagesUrls.Length - 1;
+        }
         currentImage = Products[currentProduct].ImagesUrls[currentIndex];
         StateHasChanged();
     }
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor b/ShoppingAssistantWebClient.Web/Pages/Cart.razor
index 678e702..f0e1fbd 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor
@@ -18,23 +18,23 @@
     </div>
     <div class="container">
         @if (!isError) {
-            @if (Products != null) {
+            @if (Products.Count > 0) {
                 @foreach (var product in Products) {
                     <div class="product-div">
-                        <img class="product-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe7MHcuWUvuNJsttl3MEVxEayUGVNH4tA2Ha0K4szpgKvH7QYuiaBa_hCzUgW96I6LXqM&usqp=CAU">
+                        <img class="product-img" src="@product.ImagesUrls[0]" alt="product image">
                         <label class="product-description">@product.Description</label>
                         <div class="button-row">
-                            <img class="star" src="/images/star.png">
+                            <img class="star" src="/images/star.png" alt="star">
                             <label class="rating">@product.Rating</label>
                             <label class="price-label">@product.Price</label>
                         </div>
                         <button class="button-amazon">
-                            <img src="/images/amazon.png">
+                            <img src="/images/amazon.png" alt="amazon">
                         </button>
                     </div>
                 }
             }
-            else{
+            else {
                 <p class="error">Cart is empty</p>
             }
         }
diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
index 19c4fe0..e4a987b 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
@@ -12,7 +12,7 @@ public partial class Cart : ComponentBase
     [Inject]
     private ApiClient _apiClient { get; set; }
 
-    public List<Product> Products { get; set; }
+    public List<Product> Products { get; set; } = new List<Product>();
 
     public bool isError = false;
 
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
index 0590f6f..a5f8eb6 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@@ -22,6 +22,7 @@ public partial class Chat : ComponentBase
         public List<Messages> Messages { get; set; }
 
         public List<String> Products { get; set; } = new List<string>();
+
         public List<String> Suggestion { get; set; } = new List<String>();
         
         public Messages Message { get; set; }
@@ -150,8 +151,12 @@ public partial class Chat : ComponentBase
                 StateHasChanged();
                 
             } else if(sseEvent.Event == SearchEventType.Product){
+                
+                string pattern = "[\\\\\"]";
 
-                Products.Add(result);
+                input = Regex.Replace(input, pattern, "");
+
+                Products.Add(input);
 
             } else if(sseEvent.Event == SearchEventType.Suggestion){
 
@@ -162,6 +167,7 @@ public partial class Chat : ComponentBase
             if(Products != null) {
                 string n = name;
                 _searchServise.SetProducts(Products);
+                Products = null;
                 var url = $"/cards/{name}/{chatId}";
                 Navigation.NavigateTo(url);
             }
diff --git a/ShoppingAssistantWebClient.Web/Services/SearchService.cs b/ShoppingAssistantWebClient.Web/Services/SearchService.cs
index aee9aea..93b64fb 100644
--- a/ShoppingAssistantWebClient.Web/Services/SearchService.cs
+++ b/ShoppingAssistantWebClient.Web/Services/SearchService.cs
@@ -5,13 +5,13 @@ public class SearchService
 {
     public List<String> Products { get; set; }
 
-    public string firstMassage { get; set; }
+    public string FirstMessage { get; set; }
 
     public void SetProducts(List<String> products) {
         Products = products;
     }
 
-    public void SetFirstMassage(string massage) {
-        firstMassage = massage;
+    public void SetFirstMassage(string message) {
+        FirstMessage = message;
     }
 }
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
index 541d3fe..b8564db 100644
--- a/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
+++ b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
@@ -46,6 +46,10 @@
     text-align: center;
     font-size: 24px;
     color: rgba(0, 82, 204, 0.8);
+    max-width: 500px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .back-button {
@@ -57,7 +61,7 @@
     background-color: transparent;
     position: absolute;
     left: 2%;
-    top: 30px;
+    top: 25px;
 }
 
 .back-card,
@@ -110,6 +114,7 @@
         width: 40% !important;
         position: absolute;
         z-index: 3;
+        top: calc(400px + 8% + 60px) !important;
     }
 
     .cancel-button {
@@ -205,6 +210,17 @@
 }
 
 @media only screen and (max-width: 769px) {
+
+    .header-text {
+        text-align: center;
+        font-size: 1.4em !important;
+        color: rgba(0, 82, 204, 0.8);
+        max-width: 250px !important;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     .back-card,
     .card,
     .card-text {
@@ -254,6 +270,7 @@
         width: 50vw !important;
         position: absolute;
         z-index: 3;
+        top: calc(368px + 12% + 60px) !important;
     }
 
     .cancel-button {
@@ -332,6 +349,29 @@
 }
 
 @media only screen and (max-width: 440px) {
+
+    .back-button {
+        width: 15px !important;
+        height: 15px !important;
+        background-image: url("/images/back-button.png"); 
+        background-size: cover; 
+        border: none;
+        background-color: transparent;
+        position: absolute;
+        left: 2%;
+        top: 27px;
+    }
+
+    .header-text {
+        text-align: center;
+        font-size: 1.2em !important;
+        color: rgba(0, 82, 204, 0.8);
+        max-width: 200px !important;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     .back-card,
     .card,
     .card-text {
@@ -340,7 +380,7 @@
         aspect-ratio: 1 / 1.6;
         border-radius: 15px;
         position: absolute;
-        top: 20% !important;
+        top: 15% !important;
     }
 
     .card,
@@ -379,6 +419,7 @@
         width: 70vw;
         position: absolute;
         z-index: 3;
+        top: calc(340px + 15% + 60px) !important;
     }
 
     .cancel-button {
@@ -598,6 +639,7 @@
     width: 300px;
     position: absolute;
     z-index: 3;
+    top: calc(480px + 3% + 60px);
 }
 
 .buttons-row {
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png b/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png
deleted file mode 100644
index 8bbd16b..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/image1.png and /dev/null differ
diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png b/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png
deleted file mode 100644
index 1c25710..0000000
Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/image2.png and /dev/null differ
