diff --git a/examples/query/react/suspense/src/PokemonPlaceholder.tsx b/examples/query/react/suspense/src/PokemonPlaceholder.tsx
index f217697bda..eda7d29730 100644
--- a/examples/query/react/suspense/src/PokemonPlaceholder.tsx
+++ b/examples/query/react/suspense/src/PokemonPlaceholder.tsx
@@ -21,10 +21,10 @@ export function PokemonPlaceholder({
 
   let content: React.ReactNode = isError ? (
     <>
-      <h3>An error has occurred while loading {name}</h3>
+      <h3 className='alert__heading'>An error has occurred while loading {name}</h3>
       <div>{error?.message}</div>
       {onRetry && (
-        <button type="button" className="btn" onClick={onRetry}>
+        <button type="button" className="btn alert__btn" onClick={onRetry}>
           retry
         </button>
       )}
@@ -32,7 +32,7 @@ export function PokemonPlaceholder({
     </>
   ) : (
     <>
-      <h3>Loading pokemon {name}</h3>
+      <h3 className='alert__heading'>Loading pokemon {name}</h3>
       <br />
       (Suspense fallback)
       {children}
diff --git a/examples/query/react/suspense/src/styles.css b/examples/query/react/suspense/src/styles.css
index 5074382133..9535284515 100644
--- a/examples/query/react/suspense/src/styles.css
+++ b/examples/query/react/suspense/src/styles.css
@@ -11,6 +11,18 @@
   --primary: #6c3eb7;
 }
 
+hr {
+  box-sizing: border-box;
+  height: 2px;
+  border: none;
+  border-top: 2px solid var(--primary);
+}
+
+
+input[type="range"] {
+  max-width: 100px;
+}
+
 body {
   margin: 0;
 }
@@ -134,6 +146,15 @@ h3 {
   background: var(--danger-bg);
 }
 
+.alert__heading {
+  color: inherit;
+}
+
+.alert__btn {
+  color: inherit !important;
+  border-color: currentColor;
+}
+
 .alert--info {
   color: var(--info);
   background-color: var(--info-bg);