diff --git a/apps/connect/src/components/SpacesCard.tsx b/apps/connect/src/components/SpacesCard.tsx
index f716dc7f..ff3d0b11 100644
--- a/apps/connect/src/components/SpacesCard.tsx
+++ b/apps/connect/src/components/SpacesCard.tsx
@@ -7,9 +7,20 @@ import { Popover } from '@base-ui-components/react/popover';
 interface SpacesCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   spaces: (PublicSpaceData | PrivateSpaceData)[];
   status?: 'loading' | { error: boolean | string } | undefined;
+  selected?: Set<string>;
+  onSelected?: (spaceId: string, selected: boolean) => void;
+  currentAppId?: string;
 }
 
-export function SpacesCard({ spaces, status, className, ...props }: SpacesCardProps) {
+export function SpacesCard({
+  spaces,
+  status,
+  selected,
+  onSelected,
+  currentAppId,
+  className,
+  ...props
+}: SpacesCardProps) {
   const error =
     typeof status === 'object' && 'error' in status
       ? typeof status.error === 'boolean'
@@ -59,53 +70,68 @@ export function SpacesCard({ spaces, status, className, ...props }: SpacesCardPr
           }
           return (
             <ul className="grid-cols-auto-fill-36 grid gap-4">
-              {spaces.map((space) => (
-                <li key={space.id} className="group/list-item">
-                  <Popover.Root openOnHover delay={50}>
-                    <Popover.Trigger
-                      className={`
-                        group-nth-[5n]/list-item:bg-gradient-violet
-                        group-nth-[5n+1]/list-item:bg-gradient-lavender
-                        group-nth-[5n+2]/list-item:bg-gradient-aqua
-                        group-nth-[5n+3]/list-item:bg-gradient-peach
-                        group-nth-[5n+4]/list-item:bg-gradient-clearmint
-                        flex aspect-video w-full items-end overflow-clip rounded-lg px-3 py-2
-                      `}
-                    >
-                      <span className="text-sm leading-tight font-semibold">{space.name || space.id}</span>
-                    </Popover.Trigger>
-                    <Popover.Portal>
-                      <Popover.Positioner side="bottom" sideOffset={12}>
-                        <Popover.Popup className="c-popover">
-                          <Popover.Arrow className="c-popover-arrow">
-                            <ArrowSvg />
-                          </Popover.Arrow>
-                          {!('apps' in space) ? (
-                            <Popover.Title className="font-semibold">Public space</Popover.Title>
-                          ) : space.apps.length === 0 ? (
-                            <Popover.Title className="font-semibold">
-                              No app has access to this private space
-                            </Popover.Title>
-                          ) : (
-                            <>
+              {spaces.map((space) => {
+                // Determine if space is selected
+                const isPublicSpace = !('apps' in space);
+                const isSelected = isPublicSpace ? true : (selected?.has(space.id) ?? false);
+                const isDisabled =
+                  !isPublicSpace && 'apps' in space && space.apps.some((app) => app.id === currentAppId);
+
+                return (
+                  <li key={space.id} className="group/list-item">
+                    <Popover.Root openOnHover delay={50}>
+                      <Popover.Trigger
+                        className={`
+                          group-nth-[5n]/list-item:bg-gradient-violet
+                          group-nth-[5n+1]/list-item:bg-gradient-lavender
+                          group-nth-[5n+2]/list-item:bg-gradient-aqua
+                          group-nth-[5n+3]/list-item:bg-gradient-peach
+                          group-nth-[5n+4]/list-item:bg-gradient-clearmint
+                          flex aspect-video w-full items-end overflow-clip rounded-lg px-3 py-2
+                          ${isSelected ? 'ring-2 ring-primary ring-offset-2' : ''}
+                          ${isDisabled ? 'ring-2 ring-primary ring-offset-2 cursor-not-allowed' : 'cursor-pointer'}
+                        `}
+                        onClick={() => {
+                          if (!isDisabled && onSelected) {
+                            onSelected(space.id, !isSelected);
+                          }
+                        }}
+                      >
+                        <span className="text-sm leading-tight font-semibold">{space.name || space.id}</span>
+                      </Popover.Trigger>
+                      <Popover.Portal>
+                        <Popover.Positioner side="bottom" sideOffset={12}>
+                          <Popover.Popup className="c-popover">
+                            <Popover.Arrow className="c-popover-arrow">
+                              <ArrowSvg />
+                            </Popover.Arrow>
+                            {!('apps' in space) ? (
+                              <Popover.Title className="font-semibold">Public space</Popover.Title>
+                            ) : space.apps.length === 0 ? (
                               <Popover.Title className="font-semibold">
-                                Apps with access to this private space
+                                No app has access to this private space
                               </Popover.Title>
-                              <Popover.Description>
-                                <ul className="list-disc">
-                                  {space.apps.map((app) => (
-                                    <li key={app.id}>{app.name || app.id}</li>
-                                  ))}
-                                </ul>
-                              </Popover.Description>
-                            </>
-                          )}
-                        </Popover.Popup>
-                      </Popover.Positioner>
-                    </Popover.Portal>
-                  </Popover.Root>
-                </li>
-              ))}
+                            ) : (
+                              <>
+                                <Popover.Title className="font-semibold">
+                                  Apps with access to this private space
+                                </Popover.Title>
+                                <Popover.Description>
+                                  <ul className="list-disc">
+                                    {space.apps.map((app) => (
+                                      <li key={app.id}>{app.name || app.id}</li>
+                                    ))}
+                                  </ul>
+                                </Popover.Description>
+                              </>
+                            )}
+                          </Popover.Popup>
+                        </Popover.Positioner>
+                      </Popover.Portal>
+                    </Popover.Root>
+                  </li>
+                );
+              })}
             </ul>
           );
         })()}
