diff --git a/BlazorSyncfusionCrm/Client/Pages/EditContact.razor b/BlazorSyncfusionCrm/Client/Pages/EditContact.razor
index 9a1cf12..59da650 100644
--- a/BlazorSyncfusionCrm/Client/Pages/EditContact.razor
+++ b/BlazorSyncfusionCrm/Client/Pages/EditContact.razor
@@ -30,20 +30,53 @@ else
         <hr />
         <SfButton CssClass="e-primary" IconCss="e-icons e-save" Content="Save" type="submit" />
     </EditForm>
+    <p>
+        <SfMessage Severity="MessageSeverity.Success" Visible="showSuccessMessage">
+            Contact saved successfully.
+        </SfMessage>
+        <SfMessage Severity="MessageSeverity.Error" Visible="showErrorMessage">
+            Oops, something went wrong.
+        </SfMessage>
+    </p>
+    @if(Id is not null)
+    {
+        <h3>Notes</h3>
+        <SfTextBox CssClass="e-outline" Placeholder="New Note" Multiline="true" 
+            FloatLabelType="@FloatLabelType.Auto" @bind-Value="newNote.Text"></SfTextBox>
+        <SfButton CssClass="e-inherit" Content="Add Note" OnClick="CreateNote" ></SfButton>
+        <hr />
+        <p>
+            <SfButton IsPrimary="true" Content="Load All Notes" OnClick="LoadNotes"></SfButton>
+            @foreach(var note in notes)
+            {
+                <SfCard>
+                    <CardHeader Title="@note.DateCreated.ToString()"></CardHeader>
+                    <CardContent Content="@note.Text"></CardContent>
+                    <CardFooter>
+                        <CardFooterContent>
+                            <SfButton
+                                Content ="Delete"
+                                IsPrimary ="true"
+                                OnClick="@(() => DeleteNote(note.Id))" 
+                            ></SfButton>  
+                        </CardFooterContent>
+                    </CardFooter>
+                </SfCard>
+                <br />
+            }
+        </p>
+    }
+
 </div>
-<p>
-    <SfMessage Severity="MessageSeverity.Success" Visible="showSuccessMessage">
-        Contact saved successfully.
-    </SfMessage>
-    <SfMessage Severity="MessageSeverity.Error" Visible="showErrorMessage">
-        Oops, something went wrong.
-    </SfMessage>
-</p>
+
+
 @code {
     [Parameter]
     public int? Id { get; set; }
 
     public Contact contact { get; set; } = new Contact();
+    public List<Note> notes { get; set; } = new List<Note>();
+    public Note newNote { get; set; } = new Note { Text = string.Empty };
 
     bool showSuccessMessage = false;
     bool showErrorMessage = false;
@@ -88,4 +121,29 @@ else
             showErrorMessage = true;
         }
     }
+
+    async Task CreateNote()
+    {
+        if (Id is null)
+            return;
+
+        newNote.ContactId = Id;
+        var result = await Http.PostAsJsonAsync($"api/notes", newNote);
+        if (result.IsSuccessStatusCode)
+            await LoadNotes();
+    }
+
+    async Task DeleteNote(int noteId)
+    {
+        var result = await Http.DeleteFromJsonAsync<List<Note>>($"api/notes/{noteId}");
+        if (result is not null)
+            notes = result;
+    }
+
+    async Task LoadNotes()
+    {
+        var result = await Http.GetFromJsonAsync<List<Note>>($"api/notes/{contact.Id}");
+        if (result is not null)
+            notes = result;
+    }
 }
diff --git a/BlazorSyncfusionCrm/Client/Pages/Notes.razor b/BlazorSyncfusionCrm/Client/Pages/Notes.razor
new file mode 100644
index 0000000..f6aac0d
--- /dev/null
+++ b/BlazorSyncfusionCrm/Client/Pages/Notes.razor
@@ -0,0 +1,39 @@
+@page "/notes"
+@inject HttpClient Http
+@inject NavigationManager NavigationManager
+
+<h3>Notes</h3>
+
+@foreach (var note in NoteList)
+{
+    <SfCard>
+        <CardHeader Title="@note.DateCreated.ToString()" />
+        <CardContent Content="@note.Text" />
+        <CardFooter>
+            <CardFooterContent>
+                @if(note.Contact is not null)
+                {
+                    <SfButton Content=@($"Show {note.Contact.NickName}")
+                    IsPrimary="true"
+                    OnClick="(() => NavigateToContact(note.Contact.Id))" ></SfButton>
+                }
+            </CardFooterContent>
+        </CardFooter>
+    </SfCard>
+}
+
+@code {
+    public List<Note> NoteList { get; set; } = new  List<Note>();
+
+    protected override async Task OnInitializedAsync()
+    {
+        var result = await Http.GetFromJsonAsync<List<Note>>("api/notes");
+        if (result is not null)
+            NoteList = result;
+    }
+
+    void NavigateToContact(int contactId)
+    {
+        NavigationManager.NavigateTo($"contacts/edit/{contactId}");
+    }
+}
diff --git a/BlazorSyncfusionCrm/Client/_Imports.razor b/BlazorSyncfusionCrm/Client/_Imports.razor
index 8be29fe..50ab631 100644
--- a/BlazorSyncfusionCrm/Client/_Imports.razor
+++ b/BlazorSyncfusionCrm/Client/_Imports.razor
@@ -16,4 +16,5 @@
 @using Syncfusion.Blazor.Calendars
 @using Syncfusion.Blazor.Notifications
 @using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Cards
 
diff --git a/BlazorSyncfusionCrm/Server/Controllers/NotesController.cs b/BlazorSyncfusionCrm/Server/Controllers/NotesController.cs
index 919c2ab..91c7a98 100644
--- a/BlazorSyncfusionCrm/Server/Controllers/NotesController.cs
+++ b/BlazorSyncfusionCrm/Server/Controllers/NotesController.cs
@@ -1,4 +1,5 @@
-using BlazorSyncfusionCrm.Server.Data;
+using BlazorSyncfusionCrm.Client.Pages;
+using BlazorSyncfusionCrm.Server.Data;
 using BlazorSyncfusionCrm.Shared;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
@@ -28,6 +29,44 @@ namespace BlazorSyncfusionCrm.Server.Controllers
 
         }
 
+        [HttpGet("{contactId}")]
+        public async Task<ActionResult<List<Note>>> GetNotesFromContact(int contactId)
+        {
+            return await _context.Notes
+                .Where(n => n.ContactId == contactId)
+                .OrderByDescending(n => n.DateCreated)
+                .ToListAsync();
 
+        }
+
+        [HttpPost]
+        public async Task<ActionResult<List<Note>>> CreateNote(Note note)
+        {
+            _context.Notes.Add(note);
+            await _context.SaveChangesAsync();
+            return await _context.Notes
+                .Where(n => n.ContactId == note.ContactId)
+                .OrderByDescending(n => n.DateCreated)
+                .ToListAsync();
+
+        }
+
+        [HttpDelete("{id}")]
+        public async Task<ActionResult<List<Note>>> DeleteNote(int id)
+        {
+            var dbNote = await _context.Notes.FindAsync(id);
+            if ( dbNote is null) 
+            { 
+                return NotFound("Note not found.");
+            }
+            _context.Notes.Remove(dbNote);
+            await _context.SaveChangesAsync();
+
+            return await _context.Notes
+                .Where(n => n.ContactId == dbNote.ContactId)
+                .OrderByDescending(n => n.DateCreated)
+                .ToListAsync();
+
+        }
     }
 }