diff --git a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
index bd96606b4..dce91f352 100644
--- a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-header.tsx
@@ -1,6 +1,6 @@
 import { PageHeader } from '@kit/ui/page';
 
-import { AccountLayoutMobileNavigation } from '~/(dashboard)/home/[account]/_components/account-layout-mobile-navigation';
+import { AccountLayoutMobileNavigation } from './account-layout-mobile-navigation';
 
 export function AccountLayoutHeader({
   children,
diff --git a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
index 2b8be117d..38e08d852 100644
--- a/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/_components/account-layout-mobile-navigation.tsx
@@ -81,6 +81,7 @@ export const AccountLayoutMobileNavigation = (
         {Links}
 
         <DropdownMenuSeparator />
+
         <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
       </DropdownMenuContent>
     </DropdownMenu>
@@ -95,10 +96,10 @@ function DropdownLink(
   }>,
 ) {
   return (
-    <DropdownMenuItem asChild key={props.path}>
+    <DropdownMenuItem asChild>
       <Link
         href={props.path}
-        className={'flex h-12 w-full items-center space-x-4'}
+        className={'flex h-12 w-full items-center space-x-2 px-3'}
       >
         {props.Icon}
 
@@ -117,13 +118,13 @@ function SignOutDropdownItem(
 ) {
   return (
     <DropdownMenuItem
-      className={'flex h-12 w-full items-center space-x-4'}
+      className={'flex h-12 w-full items-center space-x-2'}
       onClick={props.onSignOut}
     >
-      <LogOut className={'h-6'} />
+      <LogOut className={'h-4'} />
 
       <span>
-        <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
+        <Trans i18nKey={'common:signOut'} />
       </span>
     </DropdownMenuItem>
   );
@@ -134,18 +135,16 @@ function OrganizationsModal() {
 
   return (
     <Dialog>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <DropdownMenuItem
-          className={'h-12'}
+          className={'flex h-12 w-full items-center space-x-2'}
           onSelect={(e) => e.preventDefault()}
         >
-          <button className={'flex items-center space-x-4'}>
-            <Home className={'h-6'} />
+          <Home className={'h-4'} />
 
-            <span>
-              <Trans i18nKey={'common:yourOrganizations'} />
-            </span>
-          </button>
+          <span>
+            <Trans i18nKey={'common:yourOrganizations'} />
+          </span>
         </DropdownMenuItem>
       </DialogTrigger>
 
@@ -156,7 +155,7 @@ function OrganizationsModal() {
           </DialogTitle>
         </DialogHeader>
 
-        <div className={'flex flex-col space-y-6 py-4'}>
+        <div className={'py-16'}>
           <AccountSelector
             onAccountChange={(value) => {
               const path = value
diff --git a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
index 4df0570bc..1b891010b 100644
--- a/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
+++ b/apps/web/app/(dashboard)/home/[account]/settings/page.tsx
@@ -47,7 +47,7 @@ async function TeamAccountSettingsPage(props: Props) {
       <PageBody>
         <div
           className={
-            'container flex w-full max-w-2xl flex-1 flex-col items-center'
+            'container flex w-full max-w-2xl flex-1 flex-col items-center p-0'
           }
         >
           <TeamAccountSettingsContainer account={account} paths={paths} />
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index a8d2c27de..c5d3599a3 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -11,7 +11,7 @@ import {
 import { NavigationMenu, NavigationMenuList } from '@kit/ui/navigation-menu';
 import { Trans } from '@kit/ui/trans';
 
-import { SiteNavigationItem } from '~/(marketing)/_components/site-navigation-item';
+import { SiteNavigationItem } from './site-navigation-item';
 
 const links = {
   Blog: {
@@ -65,14 +65,14 @@ function MobileDropdown() {
         <Menu className={'h-9'} />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent>
+      <DropdownMenuContent className={'w-full'}>
         {Object.values(links).map((item) => {
           const className = 'flex w-full h-full items-center';
 
           return (
             <DropdownMenuItem key={item.path}>
               <Link className={className} href={item.path}>
-                {item.label}
+                <Trans i18nKey={item.label} />
               </Link>
             </DropdownMenuItem>
           );
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index 76fe94f3b..f4a957479 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -32,29 +32,25 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   });
 
   return (
-    <div className={'flex flex-col space-y-12'}>
+    <>
       <SitePageHeader
         title={t('marketing:blog')}
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <If
-        condition={posts.length > 0}
-        fallback={
-          <div className={'container mx-auto pb-12'}>
-            <Trans i18nKey="marketing:noPosts" />
-          </div>
-        }
-      >
-        <div className={'container mx-auto'}>
+      <div className={'container py-12'}>
+        <If
+          condition={posts.length > 0}
+          fallback={<Trans i18nKey="marketing:noPosts" />}
+        >
           <PostsGridList>
             {posts.map((post, idx) => {
               return <PostPreview key={idx} post={post} />;
             })}
           </PostsGridList>
-        </div>
-      </If>
-    </div>
+        </If>
+      </div>
+    </>
   );
 }
 
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index f16830422..a7aeeb686 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -121,7 +121,7 @@ function FaqItem({
       >
         <h2
           className={
-            'hover:underline-none cursor-pointer font-sans text-lg font-medium'
+            'hover:underline-none cursor-pointer font-sans font-medium'
           }
         >
           {item.question}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index c921103b2..eb9a01cdc 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -80,3 +80,14 @@
     @apply max-sm:px-4;
   }
 }
+
+/*
+Optimize dropdowns for mobile
+ */
+[data-radix-popper-content-wrapper] {
+  @apply w-full md:w-auto;
+}
+
+[data-radix-menu-content] {
+  @apply rounded-none md:rounded-lg;
+}
\ No newline at end of file
diff --git a/packages/billing/gateway/src/components/plan-picker.tsx b/packages/billing/gateway/src/components/plan-picker.tsx
index 56875aae7..52a2fe89c 100644
--- a/packages/billing/gateway/src/components/plan-picker.tsx
+++ b/packages/billing/gateway/src/components/plan-picker.tsx
@@ -246,7 +246,7 @@ export function PlanPicker(
 
                           <div
                             className={
-                              'flex w-full items-center justify-between'
+                              'flex w-full flex-col content-center space-y-2 lg:flex-row lg:items-center lg:justify-between lg:space-y-0'
                             }
                           >
                             <Label
@@ -272,7 +272,7 @@ export function PlanPicker(
 
                             <div
                               className={
-                                'flex items-center space-x-4 text-right'
+                                'flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0 lg:text-right'
                               }
                             >
                               <If
@@ -396,7 +396,7 @@ function PlanDetails({
     <div
       key={key}
       className={
-        'fade-in animate-in zoom-in-95 flex w-full flex-col space-y-4 px-8 py-2'
+        'fade-in animate-in zoom-in-95 flex w-full flex-col space-y-4 py-2 lg:px-8'
       }
     >
       <div className={'flex flex-col space-y-0.5'}>
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 1e0f4c6a3..9c9b967d9 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -18,6 +18,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
@@ -60,7 +61,7 @@ export function PricingTable({
       <div
         className={
           'flex flex-col items-start space-y-6 lg:space-y-0' +
-          ' justify-center lg:flex-row'
+          ' justify-center lg:flex-row lg:space-x-4'
         }
       >
         {config.products.map((product) => {
@@ -151,10 +152,11 @@ function PricingItem(
       data-cy={'subscription-plan'}
       className={cn(
         props.className,
-        `s-full flex flex-1 grow flex-col items-stretch
-            justify-between space-y-8 self-stretch p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
+        `s-full bg-background flex flex-1 grow flex-col items-stretch justify-between space-y-8 self-stretch
+            rounded-lg border border-transparent p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
           ['border-primary']: highlighted,
+          ['dark:shadow-primary/20 shadow dark:shadow-sm']: !highlighted,
         },
       )}
     >
@@ -214,7 +216,7 @@ function PricingItem(
                 `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 capitalize`,
               )}
             >
-              <span className={'text-sm'}>
+              <span className={'text-muted-foreground text-sm'}>
                 <If
                   condition={props.plan.interval}
                   fallback={<Trans i18nKey={'billing:lifetime'} />}
@@ -251,6 +253,28 @@ function PricingItem(
           </If>
         </div>
 
+        <If condition={props.selectable}>
+          <If
+            condition={props.plan.id && props.CheckoutButton}
+            fallback={
+              <DefaultCheckoutButton
+                signUpPath={props.paths.signUp}
+                highlighted={highlighted}
+                plan={props.plan}
+              />
+            }
+          >
+            {(CheckoutButton) => (
+              <CheckoutButton
+                highlighted={highlighted}
+                planId={props.plan.id}
+              />
+            )}
+          </If>
+        </If>
+
+        <Separator />
+
         <div className={'flex flex-col space-y-2'}>
           <h6 className={'text-sm font-semibold'}>
             <Trans i18nKey={'billing:featuresLabel'} />
@@ -276,23 +300,6 @@ function PricingItem(
           </div>
         </If>
       </div>
-
-      <If condition={props.selectable}>
-        <If
-          condition={props.plan.id && props.CheckoutButton}
-          fallback={
-            <DefaultCheckoutButton
-              signUpPath={props.paths.signUp}
-              highlighted={highlighted}
-              plan={props.plan}
-            />
-          }
-        >
-          {(CheckoutButton) => (
-            <CheckoutButton highlighted={highlighted} planId={props.plan.id} />
-          )}
-        </If>
-      </If>
     </div>
   );
 }
@@ -373,7 +380,7 @@ function PlanIntervalSwitcher(
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
             ['hover:text-primary border']: !selected,
-            ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
+            ['font-semibold cursor-default hover:text-initial hover:bg-background']:
               selected,
           },
         );
diff --git a/packages/features/auth/src/components/auth-layout.tsx b/packages/features/auth/src/components/auth-layout.tsx
index 76fda2080..8a0c38f49 100644
--- a/packages/features/auth/src/components/auth-layout.tsx
+++ b/packages/features/auth/src/components/auth-layout.tsx
@@ -8,14 +8,14 @@ export function AuthLayoutShell({
     <div
       className={
         'flex h-screen flex-col items-center justify-center' +
-        ' dark:lg:bg-background space-y-8 lg:space-y-12 lg:bg-gray-50' +
+        ' dark:lg:bg-background space-y-10 lg:space-y-12 lg:bg-gray-50' +
         ' animate-in fade-in slide-in-from-top-8 zoom-in-95 duration-1000'
       }
     >
       {Logo && <Logo />}
 
       <div
-        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
+        className={`bg-background dark:border-border flex w-full max-w-sm flex-col items-center space-y-5 rounded-lg border-transparent px-6 md:w-8/12 md:border md:px-8 md:py-6 md:shadow lg:w-5/12 lg:px-6 xl:w-4/12 xl:py-8 2xl:w-3/12`}
       >
         {children}
       </div>