diff --git a/apps/connect/src/routes/authenticate.tsx b/apps/connect/src/routes/authenticate.tsx
index fe85ef86..cc849b15 100644
--- a/apps/connect/src/routes/authenticate.tsx
+++ b/apps/connect/src/routes/authenticate.tsx
@@ -11,7 +11,7 @@ import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import { Effect, Schema } from 'effect';
 import { TriangleAlert } from 'lucide-react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { createWalletClient, custom } from 'viem';
 import { privateKeyToAccount } from 'viem/accounts';
 
@@ -140,6 +140,7 @@ function AuthenticateComponent() {
   const embeddedWallet = wallets.find((wallet) => wallet.walletClientType === 'privy') || wallets[0];
 
   const state = useSelector(componentStore, (state) => state.context);
+  const [selectedPrivateSpaces, setSelectedPrivateSpaces] = useState<Set<string>>(new Set());
 
   const { isPending: privateSpacesPending, error: privateSpacesError, data: privateSpacesData } = usePrivateSpaces();
   const {
@@ -148,25 +149,6 @@ function AuthenticateComponent() {
     data: publicSpacesData,
   } = usePublicSpaces(`${Graph.TESTNET_API_ORIGIN}/graphql`);
 
-  const selectedPrivateSpaces = new Set<string>();
-  const selectedPublicSpaces = new Set<string>();
-
-  const handlePrivateSpaceToggle = (spaceId: string, checked: boolean) => {
-    if (checked) {
-      selectedPrivateSpaces.add(spaceId);
-    } else {
-      selectedPrivateSpaces.delete(spaceId);
-    }
-  };
-
-  const handlePublicSpaceToggle = (spaceId: string, checked: boolean) => {
-    if (checked) {
-      selectedPublicSpaces.add(spaceId);
-    } else {
-      selectedPublicSpaces.delete(spaceId);
-    }
-  };
-
   useEffect(() => {
     const run = async () => {
       if (!identityToken || !accountAddress || !keys || !embeddedWallet) {
@@ -247,7 +229,7 @@ function AuthenticateComponent() {
 
     const privateSpacesInput = privateSpacesData
       ? privateSpacesData
-          // .filter((space) => selectedPrivateSpaces.has(space.id))
+          .filter((space) => selectedPrivateSpaces.has(space.id))
           .map((space) => {
             // TODO: currently without checking we assume all keyboxes exists and we don't create any - we should check if the keyboxes exist and create them if they don't
             if (space.appIdentities.some((spaceAppIdentity) => spaceAppIdentity.address === appIdentity.address))
@@ -518,6 +500,18 @@ function AuthenticateComponent() {
     });
   };
 
+  const handleSpaceSelection = (spaceId: string, selected: boolean) => {
+    setSelectedPrivateSpaces((prev) => {
+      const newSet = new Set(prev);
+      if (selected) {
+        newSet.add(spaceId);
+      } else {
+        newSet.delete(spaceId);
+      }
+      return newSet;
+    });
+  };
+
   return (
     <div className="flex grow flex-col items-center justify-center">
       {(() => {
@@ -587,6 +581,9 @@ function AuthenticateComponent() {
                           ? { error: privateSpacesError.message }
                           : undefined
                     }
+                    selected={selectedPrivateSpaces}
+                    onSelected={handleSpaceSelection}
+                    currentAppId={state.appInfo?.appId}
                     className="lg:absolute lg:inset-0"
                   />
                 </div>