diff --git a/Todo.Tests/ApiControllers/TodoItemApiControllerTests.cs b/Todo.Tests/ApiControllers/TodoItemApiControllerTests.cs
new file mode 100644
index 00000000..c76c668c
--- /dev/null
+++ b/Todo.Tests/ApiControllers/TodoItemApiControllerTests.cs
@@ -0,0 +1,80 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using System.Threading.Tasks;
+using Todo.Controllers;
+using Todo.Data;
+using Todo.Data.Entities;
+using Xunit;
+
+namespace Todo.Tests.Controllers
+{
+    public class TodoItemApiControllerTests
+    {
+        private readonly ApplicationDbContext _context;
+        private readonly TodoItemApiController _controller;
+
+        public TodoItemApiControllerTests()
+        {
+            var options = new DbContextOptionsBuilder<ApplicationDbContext>()
+                .UseInMemoryDatabase(databaseName: "TodoDatabase")
+                .Options;
+
+            _context = new ApplicationDbContext(options);
+            _controller = new TodoItemApiController(_context);
+        }
+
+        [Fact]
+        public async Task Create_ValidRequest_ReturnsOkResult()
+        {
+            // Arrange
+            var request = new TodoItemRequest
+            {
+                TodoListId = 1,
+                Title = "Test Title",
+                ResponsiblePartyId = "user1",
+                Importance = Importance.Medium,
+                Rank = 1
+            };
+
+            // Act
+            var result = await _controller.Create(request) as ActionResult;
+
+            // Assert
+            Assert.NotNull(result);
+            var okResult = result as OkObjectResult;
+            Assert.NotNull(okResult);
+            Assert.Equal(200, okResult.StatusCode);
+
+            var createdItem = okResult.Value as TodoItem;
+            Assert.NotNull(createdItem);
+            Assert.Equal(request.Title, createdItem.Title);
+            Assert.Equal(request.ResponsiblePartyId, createdItem.ResponsiblePartyId);
+            Assert.Equal(request.Importance, createdItem.Importance);
+            Assert.Equal(request.Rank, createdItem.Rank);
+        }
+
+        [Fact]
+        public async Task Create_InvalidRequest_ReturnsBadRequest()
+        {
+            // Arrange
+            var request = new TodoItemRequest
+            {
+                TodoListId = 1,
+                Title = "", // Invalid title
+                ResponsiblePartyId = "user1",
+                Importance = Importance.Medium,
+                Rank = 1
+            };
+
+            // Act
+            var result = await _controller.Create(request) as ActionResult;
+
+            // Assert
+            Assert.NotNull(result);
+            var badRequestResult = result as BadRequestObjectResult;
+            Assert.NotNull(badRequestResult);
+            Assert.Equal(400, badRequestResult.StatusCode);
+            Assert.Equal("Invalid data.", badRequestResult.Value);
+        }
+    }
+}
\ No newline at end of file
diff --git a/Todo.Tests/Services/TestGravatar.cs b/Todo.Tests/Services/TestGravatar.cs
new file mode 100644
index 00000000..9c57372d
--- /dev/null
+++ b/Todo.Tests/Services/TestGravatar.cs
@@ -0,0 +1,71 @@
+using System;
+using System.Net.Http;
+using System.Security.Cryptography;
+using System.Text;
+using System.Text.Json;
+using System.Threading.Tasks;
+
+namespace Todo.Tests.Services
+{
+    public static class Gravatar
+    {
+        private static HttpClient _httpClient = new HttpClient();
+
+        // Property to allow setting HttpClient for testing
+        public static HttpClient HttpClientInstance
+        {
+            get => _httpClient;
+            set => _httpClient = value;
+        }
+
+        public static async Task<string> GetGravatarProfileNameAsync(string email)
+        {
+            try
+            {
+                var emailHash = GetHash(email.Trim().ToLower());
+                var requestUrl = $"https://en.gravatar.com/{emailHash}.json";
+
+                var response = await _httpClient.GetAsync(requestUrl);
+                if (response.IsSuccessStatusCode)
+                {
+                    var jsonResponse = await response.Content.ReadAsStringAsync();
+                    var gravatarProfile = JsonSerializer.Deserialize<GravatarProfile>(jsonResponse);
+                    return gravatarProfile?.entry?[0]?.displayName ?? email;
+                }
+            }
+            catch (Exception ex)
+            {
+                throw new Exception(ex.Message, ex);
+            }
+
+            return email; // Fallback to email if something goes wrong
+        }
+
+        public static string GetHash(string emailAddress)
+        {
+            using (var md5 = MD5.Create())
+            {
+                var inputBytes = Encoding.Default.GetBytes(emailAddress.Trim().ToLowerInvariant());
+                var hashBytes = md5.ComputeHash(inputBytes);
+
+                var builder = new StringBuilder();
+                foreach (var b in hashBytes)
+                {
+                    builder.Append(b.ToString("X2"));
+                }
+                return builder.ToString().ToLowerInvariant();
+            }
+        }
+
+        private class GravatarProfile
+        {
+            public GravatarEntry[] entry { get; set; }
+        }
+
+        private class GravatarEntry
+        {
+            public string displayName { get; set; }
+        }
+    }
+}
+
diff --git a/Todo.Tests/TestTodoListBuilder.cs b/Todo.Tests/TestTodoListBuilder.cs
index 85be83c3..9ca5bc09 100644
--- a/Todo.Tests/TestTodoListBuilder.cs
+++ b/Todo.Tests/TestTodoListBuilder.cs
@@ -12,7 +12,7 @@ public class TestTodoListBuilder
     {
         private readonly string title;
         private readonly IdentityUser owner;
-        private readonly List<(string, Importance)> items = new List<(string, Importance)>();
+        private readonly List<(string, Importance, int)> items = new List<(string, Importance, int)>();
 
         public TestTodoListBuilder(IdentityUser owner, string title)
         {
@@ -20,16 +20,16 @@ public TestTodoListBuilder(IdentityUser owner, string title)
             this.owner = owner;
         }
 
-        public TestTodoListBuilder WithItem(string itemTitle, Importance importance)
+        public TestTodoListBuilder WithItem(string itemTitle, Importance importance, int rank)
         {
-            items.Add((itemTitle, importance));
+            items.Add((itemTitle, importance, rank));
             return this;
         }
 
         public TodoList Build()
         {
             var todoList = new TodoList(owner, title);
-            var todoItems = items.Select(itm => new TodoItem(todoList.TodoListId, owner.Id, itm.Item1, itm.Item2));
+            var todoItems = items.Select(itm => new TodoItem(todoList.TodoListId, owner.Id, itm.Item1, itm.Item2, itm.Item3));
             todoItems.ToList().ForEach(tlItm =>
             {
                 todoList.Items.Add(tlItm);
diff --git a/Todo.Tests/Todo.Tests.csproj b/Todo.Tests/Todo.Tests.csproj
index 726a5e71..6cb3863a 100644
--- a/Todo.Tests/Todo.Tests.csproj
+++ b/Todo.Tests/Todo.Tests.csproj
@@ -10,8 +10,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.13" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.Testing" Version="3.1.13" />
     <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.13" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="3.1.13" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.13" />
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.8.0" />
+    <PackageReference Include="Moq" Version="4.20.70" />
     <PackageReference Include="xunit" Version="2.3.1" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.3.1" />
   </ItemGroup>
diff --git a/Todo.Tests/WhenTodoItemIsConvertedToEditFields.cs b/Todo.Tests/WhenTodoItemIsConvertedToEditFields.cs
index 2025be1b..78c82fab 100644
--- a/Todo.Tests/WhenTodoItemIsConvertedToEditFields.cs
+++ b/Todo.Tests/WhenTodoItemIsConvertedToEditFields.cs
@@ -15,7 +15,7 @@ public class WhenTodoItemIsConvertedToEditFields
         public WhenTodoItemIsConvertedToEditFields()
         {
             var todoList = new TestTodoListBuilder(new IdentityUser("alice@example.com"), "shopping")
-                    .WithItem("bread", Importance.High)
+                    .WithItem("bread", Importance.High, 10)
                     .Build()
                 ;
 
diff --git a/Todo/ApiControllers/TodoItemApiController.cs b/Todo/ApiControllers/TodoItemApiController.cs
new file mode 100644
index 00000000..f7966d46
--- /dev/null
+++ b/Todo/ApiControllers/TodoItemApiController.cs
@@ -0,0 +1,59 @@
+using Microsoft.AspNetCore.Mvc;
+using System;
+using System.Threading.Tasks;
+using Todo.Data;
+using Todo.Data.Entities;
+
+namespace Todo.Controllers
+{
+    [ApiController]
+    [Route("api/[controller]")]
+
+    public class TodoItemApiController : ControllerBase
+    {
+        private readonly ApplicationDbContext _context;
+
+        public TodoItemApiController(ApplicationDbContext context)
+        {
+            _context = context;
+        }
+
+        [HttpPost]
+        public async Task<ActionResult> Create(TodoItemRequest request)
+        {
+            try
+            {
+                if (request == null || string.IsNullOrEmpty(request.Title))
+                {
+                    return BadRequest("Invalid data.");
+                }
+
+                var todoItem = new TodoItem(request.TodoListId, request.ResponsiblePartyId, request.Title, request.Importance, request.Rank)
+                {
+                    Rank = request.Rank,
+                    IsDone = false
+                };
+
+                _context.TodoItems.Add(todoItem);
+                await _context.SaveChangesAsync();
+
+                return Ok(todoItem);
+            }
+            catch (Exception ex)
+            {
+
+                return NotFound();
+                throw ex;
+            }
+        }
+    }
+}
+
+public class TodoItemRequest
+{
+    public int TodoListId { get; set; }
+    public string Title { get; set; }
+    public string ResponsiblePartyId { get; set; }
+    public Importance Importance { get; set; }
+    public int Rank { get; set; }
+}
\ No newline at end of file
diff --git a/Todo/Controllers/TodoItemController.cs b/Todo/Controllers/TodoItemController.cs
index e4a44fce..a82f9d45 100644
--- a/Todo/Controllers/TodoItemController.cs
+++ b/Todo/Controllers/TodoItemController.cs
@@ -1,6 +1,6 @@
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using System.Threading.Tasks;
 using Todo.Data;
 using Todo.Data.Entities;
 using Todo.EntityModelMappers.TodoItems;
@@ -33,7 +33,7 @@ public async Task<IActionResult> Create(TodoItemCreateFields fields)
         {
             if (!ModelState.IsValid) { return View(fields); }
 
-            var item = new TodoItem(fields.TodoListId, fields.ResponsiblePartyId, fields.Title, fields.Importance);
+            var item = new TodoItem(fields.TodoListId, fields.ResponsiblePartyId, fields.Title, fields.Importance, fields.Rank);
 
             await dbContext.AddAsync(item);
             await dbContext.SaveChangesAsync();
diff --git a/Todo/Controllers/TodoListController.cs b/Todo/Controllers/TodoListController.cs
index 04548080..2abad0c1 100644
--- a/Todo/Controllers/TodoListController.cs
+++ b/Todo/Controllers/TodoListController.cs
@@ -1,8 +1,8 @@
-using System.Threading;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
+using System.Threading;
+using System.Threading.Tasks;
 using Todo.Data;
 using Todo.Data.Entities;
 using Todo.EntityModelMappers.TodoLists;
@@ -31,10 +31,22 @@ public IActionResult Index()
             return View(viewmodel);
         }
 
-        public IActionResult Detail(int todoListId)
+        public async Task<IActionResult> Detail(int todoListId, string sortOrder = "Importance")
         {
             var todoList = dbContext.SingleTodoList(todoListId);
+
             var viewmodel = TodoListDetailViewmodelFactory.Create(todoList);
+
+            viewmodel.CurrentSort = sortOrder;
+
+            foreach (var item in viewmodel.Items)
+            {
+                var gravatarName = await Gravatar.GetGravatarProfileNameAsync(item.ResponsibleParty.Email);
+
+                item.ResponsibleParty.GravatarName = ((gravatarName == null) || (gravatarName == item.ResponsibleParty.Email)) 
+                                                        ? item.ResponsibleParty.Email  : gravatarName;
+            }
+
             return View(viewmodel);
         }
 
diff --git a/Todo/Data/Entities/Importance.cs b/Todo/Data/Entities/Importance.cs
index 2a39bf83..a7d05f94 100644
--- a/Todo/Data/Entities/Importance.cs
+++ b/Todo/Data/Entities/Importance.cs
@@ -1,8 +1,8 @@
 namespace Todo.Data.Entities {
     public enum Importance
     {
-        High,
-        Medium,
-        Low,
+        High = 0,
+        Medium = 1,
+        Low = 2,
     }
 }
\ No newline at end of file
diff --git a/Todo/Data/Entities/TodoItem.cs b/Todo/Data/Entities/TodoItem.cs
index 4e08ea41..feb9f97d 100644
--- a/Todo/Data/Entities/TodoItem.cs
+++ b/Todo/Data/Entities/TodoItem.cs
@@ -8,6 +8,7 @@ public class TodoItem
         public string ResponsiblePartyId { get; set; }
         public IdentityUser ResponsibleParty { get; set; }
         public bool IsDone { get; set; }
+        public int Rank { get; set; }
         public Importance Importance { get; set; }
 
         public int TodoListId { get; set; }
@@ -15,12 +16,13 @@ public class TodoItem
 
         protected TodoItem() { }
 
-        public TodoItem(int todoListId, string responsiblePartyId, string title, Importance importance)
+        public TodoItem(int todoListId, string responsiblePartyId, string title, Importance importance, int rank)
         {
             TodoListId = todoListId;
             ResponsiblePartyId = responsiblePartyId;
             Title = title;
             Importance = importance;
+            Rank = rank;
         }
     }
 }
\ No newline at end of file
diff --git a/Todo/EntityModelMappers/TodoItems/TodoItemEditFieldsFactory.cs b/Todo/EntityModelMappers/TodoItems/TodoItemEditFieldsFactory.cs
index 6d3e893b..d9563d4c 100644
--- a/Todo/EntityModelMappers/TodoItems/TodoItemEditFieldsFactory.cs
+++ b/Todo/EntityModelMappers/TodoItems/TodoItemEditFieldsFactory.cs
@@ -9,7 +9,7 @@ public static TodoItemEditFields Create(TodoItem todoItem)
         {
             var todoList = todoItem.TodoList;
             return new TodoItemEditFields(todoList.TodoListId, todoList.Title, todoItem.TodoItemId, todoItem.Title,
-                todoItem.IsDone, todoItem.ResponsiblePartyId, todoItem.Importance);
+                todoItem.IsDone, todoItem.ResponsiblePartyId, todoItem.Importance, todoItem.Rank);
         }
 
         public static void Update(TodoItemEditFields src, TodoItem dest)
@@ -18,6 +18,7 @@ public static void Update(TodoItemEditFields src, TodoItem dest)
             dest.IsDone = src.IsDone;
             dest.ResponsiblePartyId = src.ResponsiblePartyId;
             dest.Importance = src.Importance;
+            dest.Rank = src.Rank;
         }
     }
 }
