diff --git a/web/src/HelmRelease.jsx b/web/src/HelmRelease.jsx
index 852133a..90d850e 100644
--- a/web/src/HelmRelease.jsx
+++ b/web/src/HelmRelease.jsx
@@ -18,7 +18,7 @@ export function HelmRelease(props) {
   return (
     <div
       ref={ref}
-      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${item.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`hr-${item.metadata.namespace}/${item.metadata.name}`}
     >
       <div className="col-span-2">
diff --git a/web/src/Kustomization.jsx b/web/src/Kustomization.jsx
index 81b18d1..3e141f4 100644
--- a/web/src/Kustomization.jsx
+++ b/web/src/Kustomization.jsx
@@ -30,7 +30,7 @@ export function Kustomization(props) {
 
   return (
     <div
-      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${item.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`${item.metadata.namespace}/${item.metadata.name}`}
     >
       <div className="col-span-2">
diff --git a/web/src/ReadyWidget.jsx b/web/src/ReadyWidget.jsx
index 4cc5589..e6a38be 100644
--- a/web/src/ReadyWidget.jsx
+++ b/web/src/ReadyWidget.jsx
@@ -39,12 +39,19 @@ export function ReadyWidget(props) {
     messageColor = ready ? "text-neutral-600 field" : (reconciling || dependencyNotReady) && !stalled ? "text-neutral-600" : "bg-orange-400"
   }
 
+  const suspended = resource.spec.suspend
+
+  if (suspended) {
+    color = "bg-yellow-400"
+    statusLabel = "Suspended"
+  }
+
   return (
     <div className="relative">
       <div className='font-medium text-neutral-700'>
         <span className={`absolute -left-4 top-1 rounded-full h-3 w-3 ${color} inline-block`}></span>
         <span>{statusLabel}</span>
-        {readyCondition &&
+        {readyCondition && !suspended &&
           <span className='ml-1'><TimeLabel title={exactDate} date={parsed} /> ago</span>
         }
       </div>
diff --git a/web/src/Source.jsx b/web/src/Source.jsx
index d7ff7f2..eca2096 100644
--- a/web/src/Source.jsx
+++ b/web/src/Source.jsx
@@ -23,7 +23,7 @@ export function Source(props) {
   return (
     <div
       ref={ref}
-      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} ${source.spec.suspend ? "bg-neutral-400" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
+      className={`${highlight ? "ring-2 ring-indigo-600 ring-offset-2" : ""} rounded-md border border-neutral-300 p-4 grid grid-cols-12 gap-x-4 bg-white shadow`}
       key={`${source.kind}/${source.metadata.namespace}/${source.metadata.name}`}
     >
       <div className="col-span-2">