diff --git a/src/core/Status.tsx b/src/core/Status.tsx
index c3f9c9ee9..4c800d8cf 100644
--- a/src/core/Status.tsx
+++ b/src/core/Status.tsx
@@ -1,4 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import useSWR from "swr";
+import clsx from "clsx";
+
+// Our SWR fetcher function
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 const indicatorClass = (indicator?: string) => {
   switch (indicator) {
@@ -17,41 +22,37 @@ const indicatorClass = (indicator?: string) => {
   }
 };
 
+export const StatusIcon = ({
+  statusUrl,
+  refreshInterval = 1000 * 60,
+}: {
+  statusUrl: string;
+  refreshInterval?: number;
+}) => {
+  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {
+    refreshInterval,
+  });
+
+  return (
+    <span
+      className={clsx(
+        "inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",
+        indicatorClass(data?.status?.indicator),
+        { "animate-pulse": isLoading || error },
+      )}
+    ></span>
+  );
+};
+
 const Status = ({
   statusUrl,
   additionalCSS,
+  refreshInterval = 1000 * 60,
 }: {
   statusUrl: string;
   additionalCSS?: string;
+  refreshInterval?: number;
 }) => {
-  const [data, setData] = useState<{ status: { indicator: string } } | null>(
-    null,
-  );
-
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (statusUrl !== "") {
-      const fetchData = async () => {
-        try {
-          const response = await fetch(statusUrl);
-          const jsonData = await response.json();
-          setData(jsonData);
-        } catch (error) {
-          console.error("Error fetching status data:", error);
-        }
-      };
-
-      fetchData();
-
-      interval = setInterval(fetchData, 60000); // Fetch data every minute
-    }
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [statusUrl]);
-
   return (
     <a
       href="https://status.ably.com"
@@ -59,11 +60,10 @@ const Status = ({
       target="_blank"
       rel="noreferrer"
     >
-      <span className="flex items-center h-[1.5rem] p-[0.25rem]">
-        <span
-          className={`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${!data ? "animate-pulse" : ""} ${indicatorClass(data?.status?.indicator)}`}
-        ></span>
-      </span>
+      <StatusIcon
+        statusUrl={statusUrl}
+        refreshInterval={refreshInterval ?? 1000 * 60}
+      />
     </a>
   );
 };
diff --git a/src/core/Status/Status.stories.tsx b/src/core/Status/Status.stories.tsx
index 91c7b2423..0880ea9c1 100644
--- a/src/core/Status/Status.stories.tsx
+++ b/src/core/Status/Status.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { delay, http, HttpResponse } from "msw";
+import { SWRConfig } from "swr";
 import Status from "../Status";
 
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
@@ -13,6 +14,10 @@ export default {
   tags: ["!autodocs"],
 };
 
+const withEmptySWRCache = (component: JSX.Element) => (
+  <SWRConfig value={{ provider: () => new Map() }}>{component}</SWRConfig>
+);
+
 export const Loading = {
   parameters: {
     msw: {
@@ -29,10 +34,25 @@ export const Loading = {
       },
     },
   },
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
+};
+
+export const Error = {
+  parameters: {
+    msw: {
+      handlers: {
+        statusError: http.get(statusUrl, () => {
+          return HttpResponse.error();
+        }),
+      },
+    },
+  },
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
-const mockParametersWithStatus = (indicator) => {
+const mockParametersWithStatus = (indicator: string) => {
   return {
     msw: {
       handlers: {
@@ -52,30 +72,36 @@ const mockParametersWithStatus = (indicator) => {
 
 export const None = {
   parameters: mockParametersWithStatus("none"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Operational = {
   parameters: mockParametersWithStatus("operational"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Minor = {
   parameters: mockParametersWithStatus("minor"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Major = {
   parameters: mockParametersWithStatus("major"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Critical = {
   parameters: mockParametersWithStatus("critical"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };
 
 export const Unknown = {
   parameters: mockParametersWithStatus("unknown"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () =>
+    withEmptySWRCache(<Status statusUrl={statusUrl} refreshInterval={0} />),
 };