diff --git a/WebApp/Components/Shared/Components/PageNoteButton.razor b/WebApp/Components/Shared/Components/PageNoteButton.razor
index 37dffb7..e717670 100644
--- a/WebApp/Components/Shared/Components/PageNoteButton.razor
+++ b/WebApp/Components/Shared/Components/PageNoteButton.razor
@@ -3,18 +3,45 @@
 @inject IDialogService DialogService
 @implements IAsyncDisposable
 
-<MudButton StartIcon="@IconValue"
-          OnClick="OpenDialog"
-          Variant="@Variant"
-          Size="@Size"
-          Color="@ButtonColor"
-          Tooltip="@TooltipText"
-          Class="@MarkdownHelper.GetNoteColorClass(_noteId)">
-    @if (!string.IsNullOrEmpty(ButtonText))
-    {
-        @ButtonText
-    }
-</MudButton>
+<div @ref="_anchorElement"
+     @onmouseenter="@(() => { if (_hasContent) _popoverOpen = true; })"
+     @onmouseleave="@(() => _popoverOpen = false)"
+     style="display: inline-block;">
+    <MudButton StartIcon="@IconValue"
+              OnClick="OpenDialog"
+              Variant="@Variant"
+              Size="@Size"
+              Color="@ButtonColor"
+              Tooltip="@TooltipText"
+              Class="@MarkdownHelper.GetNoteColorClass(_noteId)">
+        @if (!string.IsNullOrEmpty(ButtonText))
+        {
+            @ButtonText
+        }
+    </MudButton>
+</div>
+<MudPopover @bind-Open="_popoverOpen"
+            AnchorOrigin="Origin.BottomCenter"
+            TransformOrigin="Origin.TopCenter"
+            Elevation="8"
+            Anchor="@_anchorElement">
+    <ChildContent>
+        @if (_hasContent && !string.IsNullOrWhiteSpace(_noteContent))
+        {
+            <MudPaper Elevation="0" 
+                     Class="pa-3" 
+                     Style="max-width: 500px; max-height: 400px; overflow-y: auto;"
+                     @onmouseenter="@(() => _popoverOpen = true)"
+                     @onmouseleave="@(() => _popoverOpen = false)">
+                <MudText Typo="Typo.subtitle1" Class="mb-2">@PageIdentifier</MudText>
+                <MudDivider Class="my-2" />
+                <div class="markdown-content" style="max-height: 350px; overflow-y: auto;">
+                    @((MarkupString)MarkdownHelper.ToHtml(_noteContent))
+                </div>
+            </MudPaper>
+        }
+    </ChildContent>
+</MudPopover>
 
 @code {
     [Parameter]
@@ -39,6 +66,9 @@
     private string TooltipText => Tooltip ?? $"Page notes for {PageIdentifier}";
     private bool _hasContent = false;
     private int _noteId = 0;
+    private string _noteContent = string.Empty;
+    private bool _popoverOpen = false;
+    private ElementReference _anchorElement;
     private Color ButtonColor => _hasContent ? Color.Success : (Variant == Variant.Filled ? Color.Primary : Color.Default);
     private CancellationTokenSource? _cancellationTokenSource;
     private bool _isDisposed = false;
@@ -62,6 +92,7 @@
             var note = await NotesService.GetPageNoteAsync(PageIdentifier);
             _hasContent = note != null && !string.IsNullOrWhiteSpace(note.Content);
             _noteId = note?.Id ?? 0;
+            _noteContent = note?.Content ?? string.Empty;
             
             if (!_isDisposed)
             {