diff --git a/src/core/Status.tsx b/src/core/Status.tsx
index c3f9c9ee9..10800fe6d 100644
--- a/src/core/Status.tsx
+++ b/src/core/Status.tsx
@@ -1,4 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
+import useSWR from "swr";
+import clsx from "clsx";
 
 const indicatorClass = (indicator?: string) => {
   switch (indicator) {
@@ -17,41 +19,36 @@ const indicatorClass = (indicator?: string) => {
   }
 };
 
+export const StatusIcon = ({
+  statusUrl,
+  refreshInterval = 1000 * 60,
+}: {
+  statusUrl: string;
+  refreshInterval?: number;
+}) => {
+  const fetcher = (url: string) => fetch(url).then((res) => res.json());
+  const { data, error, isLoading } = useSWR(statusUrl, fetcher, {
+    refreshInterval,
+  });
+
+  return (
+    <span className="inline-flex items-center h-[1.5rem] p-[0.25rem]">
+      <span
+        className={`w-[1rem] h-[1rem] leading-[1rem] rounded-full ${clsx({ "animate-pulse": isLoading || error })} ${indicatorClass(data?.status?.indicator)}`}
+      ></span>
+    </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 +56,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..0ab5c8343 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";
@@ -29,10 +30,14 @@ export const Loading = {
       },
     },
   },
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
-const mockParametersWithStatus = (indicator) => {
+const mockParametersWithStatus = (indicator: string) => {
   return {
     msw: {
       handlers: {
@@ -52,30 +57,54 @@ const mockParametersWithStatus = (indicator) => {
 
 export const None = {
   parameters: mockParametersWithStatus("none"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
 export const Operational = {
   parameters: mockParametersWithStatus("operational"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
 export const Minor = {
   parameters: mockParametersWithStatus("minor"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
 export const Major = {
   parameters: mockParametersWithStatus("major"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
 export const Critical = {
   parameters: mockParametersWithStatus("critical"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };
 
 export const Unknown = {
   parameters: mockParametersWithStatus("unknown"),
-  render: () => <Status statusUrl={statusUrl} />,
+  render: () => (
+    <SWRConfig value={{ provider: () => new Map() }}>
+      <Status statusUrl={statusUrl} refreshInterval={0} />
+    </SWRConfig>
+  ),
 };