\ No newline at end of file
diff --git a/Todo/EntityModelMappers/TodoItems/TodoItemSummaryViewmodelFactory.cs b/Todo/EntityModelMappers/TodoItems/TodoItemSummaryViewmodelFactory.cs
index c223577b..7cf82c5f 100644
--- a/Todo/EntityModelMappers/TodoItems/TodoItemSummaryViewmodelFactory.cs
+++ b/Todo/EntityModelMappers/TodoItems/TodoItemSummaryViewmodelFactory.cs
@@ -7,7 +7,7 @@ public static class TodoItemSummaryViewmodelFactory
     {
         public static TodoItemSummaryViewmodel Create(TodoItem ti)
         {
-            return new TodoItemSummaryViewmodel(ti.TodoItemId, ti.Title, ti.IsDone, UserSummaryViewmodelFactory.Create(ti.ResponsibleParty), ti.Importance);
+            return new TodoItemSummaryViewmodel(ti.TodoItemId, ti.Title, ti.IsDone, UserSummaryViewmodelFactory.Create(ti.ResponsibleParty), ti.Importance, ti.Rank);
         }
     }
 }
\ No newline at end of file
diff --git a/Todo/Models/TodoItems/TodoItemCreateFields.cs b/Todo/Models/TodoItems/TodoItemCreateFields.cs
index dfaed4af..f431100e 100644
--- a/Todo/Models/TodoItems/TodoItemCreateFields.cs
+++ b/Todo/Models/TodoItems/TodoItemCreateFields.cs
@@ -1,4 +1,5 @@
-using Todo.Data.Entities;
+using System.ComponentModel.DataAnnotations;
+using Todo.Data.Entities;
 
 namespace Todo.Models.TodoItems
 {
@@ -7,8 +8,11 @@ public class TodoItemCreateFields
         public int TodoListId { get; set; }
         public string Title { get; set; }
         public string TodoListTitle { get; set; }
+
+        [Display(Name = "Responsible Party")]
         public string ResponsiblePartyId { get; set; }
         public Importance Importance { get; set; } = Importance.Medium;
+        public int Rank { get; set; } = 0;
 
         public TodoItemCreateFields() { }
 
diff --git a/Todo/Models/TodoItems/TodoItemEditFields.cs b/Todo/Models/TodoItems/TodoItemEditFields.cs
index 43c970ef..d99caed3 100644
--- a/Todo/Models/TodoItems/TodoItemEditFields.cs
+++ b/Todo/Models/TodoItems/TodoItemEditFields.cs
@@ -1,4 +1,5 @@
-using Todo.Data.Entities;
+using System.ComponentModel.DataAnnotations;
+using Todo.Data.Entities;
 
 namespace Todo.Models.TodoItems
 {
@@ -9,12 +10,15 @@ public class TodoItemEditFields
         public string TodoListTitle { get; set; }
         public int TodoItemId { get; set; }
         public bool IsDone { get; set; }
+
+        [Display(Name = "Responsible Party")]
         public string ResponsiblePartyId { get; set; }
         public Importance Importance { get; set; }
+        public int Rank { get; set; }
 
         public TodoItemEditFields() { }
 
-        public TodoItemEditFields(int todoListId, string todoListTitle, int todoItemId, string title, bool isDone, string responsiblePartyId, Importance importance)
+        public TodoItemEditFields(int todoListId, string todoListTitle, int todoItemId, string title, bool isDone, string responsiblePartyId, Importance importance, int rank)
         {
             TodoListId = todoListId;
             TodoListTitle = todoListTitle;
@@ -22,7 +26,8 @@ public TodoItemEditFields(int todoListId, string todoListTitle, int todoItemId,
             Title = title;
             IsDone = isDone;
             ResponsiblePartyId = responsiblePartyId;
-            Importance = Importance.Medium;
+            Importance = importance;
+            Rank = rank;
         }
     }
 }
\ No newline at end of file
diff --git a/Todo/Models/TodoItems/TodoItemSummaryViewmodel.cs b/Todo/Models/TodoItems/TodoItemSummaryViewmodel.cs
index 934010a7..844852b4 100644
--- a/Todo/Models/TodoItems/TodoItemSummaryViewmodel.cs
+++ b/Todo/Models/TodoItems/TodoItemSummaryViewmodel.cs
@@ -9,14 +9,16 @@ public class TodoItemSummaryViewmodel
         public UserSummaryViewmodel ResponsibleParty { get; }
         public bool IsDone { get; }
         public Importance Importance { get; }
+        public int Rank { get; }
 
-        public TodoItemSummaryViewmodel(int todoItemId, string title, bool isDone, UserSummaryViewmodel responsibleParty, Importance importance)
+        public TodoItemSummaryViewmodel(int todoItemId, string title, bool isDone, UserSummaryViewmodel responsibleParty, Importance importance, int rank)
         {
             TodoItemId = todoItemId;
             Title = title;
             IsDone = isDone;
             ResponsibleParty = responsibleParty;
             Importance = importance;
+            Rank = rank;
         }
     }
 }
