diff --git a/providers/index.tsx b/providers/index.tsx
index 57c15bc..4a20f2b 100644
--- a/providers/index.tsx
+++ b/providers/index.tsx
@@ -1,11 +1,14 @@
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { PropsWithChildren } from "react";
+import MockApiProvider from "./mock-api";
 import ReactQueryProvider from "./react-query";
 
 export default function Providers({ children }: PropsWithChildren) {
   return (
-    <ReactQueryProvider>
-      <TooltipProvider>{children}</TooltipProvider>
-    </ReactQueryProvider>
+    <MockApiProvider>
+      <ReactQueryProvider>
+        <TooltipProvider>{children}</TooltipProvider>
+      </ReactQueryProvider>
+    </MockApiProvider>
   );
 }
diff --git a/providers/mock-api.tsx b/providers/mock-api.tsx
new file mode 100644
index 0000000..1ed9080
--- /dev/null
+++ b/providers/mock-api.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { env } from "@/lib/env";
+import { mockWorkerService } from "@/tests/mocks/worker";
+import { PropsWithChildren, useEffect, useState } from "react";
+
+export default function MockApiProvider({ children }: PropsWithChildren) {
+  const [shouldRenderChildren, setShouldRenderChildren] = useState(false);
+
+  useEffect(() => {
+    if (env.NEXT_PUBLIC_MOCK_API === "TRUE") {
+      mockWorkerService.start().then(() => {
+        setShouldRenderChildren(true);
+      });
+    }
+
+    return () => {
+      mockWorkerService.stop();
+    };
+  }, []);
+
+  return shouldRenderChildren ? children : null;
+}