diff --git a/apps/events/src/components/playground.tsx b/apps/events/src/components/playground.tsx
index cd266c40..d0cc8c2e 100644
--- a/apps/events/src/components/playground.tsx
+++ b/apps/events/src/components/playground.tsx
@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { Event } from '../schema';
 import { Button } from './ui/button';
 
-export const Playground = () => {
+export const Playground = ({ spaceId }: { spaceId: string }) => {
   const { data, isLoading, isError } = useQuery(Event, {
     mode: 'public',
     include: {
@@ -18,12 +18,13 @@ export const Playground = () => {
       },
     },
     first: 2,
+    space: spaceId,
   });
   const [isDeleting, setIsDeleting] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const { getSmartSessionClient } = useHypergraphApp();
 
-  const { name, id: spaceId } = useSpace({ mode: 'public' });
+  const { name } = useSpace({ mode: 'public', space: spaceId });
 
   const deleteEntity = _useDeleteEntityPublic(Event, { space: spaceId });
   const createEntity = _useCreateEntityPublic(Event, { space: spaceId });
diff --git a/apps/events/src/routes/playground.lazy.tsx b/apps/events/src/routes/playground.lazy.tsx
index acc114c6..0fc11845 100644
--- a/apps/events/src/routes/playground.lazy.tsx
+++ b/apps/events/src/routes/playground.lazy.tsx
@@ -11,13 +11,15 @@ export const Route = createLazyFileRoute('/playground')({
 function RouteComponent() {
   const space = 'a393e509-ae56-4d99-987c-bed71d9db631';
   return (
-    <HypergraphSpaceProvider space={space}>
-      <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
-        <h1 className="text-2xl font-bold">Playground</h1>
-        <Playground />
-        <CreatePropertiesAndTypesEvent space={space} />
-        <CreateEvents space={space} />
-      </div>
-    </HypergraphSpaceProvider>
+    <>
+      <Playground spaceId={space} />
+      <HypergraphSpaceProvider space={space}>
+        <div className="flex flex-col gap-4 max-w-(--breakpoint-sm) mx-auto py-8">
+          <h1 className="text-2xl font-bold">Playground</h1>
+          <CreatePropertiesAndTypesEvent space={space} />
+          <CreateEvents space={space} />
+        </div>
+      </HypergraphSpaceProvider>
+    </>
   );
 }
diff --git a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
index 33961945..3ed3776f 100644
--- a/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
+++ b/packages/hypergraph-react/src/HypergraphSpaceContext.tsx
@@ -23,7 +23,7 @@ export const HypergraphReactContext = createContext<HypergraphContext | undefine
 
 export function useHypergraphSpaceInternal() {
   const context = useContext(HypergraphReactContext);
-  return context as HypergraphContext;
+  return (context as HypergraphContext) || { space: '' };
 }
 
 export function HypergraphSpaceProvider({ space, children }: { space: string; children: ReactNode }) {
diff --git a/packages/hypergraph-react/src/internal/types.ts b/packages/hypergraph-react/src/internal/types.ts
index f69f5589..f71a97c4 100644
--- a/packages/hypergraph-react/src/internal/types.ts
+++ b/packages/hypergraph-react/src/internal/types.ts
@@ -3,6 +3,7 @@ import type * as Schema from 'effect/Schema';
 
 export type QueryPublicParams<S extends Entity.AnyNoContext> = {
   enabled: boolean;
+  space?: string | undefined;
   // TODO: for multi-level nesting it should only allow the allowed properties instead of Record<string, Record<string, never>>
   include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
   first?: number | undefined;
diff --git a/packages/hypergraph-react/src/internal/use-query-public.tsx b/packages/hypergraph-react/src/internal/use-query-public.tsx
index 9efdf6d1..27b172f9 100644
--- a/packages/hypergraph-react/src/internal/use-query-public.tsx
+++ b/packages/hypergraph-react/src/internal/use-query-public.tsx
@@ -295,8 +295,9 @@ export const parseResult = <S extends Entity.AnyNoContext>(
 };
 
 export const useQueryPublic = <S extends Entity.AnyNoContext>(type: S, params?: QueryPublicParams<S>) => {
-  const { enabled = true, include, first = 100 } = params ?? {};
-  const { space } = useHypergraphSpaceInternal();
+  const { enabled = true, include, space: spaceFromParams, first = 100 } = params ?? {};
+  const { space: spaceFromContext } = useHypergraphSpaceInternal();
+  const space = spaceFromParams ?? spaceFromContext;
   const mapping = useSelector(store, (state) => state.context.mapping);
 
   // @ts-expect-error TODO should use the actual type instead of the name in the mapping
diff --git a/packages/hypergraph-react/src/use-query.tsx b/packages/hypergraph-react/src/use-query.tsx
index 1ece799a..f3c5663e 100644
--- a/packages/hypergraph-react/src/use-query.tsx
+++ b/packages/hypergraph-react/src/use-query.tsx
@@ -9,7 +9,7 @@ type QueryParams<S extends Entity.AnyNoContext> = {
   filter?: { [K in keyof Schema.Schema.Type<S>]?: Entity.EntityFieldFilter<Schema.Schema.Type<S>[K]> } | undefined;
   // TODO: for multi-level nesting it should only allow the allowed properties instead of Record<string, Record<string, never>>
   include?: { [K in keyof Schema.Schema.Type<S>]?: Record<string, Record<string, never>> } | undefined;
-  space?: string;
+  space?: string | undefined;
   first?: number | undefined;
 };
 
@@ -146,7 +146,7 @@ const preparePublishDummy = () => undefined;
 
 export function useQuery<const S extends Entity.AnyNoContext>(type: S, params: QueryParams<S>) {
   const { mode, filter, include, space, first } = params;
-  const publicResult = useQueryPublic(type, { enabled: mode === 'public', include, first });
+  const publicResult = useQueryPublic(type, { enabled: mode === 'public', include, first, space });
   const localResult = useQueryLocal(type, { enabled: mode === 'private', filter, include, space });
   // const mapping = useSelector(store, (state) => state.context.mapping);
   // const generateUpdateOps = useGenerateUpdateOps(type, mode === 'merged');