From e0f9f165f92a035f265da5654c1bf43a6a3d5ff5 Mon Sep 17 00:00:00 2001
From: Tony Spencer <mobiletony@msn.com>
Date: Tue, 20 May 2025 08:05:20 -0600
Subject: [PATCH 1/2] Enhance layout and styling for Monkey application

Updated `MainLayout.razor` to include a new navigation header with an external link. Improved styling in `app.css` with a new background gradient and `.monkey` class for card elements. Added a back navigation link in `MonkeyDetails.razor` with an SVG icon. Simplified `Monkeys.razor` by removing the loading spinner and offline alert, and eliminated the `RefreshHandler` method. Overall, these changes improve the user interface and visual appeal of the application.
---
 .../Layout/MainLayout.razor                   |  2 +-
 .../MyHybridApp.Shared/wwwroot/app.css        | 19 ++++++++++++++++++-
 .../Layout/MainLayout.razor                   |  2 +-
 .../MyHybridApp.Shared/wwwroot/app.css        | 19 ++++++++++++++++++-
 .../Layout/MainLayout.razor                   |  2 +-
 .../Pages/MonkeyDetails.razor                 |  9 ++++++++-
 .../MyHybridApp.Shared/Pages/Monkeys.razor    |  2 +-
 .../MyHybridApp.Shared/wwwroot/app.css        | 19 ++++++++++++++++++-
 3-UI/README.md                                | 10 ++++++++--
 .../Layout/MainLayout.razor                   |  2 +-
 .../Pages/MonkeyDetails.razor                 |  9 ++++++++-
 .../MyHybridApp.Shared/Pages/Monkeys.razor    | 11 +----------
 .../MyHybridApp.Shared/wwwroot/app.css        | 19 ++++++++++++++++++-
 .../Layout/MainLayout.razor                   |  2 +-
 .../Pages/MonkeyDetails.razor                 |  9 ++++++++-
 .../MyHybridApp.Shared/Pages/Monkeys.razor    | 12 +-----------
 .../MyHybridApp.Shared/wwwroot/app.css        | 19 ++++++++++++++++++-
 17 files changed, 130 insertions(+), 37 deletions(-)

diff --git a/1-Overview/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor b/1-Overview/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
index 78624f3..343219c 100644
--- a/1-Overview/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
+++ b/1-Overview/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
@@ -6,7 +6,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 nav-header">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
diff --git a/1-Overview/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css b/1-Overview/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
index 2bd9b78..82b0f54 100644
--- a/1-Overview/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
+++ b/1-Overview/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
@@ -1,9 +1,26 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    color:#536b1c
 }
 
+.nav-header {
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    box-shadow:0px 5px 10px rgba(0,0,0,0.2)
+
+}
+
+.monkey {
+    background-color: #daefe6;
+    border-radius: 0.4em;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    margin:0.4em;
+    color:#607069
+}
+
+
 a, .btn-link {
-    color: #006bb7;
+    color: #536b1c;
 }
 
 .btn-primary {
diff --git a/2-Data/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor b/2-Data/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
index 78624f3..343219c 100644
--- a/2-Data/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
+++ b/2-Data/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
@@ -6,7 +6,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 nav-header">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
diff --git a/2-Data/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css b/2-Data/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
index 2bd9b78..82b0f54 100644
--- a/2-Data/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
+++ b/2-Data/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
@@ -1,9 +1,26 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    color:#536b1c
 }
 