\ No newline at end of file
diff --git a/Todo/Models/TodoItems/UserSummaryViewmodel.cs b/Todo/Models/TodoItems/UserSummaryViewmodel.cs
index eb31b5ed..9bf44e76 100644
--- a/Todo/Models/TodoItems/UserSummaryViewmodel.cs
+++ b/Todo/Models/TodoItems/UserSummaryViewmodel.cs
@@ -4,6 +4,7 @@ public class UserSummaryViewmodel
     {
         public string UserName { get; }
         public string Email { get; }
+        public string GravatarName { get; set; }
 
         public UserSummaryViewmodel(string userName, string email)
         {
diff --git a/Todo/Models/TodoLists/TodoListDetailViewmodel.cs b/Todo/Models/TodoLists/TodoListDetailViewmodel.cs
index 15777277..91a0ab20 100644
--- a/Todo/Models/TodoLists/TodoListDetailViewmodel.cs
+++ b/Todo/Models/TodoLists/TodoListDetailViewmodel.cs
@@ -9,6 +9,8 @@ public class TodoListDetailViewmodel
         public string Title { get; }
         public ICollection<TodoItemSummaryViewmodel> Items { get; }
 
+        public string CurrentSort { get; set; }
+
         public TodoListDetailViewmodel(int todoListId, string title, ICollection<TodoItemSummaryViewmodel> items)
         {
             Items = items;
diff --git a/Todo/Services/ApplicationDbContextConvenience.cs b/Todo/Services/ApplicationDbContextConvenience.cs
index 3549d4b3..4a99beda 100644
--- a/Todo/Services/ApplicationDbContextConvenience.cs
+++ b/Todo/Services/ApplicationDbContextConvenience.cs
@@ -11,7 +11,8 @@ public static IQueryable<TodoList> RelevantTodoLists(this ApplicationDbContext d
         {
             return dbContext.TodoLists.Include(tl => tl.Owner)
                 .Include(tl => tl.Items)
-                .Where(tl => tl.Owner.Id == userId);
+                .Where(tl => tl.Owner.Id == userId || tl.Items.Any(item => item.ResponsiblePartyId == userId))
+                .Distinct();
         }
 
         public static TodoList SingleTodoList(this ApplicationDbContext dbContext, int todoListId)
diff --git a/Todo/Services/Gravatar.cs b/Todo/Services/Gravatar.cs
index 81ac8efe..642ad58b 100644
--- a/Todo/Services/Gravatar.cs
+++ b/Todo/Services/Gravatar.cs
@@ -1,10 +1,39 @@
-using System.Security.Cryptography;
+using System.Net.Http;
+using System;
+using System.Security.Cryptography;
 using System.Text;
+using System.Threading.Tasks;
+using System.Text.Json;
 
 namespace Todo.Services
 {
     public static class Gravatar
     {
+        private static readonly HttpClient _httpClient = new HttpClient();
+
+        public static async Task<string> GetGravatarProfileNameAsync(string email)
+        {
+            try
+            {
+                var emailHash = GetHash(email.Trim().ToLower());
+                var requestUrl = $"https://en.gravatar.com/{emailHash}.json";
+
+                var response = await _httpClient.GetAsync(requestUrl);
+                if (response.IsSuccessStatusCode)
+                {
+                    var jsonResponse = await response.Content.ReadAsStringAsync();
+                    var gravatarProfile = JsonSerializer.Deserialize<GravatarProfile>(jsonResponse);
+                    return gravatarProfile?.entry?[0]?.displayName ?? email;
+                }
+            }
+            catch (Exception ex)
+            {
+                throw new Exception(ex.Message, ex);
+            }
+
+            return email; // Fallback to email if something goes wrong
+        }
+
         public static string GetHash(string emailAddress)
         {
             using (var md5 = MD5.Create())
@@ -20,5 +49,15 @@ public static string GetHash(string emailAddress)
                 return builder.ToString().ToLowerInvariant();
             }
         }
+
+        private class GravatarProfile
+        {
+            public GravatarEntry[] entry { get; set; }
+        }
+
+        private class GravatarEntry
+        {
+            public string displayName { get; set; }
+        }
     }
 }
\ No newline at end of file
diff --git a/Todo/Startup.cs b/Todo/Startup.cs
index e071f3c8..1c367906 100644
--- a/Todo/Startup.cs
+++ b/Todo/Startup.cs
@@ -36,6 +36,9 @@ public void ConfigureServices(IServiceCollection services)
                 .AddEntityFrameworkStores<ApplicationDbContext>();
 
             services.AddMvc(options => options.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
+
+            // Add this line to support API controllers
+            services.AddControllers();
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
@@ -64,6 +67,13 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                     name: "default",
                     template: "{controller=Home}/{action=Index}/{id?}");
             });
+
+            // Add this line to map attribute-routed API controllers
+            app.UseRouting();
+            app.UseEndpoints(endpoints =>
+            {
+                endpoints.MapControllers();
+            });
         }
     }
 }
