diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx
index e17c8827e0..7ae5f195f6 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/AIChatButton.tsx
@@ -5,13 +5,18 @@ import { useSidebar } from "@/components/ui/sidebar";
 import { MessageCircleIcon } from "lucide-react";
 
 export function AIChatButton() {
-  const { setOpen } = useSidebar();
+  const { setOpen, setOpenMobile, isMobile } = useSidebar();
 
   return (
     <Button
       size="sm"
       variant="outline"
-      onClick={() => setOpen((arr) => [...arr, "chat-sidebar"])}
+      onClick={() => {
+        setOpen((arr) => [...arr, "chat-sidebar"]);
+        if (isMobile) {
+          setOpenMobile((arr) => [...arr, "chat-sidebar"]);
+        }
+      }}
     >
       <MessageCircleIcon className="mr-2 size-4" />
       AI Chat
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx
index 89dd5a1590..847b27695d 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/AvailableActionsPanel.tsx
@@ -33,7 +33,7 @@ const actionTooltips: Partial<Record<ActionType, string>> = {
 export function AvailableActionsPanel() {
   const { provider } = useAccount();
   return (
-    <Card className="h-fit bg-slate-50 dark:bg-slate-900">
+    <Card className="h-fit bg-slate-50 dark:bg-slate-900 hidden sm:block">
       <CardContent className="pt-4">
         <div className="grid gap-2">
           <ActionSection
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx
index b9337c123a..759aa67fe1 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/Rules.tsx
@@ -64,10 +64,8 @@ import {
 import { DEFAULT_COLD_EMAIL_PROMPT } from "@/utils/cold-email/prompt";
 
 export function Rules({
-  size = "md",
   showAddRuleButton = true,
 }: {
-  size?: "sm" | "md";
   showAddRuleButton?: boolean;
 }) {
   const { data, isLoading, error, mutate } = useRules();
@@ -143,11 +141,13 @@ export function Rules({
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead className="w-16">Enabled</TableHead>
-                  <TableHead>Name</TableHead>
-                  {size === "md" && <TableHead>Condition</TableHead>}
-                  <TableHead>Action</TableHead>
-                  <TableHead>
+                  <TableHead className="w-16 px-2 sm:px-4">Enabled</TableHead>
+                  <TableHead className="px-2 sm:px-4">Name</TableHead>
+                  <TableHead className="hidden sm:table-cell px-2 sm:px-4">
+                    Condition
+                  </TableHead>
+                  <TableHead className="px-2 sm:px-4">Action</TableHead>
+                  <TableHead className="px-2 sm:px-4">
                     {showAddRuleButton && (
                       <div className="flex justify-end">
                         <div className="my-2">
@@ -186,7 +186,7 @@ export function Rules({
                     >
                       <TableCell
                         onClick={(e) => e.stopPropagation()}
-                        className="text-center"
+                        className="text-center p-2 sm:p-4"
                       >
                         <Switch
                           size="sm"
@@ -227,53 +227,53 @@ export function Rules({
                           }}
                         />
                       </TableCell>
-                      <TableCell className="font-medium">{rule.name}</TableCell>
-                      {size === "md" && (
-                        <TableCell>
-                          {(() => {
-                            const systemRuleDesc = getSystemRuleDescription(
-                              rule.systemType,
-                            );
-                            if (isConversationStatus) {
-                              return (
-                                <div className="flex items-center gap-2">
-                                  <span className="text-sm text-muted-foreground">
-                                    {systemRuleDesc?.condition || ""}
-                                  </span>
-                                  <Tooltip>
-                                    <TooltipTrigger asChild>
-                                      <InfoIcon className="size-3.5 text-green-600 dark:text-green-500 flex-shrink-0 cursor-help" />
-                                    </TooltipTrigger>
-                                    <TooltipContent
-                                      side="right"
-                                      className="max-w-xs"
-                                    >
-                                      <p>
-                                        System rule to track conversation
-                                        status. Conditions cannot be edited.
-                                      </p>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                </div>
-                              );
-                            }
+                      <TableCell className="font-medium p-2 sm:p-4">
+                        {rule.name}
+                      </TableCell>
+                      <TableCell className="hidden sm:table-cell p-2 sm:p-4">
+                        {(() => {
+                          const systemRuleDesc = getSystemRuleDescription(
+                            rule.systemType,
+                          );
+                          if (isConversationStatus) {
                             return (
-                              <ExpandableText
-                                text={conditionsToString(rule)}
-                                className="max-w-xs"
-                              />
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm text-muted-foreground">
+                                  {systemRuleDesc?.condition || ""}
+                                </span>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <InfoIcon className="size-3.5 text-green-600 dark:text-green-500 flex-shrink-0 cursor-help" />
+                                  </TooltipTrigger>
+                                  <TooltipContent
+                                    side="right"
+                                    className="max-w-xs"
+                                  >
+                                    <p>
+                                      System rule to track conversation status.
+                                      Conditions cannot be edited.
+                                    </p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </div>
                             );
-                          })()}
-                        </TableCell>
-                      )}
-                      <TableCell>
+                          }
+                          return (
+                            <ExpandableText
+                              text={conditionsToString(rule)}
+                              className="max-w-xs"
+                            />
+                          );
+                        })()}
+                      </TableCell>
+                      <TableCell className="p-2 sm:p-4">
                         <ActionBadges
                           actions={rule.actions}
                           provider={provider}
                           labels={userLabels}
                         />
                       </TableCell>
-                      <TableCell className="text-center">
+                      <TableCell className="text-center p-2 sm:p-4">
                         {!isPlaceholder && (
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
@@ -434,7 +434,7 @@ export function ActionBadges({
   labels: Array<{ id: string; name: string }>;
 }) {
   return (
-    <div className="flex gap-2 flex-wrap">
+    <div className="flex gap-2 flex-wrap min-w-0">
       {sortActionsByPriority(actions).map((action) => {
         const Icon = getActionIcon(action.type);
 
@@ -442,9 +442,9 @@ export function ActionBadges({
           <Badge
             key={action.id}
             color={getActionColor(action.type)}
-            className="w-fit text-nowrap"
+            className="w-fit sm:text-nowrap shrink-0"
           >
-            <Icon className="size-3 mr-1.5" />
+            <Icon className="size-3 mr-1.5 hidden sm:block" />
             {getActionDisplay(action, provider, labels)}
           </Badge>
         );
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
index 2ff8fa7e6d..87ad7dc838 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
@@ -175,7 +175,7 @@ function RulesPromptForm({
                 />
               </LoadingContent>
 
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-col sm:flex-row flex-wrap gap-2">
                 <Button type="submit" size="sm" loading={isSubmitting}>
                   Create rules
                 </Button>
@@ -190,7 +190,7 @@ function RulesPromptForm({
                 </Button>
 
                 <Button
-                  className="ml-auto"
+                  className="ml-auto w-full sm:w-auto"
                   variant="outline"
                   size="sm"
                   onClick={() => ruleDialog.onOpen()}
diff --git a/apps/web/app/(app)/[emailAccountId]/compose/page.tsx b/apps/web/app/(app)/[emailAccountId]/compose/page.tsx
deleted file mode 100644
index b9f0377cf7..0000000000
--- a/apps/web/app/(app)/[emailAccountId]/compose/page.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ComposeEmailFormLazy } from "@/app/(app)/[emailAccountId]/compose/ComposeEmailFormLazy";
-import { TopSection } from "@/components/TopSection";
-
-export default function ComposePage() {
-  return (
-    <>
-      <TopSection title="New Message" />
-
-      <div className="content-container max-w-2xl py-6">
-        <ComposeEmailFormLazy />
-      </div>
-    </>
-  );
-}
diff --git a/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx b/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx
index c3f076ec48..d6a4ef3e8d 100644
--- a/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingCategories.tsx
@@ -218,7 +218,7 @@ function CategoryCard({
           <IconCircle size="sm" color={iconColor} Icon={Icon} />
           <div>
             {useTooltip ? (
-              <div className="flex flex-1 items-center gap-2">
+              <div className="flex flex-1 items-center gap-2 text-sm sm:text-base">
                 {label}
                 {description && (
                   <TooltipExplanation
@@ -256,9 +256,9 @@ function CategoryCard({
                 <>
                   <SelectItem value="label">Categorise</SelectItem>
                   <SelectItem value="move_folder">Move to folder</SelectItem>
-                  <SelectItem value="move_folder_delayed">
+                  {/* <SelectItem value="move_folder_delayed">
                     Move to folder after a week
-                  </SelectItem>
+                  </SelectItem> */}
                 </>
               )}
               {isGoogleProvider(provider) && (
@@ -267,9 +267,9 @@ function CategoryCard({
                   <SelectItem value="label_archive">
                     Label & skip inbox
                   </SelectItem>
-                  <SelectItem value="label_archive_delayed">
+                  {/* <SelectItem value="label_archive_delayed">
                     Label & archive after a week
-                  </SelectItem>
+                  </SelectItem> */}
                 </>
               )}
               <SelectItem value="none">Do nothing</SelectItem>
diff --git a/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx b/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
index 8d890fd8d8..b49e5582ce 100644
--- a/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/onboarding/OnboardingWrapper.tsx
@@ -14,7 +14,7 @@ export function OnboardingWrapper({
         className,
       )}
     >
-      <div className="mx-auto flex max-w-6xl flex-col justify-center space-y-6 p-10 duration-500 animate-in fade-in">
+      <div className="mx-auto flex max-w-6xl flex-col justify-center space-y-6 p-4 sm:p-10 duration-500 animate-in fade-in">
         {children}
       </div>
     </div>
diff --git a/apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx b/apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx
index 8161b04106..613224e026 100644
--- a/apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/onboarding/StepCustomRules.tsx
@@ -44,7 +44,7 @@ export function StepCustomRules({
         <div className="rounded-2xl p-4 bg-slate-50 border border-slate-200">
           <Image
             src="/images/onboarding/custom-rules.png"
-            alt="Draft replies"
+            alt="Custom rules"
             width={1200}
             height={800}
             className="rounded-xl border border-slate-200"
diff --git a/apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx b/apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx
index aabe8f8375..865a6b89b7 100644
--- a/apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/onboarding/StepIntro.tsx
@@ -18,12 +18,12 @@ export function StepIntro({ onNext }: { onNext: () => void }) {
       <div className="text-center mt-4">
         <PageHeading>Get to know Inbox Zero</PageHeading>
         <TypographyP className="mt-2 max-w-lg mx-auto">
-          Here are the basics of Inbox Zero. We'll take you through the steps to
-          get you started and set you up for success.
+          We'll take you through the steps to get you started and set you up for
+          success.
         </TypographyP>
       </div>
       <div className="mt-8">
-        <div className="grid gap-8">
+        <div className="grid gap-4 sm:gap-8">
           <Benefit
             index={1}
             title="Emails sorted automatically"
@@ -73,7 +73,7 @@ function Benefit({
       <div className="flex items-center gap-4 col-span-2">
         <IconCircle>{index}</IconCircle>
         <div>
-          <div className="font-semibold text-xl">{title}</div>
+          <div className="font-semibold text-lg sm:text-xl">{title}</div>
           <div className="text-sm text-muted-foreground mt-1 leading-6">
             <p>{description}</p>
           </div>
diff --git a/apps/web/app/(app)/[emailAccountId]/usage/page.tsx b/apps/web/app/(app)/[emailAccountId]/usage/page.tsx
index 9ddcefcdf4..ab87c8cebb 100644
--- a/apps/web/app/(app)/[emailAccountId]/usage/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/usage/page.tsx
@@ -1,5 +1,4 @@
 import { getUsage } from "@/utils/redis/usage";
-import { TopSection } from "@/components/TopSection";
 import { Usage } from "@/app/(app)/[emailAccountId]/usage/usage";
 import { auth } from "@/utils/auth";
 import {
@@ -9,6 +8,8 @@ import {
 import { checkUserOwnsEmailAccount } from "@/utils/email-account";
 import { notFound } from "next/navigation";
 import prisma from "@/utils/prisma";
+import { PageWrapper } from "@/components/PageWrapper";
+import { PageHeader } from "@/components/PageHeader";
 
 export default async function UsagePage(props: {
   params: Promise<{ emailAccountId: string }>;
@@ -53,17 +54,18 @@ export default async function UsagePage(props: {
   const isOwnAccount = emailAccount.user.id === userId;
 
   return (
-    <div>
-      <TopSection
+    <PageWrapper>
+      <PageHeader
         title={
           isOwnAccount
             ? "Credits and Usage"
             : `Credits and Usage for ${emailAccount.name || emailAccount.email}`
         }
+        description=""
       />
-      <div className="m-4">
+      <div className="my-4">
         <Usage usage={usage} />
       </div>
-    </div>
+    </PageWrapper>
   );
 }
diff --git a/apps/web/app/(app)/admin/page.tsx b/apps/web/app/(app)/admin/page.tsx
index edef2aa29c..ded2d36ab5 100644
--- a/apps/web/app/(app)/admin/page.tsx
+++ b/apps/web/app/(app)/admin/page.tsx
@@ -1,6 +1,5 @@
 import { AdminUpgradeUserForm } from "@/app/(app)/admin/AdminUpgradeUserForm";
 import { AdminUserControls } from "@/app/(app)/admin/AdminUserControls";
-import { TopSection } from "@/components/TopSection";
 import { auth } from "@/utils/auth";
 import { ErrorPage } from "@/components/ErrorPage";
 import { isAdmin } from "@/utils/admin";
@@ -12,6 +11,8 @@ import { RegisterSSOModal } from "@/app/(app)/admin/RegisterSSOModal";
 import { AdminHashEmail } from "@/app/(app)/admin/AdminHashEmail";
 import { GmailUrlConverter } from "@/app/(app)/admin/GmailUrlConverter";
 import { DebugLabels } from "@/app/(app)/admin/DebugLabels";
+import { PageWrapper } from "@/components/PageWrapper";
+import { PageHeader } from "@/components/PageHeader";
 
 // NOTE: Turn on Fluid Compute on Vercel to allow for 800 seconds max duration
 export const maxDuration = 800;
@@ -29,10 +30,10 @@ export default async function AdminPage() {
   }
 
   return (
-    <div>
-      <TopSection title="Admin" />
+    <PageWrapper>
+      <PageHeader title="Admin" description="" />
 
-      <div className="m-8 space-y-8">
+      <div className="space-y-8 mt-4 mb-20">
         <AdminUpgradeUserForm />
         <AdminUserControls />
         <AdminHashEmail />
@@ -45,6 +46,6 @@ export default async function AdminPage() {
           <AdminSyncStripeCustomers />
         </div>
       </div>
-    </div>
+    </PageWrapper>
   );
 }
diff --git a/apps/web/app/(app)/license/page.tsx b/apps/web/app/(app)/license/page.tsx
index cacb9ebb18..7eb58d280b 100644
--- a/apps/web/app/(app)/license/page.tsx
+++ b/apps/web/app/(app)/license/page.tsx
@@ -5,12 +5,13 @@ import { useAction } from "next-safe-action/hooks";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
-import { TopSection } from "@/components/TopSection";
 import { activateLicenseKeyAction } from "@/utils/actions/premium";
 import { AlertBasic } from "@/components/Alert";
 import { usePremium } from "@/components/PremiumAlert";
 import { toastError, toastSuccess } from "@/components/Toast";
 import type { ActivateLicenseKeyOptions } from "@/utils/actions/premium.validation";
+import { PageWrapper } from "@/components/PageWrapper";
+import { PageHeader } from "@/components/PageHeader";
 
 export default function LicensePage(props: {
   searchParams: Promise<{ "license-key"?: string }>;
@@ -21,10 +22,10 @@ export default function LicensePage(props: {
   const { premium } = usePremium();
 
   return (
-    <div>
-      <TopSection title="Activate your license" />
+    <PageWrapper>
+      <PageHeader title="Activate your license" description="" />
 
-      <div className="content-container max-w-2xl py-6">
+      <div className="max-w-2xl py-4">
         {premium?.lemonLicenseKey && (
           <AlertBasic
             variant="success"
@@ -36,7 +37,7 @@ export default function LicensePage(props: {
 
         <ActivateLicenseForm licenseKey={licenseKey} />
       </div>
-    </div>
+    </PageWrapper>
   );
 }
 
diff --git a/apps/web/components/NavBottom.tsx b/apps/web/components/NavBottom.tsx
index 29e080a5a1..17d7cc9d4c 100644
--- a/apps/web/components/NavBottom.tsx
+++ b/apps/web/components/NavBottom.tsx
@@ -4,8 +4,8 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   BarChartIcon,
+  CalendarIcon,
   MailMinusIcon,
-  ShieldHalfIcon,
   SparklesIcon,
 } from "lucide-react";
 import { cn } from "@/utils";
@@ -58,16 +58,16 @@ const links = [
     label: "Unsubscriber",
     icon: MailMinusIcon,
   },
-  {
-    path: "/cold-email-blocker",
-    label: "Cold Email",
-    icon: ShieldHalfIcon,
-  },
   {
     path: "/stats",
     label: "Analytics",
     icon: BarChartIcon,
   },
+  {
+    path: "/calendars",
+    label: "Calendars",
+    icon: CalendarIcon,
+  },
 ];
 
 export function NavBottom() {
diff --git a/apps/web/components/PageHeader.tsx b/apps/web/components/PageHeader.tsx
index 967ad51b89..ccd934d8d0 100644
--- a/apps/web/components/PageHeader.tsx
+++ b/apps/web/components/PageHeader.tsx
@@ -23,8 +23,10 @@ export function PageHeader({
   return (
     <div>
       <PageHeading>{title}</PageHeading>
-      <div className="flex items-center mt-1">
-        <PageSubHeading>{description}</PageSubHeading>
+      <div className="flex flex-col sm:flex-row items-start sm:items-center mt-1 gap-3">
+        <PageSubHeading className="hidden sm:block">
+          {description}
+        </PageSubHeading>
         {video && (video.youtubeVideoId || video.muxPlaybackId) && (
           <WatchVideo video={video} />
         )}
@@ -37,7 +39,7 @@ function WatchVideo({ video }: { video: Video }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" size="xs" className="ml-3">
+        <Button variant="outline" size="xs">
           <PlayIcon className="mr-2 size-3" />
           Watch demo
         </Button>
diff --git a/apps/web/components/SidebarRight.tsx b/apps/web/components/SidebarRight.tsx
index 2e45c8c033..a3ecae20c6 100644
--- a/apps/web/components/SidebarRight.tsx
+++ b/apps/web/components/SidebarRight.tsx
@@ -11,14 +11,14 @@ export function SidebarRight({
   name: string;
   className?: string;
 }) {
-  const { state } = useSidebar();
-  const isOpen = state.includes(name);
+  const { state, openMobile, isMobile } = useSidebar();
+  const isOpen = isMobile ? openMobile.includes(name) : state.includes(name);
 
   return (
     <div
       className={cn(
-        "fixed right-0 top-0 z-10 h-screen w-[450px] border-l bg-background transition-transform duration-200 ease-linear",
-        "hidden lg:block",
+        "fixed right-0 top-0 z-50 h-screen border-l bg-background transition-transform duration-200 ease-linear",
+        "w-full lg:w-[450px]",
         isOpen ? "translate-x-0" : "translate-x-full",
         className,
       )}
diff --git a/version.txt b/version.txt
index 3cc122cbc0..25f32fdd9a 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v2.18.6
+v2.18.7