diff --git a/apps/docs/content/guides/platform/credits.mdx b/apps/docs/content/guides/platform/credits.mdx
index 6197fe1423c1a..dc667e1b55c75 100644
--- a/apps/docs/content/guides/platform/credits.mdx
+++ b/apps/docs/content/guides/platform/credits.mdx
@@ -28,9 +28,6 @@ As an example, if you start a Pro Plan subscription on January 1 and downgrade t
 ## Credit top-ups
 
 You can top up credits at any time, with a maximum of <Price price="2000" /> per top-up. These credits do not expire and are non-refundable.
-
-If you have any outstanding invoices, we’ll automatically use your credits to pay them off. Any remaining credits will be applied to future invoices.
-
 You may want to consider this option to avoid issues with recurring payments, gain more control over how often your credit card is charged, and potentially make things easier for your accounting department.
 
 <Admonition type="note">
diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx
index 3bf86dd9ee2fe..b468f085d191d 100644
--- a/apps/studio/components/grid/SupabaseGrid.tsx
+++ b/apps/studio/components/grid/SupabaseGrid.tsx
@@ -60,17 +60,10 @@ export const SupabaseGrid = ({
     },
     {
       keepPreviousData: true,
-      retryDelay: (retryAttempt, error: any) => {
+      retry: (_, error: any) => {
         const doesNotExistError = error && error.message?.includes('does not exist')
-        const tooManyRequestsError = error.message?.includes('Too Many Requests')
-        const vaultError = error.message?.includes('query vault failed')
-
         if (doesNotExistError) onApplySorts([])
-
-        if (retryAttempt > 3 || doesNotExistError || tooManyRequestsError || vaultError) {
-          return Infinity
-        }
-        return 5000
+        return false
       },
     }
   )
diff --git a/apps/studio/components/grid/components/common/DropdownControl.tsx b/apps/studio/components/grid/components/common/DropdownControl.tsx
index 502f688651a1d..a5f9fe0913e9c 100644
--- a/apps/studio/components/grid/components/common/DropdownControl.tsx
+++ b/apps/studio/components/grid/components/common/DropdownControl.tsx
@@ -1,5 +1,6 @@
+import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
 import { PropsWithChildren } from 'react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
 
 interface DropdownControlProps {
   options: {
@@ -7,6 +8,8 @@ interface DropdownControlProps {
     label: string
     postLabel?: string
     preLabel?: string
+    disabled?: boolean
+    tooltip?: string
   }[]
   onSelect: (value: string | number) => void
   side?: 'bottom' | 'left' | 'top' | 'right' | undefined
@@ -30,13 +33,18 @@ export const DropdownControl = ({
           {options.length === 0 && <p className="dropdown-control__empty-text">No more items</p>}
           {options.map((x) => {
             return (
-              <DropdownMenuItem key={x.value} onClick={() => onSelect(x.value)}>
+              <DropdownMenuItemTooltip
+                key={x.value}
+                disabled={x.disabled}
+                tooltip={{ content: { side: 'right', text: x.tooltip } }}
+                onClick={() => onSelect(x.value)}
+              >
                 <div className="flex items-center gap-2">
                   {x.preLabel && <span className="grow text-foreground-lighter">{x.preLabel}</span>}
                   <span>{x.label}</span>
                   {x.postLabel && <span className="text-foreground-lighter">{x.postLabel}</span>}
                 </div>
-              </DropdownMenuItem>
+              </DropdownMenuItemTooltip>
             )
           })}
         </div>
diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index 4b5e9142a7e1d..5608e5b97cae4 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -4,8 +4,6 @@ import { ref as valtioRef } from 'valtio'
 
 import { handleCopyCell } from 'components/grid/SupabaseGrid.utils'
 import { formatForeignKeys } from 'components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.utils'
-import AlertError from 'components/ui/AlertError'
-import { InlineLink } from 'components/ui/InlineLink'
 import { useForeignKeyConstraintsQuery } from 'data/database/foreign-key-constraints-query'
 import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
@@ -15,10 +13,10 @@ import { useCsvFileDrop } from 'hooks/ui/useCsvFileDrop'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { Button, cn } from 'ui'
-import { Admonition } from 'ui-patterns'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import type { Filter, GridProps, SupaRow } from '../../types'
 import { useOnRowsChange } from './Grid.utils'
+import { GridError } from './GridError'
 import RowRenderer from './RowRenderer'
 
 const rowKeyGetter = (row: SupaRow) => {
@@ -60,7 +58,6 @@ export const Grid = memo(
 
       const { data: org } = useSelectedOrganizationQuery()
       const { data: project } = useSelectedProjectQuery()
-      const isBranch = project?.parent_project_ref !== undefined
 
       const onRowsChange = useOnRowsChange(rows)
 
@@ -80,9 +77,6 @@ export const Grid = memo(
       const isForeignTable = tableEntityType === ENTITY_TYPE.FOREIGN_TABLE
       const isTableEmpty = (rows ?? []).length === 0
 
-      const isForeignTableMissingVaultKeyError =
-        isForeignTable && isError && error.message.includes('query vault failed')
-
       const { mutate: sendEvent } = useSendEventMutation()
 
       const { isDraggedOver, onDragOver, onFileDrop } = useCsvFileDrop({
@@ -155,51 +149,9 @@ export const Grid = memo(
               className="absolute top-9 p-2 w-full z-[1] pointer-events-none"
             >
               {isLoading && <GenericSkeletonLoader />}
-              {isError ? (
-                isForeignTableMissingVaultKeyError ? (
-                  <Admonition
-                    type="warning"
-                    className="pointer-events-auto"
-                    title="Failed to retrieve rows from foreign table"
-                  >
-                    <p>
-                      The key that's used to retrieve data from your foreign table is either
-                      incorrect or missing. Verify the key in your{' '}
-                      <InlineLink href={`/project/${project?.ref}/integrations?category=wrapper`}>
-                        wrapper's settings
-                      </InlineLink>{' '}
-                      or in{' '}
-                      <InlineLink href={`/project/${project?.ref}/integrations/vault/overview`}>
-                        Vault
-                      </InlineLink>
-                      .
-                    </p>
-                    {isBranch && (
-                      <p>
-                        Note: Vault keys from the main project do not sync to branches. You may add
-                        them manually into{' '}
-                        <InlineLink href={`/project/${project?.ref}/integrations/vault/overview`}>
-                          Vault
-                        </InlineLink>{' '}
-                        if you want to query foreign tables while on a branch.
-                      </p>
-                    )}
-                  </Admonition>
-                ) : (
-                  <AlertError
-                    className="pointer-events-auto"
-                    error={error}
-                    subject="Failed to retrieve rows from table"
-                  >
-                    {filters.length > 0 && (
-                      <p>
-                        Verify that the filter values are correct, as the error may stem from an
-                        incorrectly applied filter
-                      </p>
-                    )}
-                  </AlertError>
-                )
-              ) : null}
+
+              {isError && <GridError error={error} />}
+
               {isSuccess && (
                 <>
                   {(filters ?? []).length === 0 ? (
diff --git a/apps/studio/components/grid/components/grid/GridError.tsx b/apps/studio/components/grid/components/grid/GridError.tsx
new file mode 100644
index 0000000000000..9999466ef57a7
--- /dev/null
+++ b/apps/studio/components/grid/components/grid/GridError.tsx
@@ -0,0 +1,147 @@
+import { useParams } from 'common'
+import { useTableFilter } from 'components/grid/hooks/useTableFilter'
+import { useTableSort } from 'components/grid/hooks/useTableSort'
+import AlertError from 'components/ui/AlertError'
+import { InlineLink } from 'components/ui/InlineLink'
+import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
+
+export const GridError = ({ error }: { error?: any }) => {
+  const { filters } = useTableFilter()
+  const { sorts } = useTableSort()
+  const snap = useTableEditorTableStateSnapshot()
+
+  const tableEntityType = snap.originalTable?.entity_type
+  const isForeignTable = tableEntityType === ENTITY_TYPE.FOREIGN_TABLE
+
+  const isForeignTableMissingVaultKeyError =
+    isForeignTable && error?.message?.includes('query vault failed')
+
+  const isInvalidSyntaxError =
+    filters.length > 0 && error?.message?.includes('invalid input syntax')
+
+  const isInvalidOrderingOperatorError =
+    sorts.length > 0 && error?.message?.includes('identify an ordering operator')
+
+  if (isForeignTableMissingVaultKeyError) {
+    return <ForeignTableMissingVaultKeyError />
+  } else if (isInvalidSyntaxError) {
+    return <InvalidSyntaxError error={error} />
+  } else if (isInvalidOrderingOperatorError) {
+    return <InvalidOrderingOperatorError error={error} />
+  }
+
+  return <GeneralError error={error} />
+}
+
+const ForeignTableMissingVaultKeyError = () => {
+  const { ref } = useParams()
+  const { data: project } = useSelectedProjectQuery()
+  const isBranch = project?.parent_project_ref !== undefined
+
+  return (
+    <Admonition
+      type="warning"
+      className="pointer-events-auto"
+      title="Failed to retrieve rows from foreign table"
+    >
+      <p>
+        The key that's used to retrieve data from your foreign table is either incorrect or missing.
+        Verify the key in your{' '}
+        <InlineLink href={`/project/${ref}/integrations?category=wrapper`}>
+          wrapper's settings
+        </InlineLink>{' '}
+        or in <InlineLink href={`/project/${ref}/integrations/vault/overview`}>Vault</InlineLink>.
+      </p>
+      {isBranch && (
+        <p>
+          Note: Vault keys from the main project do not sync to branches. You may add them manually
+          into <InlineLink href={`/project/${ref}/integrations/vault/overview`}>Vault</InlineLink>{' '}
+          if you want to query foreign tables while on a branch.
+        </p>
+      )}
+    </Admonition>
+  )
+}
+
+const InvalidSyntaxError = ({ error }: { error?: any }) => {
+  const { onApplyFilters } = useTableFilter()
+
+  return (
+    <Admonition
+      type="warning"
+      className="pointer-events-auto"
+      title="Invalid input syntax provided in filter value(s)"
+    >
+      <p className="!mb-0">
+        Unable to retrieve results as the provided value in your filter(s) doesn't match it's column
+        data type.
+      </p>
+      <p className="!mb-2">
+        Verify that your filter values are correct before applying the filters again.
+      </p>
+      <p className="text-sm text-foreground-lighter prose max-w-full !mb-4">
+        Error: <code className="text-xs">{error.message}</code>
+      </p>
+
+      <Button type="default" onClick={() => onApplyFilters([])}>
+        Remove filters
+      </Button>
+    </Admonition>
+  )
+}
+
+const InvalidOrderingOperatorError = ({ error }: { error: any }) => {
+  const { sorts, onApplySorts } = useTableSort()
+  const invalidDataType = (error?.message ?? '').split('type ').pop()
+  const formattedInvalidDataType = invalidDataType.includes('json')
+    ? invalidDataType.toUpperCase()
+    : invalidDataType
+
+  return (
+    <Admonition
+      type="warning"
+      className="pointer-events-auto"
+      title={`Sorting is not supporting on ${sorts.length > 1 ? 'one of the selected columns' : 'the selected column'}`}
+    >
+      <p className="!mb-0">
+        Unable to retrieve results as sorting is not supported on{' '}
+        {sorts.length > 1 ? 'one of the selected columns' : 'the selected column'} due to its data
+        type. ({formattedInvalidDataType})
+      </p>
+      <p className="!mb-2">
+        Remove any sorts on columns with the data type {formattedInvalidDataType} applying the sorts
+        again.
+      </p>
+      <p className="text-sm text-foreground-lighter prose max-w-full !mb-4">
+        Error: <code className="text-xs">{error.message}</code>
+      </p>
+
+      <Button type="default" onClick={() => onApplySorts([])}>
+        Remove sorts
+      </Button>
+    </Admonition>
+  )
+}
+
+const GeneralError = ({ error }: { error: any }) => {
+  const { filters } = useTableFilter()
+
+  return (
+    <AlertError
+      className="pointer-events-auto"
+      error={error}
+      subject="Failed to retrieve rows from table"
+    >
+      {filters.length > 0 && (
+        <p>
+          Verify that the filter values are correct, as the error may stem from an incorrectly
+          applied filter
+        </p>
+      )}
+    </AlertError>
+  )
+}
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
index a36027b46108d..868b2e2715ef6 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
@@ -109,7 +109,7 @@ export const FilterPopoverPrimitive = ({
             ))}
             {localFilters.length == 0 && (
               <div className="space-y-1 px-3">
-                <h5 className="text-foreground-light">No filters applied to this view</h5>
+                <h5 className="text-xs text-foreground-light">No filters applied to this view</h5>
                 <p className="text-xs text-foreground-lighter">
                   Add a column below to filter the view
                 </p>
@@ -118,7 +118,7 @@ export const FilterPopoverPrimitive = ({
           </div>
           <PopoverSeparator_Shadcn_ />
           <div className="px-3 flex flex-row justify-between">
-            <Button icon={<Plus />} type="text" onClick={onAddFilter}>
+            <Button icon={<Plus />} type="dashed" onClick={onAddFilter}>
               Add filter
             </Button>
             <Button
diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
index 943f60aaf2584..3a5f1d9510c4f 100644
--- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
@@ -74,7 +74,6 @@ export const SortPopoverPrimitive = ({
   const columns = useMemo(() => {
     if (!snap?.table?.columns) return []
     return snap.table.columns.filter((x) => {
-      if (x.dataType === 'json' || x.dataType === 'jsonb') return false
       const found = localSorts.find((y) => y.column == x.name)
       return !found
     })
@@ -82,7 +81,18 @@ export const SortPopoverPrimitive = ({
 
   // Format the columns for the dropdown
   const dropdownOptions = useMemo(() => {
-    return columns?.map((x) => ({ value: x.name, label: x.name })) || []
+    return (
+      columns?.map((x) => ({
+        value: x.name,
+        label: x.name,
+        postLabel: x.dataType,
+        disabled: x.dataType === 'json' || x.dataType === 'jsonb',
+        tooltip:
+          x.dataType === 'json' || x.dataType === 'jsonb'
+            ? 'Sorting on JSON-based columns is currently not supported'
+            : '',
+      })) || []
+    )
   }, [columns])
 
   // Add a new sort
@@ -185,7 +195,7 @@ export const SortPopoverPrimitive = ({
       ))}
       {localSorts.length === 0 && (
         <div className="space-y-1 px-3">
-          <h5 className="text-foreground-light">No sorts applied to this view</h5>
+          <h5 className="text-xs text-foreground-light">No sorts applied to this view</h5>
           <p className="text-xs text-foreground-lighter">Add a column below to sort the view</p>
         </div>
       )}
@@ -201,7 +211,7 @@ export const SortPopoverPrimitive = ({
           >
             <Button
               asChild
-              type="text"
+              type="dashed"
               iconRight={<ChevronDown size="14" className="text-foreground-light" />}
               className="sb-grid-dropdown__item-trigger"
               data-testid="table-editor-pick-column-to-sort-button"
diff --git a/apps/studio/components/grid/components/header/sort/SortRow.tsx b/apps/studio/components/grid/components/header/sort/SortRow.tsx
index e4ab58617d35c..e13ca434808b9 100644
--- a/apps/studio/components/grid/components/header/sort/SortRow.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortRow.tsx
@@ -5,7 +5,7 @@ import { useDrag, useDrop } from 'react-dnd'
 
 import type { DragItem, Sort } from 'components/grid/types'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
-import { Button, Toggle } from 'ui'
+import { Button, Switch } from 'ui'
 
 export interface SortRowProps {
   index: number
@@ -113,17 +113,14 @@ const SortRow = ({ index, columnName, sort, onDelete, onToggle, onDrag }: SortRo
           <span className="text-xs text-foreground-lighter">
             {index > 0 ? 'then by' : 'sort by'}
           </span>
-          {column.name}
+          <span className="text-xs">{column.name}</span>
         </span>
       </div>
-      <div className="flex items-center gap-1">
+      <div className="flex items-center gap-x-1.5">
         <label className="text-xs text-foreground-lighter">ascending:</label>
-        <Toggle
-          size="tiny"
-          layout="flex"
+        <Switch
           defaultChecked={sort.ascending}
-          // @ts-ignore
-          onChange={(e: boolean) => onToggle(columnName, e)}
+          onCheckedChange={(e: boolean) => onToggle(columnName, e)}
         />
       </div>
       <Button
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
index 75a58613e08bc..71772fb560d98 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx
@@ -237,8 +237,8 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
             <DialogDescription className="space-y-2">
               <p className="prose text-sm">
                 On successful payment, an invoice will be issued and you'll be granted credits.
-                Credits will be applied to outstanding and future invoices and are not refundable.
-                The topped up credits do not expire.
+                Credits will be applied to future invoices only and are not refundable. The topped
+                up credits do not expire.
               </p>
               <p className="prose text-sm">
                 For larger discounted credit packages, please{' '}
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
index 95f3ebaadda23..64b73452f02ee 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDetailsForm.tsx
@@ -85,7 +85,7 @@ export const OrganizationDetailsForm = () => {
         onSubmit={orgDetailsForm.handleSubmit(onUpdateOrganizationDetails)}
       >
         <Card>
-          <CardContent className="pt-6">
+          <CardContent>
             <FormField_Shadcn_
               control={orgDetailsForm.control}
               name="name"
@@ -94,7 +94,7 @@ export const OrganizationDetailsForm = () => {
                   <FormControl_Shadcn_>
                     <Input
                       {...field}
-                      className="w-96 max-w-full"
+                      className="w-full max-w-full md:w-96"
                       disabled={!canUpdateOrganization || isUpdatingDetails}
                     />
                   </FormControl_Shadcn_>
@@ -105,13 +105,14 @@ export const OrganizationDetailsForm = () => {
           <CardContent>
             <FormItemLayout label="Organization slug" layout="flex-row-reverse">
               <PrePostTab
+                className="w-full [&>div:first-child]:flex-grow [&>div:last-child]:px-1.5"
                 postTab={
                   <CopyButton type="text" iconOnly text={selectedOrganization?.slug ?? ''} />
                 }
               >
                 <Input
                   disabled
-                  className="w-64 max-w-full"
+                  className="w-full max-w-full md:w-64"
                   id="slug"
                   value={selectedOrganization?.slug ?? ''}
                 />
diff --git a/apps/studio/data/table-rows/table-rows-query.ts b/apps/studio/data/table-rows/table-rows-query.ts
index 6f66c6be909a9..50cd45d16b2c0 100644
--- a/apps/studio/data/table-rows/table-rows-query.ts
+++ b/apps/studio/data/table-rows/table-rows-query.ts
@@ -35,7 +35,9 @@ export interface GetTableRowsArgs {
 const getDefaultOrderByColumns = (table: SupaTable) => {
   const primaryKeyColumns = table.columns.filter((col) => col?.isPrimaryKey).map((col) => col.name)
   if (primaryKeyColumns.length === 0) {
-    return [table.columns[0]?.name]
+    const eligibleColumnsForSorting = table.columns.filter((x) => !x.dataType.includes('json'))
+    if (eligibleColumnsForSorting.length > 0) return [eligibleColumnsForSorting[0]?.name]
+    else return []
   } else {
     return primaryKeyColumns
   }
@@ -237,9 +239,7 @@ export async function getTableRows(
 
     return { rows }
   } catch (error) {
-    throw new Error(
-      `Error fetching table rows: ${error instanceof Error ? error.message : 'Unknown error'}`
-    )
+    throw new Error(error instanceof Error ? error.message : 'Unknown error')
   }
 }
 
diff --git a/packages/pg-meta/src/pg-format/reserved.ts b/packages/pg-meta/src/pg-format/reserved.ts
index 7fbb5bc13343c..42e45df2e5a5a 100644
--- a/packages/pg-meta/src/pg-format/reserved.ts
+++ b/packages/pg-meta/src/pg-format/reserved.ts
@@ -180,6 +180,7 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
   'SYMMETRIC',
   'SYSDATE',
   'SYSTEM',
+  'SYSTEM_USER',
   'TABLE',
   'TAG',
   'TDES',
diff --git a/packages/pg-meta/src/query/QueryFilter.ts b/packages/pg-meta/src/query/QueryFilter.ts
index d1a5ff6cda995..b36019c5d2d8d 100644
--- a/packages/pg-meta/src/query/QueryFilter.ts
+++ b/packages/pg-meta/src/query/QueryFilter.ts
@@ -1,5 +1,5 @@
-import type { Filter, FilterOperator, QueryTable, Sort, Dictionary } from './types'
 import { IQueryModifier, QueryModifier } from './QueryModifier'
+import type { Dictionary, Filter, FilterOperator, QueryTable, Sort } from './types'
 
 export interface IQueryFilter {
   filter: (column: string, operator: FilterOperator, value: string) => IQueryFilter
diff --git a/packages/pg-meta/src/query/table-row-query.ts b/packages/pg-meta/src/query/table-row-query.ts
index 1ac95d1babb38..b6f2ab193d88b 100644
--- a/packages/pg-meta/src/query/table-row-query.ts
+++ b/packages/pg-meta/src/query/table-row-query.ts
@@ -77,7 +77,9 @@ export const getDefaultOrderByColumns = (table: Pick<PGTable, 'primary_keys' | '
     return primaryKeyColumns
   }
   if (table.columns && table.columns.length > 0) {
-    return [table.columns[0].name]
+    const eligibleColumnsForSorting = table.columns.filter((x) => !x.data_type.includes('json'))
+    if (eligibleColumnsForSorting.length > 0) return [eligibleColumnsForSorting[0].name]
+    else return []
   }
   return []
 }
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index ab086656ae8ef..1aca37d67f9cb 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -45,7 +45,8 @@ const ContainerVariants = cva('relative grid gap-10', {
       horizontal: 'flex flex-col gap-2 md:grid md:grid-cols-12',
       vertical: 'flex flex-col gap-2',
       flex: 'flex flex-row gap-3',
-      'flex-row-reverse': 'flex flex-row gap-6 flex-row-reverse justify-between',
+      'flex-row-reverse':
+        'flex flex-col-reverse gap-2 md:gap-6 md:flex-row-reverse md:justify-between',
     },
     flex: {
       true: '',
@@ -232,7 +233,7 @@ const FlexContainer = cva('', {
     },
     {
       layout: 'flex-row-reverse',
-      className: 'flex flex-col justify-center items-end shrink-0',
+      className: 'flex flex-col justify-center items-start md:items-end shrink-0',
     },
   ],
 })