diff --git a/apps/web/app/(app)/premium/PremiumModal.tsx b/apps/web/app/(app)/premium/PremiumModal.tsx
index 25a16af990..78a79adbdc 100644
--- a/apps/web/app/(app)/premium/PremiumModal.tsx
+++ b/apps/web/app/(app)/premium/PremiumModal.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { Pricing } from "@/app/(app)/premium/Pricing";
+import Pricing from "@/app/(app)/premium/Pricing";
 
 export function usePremiumModal() {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/apps/web/app/(app)/premium/Pricing.tsx b/apps/web/app/(app)/premium/Pricing.tsx
index b8e498439f..0fbf5648e2 100644
--- a/apps/web/app/(app)/premium/Pricing.tsx
+++ b/apps/web/app/(app)/premium/Pricing.tsx
@@ -33,11 +33,13 @@ const frequencies = [
   { value: "annually" as const, label: "Annually", priceSuffix: "/month" },
 ];
 
-export function Pricing(props: {
+export type PricingProps = {
   header?: React.ReactNode;
   showSkipUpgrade?: boolean;
   className?: string;
-}) {
+};
+
+export default function Pricing(props: PricingProps) {
   const { isPremium, premium, isLoading, error, data } = usePremium();
 
   const isLoggedIn = !!data?.id;
diff --git a/apps/web/app/(app)/premium/PricingLazy.tsx b/apps/web/app/(app)/premium/PricingLazy.tsx
new file mode 100644
index 0000000000..8a9f06d3ab
--- /dev/null
+++ b/apps/web/app/(app)/premium/PricingLazy.tsx
@@ -0,0 +1,12 @@
+import { Loading } from "@/components/Loading";
+import dynamic from "next/dynamic";
+import { Suspense } from "react";
+import type { PricingProps } from "./Pricing";
+
+const PricingComponent = dynamic(() => import("./Pricing"));
+
+export const PricingLazy = (props: PricingProps) => (
+  <Suspense fallback={<Loading />}>
+    <PricingComponent {...props} />
+  </Suspense>
+);
diff --git a/apps/web/app/(app)/premium/page.tsx b/apps/web/app/(app)/premium/page.tsx
index 4a2215c5c4..76e43bed21 100644
--- a/apps/web/app/(app)/premium/page.tsx
+++ b/apps/web/app/(app)/premium/page.tsx
@@ -1,9 +1,9 @@
-import { Pricing } from "@/app/(app)/premium/Pricing";
+import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
 
 export default function Premium() {
   return (
     <div className="bg-white pb-20">
-      <Pricing />
+      <PricingLazy />
     </div>
   );
 }
diff --git a/apps/web/app/(landing)/components/page.tsx b/apps/web/app/(landing)/components/page.tsx
index 3e0050e0f1..ce148f3a84 100644
--- a/apps/web/app/(landing)/components/page.tsx
+++ b/apps/web/app/(landing)/components/page.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { Suspense } from "react";
 import { SparklesIcon } from "lucide-react";
 import { CardBasic } from "@/components/ui/card";
 import { Container } from "@/components/Container";
@@ -27,6 +26,7 @@ import {
   useMultiSelectFilter,
 } from "@/components/MultiSelectFilter";
 import { TooltipExplanation } from "@/components/TooltipExplanation";
+import { Suspense } from "react";
 
 export const maxDuration = 3;
 
diff --git a/apps/web/app/(landing)/login/page.tsx b/apps/web/app/(landing)/login/page.tsx
index 07e4f569fc..a7c840d912 100644
--- a/apps/web/app/(landing)/login/page.tsx
+++ b/apps/web/app/(landing)/login/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import Link from "next/link";
@@ -37,7 +38,9 @@ export default async function AuthenticationPage(props: {
           </p>
         </div>
         <div className="mt-4">
-          <LoginForm />
+          <Suspense>
+            <LoginForm />
+          </Suspense>
         </div>
 
         {searchParams?.error && (
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index 6f2084e18c..f1b86d0557 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -1,10 +1,9 @@
-import { Suspense } from "react";
 import type { Metadata } from "next";
 import { HeroHome } from "@/app/(landing)/home/Hero";
 import { FeaturesHome } from "@/app/(landing)/home/Features";
 import { Privacy } from "@/app/(landing)/home/Privacy";
 import { Testimonials } from "@/app/(landing)/home/Testimonials";
-import { Pricing } from "@/app/(app)/premium/Pricing";
+import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
 import { FAQs } from "@/app/(landing)/home/FAQs";
 import { CTA } from "@/app/(landing)/home/CTA";
 import { BasicLayout } from "@/components/layouts/BasicLayout";
@@ -18,7 +17,7 @@ export default function Home() {
       <Testimonials />
       <Privacy />
       <FeaturesHome />
-      <Pricing className="pb-32" />
+      <PricingLazy className="pb-32" />
       <FAQs />
       <CTA />
     </BasicLayout>
diff --git a/apps/web/app/(landing)/welcome-upgrade/page.tsx b/apps/web/app/(landing)/welcome-upgrade/page.tsx
index 2e0f2793ce..70628b7e73 100644
--- a/apps/web/app/(landing)/welcome-upgrade/page.tsx
+++ b/apps/web/app/(landing)/welcome-upgrade/page.tsx
@@ -1,8 +1,6 @@
-import { Suspense } from "react";
 import { CheckCircleIcon } from "lucide-react";
-import { Pricing } from "@/app/(app)/premium/Pricing";
+import { PricingLazy } from "@/app/(app)/premium/PricingLazy";
 import { Footer } from "@/app/(landing)/home/Footer";
-import { Loading } from "@/components/Loading";
 import { WelcomeUpgradeNav } from "@/app/(landing)/welcome-upgrade/WelcomeUpgradeNav";
 import { userCount } from "@/utils/config";
 
@@ -10,31 +8,29 @@ export default function WelcomeUpgradePage() {
   return (
     <>
       <WelcomeUpgradeNav />
-      <Suspense fallback={<Loading />}>
-        <Pricing
-          showSkipUpgrade
-          header={
-            <div className="mb-8 flex flex-col items-start">
-              <div className="mx-auto text-center">
-                <h2 className="font-cal text-base leading-7 text-blue-600">
-                  Spend 50% less time on email
-                </h2>
-                <p className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
-                  Join {userCount} users that use Inbox Zero
-                  <br />
-                  to be more productive!
-                </p>
-              </div>
+      <PricingLazy
+        showSkipUpgrade
+        header={
+          <div className="mb-8 flex flex-col items-start">
+            <div className="mx-auto text-center">
+              <h2 className="font-cal text-base leading-7 text-blue-600">
+                Spend 50% less time on email
+              </h2>
+              <p className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
+                Join {userCount} users that use Inbox Zero
+                <br />
+                to be more productive!
+              </p>
+            </div>
 
-              <div className="mx-auto mt-4 flex flex-col items-start gap-2">
-                <TrialFeature>100% no-risk trial</TrialFeature>
-                <TrialFeature>Free for the first 7 days</TrialFeature>
-                <TrialFeature>Cancel anytime, hassle-free</TrialFeature>
-              </div>
+            <div className="mx-auto mt-4 flex flex-col items-start gap-2">
+              <TrialFeature>100% no-risk trial</TrialFeature>
+              <TrialFeature>Free for the first 7 days</TrialFeature>
+              <TrialFeature>Cancel anytime, hassle-free</TrialFeature>
             </div>
-          }
-        />
-      </Suspense>
+          </div>
+        }
+      />
       <Footer />
     </>
   );
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index d2fa5ab018..dd78e90ece 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,5 +1,5 @@
-import type { Metadata } from "next";
 import { Suspense } from "react";
+import type { Metadata } from "next";
 // import { Analytics } from "@vercel/analytics/react";
 import { AxiomWebVitals } from "next-axiom";
 import { GoogleTagManager } from "@next/third-parties/google";
diff --git a/version.txt b/version.txt
index 56594a03bb..9e01c90278 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v1.3.16
\ No newline at end of file
+v1.3.17
\ No newline at end of file