diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
index aee44a63..8fd3316f 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx
@@ -21,6 +21,7 @@ import type { LucideIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 
 import { ProjectLink } from '@/components/links';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { useNumber } from '@/hooks/useNumerFormatter';
 import type { IServiceDashboards, IServiceOrganization } from '@openpanel/db';
 import { differenceInDays, format } from 'date-fns';
@@ -72,10 +73,29 @@ export default function LayoutMenu({
     subscriptionEndsAt,
     subscriptionPeriodEventsCount,
     subscriptionPeriodEventsLimit,
+    subscriptionProductId,
   } = organization;
   return (
     <>
       <div className="col border rounded mb-2 divide-y">
+        {(subscriptionProductId === '036efa2a-b3b4-4c75-b24a-9cac6bb8893b' ||
+          subscriptionProductId === 'a18b4bee-d3db-4404-be6f-fba2f042d9ed') && (
+          <ProjectLink
+            href={'/settings/organization?tab=billing'}
+            className={cn(
+              'rounded p-2 row items-center gap-2 hover:bg-def-200 text-destructive',
+            )}
+          >
+            <BanknoteIcon size={20} />
+            <div className="flex-1 col gap-1">
+              <div className="font-medium">Free plan is removed</div>
+              <div className="text-sm opacity-80">
+                We've removed the free plan. You can upgrade to a paid plan to
+                continue using OpenPanel.
+              </div>
+            </div>
+          </ProjectLink>
+        )}
         {process.env.SELF_HOSTED && (
           <ProjectLink
             href={'/settings/organization?tab=billing'}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx
index 4ca731d7..2f63b1c1 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing-faq.tsx
@@ -10,9 +10,13 @@ import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
 
 const questions = [
   {
-    question: "What's the free tier?",
+    question: 'Does OpenPanel have a free tier?',
     answer: [
-      'You get 5000 events per month for free. This is mostly for you to try out OpenPanel but also for solo developers or people who want to try out OpenPanel without committing to a paid plan.',
+      'For our Cloud plan we offer a 14 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
+      'OpenPanel is also open-source and you can self-host it for free!',
+      '',
+      'Why does OpenPanel not have a free tier?',
+      'We want to make sure that OpenPanel is used by people who are serious about using it. We also need to invest time and resources to maintain the platform and provide support to our users.',
     ],
   },
   {
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
index 47d377a5..2aa9e34b 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/billing.tsx
@@ -47,9 +47,9 @@ export default function Billing({ organization }: Props) {
   );
 
   const products = useMemo(() => {
-    return (productsQuery.data || []).filter(
-      (product) => product.recurringInterval === recurringInterval,
-    );
+    return (productsQuery.data || [])
+      .filter((product) => product.recurringInterval === recurringInterval)
+      .filter((product) => product.prices.some((p) => p.amountType !== 'free'));
   }, [productsQuery.data, recurringInterval]);
 
   useEffect(() => {
@@ -77,19 +77,22 @@ export default function Billing({ organization }: Props) {
     }
     return (
       <WidgetTable
-        className="w-full max-w-full [&_td]:text-left"
+        className="w-full max-w-full [&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4"
+        columnClassName="!h-auto"
         data={products}
         keyExtractor={(item) => item.id}
         columns={[
           {
             name: 'Tier',
             className: 'text-left',
+            width: 'auto',
             render(item) {
               return <div className="font-medium">{item.name}</div>;
             },
           },
           {
             name: 'Price',
+            width: 'auto',
             render(item) {
               const price = item.prices[0];
               if (!price) {
@@ -97,20 +100,21 @@ export default function Billing({ organization }: Props) {
               }
 
               if (price.amountType === 'free') {
-                return (
-                  <div className="row gap-2 whitespace-nowrap">
-                    <div className="items-center text-right justify-end gap-4 flex-1 row">
-                      <span>Free</span>
-                      <CheckoutButton
-                        disabled={item.disabled}
-                        key={price.id}
-                        price={price}
-                        organization={organization}
-                        projectId={projectId}
-                      />
-                    </div>
-                  </div>
-                );
+                return null;
+                // return (
+                //   <div className="row gap-2 whitespace-nowrap">
+                //     <div className="items-center text-right justify-end gap-4 flex-1 row">
+                //       <span>Free</span>
+                //       <CheckoutButton
+                //         disabled={item.disabled}
+                //         key={price.id}
+                //         price={price}
+                //         organization={organization}
+                //         projectId={projectId}
+                //       />
+                //     </div>
+                //   </div>
+                // );
               }
 
               if (price.amountType !== 'fixed') {
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx
index bd6e4323..a40c73c2 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/current-subscription.tsx
@@ -107,6 +107,15 @@ export default function CurrentSubscription({ organization }: Props) {
     return (
       <>
         <div className="gap-4 col">
+          {price.amountType === 'free' && (
+            <Alert variant="warning">
+              <AlertTitle>Free plan is removed</AlertTitle>
+              <AlertDescription>
+                We've removed the free plan. You can upgrade to a paid plan to
+                continue using OpenPanel.
+              </AlertDescription>
+            </Alert>
+          )}
           <div className="row justify-between">
             <div>Name</div>
             <div className="text-right font-medium">{product.name}</div>
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx
index bd1eeea7..736cb0d2 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/settings/organization/organization/usage.tsx
@@ -114,10 +114,9 @@ export default function Usage({ organization }: Props) {
                 subscriptionPeriodEventsLimit === 0
                   ? '👀'
                   : number.formatWithUnit(
-                      (1 -
+                      1 -
                         subscriptionPeriodEventsCount /
-                          subscriptionPeriodEventsLimit) *
-                        100,
+                          subscriptionPeriodEventsLimit,
                       '%',
                     )
               }
diff --git a/apps/dashboard/src/components/overview/overview-widget-table.tsx b/apps/dashboard/src/components/overview/overview-widget-table.tsx
index 4c6aafbe..178addc8 100644
--- a/apps/dashboard/src/components/overview/overview-widget-table.tsx
+++ b/apps/dashboard/src/components/overview/overview-widget-table.tsx
@@ -24,11 +24,11 @@ export const OverviewWidgetTable = <T,>({
       <WidgetTable
         data={data ?? []}
         keyExtractor={keyExtractor}
-        className={'text-sm min-h-[358px] @container'}
-        columnClassName="group/row [&>*:first-child]:pl-4 [&>*:last-child]:pr-4 [&_th]:pt-3"
+        className={'text-sm min-h-[358px] @container [&_.head]:pt-3'}
+        columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4"
         eachRow={(item) => {
           return (
-            <div className="absolute inset-0 !p-0">
+            <div className="absolute top-0 left-0 !p-0 w-full h-full">
               <div
                 className="h-full bg-def-200 group-hover/row:bg-blue-200 dark:group-hover/row:bg-blue-900 transition-colors relative"
                 style={{
@@ -44,7 +44,7 @@ export const OverviewWidgetTable = <T,>({
             className: cn(
               index === 0
                 ? 'text-left w-full font-medium min-w-0'
-                : 'text-right w-20 font-mono',
+                : 'text-right font-mono',
               index !== 0 &&
                 index !== columns.length - 1 &&
                 'hidden @[310px]:table-cell',
@@ -72,10 +72,12 @@ export function OverviewWidgetTableLoading({
         {
           name: 'Path',
           render: () => <Skeleton className="h-4 w-1/3" />,
+          width: '1fr',
         },
         {
           name: 'BR',
           render: () => <Skeleton className="h-4 w-[30px]" />,
+          width: '60px',
         },
         // {
         //   name: 'Duration',
@@ -84,6 +86,7 @@ export function OverviewWidgetTableLoading({
         {
           name: 'Sessions',
           render: () => <Skeleton className="h-4 w-[30px]" />,
+          width: '84px',
         },
       ]}
     />
@@ -131,6 +134,7 @@ export function OverviewWidgetTablePages({
       columns={[
         {
           name: 'Path',
+          width: '1fr',
           render(item) {
             return (
               <Tooltiper asChild content={item.origin + item.path} side="left">
@@ -173,20 +177,21 @@ export function OverviewWidgetTablePages({
         },
         {
           name: 'BR',
-          className: 'w-16',
+          width: '60px',
           render(item) {
             return number.shortWithUnit(item.bounce_rate, '%');
           },
         },
         {
           name: 'Duration',
+          width: '75px',
           render(item) {
             return number.shortWithUnit(item.avg_duration, 'min');
           },
         },
         {
           name: lastColumnName,
-          // className: 'w-28',
+          width: '84px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -228,6 +233,7 @@ export function OverviewWidgetTableBots({
       columns={[
         {
           name: 'Path',
+          width: '1fr',
           render(item) {
             return (
               <Tooltiper asChild content={item.origin + item.path} side="left">
@@ -256,7 +262,7 @@ export function OverviewWidgetTableBots({
         },
         {
           name: 'Bot',
-          // className: 'w-28',
+          width: '60px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -267,7 +273,7 @@ export function OverviewWidgetTableBots({
         },
         {
           name: 'Date',
-          // className: 'w-28',
+          width: '60px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
@@ -290,6 +296,7 @@ export function OverviewWidgetTableGeneric({
   data: RouterOutputs['overview']['topGeneric'];
   column: {
     name: string;
+    width: string;
     render: (
       item: RouterOutputs['overview']['topGeneric'][number],
     ) => React.ReactNode;
@@ -307,7 +314,7 @@ export function OverviewWidgetTableGeneric({
         column,
         {
           name: 'BR',
-          className: 'w-16',
+          width: '60px',
           render(item) {
             return number.shortWithUnit(item.bounce_rate, '%');
           },
@@ -320,6 +327,7 @@ export function OverviewWidgetTableGeneric({
         // },
         {
           name: 'Sessions',
+          width: '84px',
           render(item) {
             return (
               <div className="row gap-2 justify-end">
diff --git a/apps/dashboard/src/components/report-chart/funnel/chart.tsx b/apps/dashboard/src/components/report-chart/funnel/chart.tsx
index c5c4b3fa..1e31fee6 100644
--- a/apps/dashboard/src/components/report-chart/funnel/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/funnel/chart.tsx
@@ -212,12 +212,14 @@ export function Tables({
                   <span className="truncate">{item.event.displayName}</span>
                 </div>
               ),
+              width: '1fr',
               className: 'text-left font-mono font-semibold',
             },
             {
               name: 'Completed',
               render: (item) => number.format(item.count),
               className: 'text-right font-mono',
+              width: '82px',
             },
             {
               name: 'Dropped after',
@@ -226,11 +228,13 @@ export function Tables({
                   ? number.format(item.dropoffCount)
                   : null,
               className: 'text-right font-mono',
+              width: '110px',
             },
             {
               name: 'Conversion',
               render: (item) => number.formatWithUnit(item.percent / 100, '%'),
               className: 'text-right font-mono font-semibold',
+              width: '90px',
             },
           ]}
         />
diff --git a/apps/dashboard/src/components/widget-table.tsx b/apps/dashboard/src/components/widget-table.tsx
index a1152af3..673d2212 100644
--- a/apps/dashboard/src/components/widget-table.tsx
+++ b/apps/dashboard/src/components/widget-table.tsx
@@ -5,6 +5,7 @@ export interface Props<T> {
     name: React.ReactNode;
     render: (item: T, index: number) => React.ReactNode;
     className?: string;
+    width: string;
   }[];
   keyExtractor: (item: T) => string;
   data: T[];
@@ -40,58 +41,71 @@ export function WidgetTable<T>({
   eachRow,
   columnClassName,
 }: Props<T>) {
+  const gridTemplateColumns =
+    columns.length > 1
+      ? `1fr ${columns
+          .slice(1)
+          .map(() => 'auto')
+          .join(' ')}`
+      : '1fr';
+
   return (
     <div className="w-full overflow-x-auto">
       <div className={cn('w-full', className)}>
-        <table className="w-full table-fixed">
-          <thead>
-            <tr
+        {/* Header */}
+        <div
+          className={cn('grid border-b border-border head', columnClassName)}
+          style={{ gridTemplateColumns }}
+        >
+          {columns.map((column) => (
+            <div
+              key={column.name?.toString()}
               className={cn(
-                'border-b border-border text-right last:border-0 [&_td:first-child]:text-left',
-                '[&>td]:p-2',
+                'p-2 font-medium font-sans text-sm whitespace-nowrap cell',
+                columns.length > 1 && column !== columns[0]
+                  ? 'text-right'
+                  : 'text-left',
+                column.className,
+              )}
+              style={{ width: column.width }}
+            >
+              {column.name}
+            </div>
+          ))}
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-col body">
+          {data.map((item, index) => (
+            <div
+              key={keyExtractor(item)}
+              className={cn(
+                'group/row relative border-b border-border last:border-0 h-8',
                 columnClassName,
               )}
             >
-              {columns.map((column) => (
-                <th
-                  key={column.name?.toString()}
-                  className={cn(
-                    column.className,
-                    'font-medium font-sans text-sm p-2 whitespace-nowrap',
-                  )}
-                >
-                  {column.name}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {data.map((item, index) => (
-              <tr
-                key={keyExtractor(item)}
-                className={cn(
-                  'h-8 border-b border-border text-right last:border-0 [&_td:first-child]:text-left relative',
-                  '[&>td]:p-2',
-                  columnClassName,
-                )}
-              >
-                {columns.map((column, columnIndex) => (
-                  <td
+              {eachRow?.(item, index)}
+              <div className="grid" style={{ gridTemplateColumns }}>
+                {columns.map((column) => (
+                  <div
                     key={column.name?.toString()}
                     className={cn(
-                      'h-8',
-                      columnIndex !== 0 && 'relative z-5',
+                      'p-2 relative cell',
+                      columns.length > 1 && column !== columns[0]
+                        ? 'text-right'
+                        : 'text-left',
                       column.className,
+                      column.width === '1fr' && 'w-full min-w-0',
                     )}
+                    style={{ width: column.width }}
                   >
-                    {columnIndex === 0 && eachRow?.(item, index)}
                     {column.render(item, index)}
-                  </td>
+                  </div>
                 ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/public/components/footer.tsx b/apps/public/components/footer.tsx
index 3ddfffe6..d28dfafb 100644
--- a/apps/public/components/footer.tsx
+++ b/apps/public/components/footer.tsx
@@ -19,7 +19,7 @@ export function Footer() {
           <SectionHeader
             tag={<Tag>Discover User Insights</Tag>}
             title="Effortless web & product analytics"
-            description="Simplify your web & product analytics with our user-friendly platform. Collect, analyze, and optimize your data in minutes, for free."
+            description="Simplify your web & product analytics with our user-friendly platform. Collect, analyze, and optimize your data in minutes."
           />
           <Button size="lg" variant="secondary" asChild>
             <Link href="https://dashboard.openpanel.dev/onboarding">
diff --git a/apps/public/components/pricing-slider.tsx b/apps/public/components/pricing-slider.tsx
index 01377e3d..8d61c8c7 100644
--- a/apps/public/components/pricing-slider.tsx
+++ b/apps/public/components/pricing-slider.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import { Slider } from './ui/slider';
 
 const PRICING = [
-  { price: 0, events: 5_000 },
+  { price: 2.5, events: 5_000 },
   { price: 5, events: 10_000 },
   { price: 20, events: 100_000 },
   { price: 30, events: 250_000 },
diff --git a/apps/public/components/sections/faq.tsx b/apps/public/components/sections/faq.tsx
index 4651a3c8..54e6d666 100644
--- a/apps/public/components/sections/faq.tsx
+++ b/apps/public/components/sections/faq.tsx
@@ -11,10 +11,13 @@ import {
 
 const questions = [
   {
-    question: 'Is OpenPanel free?',
+    question: 'Does OpenPanel have a free tier?',
     answer: [
-      'Yes and no, we have a free tier if you send less then 10k events per month, if you need more, you can upgrade to a paid plan.',
-      'OpenPanel is open-source and free to self-hosting.',
+      'For our Cloud plan we offer a 14 days free trial, this is mostly for you to be able to try out OpenPanel before committing to a paid plan.',
+      'OpenPanel is also open-source and you can self-host it for free!',
+      '',
+      'Why does OpenPanel not have a free tier?',
+      'We want to make sure that OpenPanel is used by people who are serious about using it. We also need to invest time and resources to maintain the platform and provide support to our users.',
     ],
   },
   {
diff --git a/packages/payments/src/prices.ts b/packages/payments/src/prices.ts
index 686a2f6f..c42f3e46 100644
--- a/packages/payments/src/prices.ts
+++ b/packages/payments/src/prices.ts
@@ -4,7 +4,7 @@ export type IPrice = {
 };
 
 export const PRICING: IPrice[] = [
-  { price: 0, events: 5_000 },
+  { price: 2.5, events: 5_000 },
   { price: 5, events: 10_000 },
   { price: 20, events: 100_000 },
   { price: 30, events: 250_000 },