diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
index d18129b..9dbe618 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
@@ -1,4 +1,7 @@
 @page "/chat/{chatId}"
+
+@inject IHttpClientFactory ClientFactory
+
 <PageTitle>Gift for Jessica</PageTitle>
 
  <div class="right_frame" id="rightFrame">
@@ -43,6 +46,27 @@
                 </div>  
 
 
+                    <div class="possible_options">
+
+                        <div class="tite_options">Several possible options</div>
+                        
+                            <div class="options" >
+
+                                <div class="topic_options">
+                                        HDMI
+                                </div>
+                                <div class="topic_options">
+                                        VGA
+                                </div>
+                                <div class="topic_options">
+                                        DisplayPort                         
+                                </div>
+
+                            </div>
+                        
+                    </div>
+
+
                     <div class="chat_input">
                         <input class="input_messages" type="text" id="chatInput" placeholder="Describe what you are looking for....">
                         <img class="button_sende" src="/images/send.svg" alt="Send message"> 
@@ -62,6 +86,8 @@
 
         [Parameter] public string chatId { get; set; }
 
+
+        
 }
 
 
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
index 3c8cbd7..44e32ae 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@@ -1,14 +1,50 @@
 using Microsoft.AspNetCore.Components;
+using ShoppingAssistantWebClient.Web.Models;
+using GraphQL;
+using Newtonsoft.Json;
+using ShoppingAssistantWebClient.Web.Network;
 
 namespace ShoppingAssistantWebClient.Web.Pages;
 
 public partial class Chat : ComponentBase
 {
+
     [Inject]
-    public ILogger<Chat> Logger { get; set; }
+    private ApiClient _apiClient { get; set; }
+
 
     protected override async Task OnInitializedAsync()
-    {
-        // Get data from Back-end
+        {
+            await LoadMenus();
+        }
+
+
+        private async Task LoadMenus()
+        {
+            var pageNumber = 1;
+            var request = new GraphQLRequest
+            {
+                Query = @"mutation StartPersonalWishlist {
+                        startPersonalWishlist(dto: { type: product, firstMessageText: hello }) {
+                            id
+                            name
+                            type
+                            createdById
+                        }
+                    }",
+
+                Variables = new
+                {
+                    pageNumber = pageNumber,
+                    pageSize = 12,
+                }
+            };
+
+        var response = await _apiClient.QueryAsync(request);
+
     }
+
+
+
+
 }
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
index f7f24b7..33531e7 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
@@ -55,6 +55,36 @@
   border-radius: 0.6em;
 }
 
+.possible_options {
+  position: absolute;
+  bottom: 5.5em;
+  margin-left: 25%;
+  width: 50%;
+  border-radius: 0.6em;
+}
+.tite_options{
+  font-size: 0.9em;
+  color: #ADADAD;
+  margin-bottom: 0.5em;
+
+}
+.options{
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1em;
+}
+.topic_options
+{
+    display: inline-block; 
+    padding:  0.5em;
+    border: 0.09em solid;
+    border-color: #009FFF;
+    border-radius: 0.6em;
+    margin: 0em 0.6em;
+    flex: 1;
+    text-align: center;
+}
+
 .input_messages {
   width: 100%;
   height: 2.5em;
@@ -72,8 +102,8 @@
   cursor: pointer;
   line-height: 2.5em;
   margin-right: 0.8em;
-  width: 1.8em;
-  height: 1.7em;
+  width: 1.5em;
+  height: 1.4em;
 }
 
 .new_chat {
diff --git a/ShoppingAssistantWebClient.Web/Program.cs b/ShoppingAssistantWebClient.Web/Program.cs
index 50d5733..bf74514 100644
--- a/ShoppingAssistantWebClient.Web/Program.cs
+++ b/ShoppingAssistantWebClient.Web/Program.cs
@@ -1,5 +1,7 @@
+using GraphQL.Client.Http;
 using ShoppingAssistantWebClient.Web.Configurations;
 using ShoppingAssistantWebClient.Web.Data;
+using ShoppingAssistantWebClient.Web.Network; 
 
 var builder = WebApplication.CreateBuilder(args);
 
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
index f9d34c6..d2e40f8 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@@ -1,4 +1,6 @@
-@inject NavigationManager Navigation
+
+@inject NavigationManager Navigation
+
 
 <div id="leftframe" class="left_frame">
 
@@ -27,16 +29,22 @@
 
             <div class="wishlist_names">
 
-                @foreach (var item in Wishlists)
-                {
-                    <section class="cont_wishlist">
-                        <div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
-                        <img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
-                        <img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
-                    </section>
+                @if(!isLoading){
+
+                        @foreach (var item in Wishlists)
+                    {
+                        <section class="cont_wishlist">
+                            <div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
+                            <img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
+                            <img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
+                        </section>
+                    }
+
+                }else{
+                    <div>loading ...</div>
                 }
 
-
+                
             </div>
 
         </div>
@@ -90,6 +98,7 @@
 
 @code {
 
+
     private void RedirectToPage(string itemId) {
             var url = $"/chat/{itemId}";
             Navigation.NavigateTo(url);
@@ -102,7 +111,9 @@
             var url = $"/chat/{itemId}/cart";
             Navigation.NavigateTo(url);
         }
-    private void DeleteWishlist(string itemId) {
+    private async void DeleteWishlist(string itemId) {
+
+        await DeleteWish(itemId);
          
     }
 
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
index 7cb303a..4529eb1 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
@@ -1,23 +1,82 @@
 using Microsoft.AspNetCore.Components;
 using ShoppingAssistantWebClient.Web.Models;
+using GraphQL;
+using Newtonsoft.Json;
+using ShoppingAssistantWebClient.Web.Network;
 
 namespace ShoppingAssistantWebClient.Web.Shared
 {
     public partial class NavMenu : ComponentBase
     {
 
-            public List<Wishlist> Wishlists = new()
+        [Inject]
+        private ApiClient _apiClient { get; set; }
+
+        //public string jwt;
+
+        public List<Wishlist> Wishlists { get; set; }
+        public bool isLoading = true;
+        protected override async Task OnInitializedAsync()
+        {
+            //jwt = _apiClient.JwtToken;
+
+            await LoadMenus();
+        }
+
+
+        private async Task LoadMenus()
+        {
+
+
+            isLoading = true;
+            var pageNumber = 1;
+            var request = new GraphQLRequest
             {
-                new Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
-                new Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
-                new Wishlist  {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"}
+                Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
+                            personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
+                                items {
+                                    id
+                                    name
+                                }
+                            }
+                        }",
+
+                Variables = new
+                {
+                    pageNumber,
+                    pageSize = 10,
+                }
             };
 
-            protected override async Task OnInitializedAsync()
+            var response = await _apiClient.QueryAsync(request);
+            var responseData = response.Data;
+            var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
+            this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
+            isLoading = false;
+
+        }
+        
+        protected  async Task DeleteWish(string wishlistId)
+        {
+            var request = new GraphQLRequest
             {
-                // Get data from Back-end
-            }
+                Query = @"mutation DeletePersonalWishlist($wishlistId: String!) {
+                            deletePersonalWishlist(wishlistId: $wishlistId) {
+                                id
+                            }
+                        }
+                        ",
+
+                Variables = new
+                {
+                   wishlistId
+                }
+            };
+
+            var response = await _apiClient.QueryAsync(request);
+            var responseData = response.Data;
+        }
 
     }
 
-}
+}
\ No newline at end of file