diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 212ab4c6f8..c05ae4c624 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -11,6 +11,7 @@
 
   $: editing = app.sessions?.length
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
+  $: unclickable = !isBuilder && !app.deployed
 
   const handleDefaultClick = () => {
     if (!isBuilder) {
@@ -31,11 +32,17 @@
   }
 
   const goToApp = () => {
-    window.open(`/app/${app.name}`, "_blank")
+    if (app.deployed && app.url) {
+      window.open(`/app${app.url}`, "_blank")
+    }
   }
 </script>
 
-<div class="app-row" on:click={lockedAction || handleDefaultClick}>
+<div
+  class="app-row"
+  on:click={lockedAction || handleDefaultClick}
+  class:unclickable
+>
   <div class="title">
     <div class="app-icon">
       <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
@@ -74,7 +81,7 @@
         Edit
       </Button>
     </div>
-  {:else}
+  {:else if app.deployed}
     <!-- this can happen if an app builder has app user access to an app -->
     <div class="app-row-actions">
       <Button size="S" secondary>View</Button>
@@ -94,7 +101,7 @@
     transition: border 130ms ease-out;
     border: 1px solid transparent;
   }
-  .app-row:hover {
+  .app-row:not(.unclickable):hover {
     cursor: pointer;
     border-color: var(--spectrum-global-color-gray-300);
   }