diff --git a/apps/webapp/app/assets/images/blurred-dashboard-background-menu-bottom.jpg b/apps/webapp/app/assets/images/blurred-dashboard-background-menu-bottom.jpg
new file mode 100644
index 0000000000..2a993f8212
Binary files /dev/null and b/apps/webapp/app/assets/images/blurred-dashboard-background-menu-bottom.jpg differ
diff --git a/apps/webapp/app/assets/images/blurred-dashboard-background-menu-top.jpg b/apps/webapp/app/assets/images/blurred-dashboard-background-menu-top.jpg
new file mode 100644
index 0000000000..8aca8563cd
Binary files /dev/null and b/apps/webapp/app/assets/images/blurred-dashboard-background-menu-top.jpg differ
diff --git a/apps/webapp/app/assets/images/blurred-dashboard-background-table.jpg b/apps/webapp/app/assets/images/blurred-dashboard-background-table.jpg
new file mode 100644
index 0000000000..a2ae4029fe
Binary files /dev/null and b/apps/webapp/app/assets/images/blurred-dashboard-background-table.jpg differ
diff --git a/apps/webapp/app/components/BackgroundWrapper.tsx b/apps/webapp/app/components/BackgroundWrapper.tsx
new file mode 100644
index 0000000000..ecff3af6dd
--- /dev/null
+++ b/apps/webapp/app/components/BackgroundWrapper.tsx
@@ -0,0 +1,48 @@
+import { type ReactNode } from "react";
+import blurredDashboardBackgroundMenuTop from "~/assets/images/blurred-dashboard-background-menu-top.jpg";
+import blurredDashboardBackgroundMenuBottom from "~/assets/images/blurred-dashboard-background-menu-bottom.jpg";
+import blurredDashboardBackgroundTable from "~/assets/images/blurred-dashboard-background-table.jpg";
+
+export function BackgroundWrapper({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      {/* Left menu top background - fixed width 260px, maintains aspect ratio */}
+      <div
+        className="absolute left-0 top-0 w-[260px] bg-contain bg-left-top bg-no-repeat"
+        style={{
+          backgroundImage: `url(${blurredDashboardBackgroundMenuTop})`,
+          aspectRatio: "auto",
+          height: "100vh",
+          backgroundSize: "260px auto",
+        }}
+      />
+
+      {/* Left menu bottom background - fixed width 260px, maintains aspect ratio */}
+      <div
+        className="absolute bottom-0 left-0 w-[260px] bg-contain bg-left-bottom bg-no-repeat"
+        style={{
+          backgroundImage: `url(${blurredDashboardBackgroundMenuBottom})`,
+          aspectRatio: "auto",
+          height: "100vh",
+          backgroundSize: "260px auto",
+        }}
+      />
+
+      {/* Right table background - fixed width 2000px, positioned next to menu */}
+      <div
+        className="absolute top-0 bg-left-top bg-no-repeat"
+        style={{
+          left: "260px",
+          backgroundImage: `url(${blurredDashboardBackgroundTable})`,
+          width: "100%",
+          height: "100vh",
+          backgroundSize: "1200px auto",
+          backgroundColor: "#101214",
+        }}
+      />
+
+      {/* Content layer */}
+      <div className="relative z-10 h-full w-full">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/layout/AppLayout.tsx b/apps/webapp/app/components/layout/AppLayout.tsx
index e45836e496..0793c52cac 100644
--- a/apps/webapp/app/components/layout/AppLayout.tsx
+++ b/apps/webapp/app/components/layout/AppLayout.tsx
@@ -1,8 +1,18 @@
 import { cn } from "~/utils/cn";
 
 /** This container is used to surround the entire app, it correctly places the nav bar */
-export function AppContainer({ children }: { children: React.ReactNode }) {
-  return <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden")}>{children}</div>;
+export function AppContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid h-full w-full grid-rows-1 overflow-hidden", className)}>
+      {children}
+    </div>
+  );
 }
 
 export function MainBody({ children }: { children: React.ReactNode }) {
diff --git a/apps/webapp/app/components/primitives/Spinner.tsx b/apps/webapp/app/components/primitives/Spinner.tsx
index a9182b46ce..158ea2c998 100644
--- a/apps/webapp/app/components/primitives/Spinner.tsx
+++ b/apps/webapp/app/components/primitives/Spinner.tsx
@@ -66,8 +66,8 @@ export function ButtonSpinner() {
     <Spinner
       className="size-3"
       color={{
-        foreground: "rgba(0, 0, 0, 1)",
-        background: "rgba(0, 0, 0, 0.25)",
+        background: "rgba(255, 255, 255, 0.4)",
+        foreground: "rgba(255, 255, 255)",
       }}
     />
   );
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
index f3bf509b0f..8f82153052 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -143,7 +143,7 @@ export default function Page() {
   const emailFields = useFieldList(form.ref, emails);
 
   return (
-    <MainCenteredContainer>
+    <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
       <div>
         <FormTitle
           LeadingIcon={<UserPlusIcon className="size-6 text-indigo-500" />}
@@ -203,7 +203,7 @@ export default function Page() {
                 </Button>
               }
               cancelButton={
-                <LinkButton to={organizationTeamPath(organization)} variant={"tertiary/small"}>
+                <LinkButton to={organizationTeamPath(organization)} variant={"secondary/small"}>
                   Cancel
                 </LinkButton>
               }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
index 3cd51e2641..9b292cb5ad 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
@@ -7,7 +7,8 @@ import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import { z } from "zod";
-import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
+import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -20,15 +21,14 @@ import { Label } from "~/components/primitives/Label";
 import { ButtonSpinner } from "~/components/primitives/Spinner";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
-import { useFeatures } from "~/hooks/useFeatures";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { createProject } from "~/models/project.server";
 import { requireUserId } from "~/services/session.server";
 import {
   OrganizationParamsSchema,
   organizationPath,
-  v3ProjectPath,
   selectPlanPath,
+  v3ProjectPath,
 } from "~/utils/pathBuilder";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
@@ -138,57 +138,61 @@ export default function Page() {
   const isLoading = navigation.state === "submitting" || navigation.state === "loading";
 
   return (
-    <MainCenteredContainer>
-      <div>
-        <FormTitle
-          LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
-          title="Create a new project"
-          description={`This will create a new project in your "${organization.title}" organization.`}
-        />
-        <Form method="post" {...form.props}>
-          {message && (
-            <Callout variant="success" className="mb-4">
-              {message}
-            </Callout>
-          )}
-          <Fieldset>
-            <InputGroup>
-              <Label htmlFor={projectName.id}>Project name</Label>
-              <Input
-                {...conform.input(projectName, { type: "text" })}
-                placeholder="Your project name"
-                icon={FolderIcon}
-                autoFocus
-              />
-              <FormError id={projectName.errorId}>{projectName.error}</FormError>
-            </InputGroup>
-            {canCreateV3Projects ? (
-              <input {...conform.input(projectVersion, { type: "hidden" })} value={"v3"} />
-            ) : (
-              <input {...conform.input(projectVersion, { type: "hidden" })} value={"v2"} />
-            )}
-            <FormButtons
-              confirmButton={
-                <Button
-                  type="submit"
-                  variant={"primary/small"}
-                  disabled={isLoading}
-                  TrailingIcon={isLoading ? ButtonSpinner : undefined}
-                >
-                  {isLoading ? "Creating…" : "Create"}
-                </Button>
-              }
-              cancelButton={
-                organization.projectsCount > 0 ? (
-                  <LinkButton to={organizationPath(organization)} variant={"tertiary/small"}>
-                    Cancel
-                  </LinkButton>
-                ) : undefined
-              }
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <div>
+            <FormTitle
+              LeadingIcon={<FolderIcon className="size-7 text-indigo-500" />}
+              title="Create a new project"
+              description={`This will create a new project in your "${organization.title}" organization.`}
             />
-          </Fieldset>
-        </Form>
-      </div>
-    </MainCenteredContainer>
+            <Form method="post" {...form.props}>
+              {message && (
+                <Callout variant="success" className="mb-4">
+                  {message}
+                </Callout>
+              )}
+              <Fieldset>
+                <InputGroup>
+                  <Label htmlFor={projectName.id}>Project name</Label>
+                  <Input
+                    {...conform.input(projectName, { type: "text" })}
+                    placeholder="Your project name"
+                    icon={FolderIcon}
+                    autoFocus
+                  />
+                  <FormError id={projectName.errorId}>{projectName.error}</FormError>
+                </InputGroup>
+                {canCreateV3Projects ? (
+                  <input {...conform.input(projectVersion, { type: "hidden" })} value={"v3"} />
+                ) : (
+                  <input {...conform.input(projectVersion, { type: "hidden" })} value={"v2"} />
+                )}
+                <FormButtons
+                  confirmButton={
+                    <Button
+                      type="submit"
+                      variant={"primary/small"}
+                      disabled={isLoading}
+                      TrailingIcon={isLoading ? ButtonSpinner : undefined}
+                    >
+                      {isLoading ? "Creating…" : "Create"}
+                    </Button>
+                  }
+                  cancelButton={
+                    organization.projectsCount > 0 ? (
+                      <LinkButton to={organizationPath(organization)} variant={"secondary/small"}>
+                        Cancel
+                      </LinkButton>
+                    ) : undefined
+                  }
+                />
+              </Fieldset>
+            </Form>
+          </div>
+        </MainCenteredContainer>
+      </BackgroundWrapper>
+    </AppContainer>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
index e1561becf4..844c5d66ee 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx
@@ -1,6 +1,7 @@
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
-import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
+import { AppContainer } from "~/components/layout/AppLayout";
 import { Header1 } from "~/components/primitives/Headers";
 import { prisma } from "~/db.server";
 import { featuresForRequest } from "~/features.server";
@@ -48,16 +49,22 @@ export default function ChoosePlanPage() {
     useTypedLoaderData<typeof loader>();
 
   return (
-    <MainCenteredContainer className="flex max-w-[80rem] flex-col items-center gap-8 p-3">
-      <Header1 className="text-center">Subscribe for full access</Header1>
-      <PricingPlans
-        plans={plans}
-        subscription={v3Subscription}
-        organizationSlug={organizationSlug}
-        hasPromotedPlan
-        showGithubVerificationBadge
-        periodEnd={periodEnd}
-      />
-    </MainCenteredContainer>
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <div className="mx-auto flex h-full w-full max-w-[80rem] flex-col items-center justify-center gap-8 p-3">
+          <Header1 className="text-center">Subscribe for full access</Header1>
+          <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+            <PricingPlans
+              plans={plans}
+              subscription={v3Subscription}
+              organizationSlug={organizationSlug}
+              hasPromotedPlan
+              showGithubVerificationBadge
+              periodEnd={periodEnd}
+            />
+          </div>
+        </div>
+      </BackgroundWrapper>
+    </AppContainer>
   );
 }
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
index a171153510..a677782eae 100644
--- a/apps/webapp/app/routes/_app.orgs.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -7,7 +7,8 @@ import { json, redirect } from "@remix-run/node";
 import { Form, useActionData, useNavigation } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
-import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
+import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -94,85 +95,92 @@ export default function NewOrganizationPage() {
   const isLoading = navigation.state === "submitting" || navigation.state === "loading";
 
   return (
-    <MainCenteredContainer className="max-w-[22rem]">
-      <FormTitle
-        LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
-        title="Create an Organization"
-      />
-      <Form method="post" {...form.props}>
-        <Fieldset>
-          <InputGroup>
-            <Label htmlFor={orgName.id}>Organization name</Label>
-            <Input
-              {...conform.input(orgName, { type: "text" })}
-              placeholder="Your Organization name"
-              icon={BuildingOffice2Icon}
-              autoFocus
-            />
-            <Hint>E.g. your company name or your workspace name.</Hint>
-            <FormError id={orgName.errorId}>{orgName.error}</FormError>
-          </InputGroup>
-          {isManagedCloud && (
-            <>
-              <InputGroup>
-                <Label htmlFor={"companySize"}>Number of employees</Label>
-                <RadioGroup name="companySize" className="flex items-center justify-between gap-2">
-                  <RadioGroupItem
-                    id="employees-1-5"
-                    label="1-5"
-                    value={"1-5"}
-                    variant="button/small"
-                    className="grow"
-                  />
-                  <RadioGroupItem
-                    id="employees-6-49"
-                    label="6-49"
-                    value={"6-49"}
-                    variant="button/small"
-                    className="grow"
-                  />
-                  <RadioGroupItem
-                    id="employees-50-99"
-                    label="50-99"
-                    value={"50-99"}
-                    variant="button/small"
-                    className="grow"
-                  />
-                  <RadioGroupItem
-                    id="employees-100+"
-                    label="100+"
-                    value={"100+"}
-                    variant="button/small"
-                    className="grow"
-                  />
-                </RadioGroup>
-              </InputGroup>
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <FormTitle
+            LeadingIcon={<BuildingOffice2Icon className="size-6 text-fuchsia-600" />}
+            title="Create an Organization"
+          />
+          <Form method="post" {...form.props}>
+            <Fieldset>
               <InputGroup>
-                <Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
-                <TextArea name="whyUseUs" rows={4} spellCheck={false} />
-                <Hint>
-                  Your answer will help us understand your use case and provide better support.
-                </Hint>
+                <Label htmlFor={orgName.id}>Organization name</Label>
+                <Input
+                  {...conform.input(orgName, { type: "text" })}
+                  placeholder="Your Organization name"
+                  icon={BuildingOffice2Icon}
+                  autoFocus
+                />
+                <Hint>E.g. your company name or your workspace name.</Hint>
+                <FormError id={orgName.errorId}>{orgName.error}</FormError>
               </InputGroup>
-            </>
-          )}
+              {isManagedCloud && (
+                <>
+                  <InputGroup>
+                    <Label htmlFor={"companySize"}>Number of employees</Label>
+                    <RadioGroup
+                      name="companySize"
+                      className="flex items-center justify-between gap-2"
+                    >
+                      <RadioGroupItem
+                        id="employees-1-5"
+                        label="1-5"
+                        value={"1-5"}
+                        variant="button/small"
+                        className="grow"
+                      />
+                      <RadioGroupItem
+                        id="employees-6-49"
+                        label="6-49"
+                        value={"6-49"}
+                        variant="button/small"
+                        className="grow"
+                      />
+                      <RadioGroupItem
+                        id="employees-50-99"
+                        label="50-99"
+                        value={"50-99"}
+                        variant="button/small"
+                        className="grow"
+                      />
+                      <RadioGroupItem
+                        id="employees-100+"
+                        label="100+"
+                        value={"100+"}
+                        variant="button/small"
+                        className="grow"
+                      />
+                    </RadioGroup>
+                  </InputGroup>
+                  <InputGroup>
+                    <Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
+                    <TextArea name="whyUseUs" rows={4} spellCheck={false} />
+                    <Hint>
+                      Your answer will help us understand your use case and provide better support.
+                    </Hint>
+                  </InputGroup>
+                </>
+              )}
 
-          <FormButtons
-            confirmButton={
-              <Button type="submit" variant={"primary/small"} disabled={isLoading}>
-                Create
-              </Button>
-            }
-            cancelButton={
-              hasOrganizations ? (
-                <LinkButton to={rootPath()} variant={"tertiary/small"}>
-                  Cancel
-                </LinkButton>
-              ) : null
-            }
-          />
-        </Fieldset>
-      </Form>
-    </MainCenteredContainer>
+              <FormButtons
+                confirmButton={
+                  <Button type="submit" variant={"primary/small"} disabled={isLoading}>
+                    Create
+                  </Button>
+                }
+                cancelButton={
+                  hasOrganizations ? (
+                    <LinkButton to={rootPath()} variant={"tertiary/small"}>
+                      Cancel
+                    </LinkButton>
+                  ) : null
+                }
+              />
+            </Fieldset>
+          </Form>
+        </MainCenteredContainer>
+      </BackgroundWrapper>
+    </AppContainer>
   );
 }
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
index 048878a85b..4187a2e9d0 100644
--- a/apps/webapp/app/routes/confirm-basic-details.tsx
+++ b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -8,6 +8,7 @@ import { motion } from "framer-motion";
 import { forwardRef, useState } from "react";
 import { z } from "zod";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
 import { Button } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
@@ -113,7 +114,7 @@ export const action: ActionFunction = async ({ request }) => {
 const HandIcon = forwardRef<HTMLDivElement, {}>(({}, ref) => {
   return (
     <div ref={ref}>
-      <HandRaisedIcon className="h-7 w-7 text-amber-300" />
+      <HandRaisedIcon className="h-7 w-7 text-amber-400" />
     </div>
   );
 });
@@ -138,107 +139,107 @@ export default function Page() {
   const shouldShowConfirm = user.email !== enteredEmail || user.email === "";
 
   return (
-    <AppContainer>
-      <MainCenteredContainer className="max-w-[22rem]">
-        <Form method="post" {...form.props}>
-          <FormTitle
-            title="Welcome to Trigger.dev"
-            LeadingIcon={
-              <MotionHand
-                style={{
-                  originY: 0.75,
-                }}
-                initial={{
-                  rotate: 0,
-                }}
-                animate={{
-                  rotate: [0, -20, 0, 20, 0, -20, 0, 20, 0],
-                }}
-                transition={{
-                  delay: 1,
-                  duration: 1,
-                  repeatDelay: 5,
-                  repeat: Infinity,
-                  ease: "linear",
-                }}
-              />
-            }
-            description="We just need you to confirm a couple of details, it'll only take a minute."
-          />
-          <Fieldset>
-            <InputGroup>
-              <Label htmlFor={name.id}>Full name</Label>
-              <Input
-                {...conform.input(name, { type: "text" })}
-                defaultValue={user.name ?? ""}
-                placeholder="Your full name"
-                icon={UserIcon}
-                autoFocus
-              />
-              <Hint>Your team will see this name and we'll use it if we need to contact you.</Hint>
-              <FormError id={name.errorId}>{name.error}</FormError>
-            </InputGroup>
-            <InputGroup>
-              <Label htmlFor={email.id}>Email</Label>
-              <Input
-                {...conform.input(email, { type: "email" })}
-                defaultValue={enteredEmail}
-                onChange={(e) => {
-                  setEnteredEmail(e.target.value);
-                }}
-                placeholder="Your email address"
-                icon={EnvelopeIcon}
-                spellCheck={false}
-              />
-              {!shouldShowConfirm && (
-                <Hint>
-                  Check this is the email you'd like associated with your Trigger.dev account.
-                </Hint>
-              )}
-              <FormError id={email.errorId}>{email.error}</FormError>
-            </InputGroup>
-
-            {shouldShowConfirm ? (
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <Form method="post" {...form.props}>
+            <FormTitle
+              title="Welcome to Trigger.dev"
+              LeadingIcon={
+                <MotionHand
+                  style={{
+                    originY: 0.75,
+                  }}
+                  initial={{
+                    rotate: 0,
+                  }}
+                  animate={{
+                    rotate: [0, -20, 0, 20, 0, -20, 0, 20, 0],
+                  }}
+                  transition={{
+                    delay: 1,
+                    duration: 1,
+                    repeatDelay: 5,
+                    repeat: Infinity,
+                    ease: "linear",
+                  }}
+                />
+              }
+              description="We just need you to confirm a couple of details."
+            />
+            <Fieldset>
               <InputGroup>
-                <Label htmlFor={confirmEmail.id}>Confirm email</Label>
+                <Label htmlFor={name.id}>Full name</Label>
                 <Input
-                  {...conform.input(confirmEmail, { type: "email" })}
-                  placeholder="Your email, again"
-                  icon={EnvelopeIcon}
-                  spellCheck={false}
+                  {...conform.input(name, { type: "text" })}
+                  defaultValue={user.name ?? ""}
+                  placeholder="Your full name"
+                  icon={UserIcon}
+                  autoFocus
                 />
-                <Hint>
-                  Check this is the email you'd like associated with your Trigger.dev account.
-                </Hint>
-                <FormError id={confirmEmail.errorId}>{confirmEmail.error}</FormError>
+                <Hint>Your team will see this name and we'll use it to contact you.</Hint>
+                <FormError id={name.errorId}>{name.error}</FormError>
               </InputGroup>
-            ) : (
-              <>
-                <input {...conform.input(confirmEmail, { type: "hidden" })} value={user.email} />
-              </>
-            )}
-            {isManagedCloud && (
               <InputGroup>
-                <Label htmlFor={confirmEmail.id}>How did you hear about us?</Label>
+                <Label htmlFor={email.id}>Email</Label>
                 <Input
-                  {...conform.input(referralSource, { type: "text" })}
-                  placeholder="Google, X (Twitter)…?"
-                  icon={HeartIcon}
+                  {...conform.input(email, { type: "email" })}
+                  defaultValue={enteredEmail}
+                  onChange={(e) => {
+                    setEnteredEmail(e.target.value);
+                  }}
+                  placeholder="Your email address"
+                  icon={EnvelopeIcon}
                   spellCheck={false}
                 />
+                {!shouldShowConfirm && (
+                  <Hint>Confirm this is the email you'd like for your Trigger.dev account.</Hint>
+                )}
+                <FormError id={email.errorId}>{email.error}</FormError>
               </InputGroup>
-            )}
 
-            <FormButtons
-              confirmButton={
-                <Button type="submit" variant={"primary/small"} TrailingIcon={ArrowRightIcon}>
-                  Continue
-                </Button>
-              }
-            />
-          </Fieldset>
-        </Form>
-      </MainCenteredContainer>
+              {shouldShowConfirm ? (
+                <InputGroup>
+                  <Label htmlFor={confirmEmail.id}>Confirm email</Label>
+                  <Input
+                    {...conform.input(confirmEmail, { type: "email" })}
+                    placeholder="Your email, again"
+                    icon={EnvelopeIcon}
+                    spellCheck={false}
+                  />
+                  <Hint>
+                    Check this is the email you'd like associated with your Trigger.dev account.
+                  </Hint>
+                  <FormError id={confirmEmail.errorId}>{confirmEmail.error}</FormError>
+                </InputGroup>
+              ) : (
+                <>
+                  <input {...conform.input(confirmEmail, { type: "hidden" })} value={user.email} />
+                </>
+              )}
+              {isManagedCloud && (
+                <InputGroup>
+                  <Label htmlFor={confirmEmail.id}>How did you hear about us?</Label>
+                  <Input
+                    {...conform.input(referralSource, { type: "text" })}
+                    placeholder="LLM, Google, X (Twitter)…?"
+                    icon={HeartIcon}
+                    spellCheck={false}
+                  />
+                </InputGroup>
+              )}
+
+              <FormButtons
+                confirmButton={
+                  <Button type="submit" variant={"primary/small"} TrailingIcon={ArrowRightIcon}>
+                    Continue
+                  </Button>
+                }
+              />
+            </Fieldset>
+          </Form>
+        </MainCenteredContainer>
+      </BackgroundWrapper>
     </AppContainer>
   );
 }
diff --git a/apps/webapp/app/routes/invites.tsx b/apps/webapp/app/routes/invites.tsx
index daa5408719..c4bd0057ec 100644
--- a/apps/webapp/app/routes/invites.tsx
+++ b/apps/webapp/app/routes/invites.tsx
@@ -17,6 +17,7 @@ import { redirectWithSuccessMessage } from "~/models/message.server";
 import { requireUser, requireUserId } from "~/services/session.server";
 import { invitesPath, rootPath } from "~/utils/pathBuilder";
 import { EnvelopeIcon } from "@heroicons/react/20/solid";
+import { BackgroundWrapper } from "~/components/BackgroundWrapper";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const user = await requireUser(request);
@@ -98,49 +99,51 @@ export default function Page() {
   });
 
   return (
-    <AppContainer>
-      <MainCenteredContainer>
-        <div>
-          <FormTitle
-            LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
-            className="mb-0 text-sky-500"
-            title={simplur`You have ${invites.length} new invitation[|s]`}
-          />
-          {invites.map((invite) => (
-            <Form key={invite.id} method="post" {...form.props}>
-              <Fieldset>
-                <InputGroup className="flex items-center justify-between border-b border-charcoal-800 py-4">
-                  <div className="flex flex-col gap-y-0.5 overflow-hidden">
-                    <Header2 className="truncate">{invite.organization.title}</Header2>
-                    <Paragraph variant="small" className="truncate">
-                      Invited by {invite.inviter.displayName ?? invite.inviter.email}
-                    </Paragraph>
-                    <input name="inviteId" type="hidden" value={invite.id} />
-                  </div>
-                  <div className="flex flex-col gap-y-1">
-                    <Button
-                      type="submit"
-                      name={conform.INTENT}
-                      value="accept"
-                      variant={"primary/small"}
-                    >
-                      Accept
-                    </Button>
-                    <Button
-                      type="submit"
-                      name={conform.INTENT}
-                      value="decline"
-                      variant={"secondary/small"}
-                    >
-                      Decline
-                    </Button>
-                  </div>
-                </InputGroup>
-              </Fieldset>
-            </Form>
-          ))}
-        </div>
-      </MainCenteredContainer>
+    <AppContainer className="bg-charcoal-900">
+      <BackgroundWrapper>
+        <MainCenteredContainer className="max-w-[26rem] rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
+          <div>
+            <FormTitle
+              LeadingIcon={<EnvelopeIcon className="size-6 text-cyan-500" />}
+              className="mb-0 text-sky-500"
+              title={simplur`You have ${invites.length} new invitation[|s]`}
+            />
+            {invites.map((invite) => (
+              <Form key={invite.id} method="post" {...form.props}>
+                <Fieldset>
+                  <InputGroup className="flex items-center justify-between border-b border-charcoal-800 py-4">
+                    <div className="flex flex-col gap-y-0.5 overflow-hidden">
+                      <Header2 className="truncate">{invite.organization.title}</Header2>
+                      <Paragraph variant="small" className="truncate">
+                        Invited by {invite.inviter.displayName ?? invite.inviter.email}
+                      </Paragraph>
+                      <input name="inviteId" type="hidden" value={invite.id} />
+                    </div>
+                    <div className="flex flex-col gap-y-1">
+                      <Button
+                        type="submit"
+                        name={conform.INTENT}
+                        value="accept"
+                        variant={"primary/small"}
+                      >
+                        Accept
+                      </Button>
+                      <Button
+                        type="submit"
+                        name={conform.INTENT}
+                        value="decline"
+                        variant={"secondary/small"}
+                      >
+                        Decline
+                      </Button>
+                    </div>
+                  </InputGroup>
+                </Fieldset>
+              </Form>
+            ))}
+          </div>
+        </MainCenteredContainer>
+      </BackgroundWrapper>
     </AppContainer>
   );
 }