diff --git a/WebApp/Components/Features/Students/EventRankingEdit.razor b/WebApp/Components/Features/Students/EventRankingEdit.razor
index 6fcd36f..27ead28 100644
--- a/WebApp/Components/Features/Students/EventRankingEdit.razor
+++ b/WebApp/Components/Features/Students/EventRankingEdit.razor
@@ -5,6 +5,8 @@
 @using WebApp.Models
 @inject AppDbContext Context
 @inject NavigationManager NavigationManager
+@inject ISnackbar Snackbar
+@inject ILogger<EventRankingEdit> Logger
 
 <PageTitle>Student Event Ranks - TSA Chapter Organizer</PageTitle>
 
@@ -17,35 +19,66 @@
     }
     else
     {
-        <MudText Typo="Typo.h4">@_student.Name</MudText>
-        <MudText Color="Color.Warning">Warning: drag and drop is currently a bit squirrely - double check!</MudText>
+        <MudText Typo="Typo.h4" Class="mb-2">@_student.Name</MudText>
 
-        <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students/event-ranking">Back</MudButton>
-        <MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="Save">Save</MudButton>
+        <div class="mb-4">
+            <MudButton StartIcon="@Icons.Material.Filled.ArrowBack" Href="students/event-ranking" Variant="Variant.Outlined" Class="mr-2">Back</MudButton>
+            <MudButton StartIcon="@Icons.Material.Filled.Save" OnClick="Save" Color="Color.Primary" Variant="Variant.Filled">Save Rankings</MudButton>
+        </div>
 
-        /* https://github.com/AlexNek/BlazorSortableList */
-        <MudGrid>
-            <MudItem xs="6" md="4" xl="3" Class="ranked-event-column">
-                <SortableList 
+        @* https://github.com/AlexNek/BlazorSortableList *@
+        <MudGrid Class="mt-2">
+            <MudItem xs="12" md="6" xl="4">
+                <MudPaper Class="pa-3 mb-3" Elevation="0">
+                    <div class="d-flex align-center mb-1">
+                        <MudIcon Icon="@Icons.Material.Filled.FormatListNumbered" Class="mr-2" Color="Color.Primary" />
+                        <MudText Typo="Typo.h6" Color="Color.Primary">Ranked Events</MudText>
+                    </div>
+                    <MudText Typo="Typo.caption" Color="Color.Secondary">Drag events here in order of preference</MudText>
+                </MudPaper>
+                <SortableList
                     Group="GroupId" Id="ListId1" Context="item"
                     Items="_rankedEvents" OnRemove="RankedEventsRemove"  OnUpdate="Update">
                     <SortableItemTemplate>
-                        <MudCard Outlined="true">
-                            <MudCardContent>@item.Name</MudCardContent>
+                        <MudCard Outlined="true" Class="mb-2">
+                            <MudCardContent Class="pa-2">
+                                <div class="d-flex align-center">
+                                    <MudBadge Content="@(_rankedEvents.IndexOf(item) + 1)" Color="Color.Primary" Overlap="true" Class="mr-3">
+                                        <MudIcon Icon="@Icons.Material.Filled.DragIndicator" />
+                                    </MudBadge>
+                                    <div class="flex-grow-1">
+                                        <MudText Typo="Typo.body2"><strong>@item.Name</strong></MudText>
+                                        <MudText Typo="Typo.caption">
+                                            @AppIcons.EventAttributes(item) @AppIcons.EventEffort(item)
+                                        </MudText>
+                                    </div>
+                                </div>
+                            </MudCardContent>
                         </MudCard>
                     </SortableItemTemplate>
                 </SortableList>
             </MudItem>
-            <MudItem xs="6" md="4" xl="3">
+            <MudItem xs="12" md="6" xl="4">
+                <MudPaper Class="pa-3 mb-3" Elevation="0">
+                    <div class="d-flex align-center mb-1">
+                        <MudIcon Icon="@AppIcons.Events" Class="mr-2" />
+                        <MudText Typo="Typo.h6">Available Events</MudText>
+                    </div>
+                    <MudText Typo="Typo.caption" Color="Color.Secondary">Drag events to rank them</MudText>
+                </MudPaper>
                 <SortableList
                     Group="GroupId" Id="ListId2" Context="item"
                     Items="_availableEvents" OnRemove="AvailableEventsRemove" Sort="false">
                     <SortableItemTemplate>
-                        <MudCard Outlined="true">
-                            <MudCardContent>@item.Name</MudCardContent>
+                        <MudCard Outlined="true" Class="mb-2">
+                            <MudCardContent Class="pa-2">
+                                <MudText Typo="Typo.body2"><strong>@item.Name</strong></MudText>
+                                <MudText Typo="Typo.caption">
+                                    @AppIcons.EventAttributes(item) @AppIcons.EventEffort(item)
+                                </MudText>
+                            </MudCardContent>
                         </MudCard>
                     </SortableItemTemplate>
-
                 </SortableList>
             </MudItem>
         </MudGrid>
@@ -66,8 +99,6 @@
     public List<EventDefinition> _rankedEvents = [];
     public List<EventDefinition> _availableEvents = [];
 
-    SharedSortableListGroup _group;
-
     private void RankedEventsRemove((int oldIndex, int newIndex) indices)
     {
         // get the item at the old index in list 1
@@ -105,10 +136,6 @@
 
         _rankedEvents = _student.EventRankings.OrderBy(e => e.Rank).Select(e => e.EventDefinition).ToList();
         _availableEvents = _events.Where(e => !_rankedEvents.Contains(e)).ToList();
-
-        _group = new SharedSortableListGroup(StateHasChanged);
-        _group.AddModel(ListId1, new SortableListModel<EventDefinition>(_rankedEvents) { Group = GroupId });
-        _group.AddModel(ListId2, new SortableListModel<EventDefinition>(_availableEvents) { Group = GroupId });
     }
 
     private void Update((int oldIndex, int newIndex) indices)
@@ -152,15 +179,15 @@
             }
 
             Context.Students.Update(_student);
-
             await Context.SaveChangesAsync();
 
+            Snackbar.Add($"Event rankings saved for {_student.Name}", Severity.Success);
             NavigationManager.NavigateTo("/students/event-ranking");
         }
         catch (Exception e)
         {
-            Console.WriteLine(e);
-            throw;
+            Snackbar.Add("Error saving rankings. Please try again.", Severity.Error);
+            Logger.LogError(e, "Error saving event rankings for student {StudentId}", StudentId);
         }
     }
 }