diff --git a/Todo/Todo.csproj b/Todo/Todo.csproj
index 6e31e445..4c00ec7a 100644
--- a/Todo/Todo.csproj
+++ b/Todo/Todo.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>netcoreapp3.1</TargetFramework>
@@ -10,6 +10,11 @@
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="3.1.13" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="3.1.13" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="3.1.13" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="3.1.13" />
+    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="3.1.13">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+    </PackageReference>
     <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="3.1.13" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="3.1.13" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.5" PrivateAssets="All" />
diff --git a/Todo/Views/TodoItem/Create.cshtml b/Todo/Views/TodoItem/Create.cshtml
index 0b1b7c3b..30371b58 100644
--- a/Todo/Views/TodoItem/Create.cshtml
+++ b/Todo/Views/TodoItem/Create.cshtml
@@ -38,6 +38,13 @@
                 <span asp-validation-for="Importance" class="text-danger"></span>
             </div>
 
+
+            <div class="form-group">
+                <label asp-for="Rank" class="control-label"></label>
+                <input asp-for="Rank" class="form-control" />
+                <span asp-validation-for="Rank" class="text-danger"></span>
+            </div>
+
             <div class="form-group">
                 <label asp-for="ResponsiblePartyId"></label>
                 @Html.DropDownListFor(
diff --git a/Todo/Views/TodoItem/Edit.cshtml b/Todo/Views/TodoItem/Edit.cshtml
index 5668a213..ff2c8b8d 100644
--- a/Todo/Views/TodoItem/Edit.cshtml
+++ b/Todo/Views/TodoItem/Edit.cshtml
@@ -39,6 +39,12 @@
                     )
                 <span asp-validation-for="Importance" class="text-danger"></span>
             </div>
