diff --git a/src/app/components/SpaceAdd.svelte b/src/app/components/SpaceAdd.svelte
index ba72a87..0dcdc4d 100644
--- a/src/app/components/SpaceAdd.svelte
+++ b/src/app/components/SpaceAdd.svelte
@@ -7,7 +7,7 @@
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
+  import SpaceCreate from "@app/components/SpaceCreate.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
@@ -17,7 +17,7 @@
 
   const {hideDiscover}: Props = $props()
 
-  const startCreate = () => pushModal(SpaceCreateExternal)
+  const startCreate = () => pushModal(SpaceCreate)
 
   const startJoin = () => pushModal(SpaceInviteAccept)
 </script>
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
index 325381a..a41a068 100644
--- a/src/app/components/SpaceCreate.svelte
+++ b/src/app/components/SpaceCreate.svelte
@@ -1,76 +1,92 @@
 <script lang="ts">
-  import {preventDefault} from "@lib/html"
-  import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import FireMinimalistic from "@assets/icons/fire-minimalistic.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
+  import ArrowRight from "@assets/icons/arrow-right.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import InfoRelay from "@app/components/InfoRelay.svelte"
-  import InputProfilePicture from "@app/components/InputProfilePicture.svelte"
-  import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
-  import {pushModal} from "@app/util/modal"
 
   const back = () => history.back()
-
-  const next = () => pushModal(SpaceCreateFinish)
-
-  let file: File | undefined = $state()
-  let name = $state("")
-  let relay = $state("")
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(next)}>
+<div class="column gap-4">
   <ModalHeader>
     {#snippet title()}
-      <div>Customize your Space</div>
+      <div>Create your own Space</div>
     {/snippet}
     {#snippet info()}
-      <div>Give people a few details to go on. You can always change this later.</div>
+      <p>Get started with one of our trusted partners, or learn how to host your own space.</p>
     {/snippet}
   </ModalHeader>
-  <div class="flex justify-center py-2">
-    <InputProfilePicture bind:file />
+  <div class="card2 bg-alt flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <img alt="Coracle Logo" src="/coracle.png" class="h-7 w-7" />
+          <h3 class="text-lg font-bold">Coracle Hosting</h3>
+        </div>
+        <div class="badge badge-primary self-start">Recommended</div>
+      </div>
+      <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+        <li>Simple setup, support included</li>
+        <li>Free and open source software — no vendor lock-in</li>
+        <li>Advanced access controls and relay policies</li>
+        <li>Full-featured admin dashboard</li>
+      </ul>
+    </div>
+    <Link class="btn btn-primary" href="https://info.coracle.social">
+      Get Started
+      <Icon icon={ArrowRight} />
+    </Link>
   </div>
-  <Field>
-    {#snippet label()}
-      <p>Space Name</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon={FireMinimalistic} />
-        <input bind:value={name} class="grow" type="text" />
-      </label>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>Relay</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
+  <div class="card2 bg-alt flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
+      <div class="self-start">
+        <img
+          alt="Relay Tools"
+          src="https://relay.tools/17.svg"
+          class="-my-20 -ml-2 hidden h-48 dark:block"
+          style="filter: contrast(50%)" />
+        <img
+          alt="Relay Tools"
+          src="https://relay.tools/19.svg"
+          class="-my-20 -ml-2 h-48 dark:hidden"
+          style="filter: contrast(50%)" />
+      </div>
+      <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+        <li>Customizable relay policies</li>
+        <li>Simple management dashboard</li>
+        <li>Support available</li>
+      </ul>
+    </div>
+    <Link class="btn btn-neutral" href="https://relay.tools/signup">
+      Get Started
+      <Icon icon={ArrowRight} />
+    </Link>
+  </div>
+  <div class="card2 bg-alt flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-3">
         <Icon icon={Server} />
-        <input bind:value={relay} class="grow" type="text" />
-      </label>
-    {/snippet}
-    {#snippet info()}
-      <p>
-        This can be any nostr relay where you'd like to host your space.
-        <Button class="link" onclick={() => pushModal(InfoRelay)}>What is a relay?</Button>
-      </p>
-    {/snippet}
-  </Field>
+        <h3 class="text-lg font-bold">Self-Hosted</h3>
+      </div>
+      <ul class="flex list-inside list-disc flex-col gap-1 text-sm opacity-70">
+        <li>Unlimited customization and control</li>
+        <li>Free and open source software</li>
+        <li>Full-featured admin dashboards available</li>
+      </ul>
+    </div>
+    <Link class="btn btn-neutral" href="https://github.com/coracle-social/zooid">
+      Get Started
+      <Icon icon={ArrowRight} />
+    </Link>
+  </div>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">
-      Next
-      <Icon icon={AltArrowRight} />
-    </Button>
   </ModalFooter>
-</form>
+</div>
diff --git a/src/app/components/SpaceCreateExternal.svelte b/src/app/components/SpaceCreateExternal.svelte
deleted file mode 100644
index 078bc28..0000000
--- a/src/app/components/SpaceCreateExternal.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script lang="ts">
-  import {preventDefault} from "@lib/html"
-  import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-
-  const back = () => history.back()
-
-  const next = () => {
-    window.open("https://relay.tools/signup")
-
-    setTimeout(() => pushModal(SpaceInviteAccept), 300)
-  }
-</script>
-
-<form class="column gap-4" onsubmit={preventDefault(next)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Create a Space</div>
-    {/snippet}
-    {#snippet info()}
-      <div>Host your own space, for your community.</div>
-    {/snippet}
-  </ModalHeader>
-  <p>
-    <Link class="link" external href="https://relay.tools">relay.tools</Link> is a third-party service
-    that allows anyone to run their own relay for use with {PLATFORM_NAME}, or any other
-    nostr-compatible app.
-  </p>
-  <p>
-    Once you've created a relay of your own, come back here to link {PLATFORM_NAME} with your new relay.
-  </p>
-  <p>
-    Alternatively, you can
-    <Link external class="link" href="https://github.com/coracle-social/frith"
-      >run your own community relay</Link
-    >.
-  </p>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary">
-      Let's go
-      <Icon icon={AltArrowRight} />
-    </Button>
-  </ModalFooter>
-</form>
diff --git a/src/app/components/SpaceCreateFinish.svelte b/src/app/components/SpaceCreateFinish.svelte
deleted file mode 100644
index 45b983b..0000000
--- a/src/app/components/SpaceCreateFinish.svelte
+++ /dev/null
@@ -1 +0,0 @@
-hi
diff --git a/src/lib/components/ModalHeader.svelte b/src/lib/components/ModalHeader.svelte
index 2acb9a6..26bed43 100644
--- a/src/lib/components/ModalHeader.svelte
+++ b/src/lib/components/ModalHeader.svelte
@@ -9,5 +9,5 @@
 
 <div class="column m-auto max-w-xs gap-2 py-4">
   <h1 class="heading">{@render title?.()}</h1>
-  <p class="text-center">{@render info?.()}</p>
+  <p class="text-center text-sm opacity-75">{@render info?.()}</p>
 </div>