diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 4984c6df414..936a73aacbc 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -1,5 +1,5 @@
 import { ServerIcon, SupportIcon } from '@heroicons/react/outline'
-import { Accordion, Button, IconCheck } from 'ui'
+import { Accordion, Button, IconCheck, Select } from 'ui'
 import Solutions from 'data/Solutions.json'
 import { NextSeo } from 'next-seo'
 import Link from 'next/link'
@@ -21,6 +21,7 @@ export default function IndexPage() {
   const { basePath } = useRouter()
   const { isDarkMode } = useTheme()
   const [showComputeModal, setShowComputeModal] = useState(false)
+  const [activeMobileTier, setActiveMobileTier] = useState('Free')
 
   const meta_title = 'Pricing & fees | Supabase'
   const meta_description =
@@ -170,7 +171,7 @@ export default function IndexPage() {
     },
   ]
 
-  const MobileHeaders = ({
+  const MobileHeader = ({
     // title,
     description,
     priceDescription,
@@ -187,7 +188,7 @@ export default function IndexPage() {
     from?: boolean
   }) => {
     return (
-      <div className="mt-8 px-4">
+      <div className="mt-8 px-4 mobile-header">
         <h2 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
           {tier}
         </h2>
@@ -391,7 +392,7 @@ export default function IndexPage() {
         <div>
           <div className="text-center">
             <h2 className="text-scale-1200 text-3xl">Easily customizable add-Ons</h2>
-            <p className="text-scale-1100 mb-16 text-lg">
+            <p className="text-scale-1100 mb-8 lg:mb-16 text-lg">
               Level up your Supabase experience with add-ons.
             </p>
           </div>
@@ -476,7 +477,7 @@ export default function IndexPage() {
             <h2 className="text-scale-1200 text-3xl scroll-m-20" id="compare-plans">
               Compare Plans
             </h2>
-            <p className="text-scale-1100 mb-16 text-lg">
+            <p className="text-scale-1100 mb-8 lg:mb-16 text-lg">
               Start with a hobby project, collaborate with a team, and scale to millions of users.
             </p>
           </div>
@@ -486,153 +487,179 @@ export default function IndexPage() {
 
             <div className="lg:hidden">
               {/* Free - Mobile  */}
+              <div className="bg-slate-200 p-2 sticky top-14 z-10 pt-4">
+                <div className="bg-slate-300 rounded-lg border border-slate-500 py-2 px-4 flex justify-between items-center">
+                  <label className="text-scale-1000">Change plan</label>
+                  <Select
+                    id="change-plan"
+                    name="Change plan"
+                    layout="vertical"
+                    value={activeMobileTier}
+                    className="min-w-[120px] bg-slate-400 text-red-500"
+                    onChange={(e) => setActiveMobileTier(e.target.value)}
+                  >
+                    <Select.Option value="Free">Free</Select.Option>
+                    <Select.Option value="Pro">Pro</Select.Option>
+                    <Select.Option value="Enterprise">Enterprise</Select.Option>
+                  </Select>
+                </div>
+              </div>
+              {activeMobileTier === 'Free' && (
+                <>
+                  <MobileHeader
+                    tier="Free"
+                    price={'0'}
+                    priceDescription={'/mo'}
+                    description={'Perfect for hobby projects and experiments'}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.database}
+                    tier={'free'}
+                    icon={Solutions['database'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.auth}
+                    tier={'free'}
+                    icon={Solutions['authentication'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.storage}
+                    tier={'free'}
+                    icon={Solutions['storage'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.realtime}
+                    tier={'free'}
+                    icon={Solutions['realtime'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing['edge-functions']}
+                    tier={'free'}
+                    icon={Solutions['edge-functions'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.dashboard}
+                    tier={'free'}
+                    icon={pricing.dashboard.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.security}
+                    tier={'free'}
+                    icon={pricing.security.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.support}
+                    tier={'free'}
+                    icon={pricing.support.icon}
+                  />
+                </>
+              )}
 
-              <MobileHeaders
-                tier="Free"
-                price={'0'}
-                priceDescription={'/mo'}
-                description={'Perfect for hobby projects and experiments'}
-              />
+              {activeMobileTier === 'Pro' && (
+                <>
+                  <MobileHeader
+                    tier="Pro"
+                    from={false}
+                    price={'25'}
+                    priceDescription={'/mo + additional use'}
+                    description={'Everything you need to scale your project into production'}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.database}
+                    tier={'pro'}
+                    icon={Solutions['database'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.auth}
+                    tier={'pro'}
+                    icon={Solutions['authentication'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.storage}
+                    tier={'pro'}
+                    icon={Solutions['storage'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.realtime}
+                    tier={'pro'}
+                    icon={Solutions['realtime'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing['edge-functions']}
+                    tier={'pro'}
+                    icon={Solutions['edge-functions'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.dashboard}
+                    tier={'pro'}
+                    icon={pricing.dashboard.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.security}
+                    tier={'pro'}
+                    icon={pricing.security.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.support}
+                    tier={'pro'}
+                    icon={pricing.support.icon}
+                  />
+                </>
+              )}
 
-              <PricingTableRowMobile
-                category={pricing.database}
-                tier={'free'}
-                icon={Solutions['database'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.auth}
-                tier={'free'}
-                icon={Solutions['authentication'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.storage}
-                tier={'free'}
-                icon={Solutions['storage'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.realtime}
-                tier={'free'}
-                icon={Solutions['realtime'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing['edge-functions']}
-                tier={'free'}
-                icon={Solutions['edge-functions'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.dashboard}
-                tier={'free'}
-                icon={pricing.dashboard.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.security}
-                tier={'free'}
-                icon={pricing.security.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.support}
-                tier={'free'}
-                icon={pricing.support.icon}
-              />
-
-              {/* Pro - Mobile  */}
-              <MobileHeaders
-                tier="Pro"
-                from={false}
-                price={'25'}
-                priceDescription={'/mo + additional use'}
-                description={'Everything you need to scale your project into production'}
-              />
-              <PricingTableRowMobile
-                category={pricing.database}
-                tier={'pro'}
-                icon={Solutions['database'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.auth}
-                tier={'pro'}
-                icon={Solutions['authentication'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.storage}
-                tier={'pro'}
-                icon={Solutions['storage'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.realtime}
-                tier={'pro'}
-                icon={Solutions['realtime'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing['edge-functions']}
-                tier={'pro'}
-                icon={Solutions['edge-functions'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.dashboard}
-                tier={'pro'}
-                icon={pricing.dashboard.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.security}
-                tier={'pro'}
-                icon={pricing.security.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.support}
-                tier={'pro'}
-                icon={pricing.support.icon}
-              />
-
-              {/* Enterprise - Mobile  */}
-              <MobileHeaders
-                tier="Enterprise"
-                price={'Contact Us'}
-                priceDescription={'for a quote'}
-                description={'Designated support team, account manager and technical specialist'}
-                showDollarSign={false}
-              />
-
-              <PricingTableRowMobile
-                category={pricing.database}
-                tier={'enterprise'}
-                icon={Solutions['database'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.auth}
-                tier={'enterprise'}
-                icon={Solutions['authentication'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.storage}
-                tier={'enterprise'}
-                icon={Solutions['storage'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.realtime}
-                tier={'enterprise'}
-                icon={Solutions['realtime'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing['edge-functions']}
-                tier={'enterprise'}
-                icon={Solutions['edge-functions'].icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.dashboard}
-                tier={'enterprise'}
-                icon={pricing.dashboard.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.security}
-                tier={'enterprise'}
-                icon={pricing.security.icon}
-              />
-              <PricingTableRowMobile
-                category={pricing.support}
-                tier={'enterprise'}
-                icon={pricing.support.icon}
-              />
+              {activeMobileTier === 'Enterprise' && (
+                <>
+                  <MobileHeader
+                    tier="Enterprise"
+                    price={'Contact Us'}
+                    priceDescription={'for a quote'}
+                    description={
+                      'Designated support team, account manager and technical specialist'
+                    }
+                    showDollarSign={false}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.database}
+                    tier={'enterprise'}
+                    icon={Solutions['database'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.auth}
+                    tier={'enterprise'}
+                    icon={Solutions['authentication'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.storage}
+                    tier={'enterprise'}
+                    icon={Solutions['storage'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.realtime}
+                    tier={'enterprise'}
+                    icon={Solutions['realtime'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing['edge-functions']}
+                    tier={'enterprise'}
+                    icon={Solutions['edge-functions'].icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.dashboard}
+                    tier={'enterprise'}
+                    icon={pricing.dashboard.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.security}
+                    tier={'enterprise'}
+                    icon={pricing.security.icon}
+                  />
+                  <PricingTableRowMobile
+                    category={pricing.support}
+                    tier={'enterprise'}
+                    icon={pricing.support.icon}
+                  />
+                </>
+              )}
             </div>
 
             {/* <!-- lg+ --> */}
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index 1265d536a10..cbab5e23dbd 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -117,9 +117,9 @@ export default {
           flex flex-row
           gap-3
           items-center
-          w-full 
-          text-left 
-          cursor-pointer 
+          w-full
+          text-left
+          cursor-pointer
 
           outline-none
           focus-visible:ring-1
@@ -143,27 +143,27 @@ export default {
           group
           border
           border-scale-700
-          
+
           first:rounded-tl-md first:rounded-tr-md
           last:rounded-bl-md last:rounded-br-md
         `,
         trigger: `
           flex flex-row
           items-center
-          px-6 py-4 
-          w-full 
-          text-left 
-          cursor-pointer 
-          
-          font-medium 
-          text-base 
-          bg-transparent 
+          px-6 py-4
+          w-full
+          text-left
+          cursor-pointer
+
+          font-medium
+          text-base
+          bg-transparent
 
           outline-none
           focus-visible:ring-1
           focus-visible:z-50
           ring-scale-1100
-          
+
           transition-colors
           hover:bg-scale-200
 
@@ -252,8 +252,8 @@ export default {
 
   alert: {
     base: `
-      relative rounded border py-4 px-6 
-      flex space-x-4 items-start 
+      relative rounded border py-4 px-6
+      flex space-x-4 items-start
     `,
     header: 'block text-sm font-normal mb-1',
     description: `text-xs`,
@@ -290,11 +290,11 @@ export default {
       },
     },
     close: `
-      absolute 
-      right-6 top-4 
-      p-0 m-0 
+      absolute
+      right-6 top-4
+      p-0 m-0
       text-scale-900
-      cursor-pointer transition ease-in-out 
+      cursor-pointer transition ease-in-out
       bg-transparent border-transparent focus:outline-none
       opacity-50 hover:opacity-100`,
   },
@@ -306,15 +306,15 @@ export default {
   card: {
     base: `
       bg-white dark:bg-scaleDark-700
-      
-      border
-      ${defaults.border.primary} 
 
-      flex flex-col 
+      border
+      ${defaults.border.primary}
+
+      flex flex-col
       rounded-md shadow-lg overflow-hidden relative
     `,
     hoverable: 'transition hover:-translate-y-1 hover:shadow-2xl',
-    head: `px-8 py-6 flex justify-between 
+    head: `px-8 py-6 flex justify-between
     border-b
       ${defaults.border.primary} `,
     content: 'p-8',
@@ -328,20 +328,20 @@ export default {
     base: `w-full justify-between space-y-4`,
     underlined: {
       list: `
-        flex items-center border-b 
+        flex items-center border-b
         ${defaults.border.secondary}
         `,
-      base: ` 
-        relative 
-        cursor-pointer 
-        text-scale-900 
-        flex 
-        items-center 
+      base: `
+        relative
+        cursor-pointer
+        text-scale-900
+        flex
+        items-center
         space-x-2
-        text-center 
+        text-center
         transition
-        focus:outline-none 
-        focus-visible:ring 
+        focus:outline-none
+        focus-visible:ring
         focus-visible:ring-scale-700
         focus-visible:border-scale-900
       `,
@@ -355,18 +355,18 @@ export default {
     },
     pills: {
       list: 'flex space-x-1',
-      base: ` 
-        relative 
-        cursor-pointer 
-        flex 
-        items-center 
+      base: `
+        relative
+        cursor-pointer
+        flex
+        items-center
         space-x-2
-        text-center 
+        text-center
         transition
         shadow-sm
         rounded
-        focus:outline-none 
-        focus-visible:ring 
+        focus:outline-none
+        focus-visible:ring
         focus-visible:ring-scale-700
         focus-visible:border-scale-900
         `,
@@ -378,23 +378,23 @@ export default {
       active: `
         bg-scale-1200
         text-scale-200
-        border-scale-1200 
+        border-scale-1200
       `,
     },
     'rounded-pills': {
       list: 'flex flex-wrap gap-2',
-      base: ` 
-        relative 
-        cursor-pointer 
-        flex 
-        items-center 
+      base: `
+        relative
+        cursor-pointer
+        flex
+        items-center
         space-x-2
-        text-center 
+        text-center
         transition
         shadow-sm
         rounded-full
-        focus:outline-none 
-        focus-visible:ring 
+        focus:outline-none
+        focus-visible:ring
         focus-visible:ring-scale-700
         focus-visible:border-scale-900
         `,
@@ -406,7 +406,7 @@ export default {
       active: `
         bg-scale-1200
         text-scale-200
-        border-scale-1200 
+        border-scale-1200
       `,
     },
     block: 'w-full flex items-center justify-center',
@@ -427,15 +427,15 @@ export default {
 
   button: {
     base: `
-      relative 
-      cursor-pointer 
-      inline-flex items-center space-x-2 
-      text-center 
+      relative
+      cursor-pointer
+      inline-flex items-center space-x-2
+      text-center
       font-regular
-      transition ease-out duration-200 
-      rounded 
+      transition ease-out duration-200
+      rounded
       ${defaults['focus-visible']}
-      
+
     `,
     label: `truncate`,
     container: 'inline-flex font-medium',
@@ -449,7 +449,7 @@ export default {
       secondary: `
         bg-scale-1200
         text-scale-100 hover:text-scale-800
-        focus-visible:text-scale-600 
+        focus-visible:text-scale-600
 
         bordershadow-scale-1100 hover:bordershadow-scale-900
 
@@ -462,7 +462,7 @@ export default {
         dark:bordershadow-scale-700 hover:dark:bordershadow-scale-800
         dark:bg-scale-500 dark:hover:bg-scale-600
         focus-visible:outline-brand-600
-        
+
       `,
       alternative: `
         text-brand-1100
@@ -473,14 +473,14 @@ export default {
         focus-visible:outline-brand-600
       `,
       outline: `
-        text-scale-1200 
-        bg-transparent 
+        text-scale-1200
+        bg-transparent
         bordershadow-scale-600 hover:bordershadow-scale-700
         dark:bordershadow-scale-800 hover:dark:bordershadow-scale-900
         focus-visible:outline-scale-700
       `,
       dashed: `
-        text-scale-1200 
+        text-scale-1200
         border
         border-dashed
         border-scale-700 hover:border-scale-900
@@ -498,7 +498,7 @@ export default {
         focus-visible:outline-scale-700
       `,
       text: `
-        text-scale-1200 
+        text-scale-1200
         hover:bg-scale-500
         shadow-none
         focus-visible:outline-scale-700
@@ -538,13 +538,13 @@ export default {
 
   input: {
     base: `
-      block 
-      box-border 
-      w-full 
-      rounded-md 
-      shadow-sm 
+      block
+      box-border
+      w-full
+      rounded-md
+      shadow-sm
       transition-all
-      text-scale-1200  
+      text-scale-1200
       border
       focus:shadow-md
       ${defaults.focus}
@@ -559,7 +559,7 @@ export default {
         `,
       error: `
         bg-red-100
-        border border-red-700 
+        border border-red-700
         focus:ring-red-500
         placeholder:text-red-600
        `,
@@ -581,13 +581,13 @@ export default {
 
   select: {
     base: `
-      block 
-      box-border 
-      w-full 
-      rounded-md 
-      shadow-sm 
+      block
+      box-border
+      w-full
+      rounded-md
+      shadow-sm
       transition-all
-      text-scale-1200  
+      text-scale-1200
       border
       focus:shadow-md
       ${defaults.focus}
@@ -605,7 +605,7 @@ export default {
         `,
       error: `
         bg-red-100
-        border border-red-700 
+        border border-red-700
         focus:ring-red-500
         placeholder:text-red-600
        `,
@@ -618,7 +618,7 @@ export default {
     disabled: 'opacity-50',
     actions_container: 'absolute inset-y-0 right-0 pl-3 pr-1 mr-5 flex items-center',
     chevron_container: 'absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none',
-    chevron: 'h-5 w-5 text-scale-600',
+    chevron: 'h-5 w-5 text-scale-800',
   },
 
   /*
@@ -628,12 +628,12 @@ export default {
   inputNumber: {
     base: `
       block
-      box-border 
-      w-full 
-      rounded-md 
-      shadow-sm 
+      box-border
+      w-full
+      rounded-md
+      shadow-sm
       transition-all
-      text-scale-1200  
+      text-scale-1200
       border
       focus:shadow-md
       ${defaults.focus}
@@ -651,7 +651,7 @@ export default {
       `,
       error: `
         bg-red-100
-        border border-red-700 
+        border border-red-700
         focus:ring-red-500
         placeholder:text-red-600
        `,
@@ -668,9 +668,9 @@ export default {
   /*
    *  Checkbox
    *
-   * 
+   *
    * This Checkbox requires a plugin in your config:
-  
+
     ```
     // tailwind.config.js
     module.exports = {
@@ -681,17 +681,17 @@ export default {
       ],
     }
     ```
-   * 
-   * 
+   *
+   *
   */
 
   checkbox: {
     base: `
-      bg-transparent 
+      bg-transparent
       ${defaults.focus}
       focus:ring-scale-400
-      text-brand-900 
-      border-scale-700 
+      text-brand-900
+      border-scale-700
       shadow-sm
       rounded
       cursor-pointer
@@ -727,9 +727,9 @@ export default {
   /*
    *  Radio
    *
-   * 
+   *
    * This Radio requires a plugin in your config:
-  
+
     ```
     // tailwind.config.js
     module.exports = {
@@ -740,8 +740,8 @@ export default {
       ],
     }
     ```
-   * 
-   * 
+   *
+   *
   */
 
   radio: {
@@ -750,7 +750,7 @@ export default {
       ${defaults.focus}
       focus:ring-brand-400
       border-scale-700
-      
+
       text-brand-900
       shadow-sm
       cursor-pointer
@@ -797,7 +797,7 @@ export default {
         `,
         active: `
           bg-scale-300 dark:bg-scale-600 z-10
-          border-scale-900 dark:border-scale-900 
+          border-scale-900 dark:border-scale-900
           border-1
         `,
         radio_offset: 'left-4',
@@ -816,7 +816,7 @@ export default {
           transition
           rounded-md
           border
-          shadow-sm 
+          shadow-sm
         `,
         size: {
           tiny: `px-5 py-3`,
@@ -833,7 +833,7 @@ export default {
         `,
         active: `
           bg-scale-300 dark:bg-scale-600 z-10
-          border-scale-900 dark:border-scale-900 
+          border-scale-900 dark:border-scale-900
           border-1
         `,
         radio_offset: 'left-4',
@@ -849,9 +849,9 @@ export default {
         },
         group: `flex flex-row gap-3`,
         base: `
-          transition 
+          transition
           border
-          rounded-lg 
+          rounded-lg
           grow
           items-center
           flex-wrap
@@ -888,10 +888,10 @@ export default {
         },
         group: `flex flex-row gap-3`,
         base: `
-          transition 
-          border border-scale-700 hover:border-scale-900 
+          transition
+          border border-scale-700 hover:border-scale-900
           shadow-sm
-          rounded-lg 
+          rounded-lg
           grow
         `,
         size: {
@@ -909,7 +909,7 @@ export default {
         `,
         active: `
           bg-scale-300 dark:bg-scale-600 z-10
-          border-scale-900 dark:border-scale-900 
+          border-scale-900 dark:border-scale-900
           border-1
         `,
         radio_offset: 'left-4',
@@ -969,21 +969,21 @@ export default {
   sidepanel: {
     base: `
       bg-scale-100 dark:bg-scale-300
-      flex flex-col 
-      fixed 
-      inset-y-0 
-      max-w-full 
+      flex flex-col
+      fixed
+      inset-y-0
+      max-w-full
       h-screen
       border-l border-overlay-border
       shadow-xl
     `,
     header: `
-      space-y-1 py-4 px-4 bg-overlay-bg sm:px-6 
+      space-y-1 py-4 px-4 bg-overlay-bg sm:px-6
       border-b border-overlay-border
     `,
     contents: `
-      relative 
-      flex-1 
+      relative
+      flex-1
       overflow-y-auto
     `,
     content: `
@@ -1002,12 +1002,12 @@ export default {
     align: {
       left: `
         left-0
-        data-open:animate-panel-slide-left-out 
+        data-open:animate-panel-slide-left-out
         data-closed:animate-panel-slide-left-in
       `,
       right: `
         right-0
-        data-open:animate-panel-slide-right-out 
+        data-open:animate-panel-slide-right-out
         data-closed:animate-panel-slide-right-in
       `,
     },
@@ -1023,9 +1023,9 @@ export default {
       dark:bg-scale-100
       h-full w-full
       left-0
-      top-0 
+      top-0
       opacity-75
-      data-closed:animate-fade-out-overlay-bg 
+      data-closed:animate-fade-out-overlay-bg
       data-open:animate-fade-in-overlay-bg
     `,
     // this is to reset the button
@@ -1041,10 +1041,10 @@ export default {
 
   toggle: {
     base: `
-      p-0 relative 
-      inline-flex flex-shrink-0 
-      border-2 border-transparent 
-      rounded-full 
+      p-0 relative
+      inline-flex flex-shrink-0
+      border-2 border-transparent
+      rounded-full
       cursor-pointer
       transition-colors ease-in-out duration-200
       ${defaults.focus}
@@ -1054,8 +1054,8 @@ export default {
       hover:bg-scale-700
     `,
     active: `
-      bg-brand-900    
-      hover:bg-brand-900    
+      bg-brand-900
+      hover:bg-brand-900
     `,
     handle_container: {
       tiny: 'h-4 w-7',
@@ -1066,12 +1066,12 @@ export default {
     },
     handle: {
       base: `
-        inline-block h-5 w-5 
-        rounded-full 
+        inline-block h-5 w-5
+        rounded-full
         bg-scale-100
         dark:bg-scale-900
-        shadow ring-0 
-        transition 
+        shadow ring-0
+        transition
         ease-in-out duration-200
       `,
       tiny: 'h-3 w-3',
@@ -1159,7 +1159,7 @@ export default {
     },
     error: {
       base: `
-        text-red-900 
+        text-red-900
         transition-all
         data-show:mt-2
         data-show:animate-slide-down-normal
@@ -1187,7 +1187,7 @@ export default {
     trigger: `
       flex
 
-      border-none 
+      border-none
       rounded
       bg-transparent p-0
       outline-none
@@ -1279,8 +1279,8 @@ export default {
   popover: {
     trigger: `
       flex
-      border-none 
-  
+      border-none
+
       rounded
       bg-transparent
       p-0
@@ -1300,7 +1300,7 @@ export default {
       data-closed:animate-dropdown-content-hide
       min-w-fit
 
-      origin-popover 
+      origin-popover
       data-open:animate-dropdown-content-show
       data-closed:animate-dropdown-content-hide
     `,
@@ -1344,7 +1344,7 @@ export default {
         cursor-pointer
         flex space-x-3 items-center
         outline-none
-        focus-visible:ring-1 ring-scale-1200 focus-visible:z-10 
+        focus-visible:ring-1 ring-scale-1200 focus-visible:z-10
         group
       `,
       content: {
@@ -1415,7 +1415,7 @@ export default {
     },
     group: {
       base: `
-        flex space-x-3 
+        flex space-x-3
         mb-2
         font-normal
       `,
@@ -1438,20 +1438,20 @@ export default {
       bg-scale-100 dark:bg-scale-300
       my-4
       border border-scale-300 dark:border-scale-500
-      rounded-md 
-      shadow-xl 
-      data-open:animate-overlay-show 
-      data-closed:animate-overlay-hide  
-      
+      rounded-md
+      shadow-xl
+      data-open:animate-overlay-show
+      data-closed:animate-overlay-hide
+
     `,
     header: `
       bg-scale-200 dark:bg-scale-400
-      space-y-1 py-3 px-4 sm:px-5 
+      space-y-1 py-3 px-4 sm:px-5
       border-b border-scale-300 dark:border-scale-500
     `,
     footer: `
       flex justify-end gap-2
-      py-3 px-5 
+      py-3 px-5
       border-t border-scale-300 dark:border-scale-500
     `,
     size: {
@@ -1469,9 +1469,9 @@ export default {
       dark:bg-scale-100
       h-full w-full
       left-0
-      top-0 
+      top-0
       opacity-75
-      data-closed:animate-fade-out-overlay-bg 
+      data-closed:animate-fade-out-overlay-bg
       data-open:animate-fade-in-overlay-bg
     `,
     scroll_overlay: `
@@ -1480,7 +1480,7 @@ export default {
       grid
       place-items-center
       overflow-y-auto
-      data-open:animate-overlay-show data-closed:animate-overlay-hide  
+      data-open:animate-overlay-show data-closed:animate-overlay-hide
     `,
     separator: `
       w-full
@@ -1495,12 +1495,12 @@ export default {
 
   listbox: {
     base: `
-      block 
-      box-border 
-      w-full 
-      rounded-md 
-      shadow-sm 
-      text-scale-1200  
+      block
+      box-border
+      w-full
+      rounded-md
+      shadow-sm
+      text-scale-1200
       border
       focus:shadow-md
       ${defaults.focus}
@@ -1524,24 +1524,24 @@ export default {
         `,
       error: `
         bg-red-100
-        border border-red-700 
+        border border-red-700
         focus:ring-red-500
         placeholder:text-red-600
        `,
     },
     options_container_animate: `
       transition
-      data-open:animate-slide-down 
+      data-open:animate-slide-down
       data-open:opacity-1
       data-closed:animate-slide-up
       data-closed:opacity-0
     `,
     options_container: `
-      bg-scale-100 dark:bg-scale-300 
-      shadow-lg 
-      border border-solid 
-      border-gray-100 dark:border-gray-600 max-h-60 
-      rounded-md py-1 text-base 
+      bg-scale-100 dark:bg-scale-300
+      shadow-lg
+      border border-solid
+      border-gray-100 dark:border-gray-600 max-h-60
+      rounded-md py-1 text-base
       sm:text-sm z-10 overflow-hidden overflow-y-scroll
 
       origin-dropdown
@@ -1561,7 +1561,7 @@ export default {
     chevron: 'h-5 w-5 text-scale-600',
     option: `
       w-listbox
-      transition cursor-pointer select-none relative py-2 pl-3 pr-9 
+      transition cursor-pointer select-none relative py-2 pl-3 pr-9
       text-scale-900
       text-sm
       hover:bg-scale-300 dark:hover:bg-scale-500
@@ -1587,9 +1587,9 @@ export default {
 
   inputErrorIcon: {
     base: `
-      flex items-center 
-      right-3 pr-2 pl-2 
-      inset-y-0 
+      flex items-center
+      right-3 pr-2 pl-2
+      inset-y-0
       pointer-events-none
       text-red-900
     `,
@@ -1597,8 +1597,8 @@ export default {
 
   inputIconContainer: {
     base: `
-    absolute inset-y-0 
-    left-0 pl-3 flex 
+    absolute inset-y-0
+    left-0 pl-3 flex
     items-center pointer-events-none
     text-scale-1100
     `,