diff --git a/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
index f11bc40f3d..028ad0b876 100644
--- a/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx
@@ -1,5 +1,6 @@
 import { prisma } from "@/lib/prisma";
-import { Wordmark } from "@dub/ui";
+import EmptyState from "@/ui/shared/empty-state";
+import { InputPassword } from "@dub/ui";
 import { ResetPasswordForm } from "./form";
 
 export const runtime = "nodejs";
@@ -13,28 +14,27 @@ interface Props {
 export default async function ResetPasswordPage({ params: { token } }: Props) {
   const validToken = await isValidToken(token);
 
+  if (!validToken) {
+    return (
+      <EmptyState
+        icon={InputPassword}
+        title="Invalid Reset Token"
+        description="The password reset token is invalid or expired. Please request a new one."
+      />
+    );
+  }
+
   return (
     <div className="relative z-10 my-10 flex min-h-full w-full items-center justify-center">
-      <div className="flex w-full max-w-md flex-col items-center">
-        <Wordmark className="mb-8 h-12" />
-        <div className="w-full overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
-          <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
-            <h3 className="text-xl font-semibold">Reset your password</h3>
-            <p className="text-sm text-gray-500">
-              {validToken
-                ? "Enter new password for your account."
-                : "The request is invalid or expired."}
-            </p>
-          </div>
-          <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 sm:px-16">
-            {validToken ? (
-              <ResetPasswordForm />
-            ) : (
-              <div className="text-center">
-                That request is expired or invalid. Please request a new one.
-              </div>
-            )}
-          </div>
+      <div className="w-full overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
+        <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
+          <h3 className="text-xl font-semibold">Reset your password</h3>
+          <p className="text-sm text-gray-500">
+            Enter new password for your account.
+          </p>
+        </div>
+        <div className="flex flex-col space-y-3 bg-gray-50 px-4 py-8 sm:px-16">
+          <ResetPasswordForm />
         </div>
       </div>
     </div>
diff --git a/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx b/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
index f0de848c08..7eff4b839b 100644
--- a/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx
@@ -1,3 +1,4 @@
+import EmptyState from "@/ui/shared/empty-state";
 import { LoadingSpinner } from "@dub/ui";
 import { APP_NAME } from "@dub/utils";
 import { Suspense } from "react";
@@ -5,18 +6,15 @@ import SAMLIDPForm from "./form";
 
 export default function SAMLPage() {
   return (
-    <div>
+    <>
+      <EmptyState
+        icon={LoadingSpinner}
+        title="SAML Authentication"
+        description={`${APP_NAME} is verifying your identity via SAML. This might take a few seconds...`}
+      />
       <Suspense>
         <SAMLIDPForm />
       </Suspense>
-      <div className="flex h-screen flex-col items-center justify-center space-y-6 text-center">
-        <h1 className="font-display text-4xl font-bold">Authenticating</h1>
-        <p className="text-lg text-gray-600">
-          {APP_NAME} is verifying your identity.
-          <br /> Please wait...
-        </p>
-        <LoadingSpinner className="h-7 w-7" />
-      </div>
-    </div>
+    </>
   );
 }
diff --git a/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx b/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
index fe70854c21..a6aef63158 100644
--- a/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/invites/[code]/page.tsx
@@ -1,22 +1,15 @@
 import { getSession } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
-import { LoadingSpinner, Logo } from "@dub/ui";
+import EmptyState from "@/ui/shared/empty-state";
+import { LoadingSpinner } from "@dub/ui";
+import { LinkBroken, Users6 } from "@dub/ui/src/icons";
 import { APP_NAME } from "@dub/utils";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 
 export const runtime = "nodejs";
 
-const PageCopy = ({ title, message }: { title: string; message: string }) => {
-  return (
-    <>
-      <h1 className="font-display text-3xl font-bold sm:text-4xl">{title}</h1>
-      <p className="max-w-lg text-pretty text-gray-600 sm:text-lg">{message}</p>
-    </>
-  );
-};
-
-export default function InvitesPage({
+export default function InitesPage({
   params,
 }: {
   params: {
@@ -24,17 +17,14 @@ export default function InvitesPage({
   };
 }) {
   return (
-    <div className="flex h-screen flex-col items-center justify-center space-y-6 text-center">
-      <Logo className="h-12 w-12" />
+    <div className="flex flex-col items-center justify-center gap-6 text-center">
       <Suspense
         fallback={
-          <>
-            <PageCopy
-              title="Verifying Invite"
-              message={`${APP_NAME} is verifying your invite link...`}
-            />
-            <LoadingSpinner className="h-7 w-7" />
-          </>
+          <EmptyState
+            icon={LoadingSpinner}
+            title="Verifying Invite"
+            description={`${APP_NAME} is verifying your invite link. This might take a few seconds...`}
+          />
         }
       >
         <VerifyInvite code={params.code} />
@@ -82,12 +72,11 @@ async function VerifyInvite({ code }: { code: string }) {
 
   if (!workspace) {
     return (
-      <>
-        <PageCopy
-          title="Invalid Invite"
-          message="The invite link you are trying to use is invalid. Please contact the workspace owner for a new invite."
-        />
-      </>
+      <EmptyState
+        icon={LinkBroken}
+        title="Invalid Invite Link"
+        description="The invite link you are trying to use is invalid. Please contact the workspace owner for more information."
+      />
     );
   }
 
@@ -98,9 +87,10 @@ async function VerifyInvite({ code }: { code: string }) {
 
   if (workspace._count.users >= workspace.usersLimit) {
     return (
-      <PageCopy
+      <EmptyState
+        icon={Users6}
         title="User Limit Reached"
-        message="The workspace you are trying to join is currently full. Please contact the workspace owner for more information."
+        description="The workspace you are trying to join is currently full. Please contact the workspace owner for more information."
       />
     );
   }
diff --git a/apps/web/app/app.dub.co/(auth)/layout.tsx b/apps/web/app/app.dub.co/(auth)/layout.tsx
index 5c3c735922..85ecd9816d 100644
--- a/apps/web/app/app.dub.co/(auth)/layout.tsx
+++ b/apps/web/app/app.dub.co/(auth)/layout.tsx
@@ -1,14 +1,19 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
-import { Background } from "@dub/ui";
+import { NewBackground } from "@/ui/shared/new-background";
+import { Wordmark } from "@dub/ui";
 import Providers from "app/providers";
+import Link from "next/link";
 import { ReactNode } from "react";
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   return (
     <Providers>
       <Toolbar />
-      <Background />
-      <div className="relative z-10 flex min-h-screen w-full justify-center">
+      <NewBackground />
+      <div className="relative flex min-h-screen w-full justify-center">
+        <Link href="/" className="absolute left-4 top-3 z-10">
+          <Wordmark className="h-6" />
+        </Link>
         {children}
       </div>
     </Providers>
diff --git a/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx b/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
index 2792a9e25d..22879b43ea 100644
--- a/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
+++ b/apps/web/app/app.dub.co/(auth)/oauth/authorize/page.tsx
@@ -4,7 +4,7 @@ import z from "@/lib/zod";
 import { authorizeRequestSchema } from "@/lib/zod/schemas/oauth";
 import EmptyState from "@/ui/shared/empty-state";
 import { BlurImage, Logo } from "@dub/ui";
-import { CircleWarning } from "@dub/ui/src/icons";
+import { CircleWarning, CubeSettings } from "@dub/ui/src/icons";
 import { HOME_DOMAIN, constructMetadata } from "@dub/utils";
 import { ArrowLeftRight } from "lucide-react";
 import { redirect } from "next/navigation";
@@ -36,9 +36,11 @@ export default async function Authorize({
 
   if (error || !integration) {
     return (
-      <div className="relative z-10 mt-[calc(30vh)] h-fit w-full max-w-md overflow-hidden sm:rounded-2xl">
-        <EmptyState icon={Logo} title={error} />
-      </div>
+      <EmptyState
+        icon={CubeSettings}
+        title="Invalid OAuth Request"
+        description={error}
+      />
     );
   }
 
diff --git a/apps/web/app/app.dub.co/(auth)/welcome/page.tsx b/apps/web/app/app.dub.co/(auth)/welcome/page.tsx
deleted file mode 100644
index 8e8d0645df..0000000000
--- a/apps/web/app/app.dub.co/(auth)/welcome/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { redirect } from "next/navigation";
-
-export default function OldWelcomePage() {
-  redirect("/onboarding");
-}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
index dde360c0c8..1c0678985e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
@@ -277,7 +277,7 @@ function UsageTabCard({
           <span className="text-xs leading-none text-neutral-600">
             {unlimited
               ? "Unlimited"
-              : `${prefix}${nFormatter(remaining, { full: remaining < 10000 })} remaining of ${prefix}${nFormatter(limit, { full: limit < 10000 })}`}
+              : `${prefix}${nFormatter(remaining, { full: true })} remaining of ${prefix}${nFormatter(limit, { full: limit < 1000000 })}`}
           </span>
         ) : (
           <div className="h-4 w-20 animate-pulse rounded-md bg-gray-200" />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
index 173a5c5fec..6a141bc7a4 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
@@ -1,5 +1,5 @@
+import SettingsLayout from "@/ui/layout/settings-layout";
 import { ReactNode } from "react";
-import SettingsLayout from "../../../../../ui/layout/settings-layout";
 
 export default function WorkspaceSettingsLayout({
   children,
diff --git a/apps/web/app/app.dub.co/(onboarding)/layout.tsx b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
index b831f185d5..dbf8afee15 100644
--- a/apps/web/app/app.dub.co/(onboarding)/layout.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/layout.tsx
@@ -1,12 +1,12 @@
 import Toolbar from "@/ui/layout/toolbar/toolbar";
+import { NewBackground } from "@/ui/shared/new-background";
 import Providers from "app/providers";
 import { PropsWithChildren } from "react";
-import { Background } from "./background";
 
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <Providers>
-      <Background />
+      <NewBackground />
       {children}
       <Toolbar show={["help"]} />
     </Providers>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index c43407af54..cc37906fb6 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,6 +1,6 @@
+import { NewBackground } from "@/ui/shared/new-background";
 import { Wordmark } from "@dub/ui/src/wordmark";
 import Link from "next/link";
-import { Background } from "./app.dub.co/(onboarding)/background";
 
 export default function NotFound() {
   return (
@@ -19,7 +19,7 @@ export default function NotFound() {
           Go back home
         </Link>
       </div>
-      <Background showAnimation />
+      <NewBackground showAnimation />
     </>
   );
 }
diff --git a/apps/web/lib/api/oauth/actions.ts b/apps/web/lib/api/oauth/actions.ts
index e0f0fc3f5e..d197a689e0 100644
--- a/apps/web/lib/api/oauth/actions.ts
+++ b/apps/web/lib/api/oauth/actions.ts
@@ -37,7 +37,8 @@ export const vaidateAuthorizeRequest = async (params: any) => {
 
   if (!oAuthApp || !oAuthApp.integration) {
     return {
-      error: "Could not find OAuth application.",
+      error:
+        "Could not find OAuth application. Make sure you have the correct client_id.",
     };
   }
 
@@ -45,7 +46,8 @@ export const vaidateAuthorizeRequest = async (params: any) => {
 
   if (!redirectUris.includes(redirectUri)) {
     return {
-      error: "Invalid redirect_uri parameter for the application.",
+      error:
+        "Invalid redirect_uri parameter detected. Make sure you have allowlisted the redirect_uri in your OAuth app settings.",
     };
   }
 
diff --git a/apps/web/lib/middleware/utils/app-redirect.ts b/apps/web/lib/middleware/utils/app-redirect.ts
index 707cd2c8c2..9c227a1bd2 100644
--- a/apps/web/lib/middleware/utils/app-redirect.ts
+++ b/apps/web/lib/middleware/utils/app-redirect.ts
@@ -1,5 +1,6 @@
 const APP_REDIRECTS = {
   "/account": "/account/settings",
+  "/welcome": "/onboarding",
 };
 
 export const appRedirect = (path: string) => {
diff --git a/apps/web/ui/domains/register-domain-form.tsx b/apps/web/ui/domains/register-domain-form.tsx
index f098f28094..d7649f601a 100644
--- a/apps/web/ui/domains/register-domain-form.tsx
+++ b/apps/web/ui/domains/register-domain-form.tsx
@@ -106,17 +106,13 @@ export function RegisterDomainForm({
     } else {
       toast.success("Domain registered successfully!");
 
-      // Mutate workspace, domains links
+      // Mutate workspace, domains, and links
       await Promise.all([
         mutate(`/api/workspaces/${workspace.slug}`),
         mutate(
           (key) =>
             typeof key === "string" &&
-            (key.startsWith(`/api/domains?workspaceId=${workspace.id}`) ||
-              key.startsWith(`/api/domains/count?workspaceId=${workspace.id}`)),
-        ),
-        mutate(
-          (key) => typeof key === "string" && key.startsWith("/api/links"),
+            (key.startsWith("/api/domains") || key.startsWith("/api/links")),
           undefined,
           { revalidate: true },
         ),
diff --git a/apps/web/ui/layout/auth-layout.tsx b/apps/web/ui/layout/auth-layout.tsx
index ab8b717db2..c03a5d6cb5 100644
--- a/apps/web/ui/layout/auth-layout.tsx
+++ b/apps/web/ui/layout/auth-layout.tsx
@@ -1,4 +1,4 @@
-import { BlurImage, ClientOnly, Wordmark } from "@dub/ui";
+import { BlurImage, ClientOnly } from "@dub/ui";
 import { Suspense } from "react";
 
 const logos = [
@@ -26,7 +26,6 @@ export const AuthLayout = ({ children }: AuthLayoutProps) => {
       <div className="col-span-1 flex min-h-screen flex-col items-center justify-between border-r border-gray-200 bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur sm:col-span-3">
         <div className="flex h-full w-full flex-col items-center justify-center">
           <ClientOnly className="relative flex w-full flex-col items-center justify-center">
-            <Wordmark className="mb-8 h-12" />
             <Suspense>{children}</Suspense>
           </ClientOnly>
         </div>
@@ -55,13 +54,13 @@ export const AuthLayout = ({ children }: AuthLayoutProps) => {
       </div>
 
       <div className="hidden h-full flex-col justify-center space-y-12 overflow-hidden md:col-span-2 md:flex">
-        <div className="ml-12 h-1/2 w-[112%] rounded-xl border border-gray-200 p-2 shadow-xl">
+        <div className="ml-12 h-1/2 w-[140%] rounded-xl border border-gray-200 p-2 shadow-xl">
           <BlurImage
             alt="Dub.co Analytics"
-            src="https://assets.dub.co/compare/dub-analytics.png"
-            width={3236}
-            height={1618}
-            className="h-full rounded-lg border border-gray-200 object-cover"
+            src="https://assets.dub.co/changelog/new-dashboard.jpg"
+            width={2400}
+            height={1260}
+            className="aspect-[2400/1260] h-full rounded-lg border border-gray-200"
           />
         </div>
         <a
diff --git a/apps/web/ui/modals/delete-domain-modal.tsx b/apps/web/ui/modals/delete-domain-modal.tsx
index 8e0c0cf067..98de227981 100644
--- a/apps/web/ui/modals/delete-domain-modal.tsx
+++ b/apps/web/ui/modals/delete-domain-modal.tsx
@@ -61,8 +61,9 @@ function DeleteDomainModal({
             if (res.status === 200) {
               await mutate(
                 (key) =>
-                  typeof key === "string" &&
-                  key.startsWith(`/api/domains?workspaceId=${id}`),
+                  typeof key === "string" && key.startsWith("/api/domains"),
+                undefined,
+                { revalidate: true },
               );
               setShowDeleteDomainModal(false);
               toast.success("Successfully deleted domain!");
diff --git a/apps/web/ui/shared/empty-state.tsx b/apps/web/ui/shared/empty-state.tsx
index 08b66daba2..bdb2e54a0d 100644
--- a/apps/web/ui/shared/empty-state.tsx
+++ b/apps/web/ui/shared/empty-state.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { EmptyState as EmptyStateBlock } from "@dub/blocks";
 import { buttonVariants } from "@dub/ui";
 import { cn } from "@dub/utils";
diff --git a/apps/web/ui/shared/new-background.tsx b/apps/web/ui/shared/new-background.tsx
new file mode 100644
index 0000000000..a04eddd90f
--- /dev/null
+++ b/apps/web/ui/shared/new-background.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { cn } from "@dub/utils";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+export function NewBackground(props: { showAnimation?: boolean }) {
+  const pathname = usePathname();
+  const [isGridLoaded, setIsGridLoaded] = useState(false);
+  const [isBackgroundLoaded, setIsBackgroundLoaded] = useState(false);
+  const isLoaded = isGridLoaded && isBackgroundLoaded;
+
+  const showAnimation =
+    props.showAnimation || pathname === "/onboarding/welcome";
+
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 overflow-hidden bg-white transition-opacity duration-300",
+        showAnimation ? (isLoaded ? "opacity-100" : "opacity-0") : "opacity-40",
+      )}
+    >
+      <BackgroundGradient className="opacity-15" />
+      <div className="absolute left-1/2 top-0 -translate-x-1/2 opacity-50 transition-all sm:opacity-100">
+        <Image
+          src="https://assets.dub.co/misc/welcome-background-grid.svg"
+          onLoad={() => setIsGridLoaded(true)}
+          alt=""
+          width={1750}
+          height={1046}
+          className="absolute inset-0"
+        />
+        <Image
+          src="https://assets.dub.co/misc/welcome-background.svg"
+          onLoad={() => setIsBackgroundLoaded(true)}
+          alt=""
+          width={1750}
+          height={1046}
+          className={cn(
+            "relative min-w-[1000px] max-w-screen-2xl transition-opacity duration-300",
+            showAnimation ? "opacity-100" : "opacity-0",
+          )}
+        />
+      </div>
+      <BackgroundGradient className="opacity-100 mix-blend-soft-light" />
+    </div>
+  );
+}
+
+function BackgroundGradient({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "absolute left-0 top-0 aspect-square w-full overflow-hidden sm:aspect-[2/1]",
+        "[mask-image:radial-gradient(70%_100%_at_50%_0%,_black_70%,_transparent)]",
+        className,
+      )}
+    >
+      <div
+        className="absolute inset-0 saturate-150"
+        style={{
+          backgroundImage: `conic-gradient(from -45deg at 50% -10%, #3A8BFD 0deg, #FF0000 172.98deg, #855AFC 215.14deg, #FF7B00 257.32deg, #3A8BFD 360deg)`,
+        }}
+      />
+      <div className="absolute inset-0 backdrop-blur-[100px]" />
+    </div>
+  );
+}
diff --git a/packages/blocks/src/empty-state.tsx b/packages/blocks/src/empty-state.tsx
index 80b1203ac4..455d01623c 100644
--- a/packages/blocks/src/empty-state.tsx
+++ b/packages/blocks/src/empty-state.tsx
@@ -16,8 +16,8 @@ export function EmptyState({
 }: EmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center gap-y-4">
-      <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-200 bg-gray-50">
-        <Icon className="h-8 w-8 text-black" strokeWidth={0.75} />
+      <div className="flex size-16 items-center justify-center rounded-2xl border border-gray-200 bg-gray-50">
+        <Icon className="size-6 text-gray-800" />
       </div>
       <p className="text-center text-base font-medium text-gray-950">{title}</p>
       {description && (