+            
+            <div class="form-group">
+                <label asp-for="Rank" class="control-label"></label>
+                <input asp-for="Rank" class="form-control" />
+                <span asp-validation-for="Rank" class="text-danger"></span>
+            </div>
 
             <div class="checkbox">
                 <label>
diff --git a/Todo/Views/TodoItem/SelectListConvenience.cs b/Todo/Views/TodoItem/SelectListConvenience.cs
index 02254ab1..19e45294 100644
--- a/Todo/Views/TodoItem/SelectListConvenience.cs
+++ b/Todo/Views/TodoItem/SelectListConvenience.cs
@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Linq;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using Todo.Data;
@@ -15,6 +16,13 @@ public static class SelectListConvenience
             new SelectListItem {Text = "Low", Value = Importance.Low.ToString()},
         };
 
+        public static readonly SelectListItem[] ImportanceSelectListIntItems =
+        {
+            new SelectListItem {Text = "High", Value = (Convert.ToInt32(Importance.High)).ToString()},
+            new SelectListItem {Text = "Medium", Value = (Convert.ToInt32(Importance.Medium)).ToString()},
+            new SelectListItem {Text = "Low", Value = (Convert.ToInt32(Importance.Low)).ToString()},
+        };
+
         public static List<SelectListItem> UserSelectListItems(this ApplicationDbContext dbContext)
         {
             return dbContext.Users.Select(u => new SelectListItem {Text = u.UserName, Value = u.Id}).ToList();
diff --git a/Todo/Views/TodoList/Detail.cshtml b/Todo/Views/TodoList/Detail.cshtml
index 650f0bc2..bc79d36e 100644
--- a/Todo/Views/TodoList/Detail.cshtml
+++ b/Todo/Views/TodoList/Detail.cshtml
@@ -1,12 +1,17 @@
 @using Todo.Controllers
+@using Microsoft.AspNetCore.Identity
+@using Todo.Data
 @using Todo.Data.Entities
 @using Todo.Services
+@using Todo.Views.TodoItem
 @model Todo.Models.TodoLists.TodoListDetailViewmodel
 
 @{
     ViewData["Title"] = $"List: {Model.Title}";
+    string UserId = @User.Id();
 }
 
+@inject ApplicationDbContext dbContext
 <h2>@ViewData["Title"]</h2>
 
 <div class="col-md-6">
@@ -14,12 +19,68 @@
     <ul class="list-group">
 
         <li class="list-group-item">
-            <a asp-action="Create" asp-controller="TodoItem" asp-route-todoListId="@Model.TodoListId">
-                <strong>Add New Item</strong>
-            </a>
+            <form id="add-item-form">
+                <div class="form-group">
+                    <label for="title">Title</label>
+                    <input type="text" id="title" class="form-control" required />
+                </div>
+                <div class="form-group">
+                    <label for="importance">Importance</label>
+                    @Html.DropDownList(
+                        "optImportance",
+                        new SelectList(
+                             SelectListConvenience.ImportanceSelectListIntItems.Select(x => new { Value = x.Value, Text = x.Text }),
+                        "Value",
+                        "Text"
+                        ),
+                        new { @class = "form-control" }
+                        )
+                </div>
+                <div class="form-group">
+                    <label for="rank">Rank</label>
+                    <input type="number" id="rank" class="form-control" />
+                </div>
+                <div class="form-group">
+                    <label for="rank">ResponsibleParty</label>
+                    @Html.DropDownList(
+                        "optResponsibleParty", 
+                        new SelectList(
+                            dbContext.UserSelectListItems().Select(x => new { Value = x.Value, Text = x.Text }),
+                            "Value",
+                            "Text"
+                        ),
+                        new { @class = "form-control" }
+                    )
+                </div>
+                <input type="hidden" id="todoListId" value="@Model.TodoListId" />
+                <button type="submit" class="btn btn-primary">Add New Item</button>
+            </form>
+        </li>
+
+        <li class="list-group-item">
+            <div class="row">
+
+                <div class="col-md-4">
+                    <input type="checkbox" id="toggleDoneItems" />
+                    <label for="toggleDoneItems">Hide Done Items</label>
+
+                </div>
+
+                <div class="col-md-8 text-right">
+                    Sort by 
+                    <a style="display:@(Model.CurrentSort == "Importance" ? "visible" : "none");" asp-action="Detail" asp-route-todoListId="@Model.TodoListId" asp-route-sortOrder="Rank">Rank</a>
+                    <span style="display:@(Model.CurrentSort != "Importance" ? "visible" : "none");">@Model.CurrentSort</span>
+                    &nbsp;|&nbsp;
+                    <a style="display:@(Model.CurrentSort == "Rank" ? "visible" : "none");" asp-action="Detail" asp-route-todoListId="@Model.TodoListId" asp-route-sortOrder="Importance">Importance</a>
+                    <span style="display:@(Model.CurrentSort != "Rank" ? "visible" : "none");">@Model.CurrentSort</span>
+                </div>
+            </div>
         </li>
 
-        @foreach (var item in Model.Items)
+        @{
+            var ModelItem = Model.CurrentSort == "Rank" ? Model.Items.OrderBy(c => c.Rank) : Model.Items.OrderBy(c => c.Importance);
+        }
+        @foreach (var item in ModelItem)
         {
             string contextualClass;
             switch (item.Importance)
@@ -35,35 +96,103 @@
                     break;
             }
 
-            <li class="list-group-item @contextualClass">
+            <li class="list-group-item @contextualClass @(item.IsDone ? "done-item" : "")">
                 
                 <div class="row">
 
-                <div class="col-md-8">
-                    <a asp-action="Edit" asp-controller="TodoItem" asp-route-todoItemId="@item.TodoItemId">
-
-                        @if (item.IsDone)
-                        {
-                            <s>@item.Title</s>
-                        }
-                        else
-                        {
-                            <text>@item.Title</text>
-                        }
-                    </a>
-                </div>
+                    <div class="col-md-4">
+                        <a asp-action="Edit" asp-controller="TodoItem" asp-route-todoItemId="@item.TodoItemId">
 
-                <div class="col-md-4 text-right">
-                    <small>
-                        @item.ResponsibleParty.UserName
+                            @if (item.IsDone)
+                            {
+                                <s>@item.Title</s>
+                            }
+                            else
+                            {
+                                <text>@item.Title</text>
+                            }
+                        </a>
+                    </div>
 
-                        <img src="https://www.gravatar.com/avatar/@Gravatar.GetHash(item.ResponsibleParty.Email)?s=30"/>
 
-                    </small>
-                </div>
+                    <div class="col-md-1 text-right">
+                        <small>
+                            @item.Rank
+                        </small>
+                    </div>
+
+                    <div class="col-md-2 text-right">
+                        <small>
+                            @item.Importance
+                        </small>
+                    </div>
+
+                    <div class="col-md-5 text-right">
+                        <small>
+                            @item.ResponsibleParty.GravatarName
+                            <img src="https://www.gravatar.com/avatar/@Gravatar.GetHash(item.ResponsibleParty.Email)?s=30"/>
+                        </small>
+                    </div>
                 </div>
 
             </li>
         }
     </ul>
