diff --git a/apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx b/apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx
index b3d1260a9..e8129f96d 100644
--- a/apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx
+++ b/apps/web/app/(app)/bulk-unsubscribe/BulkUnsubscribeSection.tsx
@@ -257,11 +257,14 @@ export function BulkUnsubscribeSection({
           </LoadingContent>
         )}
       </Card>
-      <NewsletterModal
-        newsletter={openedNewsletter}
-        onClose={() => setOpenedNewsletter(undefined)}
-        refreshInterval={refreshInterval}
-      />
+      {openedNewsletter && (
+        <NewsletterModal
+          newsletter={openedNewsletter}
+          onClose={() => setOpenedNewsletter(undefined)}
+          refreshInterval={props.refreshInterval}
+          mutate={mutate}
+        />
+      )}
       <PremiumModal />
     </>
   );
diff --git a/apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx b/apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx
index fe108dca5..337fa297c 100644
--- a/apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx
+++ b/apps/web/app/(app)/cold-email-blocker/ColdEmailList.tsx
@@ -144,12 +144,13 @@ export function ColdEmailList() {
 
           <TablePagination totalPages={data.totalPages} />
 
-          <NewsletterModal
-            newsletter={
-              openedRow ? { name: openedRow.fromEmail || "" } : undefined
-            }
-            onClose={() => setOpenedRow(undefined)}
-          />
+          {openedRow && (
+            <NewsletterModal
+              newsletter={{ name: openedRow.fromEmail || "" }}
+              onClose={() => setOpenedRow(undefined)}
+              mutate={mutate}
+            />
+          )}
         </div>
       ) : (
         <NoColdEmails />
diff --git a/apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx b/apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx
index 35cc4782a..6d595b6a9 100644
--- a/apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx
+++ b/apps/web/app/(app)/cold-email-blocker/ColdEmailRejected.tsx
@@ -65,12 +65,12 @@ export function ColdEmailRejected() {
 
           <TablePagination totalPages={data.totalPages} />
 
-          <NewsletterModal
-            newsletter={
-              openedRow ? { name: openedRow.fromEmail || "" } : undefined
-            }
-            onClose={() => setOpenedRow(undefined)}
-          />
+          {openedRow && (
+            <NewsletterModal
+              newsletter={openedRow && { name: openedRow.fromEmail || "" }}
+              onClose={() => setOpenedRow(undefined)}
+            />
+          )}
         </div>
       ) : (
         <NoRejectedColdEmails />
diff --git a/apps/web/app/(app)/compose/selectors/color-selector.tsx b/apps/web/app/(app)/compose/selectors/color-selector.tsx
index 12ef2e47c..e66c4473b 100644
--- a/apps/web/app/(app)/compose/selectors/color-selector.tsx
+++ b/apps/web/app/(app)/compose/selectors/color-selector.tsx
@@ -132,7 +132,7 @@ export const ColorSelector = ({ open, onOpenChange }: any) => {
 
       <PopoverContent
         sideOffset={5}
-        className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl "
+        className="my-1 flex max-h-80 w-48 flex-col overflow-hidden overflow-y-auto rounded border p-1 shadow-xl"
         align="start"
       >
         <div className="flex flex-col">
diff --git a/apps/web/app/(app)/compose/selectors/link-selector.tsx b/apps/web/app/(app)/compose/selectors/link-selector.tsx
index eb3b4a1fe..b01bfc3ba 100644
--- a/apps/web/app/(app)/compose/selectors/link-selector.tsx
+++ b/apps/web/app/(app)/compose/selectors/link-selector.tsx
@@ -65,7 +65,7 @@ export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
             const url = getUrlFromString(input.value);
             url && editor.chain().focus().setLink({ href: url }).run();
           }}
-          className="flex  p-1 "
+          className="flex p-1"
         >
           <input
             ref={inputRef}
diff --git a/apps/web/app/(app)/new-senders/NewSenders.tsx b/apps/web/app/(app)/new-senders/NewSenders.tsx
index 5c8d06bce..7d69b577c 100644
--- a/apps/web/app/(app)/new-senders/NewSenders.tsx
+++ b/apps/web/app/(app)/new-senders/NewSenders.tsx
@@ -1,35 +1,25 @@
 "use client";
 
-import React, { useState } from "react";
-import useSWR from "swr";
-import { useSession } from "next-auth/react";
-import { usePostHog } from "posthog-js/react";
-import { Card, Title } from "@tremor/react";
-import groupBy from "lodash/groupBy";
-import { FilterIcon, Users2Icon } from "lucide-react";
-import { LoadingContent } from "@/components/LoadingContent";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useExpanded } from "@/app/(app)/stats/useExpanded";
-import { NewsletterModal } from "@/app/(app)/stats/NewsletterModal";
-import type {
-  NewSendersQuery,
-  NewSendersResponse,
-} from "@/app/api/user/stats/new-senders/route";
-import { formatShortDate } from "@/utils/date";
-import { formatStat } from "@/utils/stats";
-import { StatsCards } from "@/components/StatsCards";
 import { ActionCell, HeaderButton } from "@/app/(app)/bulk-unsubscribe/common";
 import {
-  useNewsletterFilter,
   useBulkUnsubscribeShortcuts,
+  useNewsletterFilter,
 } from "@/app/(app)/bulk-unsubscribe/hooks";