+.nav-header {
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    box-shadow:0px 5px 10px rgba(0,0,0,0.2)
+
+}
+
+.monkey {
+    background-color: #daefe6;
+    border-radius: 0.4em;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    margin:0.4em;
+    color:#607069
+}
+
+
 a, .btn-link {
-    color: #006bb7;
+    color: #536b1c;
 }
 
 .btn-primary {
diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
index 78624f3..343219c 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
@@ -6,7 +6,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 nav-header">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index eba2ced..191838f 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,13 +2,20 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
+@inject NavigationManager NavigationManager
+
+<a href="/monkeys" style="text-decoration:none;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
+    </svg> Back
+</a>
 
 <h1>@monkey?.Name</h1>
 
 @if (monkey != null)
 {
     <div class="col-lg-6">
-        <div class="card">
+        <div class="card monkey">
             <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
             <div class="card-body">
                 <h5 class="card-title">@monkey.Name</h5>
diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index 058b70f..fc90d00 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -19,7 +19,7 @@ else
         @foreach (var monkey in monkeys)
         {
             <div class="col-md-4">
-                <div class="card">
+                <div class="card monkey">
                     <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
                     <div class="card-body">
                         <h5 class="card-title">@monkey.Name</h5>
diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css b/3-UI/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
index 2bd9b78..82b0f54 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
@@ -1,9 +1,26 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    color:#536b1c
 }
 
+.nav-header {
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    box-shadow:0px 5px 10px rgba(0,0,0,0.2)
+
+}
+
+.monkey {
+    background-color: #daefe6;
+    border-radius: 0.4em;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    margin:0.4em;
+    color:#607069
+}
+
+
 a, .btn-link {
-    color: #006bb7;
+    color: #536b1c;
 }
 
 .btn-primary {
diff --git a/3-UI/README.md b/3-UI/README.md
index 9461325..9ce5d57 100644
--- a/3-UI/README.md
+++ b/3-UI/README.md
@@ -32,7 +32,7 @@ else
         @foreach (var monkey in monkeys)
         {
             <div class="col-md-4">
-                <div class="card">
+                <div class="card monkey">
                     <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
                     <div class="card-body">
                         <h5 class="card-title">@monkey.Name</h5>
@@ -83,12 +83,18 @@ This page will display detailed information about a selected monkey. The route f
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
 
+<a href="/monkeys" style="text-decoration:none;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
+    </svg> Back
+</a>
+
 <h1>@monkey?.Name</h1>
 
 @if (monkey != null)
 {
     <div class="col-lg-6">
-        <div class="card">
+        <div class="card monkey">
             <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
             <div class="card-body">
                 <h5 class="card-title">@monkey.Name</h5>
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
index 78624f3..343219c 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
@@ -6,7 +6,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 nav-header">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index eba2ced..191838f 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,13 +2,20 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
+@inject NavigationManager NavigationManager
+
+<a href="/monkeys" style="text-decoration:none;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
+    </svg> Back
+</a>
 
 <h1>@monkey?.Name</h1>
 
 @if (monkey != null)
 {
     <div class="col-lg-6">
-        <div class="card">
+        <div class="card monkey">
             <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
             <div class="card-body">
                 <h5 class="card-title">@monkey.Name</h5>
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index bbf4c3e..fc90d00 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -1,14 +1,10 @@
 @using MyHybridApp.Shared.Services
 @using MyHybridApp.Shared.Models
-@using MyHybridApp.Shared.Components
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
-@inject NavigationManager NavigationManager
 
 <h1>Monkey Finder</h1>
 
-<OfflineAlert RefreshCallback="RefreshHandler" />
-
 @if (monkeys == null)
 {
     <div class="text-center">
@@ -23,7 +19,7 @@ else
         @foreach (var monkey in monkeys)
         {
             <div class="col-md-4">
-                <div class="card">
+                <div class="card monkey">
                     <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
                     <div class="card-body">
                         <h5 class="card-title">@monkey.Name</h5>
@@ -42,9 +38,4 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
-    async Task RefreshHandler()
-    {
-        monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
-        NavigationManager.NavigateTo("/monkeys", true); //reload the page
-    }
 }
\ No newline at end of file
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css b/4-Platform/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
index 2bd9b78..82b0f54 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
@@ -1,9 +1,26 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    color:#536b1c
 }
 
+.nav-header {
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    box-shadow:0px 5px 10px rgba(0,0,0,0.2)
+
+}
+
+.monkey {
+    background-color: #daefe6;
+    border-radius: 0.4em;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    margin:0.4em;
+    color:#607069
+}
+
+
 a, .btn-link {
-    color: #006bb7;
+    color: #536b1c;
 }
 
 .btn-primary {
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
index 78624f3..343219c 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Layout/MainLayout.razor
@@ -6,7 +6,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 nav-header">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
         </div>
 
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index eba2ced..191838f 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,13 +2,20 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
+@inject NavigationManager NavigationManager
+
+<a href="/monkeys" style="text-decoration:none;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
+    </svg> Back
+</a>
 
 <h1>@monkey?.Name</h1>
 
 @if (monkey != null)
 {
     <div class="col-lg-6">
-        <div class="card">
+        <div class="card monkey">
             <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
             <div class="card-body">
                 <h5 class="card-title">@monkey.Name</h5>
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index c98f4fe..fc90d00 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -1,14 +1,10 @@
 @using MyHybridApp.Shared.Services
 @using MyHybridApp.Shared.Models
-@using MyHybridApp.Shared.Components
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
-@inject NavigationManager NavigationManager
 
 <h1>Monkey Finder</h1>
 
-<OfflineAlert RefreshCallback="RefreshHandler" />
-
 @if (monkeys == null)
 {
     <div class="text-center">
@@ -23,7 +19,7 @@ else
         @foreach (var monkey in monkeys)
         {
             <div class="col-md-4">
-                <div class="card">
+                <div class="card monkey">
                     <img src="@monkey.Image" class="card-img-top" alt="@monkey.Name" />
                     <div class="card-body">
                         <h5 class="card-title">@monkey.Name</h5>
@@ -42,10 +38,4 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
-
-    async Task RefreshHandler()
-    {
-        monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
-        NavigationManager.NavigateTo("/monkeys", true); //reload the page
-    }
 }
\ No newline at end of file
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css b/Finish/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
index 2bd9b78..82b0f54 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/wwwroot/app.css
@@ -1,9 +1,26 @@
 html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    color:#536b1c
 }
 
+.nav-header {
+    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
+    box-shadow:0px 5px 10px rgba(0,0,0,0.2)
+
+}
+
+.monkey {
+    background-color: #daefe6;
+    border-radius: 0.4em;
+    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
+    margin:0.4em;
+    color:#607069
+}
+
+
 a, .btn-link {
-    color: #006bb7;
+    color: #536b1c;
 }
 
 .btn-primary {

From 912bbedd316d08a4a49935be06f023131dc187ac Mon Sep 17 00:00:00 2001
From: Tony Spencer <mobiletony@msn.com>
Date: Wed, 21 May 2025 08:39:35 -0600
Subject: [PATCH 2/2] Refactor navigation and add offline handling

Removed `NavigationManager` injection from `MonkeyDetails.razor`.
Added `NavigationManager` injection and `<OfflineAlert>` component in `Monkeys.razor`, with a new `RefreshHandler` method to re-fetch monkeys and reload the page.
`OnInitializedAsync` remains unchanged.
---
 .../MyHybridApp.Shared/Pages/MonkeyDetails.razor         | 1 -
 3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor  | 1 +
 .../MyHybridApp.Shared/Pages/MonkeyDetails.razor         | 1 -
 .../MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor   | 9 +++++++++
 .../MyHybridApp.Shared/Pages/MonkeyDetails.razor         | 1 -
 .../MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor   | 9 +++++++++
 6 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index 191838f..422562c 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,7 +2,6 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
-@inject NavigationManager NavigationManager
 
 <a href="/monkeys" style="text-decoration:none;">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
diff --git a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index fc90d00..c1a41fc 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -38,4 +38,5 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
+
 }
\ No newline at end of file
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index 191838f..422562c 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,7 +2,6 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
-@inject NavigationManager NavigationManager
 
 <a href="/monkeys" style="text-decoration:none;">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
diff --git a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index fc90d00..7074ef8 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -2,9 +2,12 @@
 @using MyHybridApp.Shared.Models
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
+@inject NavigationManager NavigationManager
 
 <h1>Monkey Finder</h1>
 
+<OfflineAlert RefreshCallback="RefreshHandler" />
+
 @if (monkeys == null)
 {
     <div class="text-center">
@@ -38,4 +41,10 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
+
+    async Task RefreshHandler()
+    {
+        monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
+        NavigationManager.NavigateTo("/monkeys", true); //reload the page
+    }
 }
\ No newline at end of file
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
index 191838f..422562c 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -2,7 +2,6 @@
 @using MyHybridApp.Shared.Models
 @page "/details/{name}"
 @inject IMonkeyService MonkeyService
-@inject NavigationManager NavigationManager
 
 <a href="/monkeys" style="text-decoration:none;">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
diff --git a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index fc90d00..7074ef8 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -2,9 +2,12 @@
 @using MyHybridApp.Shared.Models
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
+@inject NavigationManager NavigationManager
 
 <h1>Monkey Finder</h1>
 
+<OfflineAlert RefreshCallback="RefreshHandler" />
+
 @if (monkeys == null)
 {
     <div class="text-center">
@@ -38,4 +41,10 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
+
+    async Task RefreshHandler()
+    {
+        monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
+        NavigationManager.NavigateTo("/monkeys", true); //reload the page
+    }
 }
\ No newline at end of file