diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c4fee7e2..9f8439b9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,9 @@ import { goto, invalidateAll } from '$app/navigation';
 import '../app.css';
 
 // *** Import other supporting libraries
+import {
+    RefreshCw,
+} from '@lucide/svelte';
 
 // Highlight JS
 import hljs from 'highlight.js/lib/core';
@@ -352,12 +355,14 @@ $effect(() => {
 
 {#if browser && (is_offline || api_unreachable)}
     <div
-        class="preset-filled-error-500 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
+        class="preset-filled-error-200-800 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
         <span class="text-xl font-bold"
             >{is_offline ? 'Offline' : api_error_msg}</span>
         <button
             class="btn btn-sm preset-tonal-surface"
-            onclick={() => window.location.reload()}>Retry</button>
+            onclick={() => window.location.reload()}>
+                <RefreshCw size="1em" class="opacity-60" /> Retry
+            </button>
     </div>
 {/if}
 
@@ -370,7 +375,9 @@ $effect(() => {
         <div class="flex shrink-0 items-center gap-2">
             <button
                 class="btn btn-sm preset-tonal-surface"
-                onclick={() => window.location.reload()}>Reload</button>
+                onclick={() => window.location.reload()}>
+                    <RefreshCw size="1em" class="opacity-60" /> Reload
+                </button>
             <button
                 class="btn btn-sm preset-outlined-surface"
                 onclick={() => {