-</div>
\ No newline at end of file
+</div>
+
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const toggleCheckbox = document.getElementById('toggleDoneItems');
+        toggleCheckbox.addEventListener('change', function () {
+            const doneItems = document.querySelectorAll('.done-item');
+            doneItems.forEach(item => {
+                if (toggleCheckbox.checked) {
+                    item.style.display = 'none';
+                } else {
+                    item.style.display = '';
+                }
+            });
+        });
+
+        const form = document.getElementById('add-item-form');
+        form.addEventListener('submit', async function (e) {
+            e.preventDefault();
+            const title = document.getElementById('title').value;
+            const importance = document.getElementById("optImportance").value;
+            const responsibleParty = document.getElementById("optResponsibleParty").value;
+            const rank = document.getElementById('rank').value;
+            const todoListId = document.getElementById('todoListId').value;
+
+            const response = await fetch('/api/TodoItemApi', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: 
+                `{
+                    "todoListId": ` + todoListId + `,
+                    "title": "` + title + `",
+                    "responsiblePartyId": "` + responsibleParty + `",
+                    "importance": ` + importance + `,
+                    "rank": ` + rank + `
+                 }`
+            });
+            if (response.ok) {
+                location.reload(true);
+            } else {
+                alert('Error adding item');
+            }
+        });
+
+        // Ensure initial state is respected on page load
+        const doneItems = document.querySelectorAll('.done-item');
+        doneItems.forEach(item => {
+            if (toggleCheckbox.checked) {
+                item.style.display = 'none';
+            } else {
+                item.style.display = '';
+            }
+        });
+    });
+</script>
\ No newline at end of file