+import { ShortcutTooltip } from "@/app/(app)/bulk-unsubscribe/ShortcutTooltip";
+import type { Row } from "@/app/(app)/bulk-unsubscribe/types";
+import { usePremiumModal } from "@/app/(app)/premium/PremiumModal";
 import { DetailedStatsFilter } from "@/app/(app)/stats/DetailedStatsFilter";
+import { NewsletterModal } from "@/app/(app)/stats/NewsletterModal";
+import { useExpanded } from "@/app/(app)/stats/useExpanded";
 import type { LabelsResponse } from "@/app/api/google/labels/route";
+import type {
+  NewSendersQuery,
+  NewSendersResponse,
+} from "@/app/api/user/stats/new-senders/route";
+import { LoadingContent } from "@/components/LoadingContent";
 import { usePremium } from "@/components/PremiumAlert";
-import { usePremiumModal } from "@/app/(app)/premium/PremiumModal";
-import { useLabels } from "@/hooks/useLabels";
-import { ShortcutTooltip } from "@/app/(app)/bulk-unsubscribe/ShortcutTooltip";
-import type { Row } from "@/app/(app)/bulk-unsubscribe/types";
+import { StatsCards } from "@/components/StatsCards";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
   TableBody,
@@ -38,6 +28,16 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { useLabels } from "@/hooks/useLabels";
+import { formatShortDate } from "@/utils/date";
+import { formatStat } from "@/utils/stats";
+import { Card, Title } from "@tremor/react";
+import groupBy from "lodash/groupBy";
+import { FilterIcon, Users2Icon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { usePostHog } from "posthog-js/react";
+import React, { useState } from "react";
+import useSWR from "swr";
 
 export function NewSenders({ refreshInterval }: { refreshInterval: number }) {
   const session = useSession();
@@ -211,11 +211,14 @@ export function NewSenders({ refreshInterval }: { refreshInterval: number }) {
           <div className="mt-2 px-6 pb-6">{extra}</div>
         </LoadingContent>
       </Card>
-      <NewsletterModal
-        newsletter={openedNewsletter}
-        onClose={() => setOpenedNewsletter(undefined)}
-        refreshInterval={refreshInterval}
-      />
+      {openedNewsletter && (
+        <NewsletterModal
+          newsletter={openedNewsletter}
+          onClose={() => setOpenedNewsletter(undefined)}
+          refreshInterval={refreshInterval}
+          mutate={mutate}
+        />
+      )}
       <PremiumModal />
     </>
   );
diff --git a/apps/web/app/(app)/stats/NewsletterModal.tsx b/apps/web/app/(app)/stats/NewsletterModal.tsx
index be3d50ed4..c4cb0962a 100644
--- a/apps/web/app/(app)/stats/NewsletterModal.tsx
+++ b/apps/web/app/(app)/stats/NewsletterModal.tsx
@@ -1,50 +1,64 @@
-import useSWR from "swr";
-import { BarChart } from "@tremor/react";
-import type { DateRange } from "react-day-picker";
-import Link from "next/link";
-import { ExternalLinkIcon } from "lucide-react";
-import { useSession } from "next-auth/react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { MoreDropdown } from "@/app/(app)/bulk-unsubscribe/common";
+import { useUnsubscribe } from "@/app/(app)/bulk-unsubscribe/hooks";
+import { Row } from "@/app/(app)/bulk-unsubscribe/types";
 import { getDateRangeParams } from "@/app/(app)/stats/params";
+import type { ThreadsResponse } from "@/app/api/google/threads/controller";
 import type {
   SenderEmailsQuery,
   SenderEmailsResponse,
 } from "@/app/api/user/stats/sender-emails/route";
-import type { ZodPeriod } from "@inboxzero/tinybird";
+import { AlertBasic } from "@/components/Alert";
 import { LoadingContent } from "@/components/LoadingContent";
+import { usePremium } from "@/components/PremiumAlert";
+import { Tooltip } from "@/components/Tooltip";
 import { SectionHeader } from "@/components/Typography";
 import { EmailList } from "@/components/email-list/EmailList";
-import type { ThreadsResponse } from "@/app/api/google/threads/controller";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { getGmailFilterSettingsUrl } from "@/utils/url";
-import { Tooltip } from "@/components/Tooltip";
-import { AlertBasic } from "@/components/Alert";
-import { onAutoArchive } from "@/utils/actions/client";
-import { MoreDropdown } from "@/app/(app)/bulk-unsubscribe/common";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useLabels } from "@/hooks/useLabels";
-import type { Row } from "@/app/(app)/bulk-unsubscribe/types";
+import { onAutoArchive } from "@/utils/actions/client";
+import { getGmailFilterSettingsUrl } from "@/utils/url";
+import type { ZodPeriod } from "@inboxzero/tinybird";
+import { BarChart } from "@tremor/react";
+import { ExternalLinkIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import Link from "next/link";
 import { usePostHog } from "posthog-js/react";
+import type { DateRange } from "react-day-picker";
+import useSWR from "swr";
 
 export function NewsletterModal(props: {
-  newsletter?: Pick<Row, "name" | "lastUnsubscribeLink" | "autoArchived">;
+  newsletter: Pick<Row, "name" | "lastUnsubscribeLink" | "autoArchived">;
   onClose: (isOpen: boolean) => void;
   refreshInterval?: number;
+  mutate?: () => Promise<any>;
 }) {
   const { newsletter, refreshInterval, onClose } = props;
+  const mutate = props.mutate || (() => Promise.resolve()); // Set a default value for mutate if it's not provided
 
   const session = useSession();
   const email = session.data?.user.email;
 
   const { userLabels } = useLabels();
 
+  const { hasUnsubscribeAccess, mutate: refetchPremium } = usePremium();
+
   const posthog = usePostHog();
 
+  const { unsubscribeLoading, onUnsubscribe } = useUnsubscribe({
+    item: newsletter,
+    hasUnsubscribeAccess,
+    mutate,
+    posthog,
+    refetchPremium,
+  });
+
   return (
     <Dialog open={!!newsletter} onOpenChange={onClose}>
       <DialogContent className="max-h-screen overflow-x-scroll overflow-y-scroll lg:min-w-[880px] xl:min-w-[1280px]">
@@ -55,13 +69,21 @@ export function NewsletterModal(props: {
             </DialogHeader>
 
             <div className="flex space-x-2">
-              <Button size="sm" variant="outline">
+              <Button size="sm" variant="outline" disabled={unsubscribeLoading}>
                 <a
                   href={newsletter.lastUnsubscribeLink || undefined}
                   target="_blank"
                   rel="noreferrer"
+                  onClick={onUnsubscribe}
                 >
-                  Unsubscribe
+                  {unsubscribeLoading ? (
+                    <div className="flex cursor-not-allowed items-center opacity-50">
+                      <Button loading={true} />
+                      <span>Unsubscribing...</span>
+                    </div>
+                  ) : (
+                    <span>Unsubscribe</span>
+                  )}
                 </a>
               </Button>
               <Tooltip content="Auto archive emails using Gmail filters">