diff --git a/app/controllers/onboarding_controller.rb b/app/controllers/onboarding_controller.rb
index 13b3b9f2..9d5317c9 100644
--- a/app/controllers/onboarding_controller.rb
+++ b/app/controllers/onboarding_controller.rb
@@ -67,21 +67,25 @@ def update
     if last_step?(step["key"])
       complete_onboarding
     else
-      redirect_to onboarding_path
+      next_key = OnboardingConfig.step_keys[OnboardingConfig.step_keys.index(step["key"]) + 1]
+      redirect_to onboarding_path(step: next_key)
     end
   end
 
   private
 
-  # Allows navigating back to a previously answered step via ?step= param
+  # Allows navigating to a previously answered step or the next reachable step via ?step= param
   def requested_step
     return unless params[:step]
 
     step = OnboardingConfig.find_step(params[:step])
     return unless step
 
+    step_index = OnboardingConfig.step_keys.index(step["key"])
     answered_keys = current_user.onboarding_responses.pluck(:question_key)
-    step if answered_keys.include?(step["key"])
+
+    # Allow if this step is answered (revisiting) or the previous step is answered (advancing)
+    step if answered_keys.include?(step["key"]) || (step_index.zero? || answered_keys.include?(OnboardingConfig.step_keys[step_index - 1]))
   end
 
   def current_step
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 89cd8cd9..bc48faa6 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -75,11 +75,26 @@ def create
     authorize @project
 
     if @project.save
-      # Redirect to path when created from the onboarding modal so it closes and tooltips update
-      destination = params[:return_to] == "path" ? path_path : @project
-      redirect_to destination, notice: "Project created."
+      if request.headers["X-InertiaUI-Modal"].present? && params[:return_to] != "path"
+        head :no_content
+      else
+        # Onboarding flows use return_to to land on /path autoopen the projects modal
+        destination = case params[:return_to]
+        when "path"
+          path_path
+        when "path_projects"
+          path_path(open: "projects", nudge: "read_docs")
+        else
+          projects_path
+        end
+        redirect_to destination, notice: "Project created."
+      end
     else
-      redirect_back fallback_location: new_project_path, inertia: { errors: @project.errors.messages }
+      if request.headers["X-InertiaUI-Modal"].present? && params[:return_to] != "path"
+        render json: { errors: @project.errors.messages }, status: :unprocessable_entity
+      else
+        redirect_back fallback_location: new_project_path, inertia: { errors: @project.errors.messages }
+      end
     end
   end
 
@@ -104,16 +119,36 @@ def update
     authorize @project
 
     if @project.update(project_params)
-      redirect_to @project, notice: "Project updated."
+      if request.headers["X-InertiaUI-Modal"].present?
+        head :no_content
+      else
+        redirect_to @project, notice: "Project updated."
+      end
     else
-      redirect_back fallback_location: edit_project_path(@project), inertia: { errors: @project.errors.messages }
+      if request.headers["X-InertiaUI-Modal"].present?
+        render json: { errors: @project.errors.messages }, status: :unprocessable_entity
+      else
+        redirect_back fallback_location: edit_project_path(@project), inertia: { errors: @project.errors.messages }
+      end
     end
   end
 
   def destroy
     authorize @project
-    @project.discard
-    redirect_to projects_path, notice: "Project deleted."
+
+    if @project.discard
+      if request.headers["X-InertiaUI-Modal"].present?
+        head :no_content
+      else
+        redirect_to projects_path, notice: "Project deleted."
+      end
+    else
+      if request.headers["X-InertiaUI-Modal"].present?
+        render json: { errors: @project.errors.messages }, status: :unprocessable_entity
+      else
+        redirect_back fallback_location: project_path(@project), inertia: { errors: @project.errors.messages }
+      end
+    end
   end
 
   private
diff --git a/app/frontend/components/onboarding/SpeechBubble.tsx b/app/frontend/components/onboarding/SpeechBubble.tsx
index f9c7b7a0..f072aaee 100644
--- a/app/frontend/components/onboarding/SpeechBubble.tsx
+++ b/app/frontend/components/onboarding/SpeechBubble.tsx
@@ -1,27 +1,74 @@
 import type { ReactNode } from 'react'
 
+type BubbleDirection = 'left' | 'right' | 'bottom' | 'top'
+
 type BubbleProps = {
   text?: string
   children?: ReactNode
   bg?: string
-  dir?: string
+  dir?: BubbleDirection
 }
 
-const SpeechBubble = ({ text, children, bg = 'white', dir = '' }: BubbleProps) => (
-  <div className={`relative bg-${bg} h-auto w-auto p-3 sm:px-6 sm:py-4 rounded-2xl border-2 border-dark-brown`}>
-    <span className="relative z-1 text-base lg:text-lg text-dark-brown text-center font-bold">{children ?? text}</span>
-    {dir === '' ? (
-      <svg className="absolute -bottom-4 left-1/2 -translate-x-1/2" width="24" height="16" viewBox="0 0 24 16">
-        <polygon points="0,0 24,0 12,16" className="fill-white stroke-dark-brown" strokeWidth="2" />
-        <polygon points="1,0 23,0 12,14" className="fill-white" />
-      </svg>
-    ) : (
-      <svg className="absolute -left-4 top-1/2 -translate-y-1/2" width="16" height="24" viewBox="0 0 16 24">
-        <polygon points="16,0 16,24 0,12" className="fill-white stroke-dark-brown" strokeWidth="2" />
-        <polygon points="16,1 16,23 2,12" className="fill-white" />
+const tailByDirection: Record<
+  BubbleDirection,
+  {
+    className: string
+    width: string
+    height: string
+    viewBox: string
+    outerPoints: string
+    innerPoints: string
+  }
+> = {
+  bottom: {
+    className: 'absolute -bottom-4 left-1/2 -translate-x-1/2',
+    width: '24',
+    height: '16',
+    viewBox: '0 0 24 16',
+    outerPoints: '0,0 24,0 12,16',
+    innerPoints: '1,0 23,0 12,14',
+  },
+  left: {
+    className: 'absolute -left-4 top-1/2 -translate-y-1/2',
+    width: '16',
+    height: '24',
+    viewBox: '0 0 16 24',
+    outerPoints: '16,0 16,24 0,12',
+    innerPoints: '16,1 16,23 2,12',
+  },
+  right: {
+    className: 'absolute -right-4 top-1/2 -translate-y-1/2',
+    width: '16',
+    height: '24',
+    viewBox: '0 0 16 24',
+    outerPoints: '0,0 0,24 16,12',
+    innerPoints: '0,1 0,23 14,12',
+  },
+  top: {
+    className: 'absolute -top-4 left-1/2 -translate-x-1/2',
+    width: '24',
+    height: '16',
+    viewBox: '0 0 24 16',
+    outerPoints: '12,0 24,16 0,16',
+    innerPoints: '12,2 23,16 1,16',
+  },
+}
+
+const SpeechBubble = ({ text, children, bg = 'white', dir = 'bottom' }: BubbleProps) => {
+  const tail = tailByDirection[dir]
+
+  return (
+    <div className={`relative bg-${bg} h-auto w-auto p-3 sm:px-6 sm:py-4 rounded-2xl border-2 border-dark-brown`}>
+      <span className="relative z-1 text-base lg:text-lg text-dark-brown text-center font-bold">
+        {children ?? text}
+      </span>
+
+      <svg className={tail.className} width={tail.width} height={tail.height} viewBox={tail.viewBox}>
+        <polygon points={tail.outerPoints} className={`fill-${bg} stroke-dark-brown`} strokeWidth="2" />
+        <polygon points={tail.innerPoints} className={`fill-${bg}`} />
       </svg>
-    )}
-  </div>
-)
+    </div>
+  )
+}
 
 export default SpeechBubble
