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..422562c 100644
--- a/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -3,12 +3,18 @@
 @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/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/3-UI/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index 058b70f..c1a41fc 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>
@@ -38,4 +38,5 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
+
 }
\ No newline at end of file
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..422562c 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -3,12 +3,18 @@
 @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/Pages/Monkeys.razor b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index bbf4c3e..7074ef8 100644
--- a/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/4-Platform/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -1,6 +1,5 @@
 @using MyHybridApp.Shared.Services
 @using MyHybridApp.Shared.Models
-@using MyHybridApp.Shared.Components
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
 @inject NavigationManager NavigationManager
@@ -23,7 +22,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,6 +41,7 @@ else
     {
         monkeys = await MonkeyService.GetMonkeysAsync();
     }
+
     async Task RefreshHandler()
     {
         monkeys = await MonkeyService.GetMonkeysAsync(); //try to get the monkeys again
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..422562c 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/MonkeyDetails.razor
@@ -3,12 +3,18 @@
 @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/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
index c98f4fe..7074ef8 100644
--- a/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
+++ b/Finish/MyHybridApp/MyHybridApp.Shared/Pages/Monkeys.razor
@@ -1,6 +1,5 @@
 @using MyHybridApp.Shared.Services
 @using MyHybridApp.Shared.Models
-@using MyHybridApp.Shared.Components
 @page "/monkeys"
 @inject IMonkeyService MonkeyService
 @inject NavigationManager NavigationManager
@@ -23,7 +22,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/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 {