diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
index 48210cf01..b12a8ce05 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
@@ -37,6 +37,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/utils";
 import { Notice } from "@/components/Notice";
 import { getActionTypeColor } from "@/app/(app)/[emailAccountId]/assistant/constants";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export function RulesPrompt() {
   const { emailAccountId } = useAccount();
@@ -58,7 +59,11 @@ export function RulesPrompt() {
 
   return (
     <>
-      <LoadingContent loading={isLoading} error={error}>
+      <LoadingContent
+        loading={isLoading}
+        error={error}
+        loadingComponent={<Skeleton className="h-[60vh] w-full" />}
+      >
         {data && (
           <div className="mt-4">
             <RulesPromptForm
@@ -264,7 +269,6 @@ Let me know if you're interested!
             <div className="flex flex-wrap gap-2">
               <Button
                 type="submit"
-                variant="primaryBlue"
                 disabled={isSubmitting || isGenerating}
                 loading={isSubmitting}
               >
@@ -338,43 +342,6 @@ Let me know if you're interested!
   );
 }
 
-export function PromptFile() {
-  const { emailAccountId } = useAccount();
-  const { data, isLoading, error, mutate } = useSWR<
-    RulesPromptResponse,
-    { error: string }
-  >("/api/user/rules/prompt");
-
-  const { isModalOpen, setIsModalOpen } = useModal();
-
-  const [persona, setPersona] = useState<string | null>(null);
-
-  const personaPrompt = persona
-    ? personas[persona as keyof typeof personas]?.prompt
-    : undefined;
-
-  return (
-    <LoadingContent loading={isLoading} error={error}>
-      {data && (
-        <>
-          <RulesPromptForm
-            emailAccountId={emailAccountId}
-            rulesPrompt={data.rulesPrompt}
-            personaPrompt={personaPrompt}
-            onOpenPersonaDialog={() => setIsModalOpen(true)}
-            mutate={mutate}
-          />
-          <PersonaDialog
-            isOpen={isModalOpen}
-            setIsOpen={setIsModalOpen}
-            onSelect={setPersona}
-          />
-        </>
-      )}
-    </LoadingContent>
-  );
-}
-
 function PureExamples({ onSelect }: { onSelect: (example: string) => void }) {
   return (
     <div>
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/SettingsTab.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/SettingsTab.tsx
index 188deb8cc..3c0df5dec 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/SettingsTab.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/SettingsTab.tsx
@@ -8,7 +8,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 export function SettingsTab() {
   return (
     <Tabs defaultValue="prompt" searchParam="settings-tab">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 pt-2">
         <span className="text-sm font-medium">View as:</span>
         <TabsList>
           <TabsTrigger value="prompt">Prompt</TabsTrigger>
@@ -17,17 +17,13 @@ export function SettingsTab() {
       </div>
 
       <TabsContent value="prompt">
-        <div className="max-w-screen-xl">
-          <RulesPrompt />
-        </div>
+        <RulesPrompt />
       </TabsContent>
       <TabsContent value="rules">
-        <div className="max-w-screen-lg">
-          <Rules />
-        </div>
+        <Rules />
       </TabsContent>
 
-      <div className="mt-8 max-w-screen-lg space-y-2">
+      <div className="mt-8 space-y-2">
         <DraftReplies />
         <AboutSetting />
         <DigestSetting />
diff --git a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
index 53b688942..d92b1db49 100644
--- a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
@@ -6,11 +6,10 @@ import { MessageCircleIcon, SlidersIcon } from "lucide-react";
 import prisma from "@/utils/prisma";
 import { History } from "@/app/(app)/[emailAccountId]/assistant/History";
 import { Pending } from "@/app/(app)/[emailAccountId]/assistant/Pending";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
 import { Process } from "@/app/(app)/[emailAccountId]/assistant/Process";
 import { OnboardingModal } from "@/components/OnboardingModal";
 import { PermissionsCheck } from "@/app/(app)/[emailAccountId]/PermissionsCheck";
-import { TabsToolbar } from "@/components/TabsToolbar";
 import { GmailProvider } from "@/providers/GmailProvider";
 import { ASSISTANT_ONBOARDING_COOKIE } from "@/utils/cookies";
 import { prefixPath } from "@/utils/path";
@@ -18,15 +17,38 @@ import { Button } from "@/components/ui/button";
 import { PremiumAlertWithData } from "@/components/PremiumAlert";
 import { checkUserOwnsEmailAccount } from "@/utils/email-account";
 import { SettingsTab } from "@/app/(app)/[emailAccountId]/assistant/SettingsTab";
+import { PageHeading } from "@/components/Typography";
+import { TabSelect } from "@/components/TabSelect";
 
 export const maxDuration = 300; // Applies to the actions
 
+const tabOptions = (emailAccountId: string) => [
+  {
+    id: "settings",
+    label: "Settings",
+    href: `/${emailAccountId}/automation?tab=settings`,
+  },
+  {
+    id: "test",
+    label: "Test",
+    href: `/${emailAccountId}/automation?tab=test`,
+  },
+  {
+    id: "history",
+    label: "History",
+    href: `/${emailAccountId}/automation?tab=history`,
+  },
+];
+
 export default async function AutomationPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ emailAccountId: string }>;
+  searchParams: Promise<{ tab: string }>;
 }) {
   const { emailAccountId } = await params;
+  const { tab } = await searchParams;
   await checkUserOwnsEmailAccount({ emailAccountId });
 
   // onboarding redirect
@@ -45,104 +67,139 @@ export default async function AutomationPage({
     }
   }
 
-  const hasPendingRule = prisma.rule.findFirst({
-    where: { emailAccountId, automate: false },
-    select: { id: true },
-  });
+  const hasPendingRule = prisma.rule
+    .findFirst({
+      where: { emailAccountId, automate: false },
+      select: { id: true },
+    })
+    .then((rule) => rule !== null);
 
   return (
     <GmailProvider>
       <Suspense>
         <PermissionsCheck />
 
-        {/* <div className="content-container mt-2">
-          <AlertWithButton
-            title="Try our new AI Assistant experience"
-            description="This is the legacy assistant interface. Experience our improved AI Assistant with better conversation flow and enhanced capabilities."
-            icon={<SparklesIcon className="h-4 w-4" />}
-            variant="blue"
-            button={
-              <Button asChild variant="blue">
-                <Link href={prefixPath(emailAccountId, "/assistant")}>
-                  Try New Assistant
-                </Link>
-              </Button>
-            }
-          />
-        </div> */}
-
-        <PremiumAlertWithData className="content-container mt-2" />
-
-        <Tabs defaultValue="settings">
-          <TabsToolbar>
-            <div className="w-full overflow-x-auto">
-              <TabsList>
-                <TabsTrigger value="settings">Settings</TabsTrigger>
-                <TabsTrigger value="test">Test</TabsTrigger>
-                <TabsTrigger value="history">History</TabsTrigger>
-                <Suspense>
-                  {(await hasPendingRule) && (
-                    <TabsTrigger value="pending">Pending</TabsTrigger>
-                  )}
-                </Suspense>
-              </TabsList>
-            </div>
+        <div className="mx-4">
+          <div className="w-screen-xl mx-auto max-w-screen-xl">
+            <div className="w-full">
+              <PremiumAlertWithData className="mb-2" />
+
+              <div className="flex items-center justify-between">
+                <PageHeading>Assistant</PageHeading>
+                <ExtraActions emailAccountId={emailAccountId} />
+              </div>
 
-            <div className="flex items-center gap-2">
-              <Button asChild variant="outline" size="sm">
-                <Link
-                  href={prefixPath(emailAccountId, "/assistant/onboarding")}
+              <div className="border-b border-neutral-200 pt-2">
+                <Suspense
+                  fallback={
+                    <TabSelect
+                      options={tabOptions(emailAccountId)}
+                      selected={tab ?? "settings"}
+                    />
+                  }
                 >
-                  <SlidersIcon className="mr-2 hidden size-4 md:block" />
-                  View Setup
-                </Link>
-              </Button>
-
-              <OnboardingModal
-                title="Getting started with AI Personal Assistant"
-                description={
-                  <>
-                    Learn how to use the AI Personal Assistant to automatically
-                    label, archive, and more.
-                  </>
-                }
-                videoId="SoeNDVr7ve4"
-                buttonProps={{ size: "sm", variant: "outline" }}
-              />
-
-              <Button size="sm" variant="primaryBlue" asChild>
-                <Link href={prefixPath(emailAccountId, "/assistant")}>
-                  <MessageCircleIcon className="mr-2 size-4" />
-                  AI Chat
-                </Link>
-              </Button>
-            </div>
-          </TabsToolbar>
-
-          <TabsContent value="settings" className="content-container mb-10">
-            <SettingsTab />
-          </TabsContent>
-          <TabsContent value="test" className="content-container mb-10">
-            <div className="max-w-screen-lg">
-              <Process />
-            </div>
-          </TabsContent>
-          <TabsContent value="history" className="content-container mb-10">
-            <div className="max-w-screen-lg">
-              <History />
+                  <TabNavigation
+                    emailAccountId={emailAccountId}
+                    tab={tab}
+                    hasPendingRule={hasPendingRule}
+                  />
+                </Suspense>
+              </div>
+
+              <Tabs defaultValue="settings">
+                <TabsContent value="settings" className="mb-10">
+                  <SettingsTab />
+                </TabsContent>
+                <TabsContent value="test" className="mb-10">
+                  <Process />
+                </TabsContent>
+                <TabsContent value="history" className="mb-10">
+                  <History />
+                </TabsContent>
+                <Suspense>
+                  <PendingTab hasPendingRule={hasPendingRule} />
+                </Suspense>
+              </Tabs>
             </div>
-          </TabsContent>
-          <Suspense>
-            {(await hasPendingRule) && (
-              <TabsContent value="pending" className="content-container mb-10">
-                <div className="max-w-screen-lg">
-                  <Pending />
-                </div>
-              </TabsContent>
-            )}
-          </Suspense>
-        </Tabs>
+          </div>
+        </div>
       </Suspense>
     </GmailProvider>
   );
 }
+
+async function TabNavigation({
+  emailAccountId,
+  tab,
+  hasPendingRule,
+}: {
+  emailAccountId: string;
+  tab: string;
+  hasPendingRule: Promise<boolean>;
+}) {
+  return (
+    <TabSelect
+      options={[
+        ...tabOptions(emailAccountId),
+        ...((await hasPendingRule)
+          ? [
+              {
+                id: "pending",
+                label: "Pending",
+                href: `/${emailAccountId}/automation?tab=pending`,
+              },
+            ]
+          : []),
+      ]}
+      selected={tab ?? "settings"}
+    />
+  );
+}
+
+async function PendingTab({
+  hasPendingRule,
+}: {
+  hasPendingRule: Promise<boolean>;
+}) {
+  const hasPendingRuleValue = await hasPendingRule;
+
+  if (!hasPendingRuleValue) return null;
+
+  return (
+    <TabsContent value="pending" className="mb-10">
+      <Pending />
+    </TabsContent>
+  );
+}
+
+function ExtraActions({ emailAccountId }: { emailAccountId: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <Button asChild variant="ghost" size="sm">
+        <Link href={prefixPath(emailAccountId, "/assistant/onboarding")}>
+          <SlidersIcon className="mr-2 hidden size-4 md:block" />
+          View Setup
+        </Link>
+      </Button>
+
+      <OnboardingModal
+        title="Getting started with AI Personal Assistant"
+        description={
+          <>
+            Learn how to use the AI Personal Assistant to automatically label,
+            archive, and more.
+          </>
+        }
+        videoId="SoeNDVr7ve4"
+        buttonProps={{ size: "sm", variant: "ghost" }}
+      />
+
+      <Button size="sm" variant="primaryBlue" asChild>
+        <Link href={prefixPath(emailAccountId, "/assistant")}>
+          <MessageCircleIcon className="mr-2 size-4" />
+          AI Chat
+        </Link>
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/components/TabSelect.tsx b/apps/web/components/TabSelect.tsx
new file mode 100644
index 000000000..bc85cd1f1
--- /dev/null
+++ b/apps/web/components/TabSelect.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+/*
+ * Adapted from: https://github.com/dubinc/dub
+ *
+ * Original work Copyright (c) 2023 Dub, Inc.
+ * Licensed under AGPL-3.0
+ *
+ * This file may have been modified from the original.
+ */
+import { cn } from "@/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { LayoutGroup, motion } from "framer-motion";
+import Link from "next/link";
+import { type Dispatch, type SetStateAction, useId } from "react";
+import { ArrowUpRight } from "lucide-react";
+
+const tabSelectButtonVariants = cva("p-4 transition-colors duration-75", {
+  variants: {
+    variant: {
+      default:
+        "text-content-subtle data-[selected=true]:text-content-emphasis data-[selected=false]:hover:text-content-default",
+      accent:
+        "text-content-subtle transition-[color,font-weight] data-[selected=true]:text-blue-600 data-[selected=false]:hover:text-content-default data-[selected=true]:font-medium",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const tabSelectIndicatorVariants = cva("absolute bottom-0 w-full px-1.5", {
+  variants: {
+    variant: {
+      default: "text-bg-inverted",
+      accent: "text-blue-600",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export function TabSelect<T extends string>({
+  variant,
+  options,
+  selected,
+  onSelect,
+  className,
+}: VariantProps<typeof tabSelectButtonVariants> & {
+  options: { id: T; label: string; href?: string; target?: string }[];
+  selected: string | null;
+  onSelect?: Dispatch<SetStateAction<T>> | ((id: T) => void);
+  className?: string;
+}) {
+  const layoutGroupId = useId();
+
+  return (
+    <div className={cn("flex text-sm", className)}>
+      <LayoutGroup id={layoutGroupId}>
+        {options.map(({ id, label, href, target }) => {
+          const isSelected = id === selected;
+          const As = href ? Link : "div";
+          return (
+            <As
+              key={id}
+              className="relative"
+              href={href ?? "#"}
+              target={target ?? undefined}
+            >
+              <button
+                type="button"
+                {...(onSelect && !href && { onClick: () => onSelect(id) })}
+                className={cn(
+                  tabSelectButtonVariants({ variant }),
+                  target === "_blank" && "group flex items-center gap-1.5",
+                )}
+                data-selected={isSelected}
+                aria-selected={isSelected}
+              >
+                {label}
+                {target === "_blank" && <ArrowUpRight className="size-2.5" />}
+              </button>
+              {isSelected && (
+                <motion.div
+                  layoutId="indicator"
+                  transition={{
+                    duration: 0.1,
+                  }}
+                  className={tabSelectIndicatorVariants({ variant })}
+                >
+                  <div className="h-0.5 rounded-t-full bg-current" />
+                </motion.div>
+              )}
+            </As>
+          );
+        })}
+      </LayoutGroup>
+    </div>
+  );
+}
diff --git a/apps/web/components/TopBar.tsx b/apps/web/components/TopBar.tsx
index 2ef07fb4d..44fae7624 100644
--- a/apps/web/components/TopBar.tsx
+++ b/apps/web/components/TopBar.tsx
@@ -10,7 +10,7 @@ export function TopBar({ children, className, sticky = false }: TopBarProps) {
   return (
     <div
       className={cn(
-        "justify-between border-b border-border bg-background px-2 py-2 shadow sm:flex sm:px-4",
+        "justify-between border-b border-border bg-background px-2 py-2 sm:flex sm:px-4",
         sticky && "top-0 z-10 sm:sticky",
         className,
       )}
diff --git a/apps/web/components/TopNav.tsx b/apps/web/components/TopNav.tsx
index c7d81c08e..37d581d0e 100644
--- a/apps/web/components/TopNav.tsx
+++ b/apps/web/components/TopNav.tsx
@@ -29,7 +29,7 @@ import { ProfileImage } from "@/components/ProfileImage";
 
 export function TopNav({ trigger }: { trigger: React.ReactNode }) {
   return (
-    <div className="content-container flex h-16 shrink-0 items-center gap-x-4 border-b border-border bg-background shadow-sm sm:gap-x-6">
+    <div className="content-container flex shrink-0 items-center gap-x-4 bg-background pt-3 sm:gap-x-6">
       {trigger}
 
       <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
diff --git a/version.txt b/version.txt
index 4e0d75544..d72a3cbc1 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v1.8.6
+v1.8.7