diff --git a/app/frontend/components/path/BgmPlayer.tsx b/app/frontend/components/path/BgmPlayer.tsx
index 1c75352a..280c5197 100644
--- a/app/frontend/components/path/BgmPlayer.tsx
+++ b/app/frontend/components/path/BgmPlayer.tsx
@@ -176,7 +176,7 @@ export default function BgmPlayer({ hasProjects = false }: { hasProjects?: boole
   const track = TRACKS[trackIndex]
 
   return (
-    <Frame>
+    <Frame showBorderOnMobile>
       <div className="flex flex-col w-60 gap-1 p-4">
         <div>
           <p className="text-lg font-medium text-dark-brown truncate text-center">{track.title}</p>
diff --git a/app/frontend/components/path/PathNode.tsx b/app/frontend/components/path/PathNode.tsx
index f1b12d70..e4982c13 100644
--- a/app/frontend/components/path/PathNode.tsx
+++ b/app/frontend/components/path/PathNode.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useContext } from 'react'
-import { usePage } from '@inertiajs/react'
+import { Link, usePage } from '@inertiajs/react'
 // @ts-expect-error useModalStack lacks type declarations in this beta package
 import { ModalLink, useModalStack } from '@inertiaui/modal-react'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/shared/Tooltip'
@@ -82,9 +82,9 @@ export default function PathNode({
     <div style={{ pointerEvents: 'auto' }} className="cursor-pointer">
       {index === 0 ? (
         state === 'active' && interactive ? (
-          <ModalLink href="/projects/onboarding" className="outline-0">
+          <Link href="/projects/onboarding" className="outline-0">
             {starImage}
-          </ModalLink>
+          </Link>
         ) : state === 'completed' && interactive ? (
           <button
             onClick={() =>
diff --git a/app/frontend/components/shared/BookLayout.tsx b/app/frontend/components/shared/BookLayout.tsx
index 5eafcdad..01fbb971 100644
--- a/app/frontend/components/shared/BookLayout.tsx
+++ b/app/frontend/components/shared/BookLayout.tsx
@@ -5,14 +5,21 @@ const BookLayout = ({
   children,
   className,
   showJoint = true,
+  showBorderOnMobile = false,
 }: {
   children: ReactNode
   className?: string
   showJoint?: boolean
+  showBorderOnMobile?: boolean
 }) => (
-  <div className="h-full xl:p-12 flex">
+  <div
+    className={twMerge(
+      'h-full flex',
+      showBorderOnMobile ? 'relative pl-4.25 pt-3.75 pr-6.25 pb-5.5 xl:p-12' : 'relative xl:p-12',
+    )}
+  >
     <div className={twMerge('relative flex-1 h-full my-auto', className)}>
-      <div className="inset-0 bg-light-brown h-full w-full">{children}</div>
+      <div className="inset-0 bg-light-brown h-full w-full max-xl:p-3 md:max-xl:p-4">{children}</div>
       <div className="hidden xl:block absolute pointer-events-none -left-5 -right-5 top-5 -bottom-5">
         <div className="absolute left-0 bottom-0 top-0 w-5 bg-[#d4bb9d]"></div>
         <div className="absolute left-0 bottom-0 right-0 h-5 bg-[#d4bb9d]"></div>
@@ -32,6 +39,46 @@ const BookLayout = ({
         <div className="hidden xl:block absolute pointer-events-none left-1/2 top-0 -translate-x-1/2 -bottom-15 w-px bg-dark-brown"></div>
       )}
     </div>
+    {showBorderOnMobile && (
+      <>
+        <img
+          className="absolute top-0 left-0 w-22.5 h-20 pointer-events-none xl:hidden z-10"
+          src="/border/top_left.webp"
+          alt=""
+        />
+        <img
+          className="absolute top-0 right-0 w-22.5 h-20 pointer-events-none xl:hidden z-10"
+          src="/border/top_right.webp"
+          alt=""
+        />
+        <img
+          className="absolute bottom-0 left-0 w-22.5 h-20 pointer-events-none xl:hidden z-10"
+          src="/border/bottom_left.webp"
+          alt=""
+        />
+        <img
+          className="absolute bottom-0 right-0 w-22.5 h-20 pointer-events-none xl:hidden z-10"
+          src="/border/bottom_right.webp"
+          alt=""
+        />
+        <div
+          className="absolute top-20 left-0 bottom-20 w-22.5 pointer-events-none xl:hidden z-10"
+          style={{ backgroundImage: 'url(/border/left.webp)', backgroundSize: '100% 100%' }}
+        />
+        <div
+          className="absolute top-20 right-0 bottom-20 w-22.5 pointer-events-none xl:hidden z-10"
+          style={{ backgroundImage: 'url(/border/right.webp)', backgroundSize: '100% 100%' }}
+        />
+        <div
+          className="absolute top-0 left-22.5 right-22.5 h-20 pointer-events-none xl:hidden z-10"
+          style={{ backgroundImage: 'url(/border/top.webp)', backgroundSize: '100% 100%' }}
+        />
+        <div
+          className="absolute bottom-0 left-22.5 right-22.5 h-20 pointer-events-none xl:hidden z-10"
+          style={{ backgroundImage: 'url(/border/bottom.webp)', backgroundSize: '100% 100%' }}
+        />
+      </>
+    )}
   </div>
 )
 
diff --git a/app/frontend/components/shared/Frame.tsx b/app/frontend/components/shared/Frame.tsx
index 3185bb07..00e81d48 100644
--- a/app/frontend/components/shared/Frame.tsx
+++ b/app/frontend/components/shared/Frame.tsx
@@ -1,46 +1,59 @@
 import type { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-const Frame = ({ children, className }: { children: ReactNode; className?: string }) => (
-  <div className={twMerge('relative md:pl-4.25 md:pt-3.75 md:pr-6.25 md:pb-5.5', className)}>
-    <div className="bg-light-brown h-full w-full p-4 md:p-3 overflow-y-auto">{children}</div>
-    <img
-      className="hidden md:block absolute top-0 left-0 w-22.5 h-20 pointer-events-none"
-      src="/border/top_left.webp"
-      alt=""
-    />
-    <img
-      className="hidden md:block absolute top-0 right-0 w-22.5 h-20 pointer-events-none"
-      src="/border/top_right.webp"
-      alt=""
-    />
-    <img
-      className="hidden md:block absolute bottom-0 left-0 w-22.5 h-20 pointer-events-none"
-      src="/border/bottom_left.webp"
-      alt=""
-    />
-    <img
-      className="hidden md:block absolute bottom-0 right-0 w-22.5 h-20 pointer-events-none"
-      src="/border/bottom_right.webp"
-      alt=""
-    />
-    <div
-      className="hidden md:block absolute top-20 left-0 bottom-20 w-22.5 pointer-events-none"
-      style={{ backgroundImage: 'url(/border/left.webp)', backgroundSize: '100% 100%' }}
-    />
-    <div
-      className="hidden md:block absolute top-20 right-0 bottom-20 w-22.5 pointer-events-none"
-      style={{ backgroundImage: 'url(/border/right.webp)', backgroundSize: '100% 100%' }}
-    />
-    <div
-      className="hidden md:block absolute top-0 left-22.5 right-22.5 h-20 pointer-events-none"
-      style={{ backgroundImage: 'url(/border/top.webp)', backgroundSize: '100% 100%' }}
-    />
-    <div
-      className="hidden md:block absolute bottom-0 left-22.5 right-22.5 h-20 pointer-events-none"
-      style={{ backgroundImage: 'url(/border/bottom.webp)', backgroundSize: '100% 100%' }}
-    />
-  </div>
-)
+const Frame = ({
+  children,
+  className,
+  showBorderOnMobile = false,
+}: {
+  children: ReactNode
+  className?: string
+  showBorderOnMobile?: boolean
+}) => {
+  const bp = showBorderOnMobile ? 'block' : 'hidden md:block'
+  const pad = showBorderOnMobile ? 'pl-4.25 pt-3.75 pr-6.25 pb-5.5' : 'md:pl-4.25 md:pt-3.75 md:pr-6.25 md:pb-5.5'
+
+  return (
+    <div className={twMerge(`relative ${pad}`, className)}>
+      <div className="bg-light-brown h-full w-full p-4 md:p-3 flex flex-col">{children}</div>
+      <img
+        className={`${bp} absolute top-0 left-0 w-22.5 h-20 pointer-events-none`}
+        src="/border/top_left.webp"
+        alt=""
+      />
+      <img
+        className={`${bp} absolute top-0 right-0 w-22.5 h-20 pointer-events-none`}
+        src="/border/top_right.webp"
+        alt=""
+      />
+      <img
+        className={`${bp} absolute bottom-0 left-0 w-22.5 h-20 pointer-events-none`}
+        src="/border/bottom_left.webp"
+        alt=""
+      />
+      <img
+        className={`${bp} absolute bottom-0 right-0 w-22.5 h-20 pointer-events-none`}
+        src="/border/bottom_right.webp"
+        alt=""
+      />
+      <div
+        className={`${bp} absolute top-20 left-0 bottom-20 w-22.5 pointer-events-none`}
+        style={{ backgroundImage: 'url(/border/left.webp)', backgroundSize: '100% 100%' }}
+      />
+      <div
+        className={`${bp} absolute top-20 right-0 bottom-20 w-22.5 pointer-events-none`}
+        style={{ backgroundImage: 'url(/border/right.webp)', backgroundSize: '100% 100%' }}
+      />
+      <div
+        className={`${bp} absolute top-0 left-22.5 right-22.5 h-20 pointer-events-none`}
+        style={{ backgroundImage: 'url(/border/top.webp)', backgroundSize: '100% 100%' }}
+      />
+      <div
+        className={`${bp} absolute bottom-0 left-22.5 right-22.5 h-20 pointer-events-none`}
+        style={{ backgroundImage: 'url(/border/bottom.webp)', backgroundSize: '100% 100%' }}
+      />
+    </div>
+  )
+}
 
 export default Frame
diff --git a/app/frontend/lib/modalMutation.ts b/app/frontend/lib/modalMutation.ts
new file mode 100644
index 00000000..5faead34
--- /dev/null
+++ b/app/frontend/lib/modalMutation.ts
@@ -0,0 +1,80 @@
+import type { RefObject } from 'react'
+import Axios from 'axios'
+import { notify } from '@/lib/notifications'
+
+type ModalValidationErrors = Record<string, string[]>
+
+type ModalLike = {
+  close?: () => void
+} | null
+
+type ModalMutationOptions = {
+  url: string
+  method: 'delete' | 'patch' | 'post'
+  data?: unknown
+  modal?: ModalLike
+  modalRef?: RefObject<{ close: () => void } | null>
+  successMessage: string
+  errorMessage: string
+  successEvent?: string
+  onModalEvent?: (event: string, ...args: any[]) => void
+  onValidationError?: (errors: ModalValidationErrors) => void
+  onFinish?: () => void
+}
+
+function modalHeaders() {
+  const requestId =
+    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+      ? crypto.randomUUID()
+      : 'manual-project-modal-request'
+
+  return {
+    Accept: 'application/json',
+    'X-Requested-With': 'XMLHttpRequest',
+    'X-CSRF-Token': document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content || '',
+    'X-InertiaUI-Modal': requestId,
+    'X-InertiaUI-Modal-Use-Router': 0,
+  }
+}
+
+export async function performModalMutation({
+  url,
+  method,
+  data,
+  modal,
+  modalRef,
+  successMessage,
+  errorMessage,
+  successEvent,
+  onModalEvent,
+  onValidationError,
+  onFinish,
+}: ModalMutationOptions): Promise<boolean> {
+  try {
+    await Axios({
+      url,
+      method,
+      data,
+      headers: modalHeaders(),
+    })
+
+    notify('notice', successMessage)
+    if (successEvent) onModalEvent?.(successEvent)
+    modal?.close?.()
+    modalRef?.current?.close()
+    return true
+  } catch (error) {
+    if (Axios.isAxiosError(error)) {
+      const errors = error.response?.data?.errors
+      if (error.response?.status === 422 && errors && onValidationError) {
+        onValidationError(errors)
+        return false
+      }
+    }
+
+    notify('alert', errorMessage)
+    return false
+  } finally {
+    onFinish?.()
+  }
+}
diff --git a/app/frontend/pages/collaboration_invites/show.tsx b/app/frontend/pages/collaboration_invites/show.tsx
index fbd7570c..486cbeed 100644
--- a/app/frontend/pages/collaboration_invites/show.tsx
+++ b/app/frontend/pages/collaboration_invites/show.tsx
@@ -29,49 +29,51 @@ export default function CollaborationInviteShow({ invite, is_modal }: { invite:
   }
 
   const content = (
-    <div className="w-full max-w-lg mx-auto p-8">
-      <h1 className="font-bold text-3xl mb-6">Collaboration Invite</h1>
+    <div className="w-full h-full overflow-y-auto">
+      <div className="w-full max-w-lg mx-auto p-4 md:p-8">
+        <h1 className="font-bold text-3xl mb-6">Collaboration Invite</h1>
 
-      <div className="flex items-center gap-3 mb-6">
-        <img src={invite.inviter_avatar} alt="" className="w-10 h-10 rounded-full" />
-        <div>
-          <p className="font-bold">{invite.inviter_display_name}</p>
-          <p className="text-sm text-dark-brown">invited you on {invite.created_at}</p>
+        <div className="flex items-center gap-3 mb-6">
+          <img src={invite.inviter_avatar} alt="" className="w-10 h-10 rounded-full" />
+          <div>
+            <p className="font-bold">{invite.inviter_display_name}</p>
+            <p className="text-sm text-dark-brown">invited you on {invite.created_at}</p>
+          </div>
         </div>
-      </div>
 
-      <p className="text-lg mb-6">
-        to collaborate on <span className="font-bold">{invite.project_name}</span>
-      </p>
+        <p className="text-lg mb-6">
+          to collaborate on <span className="font-bold">{invite.project_name}</span>
+        </p>
 
-      {invite.status === 'pending' && (
-        <div className="flex gap-3">
-          <Button onClick={handleAccept}>Accept</Button>
-          <Button onClick={handleDecline} className="bg-dark-brown">
-            Decline
-          </Button>
-        </div>
-      )}
+        {invite.status === 'pending' && (
+          <div className="flex gap-3">
+            <Button onClick={handleAccept}>Accept</Button>
+            <Button onClick={handleDecline} className="bg-dark-brown">
+              Decline
+            </Button>
+          </div>
+        )}
 
-      {invite.status === 'accepted' && (
-        <div>
-          <p className="text-dark-brown mb-4">You accepted this invite.</p>
-          <Link href={`/projects/${invite.project_id}`} className="text-blue-600 hover:underline">
-            Go to project
-          </Link>
-        </div>
-      )}
+        {invite.status === 'accepted' && (
+          <div>
+            <p className="text-dark-brown mb-4">You accepted this invite.</p>
+            <Link href={`/projects/${invite.project_id}`} className="text-blue-600 hover:underline">
+              Go to project
+            </Link>
+          </div>
+        )}
 
-      {invite.status === 'declined' && <p className="text-dark-brown">You declined this invite.</p>}
+        {invite.status === 'declined' && <p className="text-dark-brown">You declined this invite.</p>}
 
-      {invite.status === 'revoked' && <p className="text-dark-brown">This invite was withdrawn.</p>}
+        {invite.status === 'revoked' && <p className="text-dark-brown">This invite was withdrawn.</p>}
+      </div>
     </div>
   )
 
   if (is_modal) {
     return (
       <Modal paddingClasses="max-w-lg mx-auto" closeButton={false}>
-        <Frame>{content}</Frame>
+        <Frame showBorderOnMobile>{content}</Frame>
       </Modal>
     )
   }
diff --git a/app/frontend/pages/journal_entries/new.tsx b/app/frontend/pages/journal_entries/new.tsx
index 29093027..61443192 100644
--- a/app/frontend/pages/journal_entries/new.tsx
+++ b/app/frontend/pages/journal_entries/new.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react'
 import { Deferred as InertiaDeferred, router } from '@inertiajs/react'
-import { Deferred as ModalDeferred, Modal } from '@inertiaui/modal-react'
+// @ts-expect-error useModal lacks type declarations in this beta package
+import { Deferred as ModalDeferred, Modal, useModal } from '@inertiaui/modal-react'
 import BookLayout from '@/components/shared/BookLayout'
 import Button from '@/components/shared/Button'
 import Input from '@/components/shared/Input'
@@ -109,6 +110,7 @@ function NewJournal({
       ? projects[0]
       : null
 
+  const modal = useModal()
   const [selectedProject, setSelectedProject] = useState<Project | null>(initialProject)
   const [rightTab, setRightTab] = useState<'lapse' | 'youtube' | 'lookout'>('lookout')
   const [selectedTimelapses, setSelectedTimelapses] = useState<Set<string>>(new Set())
@@ -176,6 +178,20 @@ function NewJournal({
   const hasRecording = recordingCount > 0
   const canSubmit = selectedProject && hasRecording && hasEnoughImages && hasEnoughChars
 
+  function handleBack() {
+    if (modal?.canGoBack) {
+      modal.goBack()
+      return
+    }
+
+    if (modal) {
+      modal.close()
+      return
+    }
+
+    modalRef.current?.close()
+  }
+
   function toggleTimelapse(id: string) {
     setSelectedTimelapses((prev) => {
       const next = new Set(prev)
@@ -397,8 +413,8 @@ function NewJournal({
         <div className="mt-8 xl:mt-auto pt-4 flex gap-4 justify-between xl:justify-start">
           {is_modal && (
             <button
-              onClick={() => modalRef.current?.close()}
-              className="xl:hidden py-2 px-6 text-lg border-2 font-bold uppercase cursor-pointer bg-transparent text-dark-brown border-dark-brown"
+              onClick={handleBack}
+              className="py-2 px-6 text-lg border-2 font-bold uppercase cursor-pointer bg-transparent text-dark-brown border-dark-brown"
             >
               Back
             </button>
@@ -592,12 +608,14 @@ function NewJournal({
     return (
       <Modal
         ref={modalRef}
-        panelClasses="h-full max-xl:w-full max-xl:max-w-none max-xl:bg-light-brown max-xl:max-h-full max-xl:overflow-hidden"
+        panelClasses="h-full max-xl:w-full max-xl:max-w-none max-xl:max-h-full max-xl:overflow-hidden"
         paddingClasses="p-0 xl:max-w-5xl xl:mx-auto"
         closeButton={false}
         maxWidth="7xl"
       >
-        <BookLayout className="max-h-none xl:max-h-[40em]">{content}</BookLayout>
+        <BookLayout className="max-h-none xl:max-h-[40em]" showBorderOnMobile>
+          {content}
+        </BookLayout>
         {fullscreenModal}
       </Modal>
     )
@@ -613,8 +631,8 @@ function NewJournal({
 
 function DisabledOverlay() {
   return (
-    <div className="absolute inset-0 z-10 flex items-center justify-center bg-brown/30 rounded cursor-default">
-      <p className="text-lg font-bold text-dark-brown">Select a project at the top left first!</p>
+    <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/20 backdrop-blur-[2px] rounded cursor-default">
+      <p className="text-lg font-bold text-dark-brown drop-shadow-md">Select a project at the top left first!</p>
     </div>
   )
 }
diff --git a/app/frontend/pages/landing/index.tsx b/app/frontend/pages/landing/index.tsx
index a3be8fa4..c218609a 100644
--- a/app/frontend/pages/landing/index.tsx
+++ b/app/frontend/pages/landing/index.tsx
@@ -10,13 +10,41 @@ import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
 const PROJECTS = [
-  { image: '/landing/projects/cyberpad.webp', description: 'A sleek, cyberpunk inspired macropad', credit: 'By Kai, a 17-year-old from Canada' },
-  { image: '/landing/projects/glowpad.webp', description: 'A glowing macropad', credit: 'By Raygen, a 17-year-old from the US' },
-  { image: '/landing/projects/angel.webp', description: 'A biblically accurate angel, as a macropad', credit: 'By Alex, a 15-year-old from the US' },
-  { image: '/landing/projects/meko.webp', description: 'A high definition music player', credit: 'By Marcell, a 17-year-old from Romania' },
-  { image: '/landing/projects/bitlace.webp', description: 'A cool looking retro accessory with an 8x8 monochrome screen', credit: 'By Vladislav, a 17-year-old from Russia' },
-  { image: '/landing/projects/3dpmotherboard.webp', description: 'A powerful, yet affordable 3D printer motherboard', credit: 'By Kai, a 17-year-old from Canada' },
-  { image: '/landing/projects/twoswap.webp', description: 'An epic wearable TV head', credit: 'By Nick, an 18-year-old from the US' },
+  {
+    image: '/landing/projects/cyberpad.webp',
+    description: 'A sleek, cyberpunk inspired macropad',
+    credit: 'By Kai, a 17-year-old from Canada',
+  },
+  {
+    image: '/landing/projects/glowpad.webp',
+    description: 'A glowing macropad',
+    credit: 'By Raygen, a 17-year-old from the US',
+  },
+  {
+    image: '/landing/projects/angel.webp',
+    description: 'A biblically accurate angel, as a macropad',
+    credit: 'By Alex, a 15-year-old from the US',
+  },
+  {
+    image: '/landing/projects/meko.webp',
+    description: 'A high definition music player',
+    credit: 'By Marcell, a 17-year-old from Romania',
+  },
+  {
+    image: '/landing/projects/bitlace.webp',
+    description: 'A cool looking retro accessory with an 8x8 monochrome screen',
+    credit: 'By Vladislav, a 17-year-old from Russia',
+  },
+  {
+    image: '/landing/projects/3dpmotherboard.webp',
+    description: 'A powerful, yet affordable 3D printer motherboard',
+    credit: 'By Kai, a 17-year-old from Canada',
+  },
+  {
+    image: '/landing/projects/twoswap.webp',
+    description: 'An epic wearable TV head',
+    credit: 'By Nick, an 18-year-old from the US',
+  },
 ]
 
 export default function LandingIndex() {
@@ -327,9 +355,15 @@ export default function LandingIndex() {
 
     rafId = requestAnimationFrame(animate)
 
-    const onWheel = (e: WheelEvent) => { carouselDirectionRef.current = e.deltaY > 0 ? 1 : -1 }
-    const onEnter = () => { carouselTargetSpeedRef.current = 0 }
-    const onLeave = () => { carouselTargetSpeedRef.current = BASE_SPEED }
+    const onWheel = (e: WheelEvent) => {
+      carouselDirectionRef.current = e.deltaY > 0 ? 1 : -1
+    }
+    const onEnter = () => {
+      carouselTargetSpeedRef.current = 0
+    }
+    const onLeave = () => {
+      carouselTargetSpeedRef.current = BASE_SPEED
+    }
     const section = carouselSectionRef.current
 
     section?.addEventListener('wheel', onWheel, { passive: true })
@@ -569,7 +603,6 @@ export default function LandingIndex() {
                   <a
                     className="text-light-brown text-lg underline text-sm md:text-base"
                     href={cardCaptions[cardOrder[cardOrder.length - 1]].href}
-                    
                   >
                     {cardCaptions[cardOrder[cardOrder.length - 1]].label}
                   </a>
@@ -579,8 +612,18 @@ export default function LandingIndex() {
             <section className="w-full md:px-8 lg:px-18 xl:px-36 2xl:px-54 py-20 md:pt-60 md:pb-40 text-dark-brown flex flex-col items-center justify-center gap-6 font-bold text-center">
               <span className="text-2xl xs:text-3xl text-brown">My parents are worried!</span>
               <div className="gap-4 sm:gap-10 text-beige flex flex-col sm:flex-row items-center justify-center w-full">
-                <a href="https://hack.club/renran" className="inline-block bg-brown w-full max-w-70 py-4 text-2xl rounded-sm hover:bg-dark-brown transition-all">Book a call with us</a>
-                <a href="https://docs.google.com/document/d/1dXDIBm7SWui5rbK3zh7188UmLC0cv_dsMj7ynr3POho/edit?tab=t.q4hvz46um9np" className="inline-block bg-brown w-full max-w-70 py-4 text-2xl rounded-sm hover:bg-dark-brown transition-all">Parent Guide</a>
+                <a
+                  href="https://hack.club/renran"
+                  className="inline-block bg-brown w-full max-w-70 py-4 text-2xl rounded-sm hover:bg-dark-brown transition-all"
+                >
+                  Book a call with us
+                </a>
+                <a
+                  href="https://docs.google.com/document/d/1dXDIBm7SWui5rbK3zh7188UmLC0cv_dsMj7ynr3POho/edit?tab=t.q4hvz46um9np"
+                  className="inline-block bg-brown w-full max-w-70 py-4 text-2xl rounded-sm hover:bg-dark-brown transition-all"
+                >
+                  Parent Guide
+                </a>
               </div>
             </section>
             <div className="md:pt-0 md:qualify-outer">
@@ -636,9 +679,15 @@ export default function LandingIndex() {
             </div>
           </div>
           <section ref={carouselSectionRef} className="w-full h-120 lg:pt-30 py-20 overflow-hidden">
-            <ul ref={carouselTrackRef} className="w-max h-full flex gap-4 text-base leading-tight will-change-transform">
+            <ul
+              ref={carouselTrackRef}
+              className="w-max h-full flex gap-4 text-base leading-tight will-change-transform"
+            >
               {[...PROJECTS, ...PROJECTS].map((project, i) => (
-                <li key={i} className="border-2 border-dark-brown h-full aspect-3/4 bg-light-brown rounded-xs text-dark-brown font-bold p-2 flex flex-col transition-transform duration-300 hover:scale-110 hover:-rotate-3 hover:z-10">
+                <li
+                  key={i}
+                  className="border-2 border-dark-brown h-full aspect-3/4 bg-light-brown rounded-xs text-dark-brown font-bold p-2 flex flex-col transition-transform duration-300 hover:scale-110 hover:-rotate-3 hover:z-10"
+                >
                   <div
                     className="w-full h-[70%] bg-beige rounded-xs bg-center bg-cover opacity-90 border-beige border-6"
                     style={{ backgroundImage: `url(${project.image})` }}
@@ -860,13 +909,10 @@ export default function LandingIndex() {
                   q: 'What is Hack Club?',
                   a: (
                     <>
-                      <a href="https://hackclub.com">
-                        Hack Club
-                      </a>{' '}
-                      is a <strong>501(c)(3) nonprofit</strong> (EIN: 81-2908499) that helps high school students learn
-                      to code and build projects. We&apos;re the largest teen-led coding community, with over{' '}
-                      <strong>50,000 students</strong> building projects with their friends in Hack Club each year. Some
-                      of our past events include:
+                      <a href="https://hackclub.com">Hack Club</a> is a <strong>501(c)(3) nonprofit</strong> (EIN:
+                      81-2908499) that helps high school students learn to code and build projects. We&apos;re the
+                      largest teen-led coding community, with over <strong>50,000 students</strong> building projects
+                      with their friends in Hack Club each year. Some of our past events include:
                       <ul className="list-disc ml-5 mt-1">
                         <li>
                           <a href="https://www.youtube.com/watch?v=fuTlToZ1SX8" className="font-bold">
@@ -881,10 +927,7 @@ export default function LandingIndex() {
                           : a 48-hour hardware hackathon in San Francisco, California.
                         </li>
                         <li>
-                          <a
-                            href="https://youtu.be/kaEFv7e49mo?si=9gATZE-c3CqwsJF2"
-                            className="font-bold"
-                          >
+                          <a href="https://youtu.be/kaEFv7e49mo?si=9gATZE-c3CqwsJF2" className="font-bold">
                             Undercity
                           </a>
                           : a 4-day hardware hackathon at GitHub HQ!
@@ -907,17 +950,10 @@ export default function LandingIndex() {
                   a: (
                     <>
                       Ask us in{' '}
-                      <a
-                        href="https://hackclub.enterprise.slack.com/archives/C0ACJ290090"
-                        className="font-bold"
-                      >
+                      <a href="https://hackclub.enterprise.slack.com/archives/C0ACJ290090" className="font-bold">
                         #fallout-help
                       </a>{' '}
-                      on the{' '}
-                      <a href="http://slack.hackclub.com/">
-                        Hack Club Slack
-                      </a>
-                      , or email us at{' '}
+                      on the <a href="http://slack.hackclub.com/">Hack Club Slack</a>, or email us at{' '}
                       <a href="mailto:fallout@hackclub.com" className="underline">
                         fallout@hackclub.com
                       </a>
diff --git a/app/frontend/pages/mails/index.tsx b/app/frontend/pages/mails/index.tsx
index 8ca27f55..d858d5bb 100644
--- a/app/frontend/pages/mails/index.tsx
+++ b/app/frontend/pages/mails/index.tsx
@@ -22,8 +22,8 @@ function MailsIndex({ mails, is_modal }: PageProps) {
   const hasUnread = mails.some((m) => !m.is_read)
 
   const content = (
-    <div className="w-full h-full overflow-y-auto p-6">
-      <div className="flex items-center justify-between mb-6">
+    <div className="w-full h-full flex flex-col p-0 md:p-2 min-h-0">
+      <div className="flex items-center justify-between mb-4 shrink-0 px-4 pt-4 md:px-4 md:pt-4">
         <h1 className="font-bold text-2xl text-dark-brown">Your Mail</h1>
         {hasUnread && (
           <Button variant="link" onClick={handleReadAll} className="text-sm">
@@ -32,87 +32,91 @@ function MailsIndex({ mails, is_modal }: PageProps) {
         )}
       </div>
 
-      {mails.length === 0 ? (
-        <p className="text-brown text-center py-12">You don't have any mail yet! Check back later!</p>
-      ) : (
-        <div className="flex flex-col gap-2">
-          {mails.map((mail) => {
-            const isInvite = mail.source_type === 'CollaborationInvite' && mail.invite_id
-            const showUnread = isInvite || !mail.is_read
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4 md:px-4 md:pb-4">
+        {mails.length === 0 ? (
+          <p className="text-brown text-center py-12">You don't have any mail yet! Check back later!</p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {mails.map((mail) => {
+              const isInvite = mail.source_type === 'CollaborationInvite' && mail.invite_id
+              const showUnread = isInvite || !mail.is_read
 
-            return (
-              <div
-                key={mail.id}
-                className={`text-left p-4 border-2 bg-beige border-dark-brown ${isInvite ? '' : 'cursor-pointer hover:brightness-95 transition-all'}`}
-                onClick={isInvite ? undefined : () => visitModal(`/mails/${mail.id}`)}
-              >
-                <div className="flex items-start gap-3">
-                  {showUnread ? (
-                    <span className="mt-1.5 shrink-0 size-2.5 rounded-full bg-coral" />
-                  ) : (
-                    <span className="mt-1.5 shrink-0 size-2.5" />
-                  )}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      {mail.pinned && <span className="text-xs text-coral font-bold uppercase">Pinned</span>}
-                      <span className={`truncate ${showUnread ? 'text-dark-brown font-bold' : 'text-brown'}`}>
-                        {mail.summary}
-                      </span>
-                    </div>
-                    <span className="text-xs text-brown mt-1 block">{mail.created_at}</span>
-
-                    {isInvite && (
-                      <div className="flex gap-2 mt-3">
-                        <Button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            router.post(
-                              `/collaboration_invites/${mail.invite_id}/accept`,
-                              {},
-                              {
-                                preserveScroll: true,
-                                onSuccess: () => modal?.reload(),
-                              },
-                            )
-                          }}
-                          className="text-sm py-1 px-3"
-                        >
-                          Accept
-                        </Button>
-                        <Button
-                          type="button"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            router.post(
-                              `/collaboration_invites/${mail.invite_id}/decline`,
-                              {},
-                              {
-                                preserveScroll: true,
-                                onSuccess: () => modal?.reload(),
-                              },
-                            )
-                          }}
-                          className="text-sm py-1 px-3 bg-light-brown text-dark-brown"
-                        >
-                          Ignore
-                        </Button>
-                      </div>
+              return (
+                <div
+                  key={mail.id}
+                  className={`text-left p-4 border-2 bg-beige border-dark-brown ${isInvite ? '' : 'cursor-pointer hover:brightness-95 transition-all'}`}
+                  onClick={isInvite ? undefined : () => visitModal(`/mails/${mail.id}`)}
+                >
+                  <div className="flex items-start gap-3">
+                    {showUnread ? (
+                      <span className="mt-1.5 shrink-0 size-2.5 rounded-full bg-coral" />
+                    ) : (
+                      <span className="mt-1.5 shrink-0 size-2.5" />
                     )}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        {mail.pinned && <span className="text-xs text-coral font-bold uppercase">Pinned</span>}
+                        <span className={`truncate ${showUnread ? 'text-dark-brown font-bold' : 'text-brown'}`}>
+                          {mail.summary}
+                        </span>
+                      </div>
+                      <span className="text-xs text-brown mt-1 block">{mail.created_at}</span>
+
+                      {isInvite && (
+                        <div className="flex gap-2 mt-3">
+                          <Button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              router.post(
+                                `/collaboration_invites/${mail.invite_id}/accept`,
+                                {},
+                                {
+                                  preserveScroll: true,
+                                  onSuccess: () => modal?.reload(),
+                                },
+                              )
+                            }}
+                            className="text-sm py-1 px-3"
+                          >
+                            Accept
+                          </Button>
+                          <Button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              router.post(
+                                `/collaboration_invites/${mail.invite_id}/decline`,
+                                {},
+                                {
+                                  preserveScroll: true,
+                                  onSuccess: () => modal?.reload(),
+                                },
+                              )
+                            }}
+                            className="text-sm py-1 px-3 bg-light-brown text-dark-brown"
+                          >
+                            Ignore
+                          </Button>
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
+              )
+            })}
+          </div>
+        )}
+      </div>
     </div>
   )
 
   if (is_modal) {
     return (
       <Modal panelClasses="h-full" paddingClasses="max-w-2xl mx-auto" closeButton={false} maxWidth="3xl">
-        <Frame className="h-full">{content}</Frame>
+        <Frame className="h-full" showBorderOnMobile>
+          {content}
+        </Frame>
       </Modal>
     )
   }
diff --git a/app/frontend/pages/mails/show.tsx b/app/frontend/pages/mails/show.tsx
index e6adb95f..a95bcc1d 100644
--- a/app/frontend/pages/mails/show.tsx
+++ b/app/frontend/pages/mails/show.tsx
@@ -18,17 +18,22 @@ function MailShow({ mail, is_modal }: PageProps) {
   }
 
   const content = (
-    <div className="w-full h-full overflow-y-auto p-6">
-      <h1 className="font-bold text-2xl text-dark-brown mb-1">{mail.summary}</h1>
-      <p className="text-sm text-brown mb-6">{mail.created_at}</p>
+    <div className="w-full h-full flex flex-col p-0 md:p-2 min-h-0">
+      <div className="shrink-0 px-4 pt-4 md:px-4 md:pt-4">
+        <h1 className="font-bold text-2xl text-dark-brown mb-1">{mail.summary}</h1>
+        <p className="text-sm text-brown mb-6">{mail.created_at}</p>
+      </div>
 
-      {mail.content && (
-        <div className="prose prose-sm max-w-none text-dark-brown mb-6">
-          <Markdown remarkPlugins={[remarkGfm]}>{mail.content}</Markdown>
-        </div>
-      )}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 md:px-4">
+        {mail.content && (
+          <div className="prose prose-sm max-w-none text-dark-brown mb-6">
+            <Markdown remarkPlugins={[remarkGfm]}>{mail.content}</Markdown>
+          </div>
+        )}
+        {!mail.content && <p className="text-brown italic">No content</p>}
+      </div>
 
-      <div className="flex items-center gap-3 mt-6">
+      <div className="shrink-0 flex items-center gap-3 p-4 md:px-4">
         {mail.action_url && (
           <a
             href={mail.action_url}
@@ -49,7 +54,9 @@ function MailShow({ mail, is_modal }: PageProps) {
   if (is_modal) {
     return (
       <Modal panelClasses="h-full" paddingClasses="max-w-2xl mx-auto" closeButton={false} maxWidth="3xl">
-        <Frame className="h-full">{content}</Frame>
+        <Frame className="h-full" showBorderOnMobile>
+          {content}
+        </Frame>
       </Modal>
     )
   }
diff --git a/app/frontend/pages/onboarding/show.tsx b/app/frontend/pages/onboarding/show.tsx
index 4c773ae7..5a200c2a 100644
--- a/app/frontend/pages/onboarding/show.tsx
+++ b/app/frontend/pages/onboarding/show.tsx
@@ -1,8 +1,9 @@
 import { type ReactNode, useState } from 'react'
-import { router } from '@inertiajs/react'
+import { Link, router } from '@inertiajs/react'
 import DialogueStep from '../../components/onboarding/DialogueStep'
 import SingleChoiceStep from '../../components/onboarding/SingleChoiceStep'
 import MultiChoiceStep from '../../components/onboarding/MultiChoiceStep'
+import Button from '@/components/shared/Button'
 
 interface OnboardingStep {
   key: string
diff --git a/app/frontend/pages/path/index.tsx b/app/frontend/pages/path/index.tsx
index f1fb6052..09e7d38f 100644
--- a/app/frontend/pages/path/index.tsx
+++ b/app/frontend/pages/path/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import type { ReactNode } from 'react'
-import { Link, usePage } from '@inertiajs/react'
+import { Link, router, usePage } from '@inertiajs/react'
 import type { SharedProps } from '@/types'
 import { useModalStack, ModalLink } from '@inertiaui/modal-react'
 import Shop from '@/components/Shop'
@@ -66,7 +66,8 @@ export default function PathIndex() {
   const [autoOpenModal, setAutoOpenModal] = useState(() => {
     if (typeof window === 'undefined') return false
     const params = new URLSearchParams(window.location.search)
-    return params.get('open') === 'journal'
+    const open = params.get('open')
+    return open === 'journal' || open === 'projects'
   })
 
   const pathNodes = useMemo(
@@ -98,18 +99,40 @@ export default function PathIndex() {
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
+    const open = params.get('open')
+    const projectId = params.get('project_id')
+    const shouldNudgeDocs = params.get('nudge') === 'read_docs'
 
-    if (params.get('open') === 'journal') {
-      const projectId = params.get('project_id')
+    if (shouldNudgeDocs) {
+      setReadDocsNudge(true)
+    }
+
+    if (open === 'journal' || open === 'projects' || shouldNudgeDocs) {
       params.delete('open')
       params.delete('project_id')
+      params.delete('nudge')
       const newUrl = params.toString() ? `${window.location.pathname}?${params}` : window.location.pathname
       window.history.replaceState({}, '', newUrl)
+    }
+
+    if (open === 'journal') {
       const modalUrl = projectId ? `/projects/${projectId}/journal_entries/new` : '/journal_entries/new'
-      visitModal(modalUrl, { config: { duration: 0 } }).then(() => setAutoOpenModal(false))
+      visitModal(modalUrl, { config: { duration: 0 } }).finally(() => setAutoOpenModal(false))
+      return
     }
+
+    if (open === 'projects') {
+      visitModal('/projects').finally(() => setAutoOpenModal(false))
+      return
+    }
+
+    setAutoOpenModal(false)
   }, [])
 
+  function reloadPathProgress() {
+    router.reload({ only: ['has_projects', 'journal_entry_count', 'critter_variants'] })
+  }
+
   return (
     <>
       <FlashMessages />
@@ -139,7 +162,7 @@ export default function PathIndex() {
         <Tooltip>
           <TooltipTrigger>
             {has_projects && !authUser?.is_trial ? (
-              <ModalLink href="/projects" className="outline-0">
+              <ModalLink href="/projects" onProjectDeleted={reloadPathProgress} className="outline-0">
                 <img src="/icon/project.webp" alt="Projects" className="cursor-pointer w-25" />
               </ModalLink>
             ) : (
diff --git a/app/frontend/pages/projects/form.tsx b/app/frontend/pages/projects/form.tsx
index 4d03507d..9dec0e94 100644
--- a/app/frontend/pages/projects/form.tsx
+++ b/app/frontend/pages/projects/form.tsx
@@ -1,9 +1,12 @@
-import { useForm, usePage } from '@inertiajs/react'
-import { Modal, ModalLink } from '@inertiaui/modal-react'
+import { useState, useRef } from 'react'
+import { router, usePage } from '@inertiajs/react'
+import { Modal, useModal } from '@inertiaui/modal-react'
+import { ArrowLeftIcon } from '@heroicons/react/20/solid'
 import Frame from '@/components/shared/Frame'
 import Button from '@/components/shared/Button'
 import Input from '@/components/shared/Input'
 import TextArea from '@/components/shared/TextArea'
+import { performModalMutation } from '@/lib/modalMutation'
 import type { ProjectForm, SharedProps } from '@/types'
 
 export default function ProjectsForm({
@@ -12,113 +15,141 @@ export default function ProjectsForm({
   submit_url,
   method,
   is_modal,
+  onModalEvent,
 }: {
   project: ProjectForm
   title: string
   submit_url: string
   method: string
   is_modal: boolean
+  onModalEvent?: (event: string, ...args: any[]) => void
 }) {
-  const { errors } = usePage<SharedProps>().props
-
-  const form = useForm({
-    name: project.name,
-    description: project.description,
-    repo_link: project.repo_link,
-  })
+  const { errors: pageErrors } = usePage<SharedProps>().props
+  const modalRef = useRef<{ close: () => void }>(null)
+  const modal = useModal()
+  const [name, setName] = useState(project.name)
+  const [description, setDescription] = useState(project.description)
+  const [repoLink, setRepoLink] = useState(project.repo_link)
+  const [processing, setProcessing] = useState(false)
+  const [formErrors, setFormErrors] = useState<Record<string, string[]>>({})
+  const errors = Object.keys(formErrors).length > 0 ? formErrors : pageErrors
 
   function submit(e: React.FormEvent) {
     e.preventDefault()
-    if (method === 'patch') {
-      form.patch(submit_url)
-    } else {
-      form.post(submit_url)
+    if (processing) return
+    setProcessing(true)
+    setFormErrors({})
+    const data = { project: { name, description, repo_link: repoLink } }
+
+    if (!is_modal) {
+      const options = {
+        onFinish: () => setProcessing(false),
+      }
+
+      if (method === 'patch') {
+        router.patch(submit_url, data, options)
+      } else {
+        router.post(submit_url, data, options)
+      }
+
+      return
     }
+
+    void performModalMutation({
+      url: submit_url,
+      method: method === 'patch' ? 'patch' : 'post',
+      data,
+      modal,
+      modalRef,
+      successMessage: method === 'patch' ? 'Project updated.' : 'Project created.',
+      errorMessage: method === 'patch' ? 'Failed to update project.' : 'Failed to create project.',
+      successEvent: method === 'patch' ? 'projectSaved' : 'projectCreated',
+      onModalEvent,
+      onValidationError: setFormErrors,
+      onFinish: () => setProcessing(false),
+    })
   }
 
   const content = (
-    <div className="max-w-2xl mx-auto p-8">
-      <h1 className="font-bold text-4xl text-dark-brown mb-6">{title}</h1>
-
-      <form onSubmit={submit} className="space-y-4">
-        {Object.keys(errors).length > 0 && (
-          <div className="bg-coral/30 border-2 border-dark-brown text-dark-brown p-4 mb-4 rounded">
-            <ul>
-              {Object.entries(errors).map(([field, messages]) =>
-                messages.map((msg) => (
-                  <li key={`${field}-${msg}`}>
-                    {field} {msg}
-                  </li>
-                )),
-              )}
-            </ul>
-          </div>
+    <div className="w-full h-full flex flex-col mx-auto px-4 md:px-8 pt-4 md:pt-8 min-h-0">
+      <div className="flex items-center gap-4 mb-6 shrink-0">
+        {is_modal && (
+          <button
+            type="button"
+            onClick={() => modalRef.current?.close()}
+            className="cursor-pointer text-dark-brown hover:opacity-80 shrink-0"
+            aria-label="Back"
+          >
+            <ArrowLeftIcon className="w-8 h-8" />
+          </button>
         )}
+        <h1 className="font-bold text-3xl md:text-4xl text-dark-brown">{title}</h1>
+      </div>
 
-        <div>
-          <label htmlFor="name" className="block text-sm font-bold text-dark-brown mb-1">
-            Project name
-          </label>
-          <Input
-            type="text"
-            id="name"
-            value={form.data.name}
-            onChange={(e) => form.setData('name', e.target.value)}
-            required
-          />
-        </div>
+      <div className="flex-1 min-h-0 overflow-y-auto pb-4 md:pb-8 pr-2">
+        <form onSubmit={submit} className="space-y-4">
+          {Object.keys(errors).length > 0 && (
+            <div className="bg-coral/30 border-2 border-dark-brown text-dark-brown p-4 mb-4 rounded">
+              <ul>
+                {Object.entries(errors).map(([field, messages]) =>
+                  messages.map((msg) => (
+                    <li key={`${field}-${msg}`}>
+                      {field} {msg}
+                    </li>
+                  )),
+                )}
+              </ul>
+            </div>
+          )}
 
-        <div>
-          <label htmlFor="description" className="block text-sm font-bold text-dark-brown mb-1">
-            Description
-          </label>
-          <TextArea
-            id="description"
-            value={form.data.description}
-            onChange={(e) => form.setData('description', e.target.value)}
-            rows={4}
-          />
-        </div>
+          <div>
+            <label htmlFor="name" className="block text-sm font-bold text-dark-brown mb-1">
+              Project name
+            </label>
+            <Input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} required />
+          </div>
 
-        <div>
-          <label htmlFor="repo_link" className="block text-sm font-bold text-dark-brown mb-1">
-            GitHub repo link
-          </label>
-          <Input
-            type="url"
-            id="repo_link"
-            value={form.data.repo_link}
-            onChange={(e) => form.setData('repo_link', e.target.value)}
-            placeholder="https://github.com/..."
-          />
-        </div>
+          <div>
+            <label htmlFor="description" className="block text-sm font-bold text-dark-brown mb-1">
+              Description
+            </label>
+            <TextArea id="description" value={description} onChange={(e) => setDescription(e.target.value)} rows={4} />
+          </div>
 
-        <div className="flex gap-4 pt-2">
-          <Button type="submit" disabled={form.processing}>
-            {form.processing ? 'Saving...' : 'Save'}
-          </Button>
-          {project.id && is_modal ? (
-            <ModalLink
-              href={`/projects/${project.id}`}
-              replace
-              className="bg-brown text-light-brown border-2 border-dark-brown px-4 py-2 font-bold uppercase hover:opacity-80"
-            >
-              Cancel
-            </ModalLink>
-          ) : (
-            <Button variant="link" onClick={() => window.history.back()}>
-              Cancel
+          <div>
+            <label htmlFor="repo_link" className="block text-sm font-bold text-dark-brown mb-1">
+              GitHub repo link
+            </label>
+            <Input
+              type="url"
+              id="repo_link"
+              value={repoLink}
+              onChange={(e) => setRepoLink(e.target.value)}
+              placeholder="https://github.com/..."
+            />
+          </div>
+
+          <div className="pt-2 mb-2">
+            <Button type="submit" disabled={processing}>
+              {processing ? 'Saving...' : 'Save'}
             </Button>
-          )}
-        </div>
-      </form>
+          </div>
+        </form>
+      </div>
     </div>
   )
 
   if (is_modal) {
     return (
-      <Modal panelClasses="h-full" paddingClasses="max-w-5xl mx-auto" closeButton={false}>
-        <Frame className="h-full">{content}</Frame>
+      <Modal
+        ref={modalRef}
+        panelClasses="h-full max-h-none md:max-h-full max-md:w-full max-md:max-w-none max-md:overflow-hidden"
+        paddingClasses="p-0 md:max-w-5xl md:mx-auto"
+        closeButton={false}
+      >
+        <Frame className="h-full" showBorderOnMobile>
+          {content}
+        </Frame>
       </Modal>
     )
   }
diff --git a/app/frontend/pages/projects/index.tsx b/app/frontend/pages/projects/index.tsx
index e280e7e4..8506b1ef 100644
--- a/app/frontend/pages/projects/index.tsx
+++ b/app/frontend/pages/projects/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react'
 import { router } from '@inertiajs/react'
-import { Modal, ModalLink } from '@inertiaui/modal-react'
+import { Modal, ModalLink, useModal } from '@inertiaui/modal-react'
 import { MagnifyingGlassIcon, BookOpenIcon, ClockIcon, FilmIcon } from '@heroicons/react/16/solid'
 import { ArrowLeftIcon, PlusIcon } from '@heroicons/react/20/solid'
 import Frame from '@/components/shared/Frame'
@@ -22,28 +22,47 @@ export default function ProjectsIndex({
   pagy,
   query,
   is_modal,
+  onModalEvent,
 }: {
   projects: ProjectCard[]
   pagy: PagyProps
   query: string
   is_modal: boolean
+  onModalEvent?: (event: string, ...args: any[]) => void
 }) {
   const modalRef = useRef<{ close: () => void }>(null)
+  const modal = useModal()
   const [searchQuery, setSearchQuery] = useState(query)
 
+  function reloadProjects() {
+    const projectListProps = ['projects', 'pagy', 'query', 'is_modal']
+
+    if (modal) {
+      modal.reload({ only: projectListProps })
+      return
+    }
+
+    router.reload({ only: projectListProps })
+  }
+
+  function handleProjectDeleted() {
+    reloadProjects()
+    onModalEvent?.('projectDeleted')
+  }
+
   function search(e: React.FormEvent) {
     e.preventDefault()
     router.get('/projects', { query: searchQuery }, { preserveState: true })
   }
 
   const content = (
-    <div className="w-full mx-auto p-4 md:p-8">
-      <div className="flex flex-wrap items-center justify-between mb-6 gap-4">
+    <div className="w-full h-full mx-auto p-0 md:p-4 flex flex-col min-h-0">
+      <div className="flex flex-wrap items-center justify-between mb-6 gap-4 shrink-0 px-2 md:px-4 pt-2 md:pt-4">
         <div className="flex items-center gap-4">
           {is_modal && (
             <button
               onClick={() => modalRef.current?.close()}
-              className="md:hidden cursor-pointer text-dark-brown hover:opacity-80 shrink-0"
+              className="cursor-pointer text-dark-brown hover:opacity-80 shrink-0"
               aria-label="Back"
             >
               <ArrowLeftIcon className="w-8 h-8" />
@@ -51,9 +70,9 @@ export default function ProjectsIndex({
           )}
           <h1 className="font-bold text-3xl md:text-4xl text-dark-brown">My Projects</h1>
         </div>
-        <ModalLink href="/projects/new">
-          <button 
-            className="bg-dark-brown text-light-brown rounded-full w-12 h-12 flex items-center justify-center hover:opacity-90 transition-opacity cursor-pointer shadow-md" 
+        <ModalLink href="/projects/new" onProjectCreated={reloadProjects}>
+          <button
+            className="bg-dark-brown text-light-brown rounded-full w-12 h-12 flex items-center justify-center hover:opacity-90 transition-opacity cursor-pointer shadow-md"
             aria-label="New Project"
           >
             <PlusIcon className="w-10 h-10" />
@@ -61,80 +80,66 @@ export default function ProjectsIndex({
         </ModalLink>
       </div>
 
-      {/* <form onSubmit={search} className="mb-6">
-        <div className="flex gap-2">
-          <Input
-            type="search"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Search projects..."
-            className="flex-1"
-          />
-          <Button type="submit" className="flex items-center gap-1.5">
-            <MagnifyingGlassIcon className="w-4 h-4" />
-            Search
-          </Button>
-        </div>
-      </form> */}
-
-      {projects.length > 0 ? (
-        <>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {projects.map((project) => (
-              <ModalLink
-                key={project.id}
-                href={`/projects/${project.id}`}
-                replace
-                className="text-left rounded-md overflow-hidden p-3 bg-brown cursor-pointer hover:shadow-lg transition-shadow outline-0"
-              >
-                {project.cover_image_url ? (
-                  <div
-                    className="aspect-video bg-light-brown rounded overflow-hidden bg-center bg-cover bg-no-repeat"
-                    style={{ backgroundImage: `url(${project.cover_image_url})` }}
-                  />
-                ) : (
-                  <div className="aspect-video bg-light-brown rounded flex items-center justify-center">
-                    <span className="text-dark-brown text-xl">No image yet</span>
-                  </div>
-                )}
-                <div className="pt-3 pb-2 px-2">
-                  <div className="flex items-center gap-2">
-                    <p className="font-bold text-white truncate text-xl">{project.name}</p>
-                    {project.is_collaborator && (
-                      <span className="text-[10px] uppercase font-bold bg-dark-brown text-light-brown px-1.5 py-0.5 rounded-full shrink-0">
-                        Collaborator
-                      </span>
-                    )}
-                  </div>
-                  {project.description && (
-                    <p className="text-xs text-light-brown mt-1 line-clamp-2">{project.description}</p>
+      <div className="flex-1 min-h-0 overflow-y-auto px-2 md:px-4 pb-2 md:pb-4">
+        {projects.length > 0 ? (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {projects.map((project) => (
+                <ModalLink
+                  key={project.id}
+                  href={`/projects/${project.id}`}
+                  onProjectDeleted={handleProjectDeleted}
+                  onProjectSaved={reloadProjects}
+                  className="text-left rounded-md overflow-hidden p-3 bg-brown cursor-pointer hover:shadow-lg transition-shadow outline-0"
+                >
+                  {project.cover_image_url ? (
+                    <div
+                      className="aspect-video bg-light-brown rounded overflow-hidden bg-center bg-cover bg-no-repeat"
+                      style={{ backgroundImage: `url(${project.cover_image_url})` }}
+                    />
+                  ) : (
+                    <div className="aspect-video bg-light-brown rounded flex items-center justify-center">
+                      <span className="text-dark-brown text-xl">No image yet</span>
+                    </div>
                   )}
-                  <div className="flex items-center gap-3 mt-2 text-xs text-light-brown">
-                    <span className="flex items-center gap-1">
-                      <BookOpenIcon className="w-3.5 h-3.5" />
-                      {project.journal_entries_count} {project.journal_entries_count === 1 ? 'entry' : 'entries'}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <ClockIcon className="w-3.5 h-3.5" />
-                      {formatTime(project.time_logged)}
-                    </span>
-                    <span className="flex items-center gap-1">
-                      <FilmIcon className="w-3.5 h-3.5" />
-                      {project.recordings_count} {project.recordings_count === 1 ? 'recording' : 'recordings'}
-                    </span>
+                  <div className="pt-3 pb-2 px-2">
+                    <div className="flex items-center gap-2">
+                      <p className="font-bold text-white truncate text-xl">{project.name}</p>
+                      {project.is_collaborator && (
+                        <span className="text-[10px] uppercase font-bold bg-dark-brown text-light-brown px-1.5 py-0.5 rounded-full shrink-0">
+                          Collaborator
+                        </span>
+                      )}
+                    </div>
+                    {project.description && (
+                      <p className="text-xs text-light-brown mt-1 line-clamp-2">{project.description}</p>
+                    )}
+                    <div className="flex items-center gap-3 mt-2 text-xs text-light-brown">
+                      <span className="flex items-center gap-1">
+                        <BookOpenIcon className="w-3.5 h-3.5" />
+                        {project.journal_entries_count} {project.journal_entries_count === 1 ? 'entry' : 'entries'}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <ClockIcon className="w-3.5 h-3.5" />
+                        {formatTime(project.time_logged)}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <FilmIcon className="w-3.5 h-3.5" />
+                        {project.recordings_count} {project.recordings_count === 1 ? 'recording' : 'recordings'}
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </ModalLink>
-            ))}
-          </div>
-
-          <div className="mt-6">
-            <Pagination pagy={pagy} />
-          </div>
-        </>
-      ) : (
-        <p className="text-dark-brown text-center py-8">No projects yet.</p>
-      )}
+                </ModalLink>
+              ))}
+            </div>
+            <div className="mt-6">
+              <Pagination pagy={pagy} />
+            </div>
+          </>
+        ) : (
+          <p className="text-dark-brown text-center py-8">No projects yet.</p>
+        )}
+      </div>
     </div>
   )
 
@@ -142,12 +147,14 @@ export default function ProjectsIndex({
     return (
       <Modal
         ref={modalRef}
-        panelClasses="h-full max-h-none md:max-h-full max-md:w-full max-md:max-w-none max-md:bg-light-brown max-md:overflow-hidden"
+        panelClasses="h-full max-h-none md:max-h-full max-md:w-full max-md:max-w-none max-md:overflow-hidden"
         paddingClasses="p-0 md:max-w-5xl md:mx-auto"
         closeButton={false}
         maxWidth="7xl"
       >
-        <Frame className="h-full">{content}</Frame>
+        <Frame className="h-full" showBorderOnMobile>
+          {content}
+        </Frame>
       </Modal>
     )
   }
diff --git a/app/frontend/pages/projects/onboarding/index.tsx b/app/frontend/pages/projects/onboarding/index.tsx
index 3fd7bf4f..45f40316 100644
--- a/app/frontend/pages/projects/onboarding/index.tsx
+++ b/app/frontend/pages/projects/onboarding/index.tsx
@@ -1,15 +1,14 @@
-import { type ReactNode, useState, useRef } from 'react'
+import { type ReactNode, useState, useRef, useEffect } from 'react'
 import { router } from '@inertiajs/react'
 import { Modal } from '@inertiaui/modal-react'
 import Frame from '@/components/shared/Frame'
 import Button from '@/components/shared/Button'
 import Input from '@/components/shared/Input'
 import TextArea from '@/components/shared/TextArea'
+import SpeechBubble from '@/components/onboarding/SpeechBubble'
 import { Pagination, PaginationPage } from '@/components/shared/Pagination'
-import { Label } from '@headlessui/react'
 
 function ProjectsOnboarding({ is_modal }: { is_modal: boolean }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
   const [processing, setProcessing] = useState(false)
@@ -20,7 +19,7 @@ function ProjectsOnboarding({ is_modal }: { is_modal: boolean }) {
     if (processing) return
     setProcessing(true)
     const data: Record<string, string> = { name, description }
-    if (is_modal) data.return_to = 'path'
+    data.return_to = is_modal ? 'path' : 'path_projects'
     router.post('/projects', data, {
       onFinish: () => setProcessing(false),
       onSuccess: () => modalRef.current?.close(),
@@ -30,133 +29,162 @@ function ProjectsOnboarding({ is_modal }: { is_modal: boolean }) {
   const content = (
     <form onSubmit={submit} className="w-full h-full mx-auto p-8">
       <Pagination className="flex flex-col h-full">
+        <PaginationPage>{({ next }) => <SpinPhase onComplete={next} />}</PaginationPage>
+
         <PaginationPage>
-          {({ next }) => (
-            <div className="space-y-5 text-xl flex flex-col h-full">
-              <h2 className="font-outfit text-3xl font-semibold">Welcome to Fallout!!</h2>
-              <div className="space-y-4">
-                <p>
-                  This is a walkthrough to get your started!
-                  <br />
-                  We've made a really cool video showing how Fallout works. Give it a watch!
-                </p>
-              </div>
-              <div className="grow min-h-0 flex items-center justify-center">
-                <video
-                  ref={videoRef}
-                  src="/intro.mp4"
-                  className="max-w-full max-h-full rounded-lg"
-                  autoPlay
-                  playsInline
-                  controls
-                />
-              </div>
-              <Button type="button" onClick={next} className="ml-auto">
-                Continue
-              </Button>
-            </div>
-          )}
+          {({ next }) => <DialogueScene prompt="Oh. It's you again?" onContinue={next} />}
         </PaginationPage>
 
         <PaginationPage>
           {({ next, prev }) => (
-            <div className="space-y-5 text-xl flex flex-col h-full overflow-scroll">
-              <h2 className="font-outfit text-3xl font-semibold">Start your first project</h2>
-              <div className="space-y-4">
-                <p>Build as many hardware projects as you wish, and we'll help you make it real.</p>
-                <div className="flex justify-between">
-                  <div>
-                    <p>However, there are some things we look for!</p>
-                    <ul className="list-disc ml-5 pt-2 min-w-90">
-                      <li>We value effort more than technical ability.</li>
-                      <li>Be original and personal. You don't need to solve climate change.</li>
-                      <li>Most of your project should be physical and hands-on.</li>
-                      <li>It should be by you, not AI, or a tutorial online.</li>
-                    </ul>
+            <DialogueScene prompt="I was woken up from my nap to help you start" onContinue={next} onBack={prev} />
+          )}
+        </PaginationPage>
+
+        <PaginationPage>{({ next, prev }) => <DialogueScene angry onContinue={next} onBack={prev} />}</PaginationPage>
+
+        <PaginationPage>
+          {({ next, prev, currentPage, totalPages }) => (
+            <ContentPhase currentPage={currentPage} totalPages={totalPages} onContinue={next} onBack={prev}>
+              <div className="flex flex-col w-full max-w-4xl mx-auto h-full">
+                <div className="flex items-start gap-3 mb-4">
+                  <img src="/onboarding/chinese_heidi.webp" className="w-42 lg:w-56 h-auto" />
+
+                  <div className="h-full pt-8">
+                    <SpeechBubble dir="left">
+                      watch this!! a 3 min overview of the ENTIRE program -- you'll regret not watching it
+                    </SpeechBubble>
                   </div>
-                  <div className="hidden lg:flex items-center justify-center">
-                    <img src="/onboarding/example.webp" alt="Example Projects" className="w-60" />
+                </div>
+
+                <div className="flex-1 flex items-center justify-center pb-12">
+                  <div className="w-full border-2 border-dark-brown rounded-2xl overflow-hidden bg-white aspect-video">
+                    <video src="/intro.mp4" className="w-full h-full object-contain" autoPlay controls playsInline />
                   </div>
                 </div>
-                <p>
-                  We know starting your first project is hard. We have a community to help you!
-                  <br />
-                  There's a good chance your first idea isn't great, but just jot something down!
-                </p>
-              </div>
-              <div className="grow flex flex-col">
-                <label className="text-lg mb-2">
-                  <span className="font-bold">Describe what you want to build.</span> You'll be able to edit this later.
-                </label>
-                <TextArea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  className="w-full min-h-10 h-full resize-y px-3 py-2 text-base"
-                />
               </div>
-              <div className="flex justify-between">
-                <Button variant="link" type="button" onClick={prev}>
-                  Back
-                </Button>
-                <Button type="button" onClick={next} disabled={!description.trim()}>
-                  Continue
-                </Button>
-              </div>
-            </div>
+            </ContentPhase>
           )}
         </PaginationPage>
 
         <PaginationPage>
-          {({ prev }) => (
-            <div className="space-y-5 text-xl flex flex-col h-full overflow-scroll">
-              <h2 className="font-outfit text-3xl font-semibold">Here's how it'll work</h2>
-              <div className="space-y-4">
-                <p>We need to make sure the time you're spending is real.</p>
-                <p>You'll be time-lapsing your progress, and journaling.</p>
-                <p>
-                  Journaling is a great practice for your future self and others hoping to learn from your experiences.
-                  Don't use AI. AI doesn't know your experiences.
-                </p>
-                <div className="flex justify-between">
-                  <div className="space-y-4">
-                    <p>
-                      Screen record and film everything that's hands-on. We have more information in our documentation!
-                      (check the backpack icon on the main page →)
-                    </p>
-                    <p>
-                      We've written a lot of helpful notes in the documentation section.
-                      <br />
-                      Make sure to give it a read after this: (backpack icon on the main page →)
-                    </p>
+          {({ next, prev, currentPage, totalPages }) => (
+            <ContentPhase
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onContinue={next}
+              continueDisabled={!description.trim()}
+              onBack={prev}
+            >
+              <div className="flex flex-col gap-6 lg:gap-8 w-full max-w-4xl mx-auto my-auto">
+                <div className="relative mt-8 lg:mt-12">
+                  <div className="mb-8 pb-2 flex flex-col gap-8 md:pb-0 md:mb-6 md:flex-row md:items-start md:justify-between md:gap-4">
+                    <h2 className="font-outfit text-3xl lg:text-5xl font-bold lg:pr-96">START YOUR FIRST PROJECT!</h2>
+                    <PosterCollage className="pointer-events-none relative z-10 w-56 aspect-video shrink-0 mx-auto md:mx-0 lg:hidden" />
                   </div>
-                  <div className="hidden lg:flex justify-center items-center">
-                    <a href="/docs" target="_blank" rel="noopener noreferrer">
-                      <img src="/icon/guide.webp" alt="Guide Icon" className="w-50" />
-                    </a>
+
+                  <div className="relative">
+                    <PosterCollage className="pointer-events-none absolute right-0 -top-24 -right-8 z-10 hidden lg:block w-80 aspect-video" />
+
+                    <div className="border-2 border-dark-brown rounded-2xl bg-white p-6 lg:p-8 pr-6 lg:pr-72 text-base lg:text-xl">
+                      <p className="mb-4">Build as many hardware projects as you want!</p>
+                      <ul className="list-disc ml-6 space-y-2">
+                        <li>We value effort more than technical ability (LITTLE TO NO AI)</li>
+                        <li>
+                          <span className="font-bold">Be original!</span> Don't be a direct copy of tutorials
+                        </li>
+                        <li>
+                          <span className="font-bold">Be personal.</span> You don't need to solve climate change.
+                        </li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
+
+                <div className="flex flex-col gap-3 mt-4">
+                  <h3 className="font-outfit text-2xl lg:text-3xl font-bold">WHAT DO YOU WANT TO BUILD?</h3>
+                  <TextArea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="DESCRIBE IN 2-3 SENTENCES"
+                    className="rounded-2xl w-full h-32 lg:h-40 resize-none text-lg lg:text-xl p-4 lg:p-6"
+                  />
+                  <p className="text-base lg:text-xl text-brown">Jot something down! You can edit later</p>
+                </div>
               </div>
-              <div className="grow h-full flex flex-col">
-                <label className="text-lg mb-2">
-                  <span className="font-bold">Give your project a fun name.</span> You'll be able to edit this later.
-                </label>
-                <Input
-                  type="text"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="text-base px-3 py-2"
-                  placeholder=""
-                />
-              </div>
-              <div className="flex justify-between">
-                <Button variant="link" type="button" onClick={prev}>
-                  Back
-                </Button>
-                <Button type="submit" disabled={!name.trim() || processing}>
-                  {processing ? 'Creating...' : "Let's start!"}
-                </Button>
+            </ContentPhase>
+          )}
+        </PaginationPage>
+
+        <PaginationPage>
+          {({ prev, currentPage, totalPages }) => (
+            <ContentPhase
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onBack={prev}
+              submitLabel={processing ? 'Creating...' : "Let's start!"}
+              submitDisabled={!name.trim() || !description.trim() || processing}
+            >
+              <div className="flex flex-col gap-6 lg:gap-8 w-full max-w-4xl mx-auto my-auto">
+                <h2 className="font-outfit text-3xl lg:text-5xl font-bold">HERE'S HOW IT WORKS</h2>
+
+                <div className="relative border-2 border-dark-brown rounded-2xl bg-white p-6 lg:p-8 text-base lg:text-xl">
+                  <p className="mb-4">We need to make sure the time is real.</p>
+                  <p className="mb-4">
+                    So... You'll be <span className="font-bold">timelapsing + journaling</span>!
+                  </p>
+                  <p className="leading-relaxed mb-4">
+                    Please read our{' '}
+                    <span className="relative inline-block">
+                      <a
+                        href="/docs/requirements/what-is-shipping"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline font-bold hover:text-brown transition-colors"
+                      >
+                        shipping & journaling guidelines
+                      </a>
+                      <span
+                        className="mt-7 hidden lg:flex items-center gap-2 absolute left-[102%] top-1/2 -translate-y-1/2 cursor-pointer w-max hover:opacity-80 transition-opacity"
+                        onClick={() => window.open('/docs', '_blank')}
+                      >
+                        <img src="/onboarding/arrow.svg" alt="" className="w-12" />
+                        <img
+                          src="/onboarding/guide.png"
+                          alt="Guide"
+                          className="w-28 hover:-translate-y-1 transition-transform"
+                        />
+                      </span>
+                    </span>
+                  </p>
+                  <p className="">Actually, take 15 min and just read everything.</p>
+
+                  <div
+                    className="flex lg:hidden items-center gap-2 mt-4 cursor-pointer hover:opacity-80 transition-opacity w-max"
+                    onClick={() => window.open('/docs', '_blank')}
+                  >
+                    <img src="/onboarding/arrow.svg" alt="" className="w-8 sm:w-10" />
+                    <img
+                      src="/onboarding/guide.png"
+                      alt="Guide"
+                      className="w-16 sm:w-20 hover:-translate-y-1 transition-transform"
+                    />
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-3 mt-4">
+                  <h3 className="font-outfit text-2xl lg:text-3xl font-bold">GIVE YOUR PROJECT A FUN NAME</h3>
+                  <Input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="My Awesome Project"
+                    className="rounded-2xl text-lg lg:text-xl p-4 lg:p-6"
+                  />
+                  <p className="text-base lg:text-xl text-brown">You'll be able to edit this later.</p>
+                </div>
               </div>
-            </div>
+            </ContentPhase>
           )}
         </PaginationPage>
       </Pagination>
@@ -166,7 +194,9 @@ function ProjectsOnboarding({ is_modal }: { is_modal: boolean }) {
   if (is_modal) {
     return (
       <Modal ref={modalRef} panelClasses="h-full" paddingClasses="max-w-5xl mx-auto" closeButton={false} maxWidth="7xl">
-        <Frame className="h-full">{content}</Frame>
+        <Frame className="h-full" showBorderOnMobile>
+          {content}
+        </Frame>
       </Modal>
     )
   }
@@ -177,3 +207,410 @@ function ProjectsOnboarding({ is_modal }: { is_modal: boolean }) {
 ProjectsOnboarding.layout = (page: ReactNode) => page
 
 export default ProjectsOnboarding
+
+function PosterCollage({ className }: { className: string }) {
+  return (
+    <div className={className}>
+      <img
+        src="/onboarding/icepizero.png"
+        alt=""
+        className="absolute bottom-0 left-0 w-[45%] rotate-[-20deg] rounded shadow-md z-0"
+      />
+      <img
+        src="/onboarding/jesuskeyboard.png"
+        alt=""
+        className="absolute bottom-[10%] left-[25%] w-[45%] rotate-[2deg] rounded shadow-lg z-10"
+      />
+      <img
+        src="/onboarding/minimaimai.png"
+        alt=""
+        className="absolute top-0 right-0 w-[45%] rotate-[18deg] rounded shadow-xl z-20"
+      />
+    </div>
+  )
+}
+
+function SpinPhase({ onComplete }: { onComplete: () => void }) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(true), 50)
+    return () => clearTimeout(timer)
+  }, [])
+
+  useEffect(() => {
+    const video = videoRef.current
+    const audio = audioRef.current
+    if (!video) return
+
+    video.play()
+
+    const playAudio = () => {
+      audio?.play().catch(() => {})
+    }
+
+    audio?.play().catch(() => {
+      document.addEventListener('click', playAudio, { once: true })
+    })
+
+    const handleEnded = () => onComplete()
+    video.addEventListener('ended', handleEnded, { once: true })
+    return () => {
+      video.removeEventListener('ended', handleEnded)
+      document.removeEventListener('click', playAudio)
+    }
+  }, [onComplete])
+
+  return (
+    <div className="fixed inset-0 z-50 bg-dark-brown flex items-center justify-center">
+      <video
+        ref={videoRef}
+        src="/spin_animation.mp4"
+        muted
+        playsInline
+        className="absolute inset-0 h-full w-full object-cover transition-opacity duration-1000"
+        style={{ opacity: visible ? 1 : 0 }}
+      />
+      <audio ref={audioRef} src="/staraudio.mp3" preload="auto" />
+    </div>
+  )
+}
+
+function Scene() {
+  return (
+    <>
+      <div className="absolute bottom-0 left-0 bg-light-green h-[45%] w-full" />
+
+      <div className="absolute top-0 left-0 right-0 h-[55%] overflow-hidden pointer-events-none">
+        <img src="/clouds/4.webp" alt="" className="absolute bottom-0 left-0 h-20 md:h-36 -translate-x-1/3" />
+        <img src="/clouds/1.webp" alt="" className="absolute bottom-0 left-40 h-20 md:h-32 translate-x-1/3" />
+        <img src="/clouds/2.webp" alt="" className="absolute bottom-0 right-0 -translate-x-5/6 h-20 md:h-28" />
+        <img src="/clouds/3.webp" alt="" className="absolute bottom-0 right-0 h-20 md:h-36 translate-x-1/3" />
+      </div>
+
+      <img src="/grass/1.svg" className="absolute bottom-[32%] left-[3%] z-1 w-8" />
+      <img src="/grass/2.svg" className="absolute bottom-[22%] left-[12%] z-1 w-10" />
+      <img src="/grass/3.svg" className="absolute bottom-[10%] left-[8%] z-1 w-9" />
+      <img src="/grass/4.svg" className="absolute bottom-[28%] left-[28%] z-1 w-7" />
+      <img src="/grass/5.svg" className="absolute bottom-[15%] left-[22%] z-1 w-8" />
+      <img src="/grass/6.svg" className="absolute bottom-[8%] left-[35%] z-1 w-7" />
+      <img src="/grass/7.svg" className="absolute bottom-[30%] left-[45%] z-1 w-8" />
+      <img src="/grass/8.svg" className="absolute bottom-[18%] left-[50%] z-1 w-9" />
+      <img src="/grass/9.svg" className="absolute bottom-[5%] left-[55%] z-1 w-7" />
+      <img src="/grass/10.svg" className="absolute bottom-[25%] right-[20%] z-1 w-8" />
+      <img src="/grass/11.svg" className="absolute bottom-[12%] right-[12%] z-1 w-10" />
+      <img src="/grass/1.svg" className="absolute bottom-[35%] right-[8%] z-1 w-7" />
+      <img src="/grass/3.svg" className="absolute bottom-[6%] right-[3%] z-1 w-8" />
+      <img src="/grass/5.svg" className="absolute bottom-[20%] right-[30%] z-1 w-6 hidden lg:block" />
+      <img src="/grass/7.svg" className="absolute bottom-[3%] left-[42%] z-1 w-7 hidden lg:block" />
+    </>
+  )
+}
+
+function ContentPhase({
+  currentPage,
+  totalPages,
+  onContinue,
+  continueDisabled = false,
+  onBack,
+  submitLabel,
+  submitDisabled = false,
+  children,
+}: {
+  currentPage: number
+  totalPages: number
+  onContinue?: () => void
+  continueDisabled?: boolean
+  onBack?: () => void
+  submitLabel?: string
+  submitDisabled?: boolean
+  children: ReactNode
+}) {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(true), 50)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <div className="fixed inset-0 z-50 p-16 bg-light-blue flex flex-col text-dark-brown overflow-hidden">
+      <Scene />
+
+      <div className="relative z-10 px-8 pt-6">
+        <style>{`
+          @keyframes progress-stripe {
+            0% { background-position: 0 0; }
+            100% { background-position: 42.43px 0; }
+          }
+        `}</style>
+        <div className="w-full max-w-4xl mx-auto h-8 bg-white rounded-full border-3 border-gray-950 border-b-[6px] overflow-hidden relative">
+          <div
+            className="h-full bg-blue transition-all duration-500 relative rounded-full"
+            style={{ width: `${Math.round((currentPage / totalPages) * 100)}%` }}
+          >
+            <div
+              className="absolute inset-0 opacity-30 mix-blend-overlay"
+              style={{
+                backgroundImage:
+                  'repeating-linear-gradient(-45deg, transparent, transparent 15px, white 15px, white 30px)',
+                backgroundSize: '42.43px 42.43px',
+                animation: 'progress-stripe 1.5s linear infinite',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        className="relative z-10 flex-1 flex flex-col px-8 py-12 overflow-y-auto transition-opacity duration-1000"
+        style={{ opacity: visible ? 1 : 0 }}
+      >
+        {children}
+      </div>
+
+      <div className="relative z-20 flex items-center justify-between px-8 pb-4">
+        {onBack ? (
+          <button
+            className="flex items-center gap-3 text-2xl lg:text-3xl font-bold cursor-pointer hover:text-brown transition-colors"
+            onClick={onBack}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              className="w-8 h-8 lg:w-10 lg:h-10"
+            >
+              <path
+                fillRule="evenodd"
+                d="M17 10a.75.75 0 0 1-.75.75H5.612l4.158 3.96a.75.75 0 1 1-1.04 1.08l-5.5-5.25a.75.75 0 0 1 0-1.08l5.5-5.25a.75.75 0 1 1 1.04 1.08L5.612 9.25H16.25A.75.75 0 0 1 17 10Z"
+                clipRule="evenodd"
+              />
+            </svg>
+            Go back
+          </button>
+        ) : (
+          <div />
+        )}
+
+        {submitLabel ? (
+          <button
+            type="submit"
+            disabled={submitDisabled}
+            className="py-4 px-10 lg:py-5 lg:px-14 bg-dark-brown text-light-brown rounded-2xl font-bold text-xl lg:text-2xl hover:bg-light-brown hover:text-dark-brown transition-all border-dark-brown border-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {submitLabel}
+          </button>
+        ) : onContinue ? (
+          <button
+            disabled={continueDisabled}
+            className="py-4 px-10 lg:py-5 lg:px-14 bg-dark-brown text-light-brown rounded-2xl font-bold text-xl lg:text-2xl hover:bg-light-brown hover:text-dark-brown transition-all border-dark-brown border-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            onClick={continueDisabled ? undefined : onContinue}
+          >
+            continue
+          </button>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function DialogueScene({
+  prompt = null,
+  angry = false,
+  onContinue,
+  onBack,
+}: {
+  prompt?: string | null
+  angry?: boolean
+  onContinue: () => void
+  onBack?: () => void
+}) {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(true), 50)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <div className="fixed inset-0 z-50 bg-light-blue flex flex-col items-center text-dark-brown overflow-hidden">
+      <Scene />
+
+      <section
+        className="relative z-10 w-full flex-1 flex justify-center items-center flex-col transition-opacity duration-1000"
+        style={{ opacity: visible ? 1 : 0 }}
+      >
+        {prompt ? (
+          <SpeechBubble text={prompt} />
+        ) : (
+          <div className="invisible">
+            <SpeechBubble text="." />
+          </div>
+        )}
+
+        <div className="relative">
+          <img src="/onboarding/chinese_heidi.webp" className="w-60 lg:w-72 max-w-full h-auto" />
+          {angry && (
+            <img src="/onboarding/anger.svg" className="absolute top-[8%] left-1/2 -translate-x-1/2 w-16 lg:w-20" />
+          )}
+        </div>
+      </section>
+
+      {onBack && (
+        <button
+          className="z-20 absolute bottom-4 left-4 text-lg underline cursor-pointer flex items-center h-12"
+          onClick={onBack}
+        >
+          go back
+        </button>
+      )}
+
+      <button
+        className="z-20 absolute bottom-6 right-6 lg:bottom-10 lg:right-10 py-4 px-10 lg:py-5 lg:px-14 bg-dark-brown text-light-brown rounded-2xl font-bold text-xl lg:text-2xl hover:bg-light-brown hover:text-dark-brown transition-all border-dark-brown border-2"
+        style={{ opacity: visible ? 1 : 0, transitionDuration: '1000ms' }}
+        onClick={onContinue}
+      >
+        continue
+      </button>
+    </div>
+  )
+}
+
+/* commented out for reference) ------
+import Input from '@/components/shared/Input'
+import TextArea from '@/components/shared/TextArea'
+import { Label } from '@headlessui/react'
+
+<PaginationPage>
+  {({ next }) => (
+    <div className="space-y-5 text-xl flex flex-col h-full">
+      <h2 className="font-outfit text-3xl font-semibold">Welcome to Fallout!!</h2>
+      <div className="space-y-4">
+        <p>
+          This is a walkthrough to get your started!
+          <br />
+          We've made a really cool video showing how Fallout works. Give it a watch!
+        </p>
+      </div>
+      <div className="grow min-h-0 flex items-center justify-center">
+        <video
+          ref={videoRef}
+          src="/intro.mp4"
+          className="max-w-full max-h-full rounded-lg"
+          autoPlay
+          playsInline
+          controls
+        />
+      </div>
+      <Button type="button" onClick={next} className="ml-auto">
+        Continue
+      </Button>
+    </div>
+  )}
+</PaginationPage>
+
+<PaginationPage>
+  {({ next, prev }) => (
+    <div className="space-y-5 text-xl flex flex-col h-full">
+      <h2 className="font-outfit text-3xl font-semibold">Start your first project</h2>
+      <div className="space-y-4">
+        <p>Build as many hardware projects as you wish, and we'll help you make it real.</p>
+        <div className="flex justify-between">
+          <div>
+            <p>However, there are some things we look for!</p>
+            <ul className="list-disc ml-5 pt-2 min-w-90">
+              <li>We value effort more than technical ability.</li>
+              <li>Be original and personal. You don't need to solve climate change.</li>
+              <li>Most of your project should be physical and hands-on.</li>
+              <li>It should be by you, not AI, or a tutorial online.</li>
+            </ul>
+          </div>
+          <div className="hidden lg:flex items-center justify-center">
+            <img src="/onboarding/example.webp" alt="Example Projects" className="w-60" />
+          </div>
+        </div>
+        <p>
+          We know starting your first project is hard. We have a community to help you!
+          <br />
+          There's a good chance your first idea isn't great, but just jot something down!
+        </p>
+      </div>
+      <div className="grow min-h-0 flex flex-col">
+        <label className="text-lg mb-2">
+          <span className="font-bold">Describe what you want to build.</span> You'll be able to edit this later.
+        </label>
+        <TextArea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          className="w-full h-full resize-y px-3 py-2 text-base"
+        />
+      </div>
+      <div className="flex justify-between">
+        <Button variant="link" type="button" onClick={prev}>
+          Back
+        </Button>
+        <Button type="button" onClick={next} disabled={!description.trim()}>
+          Continue
+        </Button>
+      </div>
+    </div>
+  )}
+</PaginationPage>
+
+<PaginationPage>
+  {({ prev }) => (
+    <div className="space-y-5 text-xl flex flex-col h-full">
+      <h2 className="font-outfit text-3xl font-semibold">Here's how it'll work</h2>
+      <div className="space-y-4">
+        <p>We need to make sure the time you're spending is real.</p>
+        <p>You'll be time-lapsing your progress, and journaling.</p>
+        <p>
+          Journaling is a great practice for your future self and others hoping to learn from your experiences.
+          Don't use AI. AI doesn't know your experiences.
+        </p>
+        <div className="flex justify-between">
+          <div className="space-y-4">
+            <p>
+              Screen record and film everything that's hands-on. We have more information in our documentation!
+              (check the backpack icon on the main page →)
+            </p>
+            <p>
+              We've written a lot of helpful notes in the documentation section.
+              <br />
+              Make sure to give it a read after this: (backpack icon on the main page →)
+            </p>
+          </div>
+          <div className="hidden lg:flex justify-center items-center">
+            <a href="/docs" target="_blank" rel="noopener noreferrer">
+              <img src="/icon/guide.webp" alt="Guide Icon" className="w-50" />
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="grow min-h-0 flex flex-col">
+        <label className="text-lg mb-2">
+          <span className="font-bold">Give your project a fun name.</span> You'll be able to edit this later.
+        </label>
+        <Input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="text-base px-3 py-2"
+          placeholder=""
+        />
+      </div>
+      <div className="flex justify-between">
+        <Button variant="link" type="button" onClick={prev}>
+          Back
+        </Button>
+        <Button type="submit" disabled={!name.trim() || processing}>
+          {processing ? 'Creating...' : "Let's start!"}
+        </Button>
+      </div>
+    </div>
+  )}
+</PaginationPage>
+------- */
diff --git a/app/frontend/pages/projects/show.tsx b/app/frontend/pages/projects/show.tsx
index 49d91291..89b0394d 100644
--- a/app/frontend/pages/projects/show.tsx
+++ b/app/frontend/pages/projects/show.tsx
@@ -1,11 +1,13 @@
 import { useState, useMemo, useRef } from 'react'
 import { router } from '@inertiajs/react'
-import { Modal, ModalLink } from '@inertiaui/modal-react'
+// @ts-expect-error useModal lacks type declarations in this beta package
+import { Modal, ModalLink, useModal } from '@inertiaui/modal-react'
 import { BookOpenIcon, ClockIcon } from '@heroicons/react/16/solid'
 import BookLayout from '@/components/shared/BookLayout'
 import Button from '@/components/shared/Button'
 import InlineUser from '@/components/shared/InlineUser'
 import Input from '@/components/shared/Input'
+import { performModalMutation } from '@/lib/modalMutation'
 import { notify } from '@/lib/notifications'
 import TimeAgo from '@/components/shared/TimeAgo'
 import Timeline from '@/components/shared/Timeline'
@@ -66,6 +68,7 @@ export default function ProjectsShow({
   ships,
   can,
   is_modal,
+  onModalEvent,
 }: {
   project: ProjectDetail
   journal_entries: JournalEntryCard[]
@@ -79,12 +82,71 @@ export default function ProjectsShow({
     create_journal_entry: boolean
   }
   is_modal?: boolean
+  onModalEvent?: (event: string, ...args: any[]) => void
 }) {
   const modalRef = useRef<{ close: () => void }>(null)
+  const modal = useModal()
   const [rightTab, setRightTab] = useState<'timeline' | 'journal'>('timeline')
   const [inviteEmail, setInviteEmail] = useState('')
   const [inviting, setInviting] = useState(false)
   const [inviteError, setInviteError] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState(false)
+  const detailProps = ['project', 'journal_entries', 'collaborators', 'ships', 'can']
+
+  function handleBack() {
+    if (modal?.canGoBack) {
+      modal.goBack()
+      return
+    }
+
+    if (modal) {
+      modal.close()
+      return
+    }
+
+    modalRef.current?.close()
+  }
+
+  function reloadProjectDetails() {
+    if (modal) {
+      modal.reload({ only: detailProps })
+      return
+    }
+
+    router.reload({ only: detailProps })
+  }
+
+  function handleProjectSaved() {
+    reloadProjectDetails()
+    onModalEvent?.('projectSaved')
+  }
+
+  function deleteProject() {
+    if (deleting || !confirm('Delete this project? This will remove it and its journal entries from normal views.'))
+      return
+
+    if (!is_modal) {
+      router.delete(`/projects/${project.id}`, {
+        onStart: () => setDeleting(true),
+        onFinish: () => setDeleting(false),
+        onError: () => notify('alert', 'Failed to delete project.'),
+      })
+      return
+    }
+
+    setDeleting(true)
+    void performModalMutation({
+      url: `/projects/${project.id}`,
+      method: 'delete',
+      modal,
+      modalRef,
+      successMessage: 'Project deleted.',
+      errorMessage: 'Failed to delete project.',
+      successEvent: 'projectDeleted',
+      onModalEvent,
+      onFinish: () => setDeleting(false),
+    })
+  }
 
   function sendInvite(e: React.FormEvent) {
     e.preventDefault()
@@ -231,8 +293,8 @@ export default function ProjectsShow({
         <div className="flex gap-4 mt-auto pt-6 flex-wrap">
           {is_modal && (
             <button
-              onClick={() => modalRef.current?.close()}
-              className="xl:hidden py-2 px-6 text-sm border-2 font-bold uppercase cursor-pointer bg-transparent text-dark-brown border-dark-brown"
+              onClick={handleBack}
+              className="py-2 px-6 text-sm border-2 font-bold uppercase cursor-pointer bg-transparent text-dark-brown border-dark-brown"
             >
               Back
             </button>
@@ -240,14 +302,26 @@ export default function ProjectsShow({
           {can.update && (
             <ModalLink
               href={`/projects/${project.id}/edit`}
-              replace
+              onProjectSaved={handleProjectSaved}
               className="bg-brown text-light-brown border-2 border-dark-brown px-6 py-2 font-bold uppercase hover:opacity-80 flex items-center justify-center text-sm"
             >
               Edit
             </ModalLink>
           )}
+          {can.destroy && (
+            <Button
+              onClick={deleteProject}
+              disabled={deleting}
+              className="bg-coral px-6 py-2 text-sm flex-1 xl:flex-none"
+            >
+              {deleting ? 'Deleting...' : 'Delete Project'}
+            </Button>
+          )}
           {can.ship && (
-            <Button onClick={() => router.visit(`/projects/${project.id}/ship`)} className="px-6 py-2 text-sm flex-1 xl:flex-none">
+            <Button
+              onClick={() => router.visit(`/projects/${project.id}/ship`)}
+              className="px-6 py-2 text-sm flex-1 xl:flex-none"
+            >
               Submit
             </Button>
           )}
@@ -258,7 +332,6 @@ export default function ProjectsShow({
 
       {/* Right page */}
       <div className="xl:flex-1 max-xl:w-full min-w-0 max-xl:shrink-0 flex flex-col p-4 xl:p-6 overflow-hidden max-xl:mt-8">
-        
         {/* Mobile Tabs */}
         <div className="flex xl:hidden gap-2 mb-6 shrink-0">
           {ribbonTabs.map(({ label, tab }) => (
@@ -280,7 +353,6 @@ export default function ProjectsShow({
             {can.create_journal_entry && (
               <ModalLink
                 href={`/projects/${project.id}/journal_entries/new`}
-                replace
                 className="bg-brown text-light-brown border-2 border-dark-brown px-4 py-2 font-bold uppercase text-sm hover:opacity-80"
               >
                 New Journal Entry
@@ -353,7 +425,6 @@ export default function ProjectsShow({
             {can.create_journal_entry && (
               <ModalLink
                 href={`/projects/${project.id}/journal_entries/new`}
-                replace
                 className="bg-brown text-light-brown border-2 border-dark-brown px-4 py-2 font-bold uppercase text-sm hover:opacity-80"
               >
                 New Journal Entry
@@ -389,14 +460,14 @@ export default function ProjectsShow({
 
   if (is_modal) {
     return (
-      <Modal 
+      <Modal
         ref={modalRef}
-        panelClasses="h-full max-xl:w-full max-xl:max-w-none max-xl:bg-light-brown max-xl:max-h-full max-xl:overflow-hidden" 
-        paddingClasses="p-0 xl:max-w-5xl xl:mx-auto" 
-        closeButton={false} 
+        panelClasses="h-full max-xl:w-full max-xl:max-w-none max-xl:max-h-full max-xl:overflow-hidden"
+        paddingClasses="p-0 xl:max-w-5xl xl:mx-auto"
+        closeButton={false}
         maxWidth="7xl"
       >
-        <BookLayout className="max-h-none xl:max-h-[40em]" showJoint={false}>
+        <BookLayout className="max-h-none xl:max-h-[40em]" showJoint={false} showBorderOnMobile>
           {content}
         </BookLayout>
       </Modal>
diff --git a/app/frontend/types/inertia-modal.d.ts b/app/frontend/types/inertia-modal.d.ts
index 3ff504c6..1dd3d7f7 100644
--- a/app/frontend/types/inertia-modal.d.ts
+++ b/app/frontend/types/inertia-modal.d.ts
@@ -1,5 +1,16 @@
 declare module '@inertiaui/modal-react' {
   import type { ComponentType, ReactNode } from 'react'
+  interface ModalContext {
+    isOpen: boolean
+    close: () => void
+    reload: (options?: any) => void
+    navigate: (url: string, options?: any) => Promise<any>
+    goBack: () => void
+    canGoBack: boolean
+    getParentModal: () => ModalContext | null
+    getChildModal: () => ModalContext | null
+    emit: (event: string, ...args: any[]) => void
+  }
   export function renderApp(App: ComponentType<any>, props: any): ReactNode
   export function ModalLink(props: {
     href: string
@@ -16,13 +27,7 @@ declare module '@inertiaui/modal-react' {
     duration?: number
     [key: string]: any
   }): JSX.Element
-  export function useModal(): {
-    isOpen: boolean
-    close: () => void
-    navigate: (url: string, options?: any) => Promise<any>
-    goBack: () => void
-    canGoBack: boolean
-  }
+  export function useModal(): ModalContext | null
   export function useModalStack(): {
     stack: any[]
     visit: (...args: any[]) => Promise<any>
diff --git a/app/services/you_tube_service.rb b/app/services/you_tube_service.rb
index be4bfc23..4bcef598 100644
--- a/app/services/you_tube_service.rb
+++ b/app/services/you_tube_service.rb
@@ -14,7 +14,7 @@ def find_or_fetch(url)
     video_id = extract_video_id(url)
     return nil if video_id.blank?
 
-    YouTubeVideo.find_by(video_id: video_id) || fetch_and_create(video_id)
+    YouTubeVideo.find_by(video_id: video_id) || fetch_and_create(video_id, url: url)
   end
 
   def thumbnail_url(url, quality: "default")
@@ -35,8 +35,8 @@ def extract_video_id(url)
     url.to_s.match(VIDEO_ID_REGEX)&.[](1)
   end
 
-  def fetch_and_create(video_id)
-    attrs = fetch_video_data(video_id)
+  def fetch_and_create(video_id, url: nil)
+    attrs = fetch_video_data(video_id, url: url)
     return nil if attrs.nil?
 
     YouTubeVideo.create!(attrs.merge(last_refreshed_at: Time.current))
@@ -44,17 +44,23 @@ def fetch_and_create(video_id)
     YouTubeVideo.find_by(video_id: video_id)
   end
 
-  def fetch_video_data(video_id)
-    response = connection.get("/youtube/v3/videos") do |req|
+  def fetch_video_data(video_id, url: nil)
+    fetch_video_data_from_api(video_id) || fetch_video_data_from_oembed(video_id, url: url)
+  end
+
+  def fetch_video_data_from_api(video_id)
+    return nil if youtube_api_key.blank?
+
+    response = google_connection.get("/youtube/v3/videos") do |req|
       req.headers["Accept"] = "application/json"
       req.params["part"] = "snippet,contentDetails"
       req.params["id"] = video_id
-      req.params["key"] = ENV.fetch("GOOGLE_CLOUD_API_KEY", nil)
+      req.params["key"] = youtube_api_key
     end
 
     unless response.success?
       ErrorReporter.capture_message("YouTube video fetch failed", level: :warning, contexts: {
-        youtube: { status: response.status, video_id: video_id }
+        youtube: { status: response.status, video_id: video_id, source: "data_api" }
       })
       return nil
     end
@@ -89,7 +95,45 @@ def fetch_video_data(video_id)
       category_id: snippet["categoryId"]
     }
   rescue StandardError => e
-    ErrorReporter.capture_exception(e, level: :warning, contexts: { youtube: { action: "fetch_video_data", video_id: video_id } })
+    ErrorReporter.capture_exception(e, level: :warning, contexts: { youtube: { action: "fetch_video_data_from_api", video_id: video_id } })
+    nil
+  end
+
+  def fetch_video_data_from_oembed(video_id, url: nil)
+    response = oembed_connection.get("/oembed") do |req|
+      req.headers["Accept"] = "application/json"
+      req.params["url"] = url.presence || youtube_url(video_id)
+      req.params["format"] = "json"
+    end
+
+    unless response.success?
+      ErrorReporter.capture_message("YouTube oEmbed fetch failed", level: :warning, contexts: {
+        youtube: { status: response.status, video_id: video_id, source: "oembed" }
+      })
+      return nil
+    end
+
+    data = JSON.parse(response.body)
+    was_live = url.to_s.include?("/live/")
+
+    {
+      video_id: video_id,
+      title: data["title"],
+      description: nil,
+      channel_id: nil,
+      channel_title: data["author_name"],
+      thumbnail_url: data["thumbnail_url"].presence || thumbnail_url_from_id(video_id, quality: "hqdefault"),
+      duration_seconds: nil,
+      published_at: nil,
+      definition: nil,
+      caption: nil,
+      was_live: was_live,
+      live_broadcast_content: was_live ? "live" : nil,
+      tags: nil,
+      category_id: nil
+    }
+  rescue StandardError => e
+    ErrorReporter.capture_exception(e, level: :warning, contexts: { youtube: { action: "fetch_video_data_from_oembed", video_id: video_id } })
     nil
   end
 
@@ -100,7 +144,25 @@ def parse_iso8601_duration(duration_string)
     (match[1].to_i * 3600) + (match[2].to_i * 60) + match[3].to_i
   end
 
-  def connection
-    @connection ||= Faraday.new(url: "https://www.googleapis.com")
+  def youtube_api_key
+    ENV["YOUTUBE_API_KEY"].presence || ENV["GOOGLE_CLOUD_API_KEY"].presence
+  end
+
+  def youtube_url(video_id)
+    "https://www.youtube.com/watch?v=#{video_id}"
+  end
+
+  def google_connection
+    @google_connection ||= Faraday.new(url: "https://www.googleapis.com") do |f|
+      f.options.open_timeout = 5
+      f.options.timeout = 10
+    end
+  end
+
+  def oembed_connection
+    @oembed_connection ||= Faraday.new(url: "https://www.youtube.com") do |f|
+      f.options.open_timeout = 5
+      f.options.timeout = 10
+    end
   end
 end
diff --git a/package-lock.json b/package-lock.json
index 79179b21..09369d98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "fallout",
       "dependencies": {
         "@headlessui/react": "^2.1.0",
         "@heroicons/react": "^2.2.0",
@@ -68,6 +67,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -738,6 +738,7 @@
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.9.tgz",
       "integrity": "sha512-Mb+Un58gwBn0/yWZfyrCh0TJyurtT+dETj7YHleylHk5od3dv2XqETPGWMyQ5/7sYN7oWdyM1u9MvC0OC8UmzQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@floating-ui/react": "^0.26.16",
         "@react-aria/focus": "^3.20.2",
@@ -1810,6 +1811,7 @@
       "resolved": "https://registry.npmjs.org/@svta/cml-xml/-/cml-xml-1.0.1.tgz",
       "integrity": "sha512-11LkJa5kDEcsRMWkVI1ABH3KLCxGoiSVe4kQ293ItVj8ncTTQ7htmCGiJDjS+Cmy35UgF3e/vc0ysJIiWRTx2g==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=20"
       },
@@ -1823,6 +1825,7 @@
       "integrity": "sha512-0l1gl/72PErwUZuavcRpRAQN9uSst+Nk++niC5IX6lmMWpXoScYx3oq/narT64/sKv/eRiPTaAjBFGDEQiWJIw==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@swc/counter": "^0.1.3",
         "@swc/types": "^0.1.25"
@@ -2416,6 +2419,7 @@
       "integrity": "sha512-hj9YIJimBCipHVfHKRMnvmHg+wfhKc0o4mTtXh9pKBjC8TLJzz0nzGmLi5UJsYAUgSvXFHgb0V2oY10DUFtImw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -2425,6 +2429,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2573,6 +2578,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
       "integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.11",
         "form-data": "^4.0.5",
@@ -2693,6 +2699,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2853,6 +2860,7 @@
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3126,6 +3134,7 @@
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3709,6 +3718,7 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -4076,9 +4086,9 @@
       }
     },
     "node_modules/lodash-es": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
-      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
       "license": "MIT"
     },
     "node_modules/longest-streak": {
@@ -5339,6 +5349,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5486,6 +5497,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5495,6 +5507,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5635,6 +5648,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
       "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -5901,7 +5915,8 @@
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
       "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.0",
@@ -5984,6 +5999,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6111,6 +6127,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6324,6 +6341,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -6429,6 +6447,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/public/onboarding/anger.svg b/public/onboarding/anger.svg
new file mode 100644
index 00000000..46ab700c
--- /dev/null
+++ b/public/onboarding/anger.svg
@@ -0,0 +1,3 @@
+<svg width="122" height="89" viewBox="0 0 122 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.00098 5.00098C12.4079 20.2976 30.4587 57.6307 53.7606 80.9529C62.1015 89.3011 70.2882 73.8078 116.073 11.6357" stroke="#8B6665" stroke-width="10" stroke-linecap="round"/>
+</svg>
diff --git a/public/onboarding/arrow.svg b/public/onboarding/arrow.svg
new file mode 100644
index 00000000..0911c63d
--- /dev/null
+++ b/public/onboarding/arrow.svg
@@ -0,0 +1,4 @@
+<svg width="109" height="77" viewBox="0 0 109 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.00203 5.99982C6.00203 5.99982 5.26478 21.3563 31.3234 42.9123C57.382 64.4683 80.7944 54.3971 90.4749 52.5049C94.3544 51.6869 96.1365 51.1576 97.9726 50.6122" stroke="#A26B51" stroke-width="12" stroke-linecap="round"/>
+<path d="M88.4415 70.6641C88.7146 69.2736 93.0898 64.3329 97.5246 57.5758C100.354 53.2643 102.462 50.7431 102.659 48.0046C102.223 46.8403 100.699 46.1334 98.0547 44.3191C95.4108 42.5047 91.6936 39.6045 86.2868 35.2489" stroke="#A26B51" stroke-width="12" stroke-linecap="round"/>
+</svg>
diff --git a/public/onboarding/guide.png b/public/onboarding/guide.png
new file mode 100644
index 00000000..d7fb4c6a
Binary files /dev/null and b/public/onboarding/guide.png differ
diff --git a/public/onboarding/icepizero.png b/public/onboarding/icepizero.png
new file mode 100644
index 00000000..cdcb80bb
Binary files /dev/null and b/public/onboarding/icepizero.png differ
diff --git a/public/onboarding/jesuskeyboard.png b/public/onboarding/jesuskeyboard.png
new file mode 100644
index 00000000..973a288b
Binary files /dev/null and b/public/onboarding/jesuskeyboard.png differ
diff --git a/public/onboarding/minimaimai.png b/public/onboarding/minimaimai.png
new file mode 100644
index 00000000..32290a6b
Binary files /dev/null and b/public/onboarding/minimaimai.png differ
diff --git a/public/spin_animation.mp4 b/public/spin_animation.mp4
index 0b046f53..94dcca6e 100644
Binary files a/public/spin_animation.mp4 and b/public/spin_animation.mp4 differ
diff --git a/public/staraudio.mp3 b/public/staraudio.mp3
new file mode 100644
index 00000000..393f7474
Binary files /dev/null and b/public/staraudio.mp3 differ
diff --git a/public/staraudio.webm b/public/staraudio.webm
new file mode 100644
index 00000000..f771387b
Binary files /dev/null and b/public/staraudio.webm differ