diff --git a/studio/components/grid/components/common/DropdownControl.tsx b/studio/components/grid/components/common/DropdownControl.tsx
index 079b49220fb..4e245f82cfe 100644
--- a/studio/components/grid/components/common/DropdownControl.tsx
+++ b/studio/components/grid/components/common/DropdownControl.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Dropdown } from '@supabase/ui'
+import { Dropdown } from 'common2'
 
 interface DropdownControlProps {
   options: {
@@ -38,7 +38,7 @@ const DropdownItems: FC<DropdownControlProps> = ({ options, onSelect }) => {
         return (
           <Dropdown.Item key={x.value} onClick={() => onSelect(x.value)}>
             <div className="flex items-center gap-2">
-              {x.preLabel && <span className="text-xs text-scale-900 grow">{x.preLabel}</span>}
+              {x.preLabel && <span className="grow text-xs text-scale-900">{x.preLabel}</span>}
               <span>{x.label}</span>
               {x.postLabel && <span className="text-xs text-scale-900">{x.postLabel}</span>}
             </div>
diff --git a/studio/components/grid/components/common/ForeignTableModal/FilterHeader.tsx b/studio/components/grid/components/common/ForeignTableModal/FilterHeader.tsx
index 7a5b87be14a..31ad23cc316 100644
--- a/studio/components/grid/components/common/ForeignTableModal/FilterHeader.tsx
+++ b/studio/components/grid/components/common/ForeignTableModal/FilterHeader.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import { Button, Input, IconChevronDown, IconSearch } from '@supabase/ui'
+import { Button, Input, IconChevronDown, IconSearch } from 'common2'
 import { DropdownControl } from '../../common'
 import { FilterOperatorOptions } from '../../header/filter'
 import { Filter, FilterOperator } from '../../../types'
diff --git a/studio/components/grid/components/common/ForeignTableModal/RowItem.tsx b/studio/components/grid/components/common/ForeignTableModal/RowItem.tsx
index 82fe938679d..394141ed62b 100644
--- a/studio/components/grid/components/common/ForeignTableModal/RowItem.tsx
+++ b/studio/components/grid/components/common/ForeignTableModal/RowItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Menu } from '@supabase/ui'
+import { Menu } from 'common2'
 import { Dictionary } from '../../../types'
 
 interface RowItemProps {
@@ -23,7 +23,7 @@ export const RowItem: React.FC<RowItemProps> = ({ item, onSelect, columnNames })
 
             return (
               <div className="foreign-table-modal__row-item__inner__key-item" key={`item-${j}`}>
-                <p className="text-sm text-scale-1000 foreign-table-modal__row-item__inner__key-item__key">
+                <p className="foreign-table-modal__row-item__inner__key-item__key text-sm text-scale-1000">
                   {key}
                 </p>
                 <p className="text-sm font-bold">
diff --git a/studio/components/grid/components/common/ForeignTableModal/index.tsx b/studio/components/grid/components/common/ForeignTableModal/index.tsx
index 4a2fe2755fa..29d85d2837e 100644
--- a/studio/components/grid/components/common/ForeignTableModal/index.tsx
+++ b/studio/components/grid/components/common/ForeignTableModal/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Modal, Menu, IconExternalLink, IconTrash } from '@supabase/ui'
+import { Button, Modal, Menu, IconExternalLink, IconTrash } from 'common2'
 
 import { RowItem } from './RowItem'
 import { FilterHeader } from './FilterHeader'
diff --git a/studio/components/grid/components/editor/JsonEditor.tsx b/studio/components/grid/components/editor/JsonEditor.tsx
index 66c3fa1e65d..6c74f2ad928 100644
--- a/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/studio/components/grid/components/editor/JsonEditor.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { EditorProps } from '@supabase/react-data-grid'
 import { useTrackedState } from '../../store'
 import { BlockKeys, MonacoEditor, NullValue } from '../common'
-import { Popover } from '@supabase/ui'
+import { Popover } from 'common2'
 
 export function JsonEditor<TRow, TSummaryRow = unknown>({
   row,
diff --git a/studio/components/grid/components/editor/NullableBooleanEditor.tsx b/studio/components/grid/components/editor/NullableBooleanEditor.tsx
index cac18ed8e4c..f5079b01744 100644
--- a/studio/components/grid/components/editor/NullableBooleanEditor.tsx
+++ b/studio/components/grid/components/editor/NullableBooleanEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { EditorProps } from '@supabase/react-data-grid'
-import { Button, IconX } from '@supabase/ui'
+import { Button, IconX } from 'common2'
 
 export function NullableBooleanEditor<TRow, TSummaryRow = unknown>({
   row,
diff --git a/studio/components/grid/components/editor/TextEditor.tsx b/studio/components/grid/components/editor/TextEditor.tsx
index 00dd5cd671c..f329d07068c 100644
--- a/studio/components/grid/components/editor/TextEditor.tsx
+++ b/studio/components/grid/components/editor/TextEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { EditorProps } from '@supabase/react-data-grid'
 import { useTrackedState } from '../../store'
 import { BlockKeys, MonacoEditor, NullValue, EmptyValue } from '../common'
-import { Popover } from '@supabase/ui'
+import { Popover } from 'common2'
 
 export function TextEditor<TRow, TSummaryRow = unknown>({
   row,
diff --git a/studio/components/grid/components/footer/pagination/Pagination.tsx b/studio/components/grid/components/footer/pagination/Pagination.tsx
index 2a73cbb0113..f820eeadff6 100644
--- a/studio/components/grid/components/footer/pagination/Pagination.tsx
+++ b/studio/components/grid/components/footer/pagination/Pagination.tsx
@@ -1,6 +1,6 @@
 import { FC, useState, useEffect } from 'react'
 import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import { Button, InputNumber, IconArrowRight, IconArrowLeft, IconLoader } from '@supabase/ui'
+import { Button, InputNumber, IconArrowRight, IconArrowLeft, IconLoader } from 'common2'
 import { DropdownControl } from '../../common'
 import { useDispatch, useTrackedState } from '../../../store'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
@@ -103,7 +103,7 @@ const Pagination: FC<PaginationProps> = () => {
   return (
     <div className="sb-grid-pagination">
       {state.totalRows < 0 ? (
-        <p className="text-scale-1100 text-sm">Loading records...</p>
+        <p className="text-sm text-scale-1100">Loading records...</p>
       ) : (
         <>
           <Button
@@ -113,7 +113,7 @@ const Pagination: FC<PaginationProps> = () => {
             onClick={onPreviousPage}
             style={{ padding: '3px 10px' }}
           />
-          <p className="text-scale-1100 text-sm">Page</p>
+          <p className="text-sm text-scale-1100">Page</p>
           <div className="sb-grid-pagination-input-container">
             <InputNumber
               // [Fran] we'll have to upgrade the UI component types to accept the null value when users delete the input content
@@ -128,7 +128,7 @@ const Pagination: FC<PaginationProps> = () => {
               min={1}
             />
           </div>
-          <p className="text-scale-1100 text-sm">{`of ${totalPages}`}</p>
+          <p className="text-sm text-scale-1100">{`of ${totalPages}`}</p>
           <Button
             icon={<IconArrowRight />}
             type="outline"
@@ -149,7 +149,7 @@ const Pagination: FC<PaginationProps> = () => {
               style={{ padding: '3px 10px' }}
             >{`${state.rowsPerPage} rows`}</Button>
           </DropdownControl>
-          <p className="text-scale-1100 text-sm">{`${state.totalRows.toLocaleString()} ${
+          <p className="text-sm text-scale-1100">{`${state.totalRows.toLocaleString()} ${
             state.totalRows === 0 || state.totalRows > 1 ? `records` : 'record'
           }`}</p>
           {state.isLoading && <IconLoader size={14} className="animate-spin" />}
diff --git a/studio/components/grid/components/grid/AddColumn.tsx b/studio/components/grid/components/grid/AddColumn.tsx
index 5fc6b6dd474..bd825a95c38 100644
--- a/studio/components/grid/components/grid/AddColumn.tsx
+++ b/studio/components/grid/components/grid/AddColumn.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CalculatedColumn } from '@supabase/react-data-grid'
-import { Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from 'common2'
 import { ADD_COLUMN_KEY } from '../../constants'
 import { useTrackedState } from '../../store'
 import { DefaultFormatter } from '../formatter'
diff --git a/studio/components/grid/components/grid/ColumnHeader.tsx b/studio/components/grid/components/grid/ColumnHeader.tsx
index 59759b12cf2..196e1903434 100644
--- a/studio/components/grid/components/grid/ColumnHeader.tsx
+++ b/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IconKey, IconLink } from '@supabase/ui'
+import { IconKey, IconLink } from 'common2'
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
 import { XYCoord } from 'dnd-core'
 import { useDispatch } from '../../store'
diff --git a/studio/components/grid/components/grid/Grid.tsx b/studio/components/grid/components/grid/Grid.tsx
index 5f27e85ceaa..09bc85dacc7 100644
--- a/studio/components/grid/components/grid/Grid.tsx
+++ b/studio/components/grid/components/grid/Grid.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { memo } from 'react-tracked'
 import DataGrid, { DataGridHandle, RowsChangeData } from '@supabase/react-data-grid'
-import { IconLoader } from '@supabase/ui'
+import { IconLoader } from 'common2'
 import { GridProps, SupaRow } from '../../types'
 import { useDispatch, useTrackedState } from '../../store'
 import RowRenderer from './RowRenderer'
@@ -71,10 +71,10 @@ export const Grid = memo(
             style={{ width: width || '100%', height: height || '50vh' }}
           >
             <div className="sb-grid-grid--loading__inner flex items-center gap-2">
-              <div className="text-scale-900 animate-spin">
+              <div className="animate-spin text-scale-900">
                 <IconLoader />
               </div>
-              <div className="text-scale-1100 text-sm">Loading...</div>
+              <div className="text-sm text-scale-1100">Loading...</div>
             </div>
           </div>
         )
diff --git a/studio/components/grid/components/grid/SelectColumn.tsx b/studio/components/grid/components/grid/SelectColumn.tsx
index 9c16c9eeef8..5af081d8fd1 100644
--- a/studio/components/grid/components/grid/SelectColumn.tsx
+++ b/studio/components/grid/components/grid/SelectColumn.tsx
@@ -5,7 +5,7 @@ import {
   GroupFormatterProps,
   useRowSelection,
 } from '@supabase/react-data-grid'
-import { Button, IconMaximize2 } from '@supabase/ui'
+import { Button, IconMaximize2 } from 'common2'
 import { SupaRow } from '../../types'
 import { SELECT_COLUMN_KEY } from '../../constants'
 import { useFocusRef } from '../../utils'
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 04e07d60420..97ac85f0c31 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -1,5 +1,5 @@
 import { FC, useState, ReactNode } from 'react'
-import { Button, IconDownload, IconPlus, IconX, IconTrash } from '@supabase/ui'
+import { Button, IconDownload, IconPlus, IconX, IconTrash } from 'common2'
 import { saveAs } from 'file-saver'
 
 import { useStore } from 'hooks'
@@ -30,7 +30,7 @@ const Header: FC<HeaderProps> = ({ sorts, filters, onAddColumn, onAddRow, header
   const { selectedRows } = state
 
   return (
-    <div className="bg-scale-100 dark:bg-scale-300 flex h-10 items-center justify-between px-5 py-1.5">
+    <div className="flex h-10 items-center justify-between bg-scale-100 px-5 py-1.5 dark:bg-scale-300">
       {selectedRows.size > 0 ? (
         <RowHeader sorts={sorts} filters={filters} />
       ) : (
@@ -82,7 +82,7 @@ const DefaultHeader: FC<DefaultHeaderProps> = ({ sorts, filters, onAddColumn, on
         <FilterDropdown />
         <SortPopover />
       </div>
-      <div className="bg-scale-600 h-[50%] w-px"></div>
+      <div className="h-[50%] w-px bg-scale-600"></div>
       <div className="flex items-center gap-2">
         {renderNewColumn(onAddColumn)}
         {renderAddRow(onAddRow)}
@@ -188,7 +188,7 @@ const RowHeader: FC<RowHeaderProps> = ({ sorts, filters }) => {
           icon={<IconX size="tiny" strokeWidth={2} />}
           onClick={deselectRows}
         />
-        <span className="text-scale-1200 text-xs">
+        <span className="text-xs text-scale-1200">
           {allRowsSelected
             ? `${totalRows} rows selected`
             : selectedRows.size > 1
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 8a43eaeff5b..4e79708744a 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Button, IconRefreshCw } from '@supabase/ui'
+import { Button, IconRefreshCw } from 'common2'
 import { Filter, Sort } from 'components/grid/types'
 import { useDispatch, useTrackedState } from 'components/grid/store'
 import { fetchCount, fetchPage } from 'components/grid/utils'
diff --git a/studio/components/grid/components/header/StatusLabel.tsx b/studio/components/grid/components/header/StatusLabel.tsx
index 7febd61713e..2d39c8623f7 100644
--- a/studio/components/grid/components/header/StatusLabel.tsx
+++ b/studio/components/grid/components/header/StatusLabel.tsx
@@ -1,6 +1,6 @@
 import { useState, FC, useEffect } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { IconLoader, IconCheck } from '@supabase/ui'
+import { IconLoader, IconCheck } from 'common2'
 import { SupabaseGridQueue } from '../../constants'
 
 interface Props {}
@@ -35,34 +35,34 @@ const StatusLabel: FC<Props> = ({}) => {
       {status === 'saving' ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconLoader className="animate-spin mx-1 text-scale-1100" size={14} strokeWidth={2} />
+            <IconLoader className="mx-1 animate-spin text-scale-1100" size={14} strokeWidth={2} />
           </Tooltip.Trigger>
           <Tooltip.Content side="left">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">Saving changes...</span>
+              <span className="text-xs text-scale-1200">Saving changes...</span>
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
       ) : status === 'saved' ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-900 mx-1" size={14} strokeWidth={3} />
+            <IconCheck className="mx-1 text-brand-900" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="left">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border ',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200 ',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">All changes saved</span>
+              <span className="text-xs text-scale-1200">All changes saved</span>
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
diff --git a/studio/components/grid/components/header/filter/FilterPopover.tsx b/studio/components/grid/components/header/filter/FilterPopover.tsx
index 31739d6dd16..5c0ac477734 100644
--- a/studio/components/grid/components/header/filter/FilterPopover.tsx
+++ b/studio/components/grid/components/header/filter/FilterPopover.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Button, IconPlus, IconFilter, Popover } from '@supabase/ui'
+import { Button, IconPlus, IconFilter, Popover } from 'common2'
 
 import { useUrlState } from 'hooks'
 import FilterRow from './FilterRow'
@@ -60,8 +60,8 @@ const Filter: FC = () => {
         ))}
         {formattedFilters.length == 0 && (
           <div className="space-y-1 px-3">
-            <h5 className="text-scale-1100 text-sm">No filters applied to this view</h5>
-            <p className="text-scale-900 text-xs">Add a column below to filter the view</p>
+            <h5 className="text-sm text-scale-1100">No filters applied to this view</h5>
+            <p className="text-xs text-scale-900">Add a column below to filter the view</p>
           </div>
         )}
       </div>
diff --git a/studio/components/grid/components/header/filter/FilterRow.tsx b/studio/components/grid/components/header/filter/FilterRow.tsx
index fd9425431a7..b3809d47d27 100644
--- a/studio/components/grid/components/header/filter/FilterRow.tsx
+++ b/studio/components/grid/components/header/filter/FilterRow.tsx
@@ -1,6 +1,6 @@
 import { debounce } from 'lodash'
 import { FC, memo, useState, useEffect, ChangeEvent, useCallback } from 'react'
-import { Button, Input, IconChevronDown, IconX } from '@supabase/ui'
+import { Button, Input, IconChevronDown, IconX } from 'common2'
 
 import { useUrlState } from 'hooks'
 import { Filter } from 'components/grid/types'
diff --git a/studio/components/grid/components/header/sort/SortPopover.tsx b/studio/components/grid/components/header/sort/SortPopover.tsx
index 2c1c76e9194..f6582fa5ad9 100644
--- a/studio/components/grid/components/header/sort/SortPopover.tsx
+++ b/studio/components/grid/components/header/sort/SortPopover.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { Button, IconList, IconChevronDown, Popover } from '@supabase/ui'
+import { Button, IconList, IconChevronDown, Popover } from 'common2'
 
 import { useUrlState } from 'hooks'
 import SortRow from './SortRow'
@@ -65,8 +65,8 @@ const Sort: FC = () => {
       ))}
       {formattedSorts.length === 0 && (
         <div className="space-y-1 px-3">
-          <h5 className="text-scale-1100 text-sm">No sorts applied to this view</h5>
-          <p className="text-scale-900 text-xs">Add a column below to sort the view</p>
+          <h5 className="text-sm text-scale-1100">No sorts applied to this view</h5>
+          <p className="text-xs text-scale-900">Add a column below to sort the view</p>
         </div>
       )}
 
@@ -89,7 +89,7 @@ const Sort: FC = () => {
             </Button>
           </DropdownControl>
         ) : (
-          <p className="text-scale-1100 text-sm">All columns have been added</p>
+          <p className="text-sm text-scale-1100">All columns have been added</p>
         )}
       </div>
     </div>
diff --git a/studio/components/grid/components/header/sort/SortRow.tsx b/studio/components/grid/components/header/sort/SortRow.tsx
index ee1adcd3985..c869e670609 100644
--- a/studio/components/grid/components/header/sort/SortRow.tsx
+++ b/studio/components/grid/components/header/sort/SortRow.tsx
@@ -1,6 +1,6 @@
 import update from 'immutability-helper'
 import { FC, useRef, memo } from 'react'
-import { Button, IconMenu, Toggle, IconX } from '@supabase/ui'
+import { Button, IconMenu, Toggle, IconX } from 'common2'
 import { XYCoord } from 'dnd-core'
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
 
@@ -151,13 +151,13 @@ const SortRow: FC<SortRowProps> = ({ index, columnName, sort }) => {
         onClick={onRemoveSort}
       />
       <div className="grow">
-        <span className="text-scale-1200 flex grow items-center gap-1 truncate text-sm">
-          <span className="text-scale-900 text-xs">{index > 0 ? 'then by' : 'sort by'}</span>
+        <span className="flex grow items-center gap-1 truncate text-sm text-scale-1200">
+          <span className="text-xs text-scale-900">{index > 0 ? 'then by' : 'sort by'}</span>
           {column.name}
         </span>
       </div>
       <div className="flex items-center gap-1">
-        <label className="text-scale-900 text-xs">ascending:</label>
+        <label className="text-xs text-scale-900">ascending:</label>
         <Toggle
           size="tiny"
           layout="flex"
diff --git a/studio/components/grid/components/menu/ColumnMenu.tsx b/studio/components/grid/components/menu/ColumnMenu.tsx
index 93a4f4d747e..c76b005396d 100644
--- a/studio/components/grid/components/menu/ColumnMenu.tsx
+++ b/studio/components/grid/components/menu/ColumnMenu.tsx
@@ -8,7 +8,7 @@ import {
   IconTrash,
   IconLock,
   IconUnlock,
-} from '@supabase/ui'
+} from 'common2'
 import * as React from 'react'
 import { useDispatch, useTrackedState } from '../../store'
 
diff --git a/studio/components/grid/components/menu/RowContextMenu.tsx b/studio/components/grid/components/menu/RowContextMenu.tsx
index 2ae413641fc..4667e25f549 100644
--- a/studio/components/grid/components/menu/RowContextMenu.tsx
+++ b/studio/components/grid/components/menu/RowContextMenu.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Menu, Item, ItemParams, PredicateParams } from 'react-contexify'
-import { IconTrash, IconClipboard, IconEdit } from '@supabase/ui'
+import { IconTrash, IconClipboard, IconEdit } from 'common2'
 import { useDispatch, useTrackedState } from '../../store'
 import { formatClipboardValue, copyToClipboard } from '../../utils'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
diff --git a/studio/components/interfaces/Account/AccessTokenList.tsx b/studio/components/interfaces/Account/AccessTokenList.tsx
index 79e3424b909..fc3676086bb 100644
--- a/studio/components/interfaces/Account/AccessTokenList.tsx
+++ b/studio/components/interfaces/Account/AccessTokenList.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Modal, IconTrash } from '@supabase/ui'
+import { Button, Modal, IconTrash } from 'common2'
 import { useStore } from 'hooks'
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/studio/components/interfaces/Account/NewAccessTokenButton.tsx b/studio/components/interfaces/Account/NewAccessTokenButton.tsx
index 77a469004a4..f7bedf14a79 100644
--- a/studio/components/interfaces/Account/NewAccessTokenButton.tsx
+++ b/studio/components/interfaces/Account/NewAccessTokenButton.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Input, Button, Modal, Form, Alert } from '@supabase/ui'
+import { Input, Button, Modal, Form, Alert } from 'common2'
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
@@ -56,7 +56,7 @@ const NewAccessTokenButton = observer(() => {
         visible={isOpen}
         onCancel={() => setIsOpen(!isOpen)}
         header={
-          <div className="flex gap-2 items-baseline">
+          <div className="flex items-baseline gap-2">
             <h5 className="text-sm text-scale-1200">Generate New Token</h5>
           </div>
         }
diff --git a/studio/components/interfaces/App/AppBannerWrapper.tsx b/studio/components/interfaces/App/AppBannerWrapper.tsx
index 51117e187bd..a53077ae623 100644
--- a/studio/components/interfaces/App/AppBannerWrapper.tsx
+++ b/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import { useFlag } from 'hooks'
-import { IconExternalLink } from '@supabase/ui'
+import { IconExternalLink } from 'common2'
 
 const AppBannerWrapper: FC = ({ children }) => {
   const ongoingIncident = useFlag('ongoingIncident')
@@ -11,7 +11,7 @@ const AppBannerWrapper: FC = ({ children }) => {
       {ongoingIncident && (
         <Link href="https://status.supabase.com">
           <a target="_blank">
-            <div className="hover:bg-green-1000 flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 transition text-scale-400 dark:text-scale-1200">
+            <div className="flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 text-scale-400 transition hover:bg-green-1000 dark:text-scale-1200">
               <p className="text-sm font-medium">
                 We are currently investigating a technical issue, follow status.supabase.com for
                 updates
diff --git a/studio/components/interfaces/App/PortalToast.tsx b/studio/components/interfaces/App/PortalToast.tsx
index b9b6f29c89b..925fdebb026 100644
--- a/studio/components/interfaces/App/PortalToast.tsx
+++ b/studio/components/interfaces/App/PortalToast.tsx
@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic'
 import { Toaster, ToastBar, toast } from 'react-hot-toast'
-import { Button, IconX } from '@supabase/ui'
+import { Button, IconX } from 'common2'
 
 const PortalRootWithNoSSR = dynamic(
   // @ts-ignore
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index b4f394979cc..a19514a8a69 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from '@supabase/ui'
+import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'common2'
 import { Enum } from './AuthProvidersForm.types'
 
 interface Props {
@@ -48,7 +48,7 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
                 onClick={() => setHidden(!hidden)}
               />
             ) : (
-              <span className="text-scale-900 mr-3">
+              <span className="mr-3 text-scale-900">
                 {properties.units ? (
                   <ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
                     {properties.units}
@@ -83,7 +83,7 @@ const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }
             ) : null
           }
           actions={
-            <span className="text-scale-900 mr-3">
+            <span className="mr-3 text-scale-900">
               {properties.units ? (
                 <ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
                   {properties.units}
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 94c2245e569..b18c9fe2a8f 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from '@supabase/ui'
+import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from 'common2'
 
 import { useStore, checkPermissions } from 'hooks'
 import { Provider } from './AuthProvidersForm.types'
@@ -172,11 +172,11 @@ const ProviderForm: FC<Props> = ({ provider }) => {
                           <Tooltip.Arrow className="radix-tooltip-arrow" />
                           <div
                             className={[
-                              'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                              'border-scale-200 border',
+                              'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                              'border border-scale-200',
                             ].join(' ')}
                           >
-                            <span className="text-scale-1200 text-xs">
+                            <span className="text-xs text-scale-1200">
                               You need additional permissions to update provider settings
                             </span>
                           </div>
diff --git a/studio/components/interfaces/Auth/AutoSchemaForm.tsx b/studio/components/interfaces/Auth/AutoSchemaForm.tsx
index 42d931c61a9..0acfc61408a 100644
--- a/studio/components/interfaces/Auth/AutoSchemaForm.tsx
+++ b/studio/components/interfaces/Auth/AutoSchemaForm.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { boolean, number, object, string } from 'yup'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Form, Input, IconEye, IconEyeOff, InputNumber, Toggle } from '@supabase/ui'
+import { Button, Form, Input, IconEye, IconEyeOff, InputNumber, Toggle } from 'common2'
 
 import { useStore, checkPermissions } from 'hooks'
 import {
@@ -138,7 +138,7 @@ const AutoSchemaForm = observer(() => {
                     size="small"
                     label="JWT expiry limit"
                     descriptionText="How long tokens are valid for. Defaults to 3600 (1 hour), maximum 604,800 seconds (one week)."
-                    actions={<span className="text-scale-900 mr-3">seconds</span>}
+                    actions={<span className="mr-3 text-scale-900">seconds</span>}
                     disabled={!canUpdateConfig}
                   />
                 </FormSectionContent>
@@ -184,7 +184,7 @@ const AutoSchemaForm = observer(() => {
                       min={0}
                       label="Reuse Interval"
                       descriptionText="Time interval where the same refresh token can be used to request for an access token."
-                      actions={<span className="text-scale-900 mr-3">seconds</span>}
+                      actions={<span className="mr-3 text-scale-900">seconds</span>}
                       disabled={!canUpdateConfig}
                     />
                   )}
diff --git a/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index 301a4bef3ae..6042c22c58f 100644
--- a/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { observer } from 'mobx-react-lite'
 
 import { TEMPLATES_SCHEMAS } from 'stores/authConfig/schema'
diff --git a/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index 0c507a655b4..2c675c6ef01 100644
--- a/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -1,7 +1,7 @@
 import ReactMarkdown from 'react-markdown'
 import { FC, useState, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input, Form } from '@supabase/ui'
+import { Input, Form } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -86,7 +86,7 @@ const TemplateEditor: FC<Props> = ({ template }) => {
                   if (property.type === 'string') {
                     return (
                       <div className="space-y-3">
-                        <label className="text-scale-1200 col-span-12 text-sm lg:col-span-5">
+                        <label className="col-span-12 text-sm text-scale-1200 lg:col-span-5">
                           {property.title}
                         </label>
                         <Input
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
index becda1979cf..adef1178ef5 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Radio } from '@supabase/ui'
+import { Radio } from 'common2'
 
 interface Props {
   operation: string
@@ -10,10 +10,10 @@ const PolicyAllowedOperation: FC<Props> = ({ operation = '', onSelectOperation }
   return (
     <div className="flex justify-between space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
-        <label className="text-scale-1100 text-base" htmlFor="allowed-operation">
+        <label className="text-base text-scale-1100" htmlFor="allowed-operation">
           Allowed operation
         </label>
-        <p className="text-scale-900 text-sm">Select an operation for this policy</p>
+        <p className="text-sm text-scale-900">Select an operation for this policy</p>
       </div>
       <div className="w-2/3">
         <div className="flex items-center space-x-8">
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
index ac4ce0bc307..8c47252b844 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react'
-import { IconHelpCircle } from '@supabase/ui'
+import { IconHelpCircle } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { usePrevious } from 'hooks'
@@ -36,7 +36,7 @@ const PolicyDefinition: FC<Props> = ({
         <div className="flex space-x-12">
           <div className="flex w-1/3 flex-col space-y-2">
             <div className="flex items-center space-x-2">
-              <label className="text-scale-1100 text-base" htmlFor="policy-name">
+              <label className="text-base text-scale-1100" htmlFor="policy-name">
                 USING expression
               </label>
               <Tooltip.Root delayDuration={0}>
@@ -47,27 +47,27 @@ const PolicyDefinition: FC<Props> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                      'border-scale-200 border w-[300px] space-y-2',
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'w-[300px] space-y-2 border border-scale-200',
                     ].join(' ')}
                   >
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       This expression will be added to queries that refer to the table if row-level
                       security is enabled.
                     </p>
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       Rows for which the expression returns true will be visible. Any rows for which
                       the expression returns false or null will not be visible to the user (in a
                       SELECT), and will not be available for modification (in an UPDATE or DELETE).
                     </p>
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       Such rows are silently suppressed - no error is reported.
                     </p>
                   </div>
                 </Tooltip.Content>
               </Tooltip.Root>
             </div>
-            <p className="text-scale-900 text-sm">
+            <p className="text-sm text-scale-900">
               Provide a SQL conditional expression that returns a boolean.
             </p>
           </div>
@@ -80,7 +80,7 @@ const PolicyDefinition: FC<Props> = ({
         <div className="flex space-x-12">
           <div className="flex w-1/3 flex-col space-y-2">
             <div className="flex items-center space-x-2">
-              <label className="text-scale-1100 text-base" htmlFor="policy-name">
+              <label className="text-base text-scale-1100" htmlFor="policy-name">
                 WITH CHECK expression
               </label>
               <Tooltip.Root delayDuration={0}>
@@ -91,20 +91,20 @@ const PolicyDefinition: FC<Props> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                      'border-scale-200 border w-[300px] space-y-2',
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'w-[300px] space-y-2 border border-scale-200',
                     ].join(' ')}
                   >
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       This expression will be used in INSERT and UPDATE queries against the table if
                       row-level security is enabled.
                     </p>
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       Only rows for which the expression evaluates to true will be allowed. An error
                       will be thrown if the expression evaluates to false or null for any of the
                       records inserted or any of the records that result from the update.
                     </p>
-                    <p className="text-scale-1200 text-xs">
+                    <p className="text-xs text-scale-1200">
                       Note that this expression is evaluated against the proposed new contents of
                       the row, not the original contents.
                     </p>
@@ -112,7 +112,7 @@ const PolicyDefinition: FC<Props> = ({
                 </Tooltip.Content>
               </Tooltip.Root>
             </div>
-            <p className="text-scale-900 text-sm">
+            <p className="text-sm text-scale-900">
               Provide a SQL conditional expression that returns a boolean.
             </p>
           </div>
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
index 40ddc535b7f..df251a2ff1b 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 interface Props {
   showTemplates: boolean
@@ -8,7 +8,7 @@ interface Props {
 }
 
 const PolicyEditorFooter: FC<Props> = ({ showTemplates, onViewTemplates, onReviewPolicy }) => (
-  <div className="dark:border-dark flex w-full items-center justify-end gap-2 border-t px-6 py-4">
+  <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
     {showTemplates && (
       <Button type="default" onClick={onViewTemplates}>
         View templates
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
index 5af9fe0832d..6fd6186040d 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 
 interface Props {
   name: string
@@ -11,10 +11,10 @@ const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) =
   return (
     <div className="flex space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
-        <label className="text-scale-1100 text-base" htmlFor="policy-name">
+        <label className="text-base text-scale-1100" htmlFor="policy-name">
           Policy name
         </label>
-        <p className="text-scale-900 text-sm">A descriptive name for your policy</p>
+        <p className="text-sm text-scale-900">A descriptive name for your policy</p>
       </div>
       <div className="relative w-2/3">
         <Input
@@ -22,7 +22,7 @@ const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) =
           value={name}
           onChange={(e) => onUpdatePolicyName(e.target.value)}
           actions={
-            <span className="text-scale-900 mr-3 text-sm">
+            <span className="mr-3 text-sm text-scale-900">
               {name.length}/{limit}
             </span>
           }
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
index a5d00bbaeec..a239b417dad 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 
 import PolicyName from './PolicyName'
 import PolicyDefinition from './PolicyDefinition'
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
index 107af5cf9d0..088618f0967 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconChevronLeft } from '@supabase/ui'
+import { IconChevronLeft } from 'common2'
 import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies'
 
 interface Props {
@@ -31,7 +31,7 @@ const PolicyEditorModalTitle: FC<Props> = ({
         <div className="flex items-center space-x-3">
           <span
             onClick={onSelectBackFromTemplates}
-            className="text-scale-900 hover:text-scale-1200 cursor-pointer transition-colors"
+            className="cursor-pointer text-scale-900 transition-colors hover:text-scale-1200"
           >
             <IconChevronLeft strokeWidth={2} size={14} />
           </span>
@@ -42,7 +42,7 @@ const PolicyEditorModalTitle: FC<Props> = ({
   }
   return (
     <div className="flex items-center space-x-3">
-      <h4 className="m-0 text-lg truncate">{getTitle()}</h4>
+      <h4 className="m-0 truncate text-lg">{getTitle()}</h4>
     </div>
   )
 }
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
index 88a80b3ee98..ad26db25b95 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 import { FC, useState, useEffect } from 'react'
 import { isEmpty } from 'lodash'
 import { PostgresRole } from '@supabase/postgres-meta'
diff --git a/studio/components/interfaces/Auth/Policies/PolicyReview.tsx b/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
index c4b26e5cfb2..19bc185d3ba 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal } from '@supabase/ui'
+import { Button, Modal } from 'common2'
 import { isEmpty } from 'lodash'
 import { FC, useState } from 'react'
 import SqlEditor from 'components/ui/SqlEditor'
@@ -29,7 +29,7 @@ const PolicyReview: FC<Props> = ({
         <div className="space-y-6 py-8">
           <div className="flex items-center justify-between space-y-8">
             <div className="flex flex-col">
-              <p className="text-scale-1100 text-sm">
+              <p className="text-sm text-scale-1100">
                 This is the SQL statement that will be used to create your policy.
               </p>
             </div>
@@ -37,7 +37,7 @@ const PolicyReview: FC<Props> = ({
           <div className="space-y-4 overflow-y-auto" style={{ maxHeight: '25rem' }}>
             {isEmpty(policy) ? (
               <div className="my-10 flex items-center justify-center space-x-2 opacity-50">
-                <p className="text-scale-1100 text-base">
+                <p className="text-base text-scale-1100">
                   There are no changes made to this policy
                 </p>
               </div>
@@ -52,7 +52,7 @@ const PolicyReview: FC<Props> = ({
           </div>
         </div>
       </Modal.Content>
-      <div className="dark:border-dark flex w-full items-center justify-end gap-2 border-t px-6 py-4">
+      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
         <Button type="default" onClick={onSelectBack}>
           Back to edit
         </Button>
diff --git a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index edac0beb8bd..979165ece0e 100644
--- a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconEdit, IconGrid, Modal } from '@supabase/ui'
+import { IconEdit, IconGrid, Modal } from 'common2'
 import CardButton from 'components/ui/CardButton'
 
 interface Props {
@@ -17,7 +17,7 @@ const PolicySelection: FC<Props> = ({
     <Modal.Content>
       <div className="space-y-6 py-8">
         <div>
-          <p className="text-scale-1100 text-sm">{description}</p>
+          <p className="text-sm text-scale-1100">{description}</p>
         </div>
         <div className="grid grid-cols-1 gap-2 lg:grid-cols-1">
           <CardButton
@@ -27,9 +27,9 @@ const PolicySelection: FC<Props> = ({
               <div className="flex">
                 <div
                   className="
-                  bg-scale-1200 text-scale-100 flex h-8
-                  w-8
-                  items-center justify-center rounded  
+                  flex h-8 w-8 items-center
+                  justify-center
+                  rounded bg-scale-1200 text-scale-100  
                 "
                 >
                   <IconGrid size={14} strokeWidth={2} />
@@ -45,9 +45,9 @@ const PolicySelection: FC<Props> = ({
               <div className="flex">
                 <div
                   className="
-                  bg-scale-1200 text-scale-100 flex h-8
-                  w-8
-                  items-center justify-center rounded  
+                  flex h-8 w-8 items-center
+                  justify-center
+                  rounded bg-scale-1200 text-scale-100  
                 "
                 >
                   <IconEdit size={14} strokeWidth={2} />
@@ -57,11 +57,11 @@ const PolicySelection: FC<Props> = ({
             onClick={onViewEditor}
           />
         </div>
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           Not sure what policies are? Check out our resources{' '}
           <a
             target="_blank"
-            className="text-brand-900 hover:text-brand-1200 transition-colors"
+            className="text-brand-900 transition-colors hover:text-brand-1200"
             href="https://supabase.com/docs/guides/auth#policies"
           >
             here
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
index ed53b426253..09b4364ad8f 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from '@supabase/ui'
+import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from 'common2'
 import { PostgresPolicy } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -23,19 +23,19 @@ const PolicyRow: FC<Props> = ({
   return (
     <Panel.Content
       className={[
-        'border-panel-border-light dark:border-panel-border-dark flex',
+        'flex border-panel-border-light dark:border-panel-border-dark',
         'w-full space-x-4 border-b py-4 lg:items-center',
       ].join(' ')}
     >
-      <div className="flex grow flex-col truncate space-y-1">
+      <div className="flex grow flex-col space-y-1 truncate">
         <div className="flex items-center space-x-4">
-          <p className="text-scale-1000 font-mono text-xs">{policy.command}</p>
-          <p className="text-scale-1200 max-w-xs truncate text-sm">{policy.name}</p>
+          <p className="font-mono text-xs text-scale-1000">{policy.command}</p>
+          <p className="max-w-xs truncate text-sm text-scale-1200">{policy.name}</p>
         </div>
         <div className="flex items-center space-x-2">
-          <p className="text-scale-1000 text-sm">Applied to:</p>
+          <p className="text-sm text-scale-1000">Applied to:</p>
           {policy.roles.map((role) => (
-            <code className="text-scale-1000 text-xs">{role}</code>
+            <code className="text-xs text-scale-1000">{role}</code>
           ))}
         </div>
       </div>
@@ -84,11 +84,11 @@ const PolicyRow: FC<Props> = ({
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to edit RLS policies
                   </span>
                 </div>
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index af8ec8ad142..7f3b64deefd 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { FC } from 'react'
 import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Badge, Button } from '@supabase/ui'
+import { Badge, Button } from 'common2'
 import { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { checkPermissions } from 'hooks'
@@ -53,11 +53,11 @@ const PolicyTableRowHeader: FC<Props> = ({
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to create RLS policies
                   </span>
                 </div>
@@ -79,11 +79,11 @@ const PolicyTableRowHeader: FC<Props> = ({
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to toggle RLS
                   </span>
                 </div>
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
index d21905bac06..dd96df449c0 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Menu } from '@supabase/ui'
+import { Menu } from 'common2'
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
 interface Props {
@@ -15,7 +15,7 @@ const TemplatesList: FC<Props> = ({
   selectedTemplate,
   setSelectedTemplate = () => {},
 }) => (
-  <div className="dark:border-dark flex flex-col justify-between border-r" style={{ width: '30%' }}>
+  <div className="flex flex-col justify-between border-r dark:border-dark" style={{ width: '30%' }}>
     <div
       className="hide-scrollbar  divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"
       style={{ maxHeight: '24rem' }}
@@ -26,7 +26,7 @@ const TemplatesList: FC<Props> = ({
           return (
             <div
               className={
-                'hover:bg-scale-400 border-scale-400 border-b ' +
+                'border-b border-scale-400 hover:bg-scale-400 ' +
                 (active ? 'bg-scale-300 dark:bg-scale-500' : '')
               }
             >
@@ -44,7 +44,7 @@ const TemplatesList: FC<Props> = ({
     </div>
     {templatesNote && (
       <div className="px-4 py-2">
-        <p className="text-scale-900 text-xs">{templatesNote}</p>
+        <p className="text-xs text-scale-900">{templatesNote}</p>
       </div>
     )}
   </div>
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
index 42c6158de23..aa3601606c4 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { FC, useState } from 'react'
 import { isEmpty } from 'lodash'
 
@@ -20,7 +20,7 @@ const PolicyTemplates: FC<Props> = ({
   const [selectedTemplate, setSelectedTemplate] = useState(templates[0])
   return (
     <div>
-      <div className="dark:border-dark flex justify-between border-t">
+      <div className="flex justify-between border-t dark:border-dark">
         <TemplatesList
           templatesNote={templatesNote}
           templates={templates}
@@ -29,8 +29,8 @@ const PolicyTemplates: FC<Props> = ({
         />
         <TemplatePreview selectedTemplate={selectedTemplate} />
       </div>
-      <div className="dark:border-dark flex w-full items-center justify-end gap-3 border-t px-6 py-4">
-        <span className="text-scale-900 text-sm">
+      <div className="flex w-full items-center justify-end gap-3 border-t px-6 py-4 dark:border-dark">
+        <span className="text-sm text-scale-900">
           This will override any existing code you've written
         </span>
         <Button
diff --git a/studio/components/interfaces/Auth/RedirectDomains/DomainList.tsx b/studio/components/interfaces/Auth/RedirectDomains/DomainList.tsx
index 08929879c79..c95a655feab 100644
--- a/studio/components/interfaces/Auth/RedirectDomains/DomainList.tsx
+++ b/studio/components/interfaces/Auth/RedirectDomains/DomainList.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconGlobe, IconTrash } from '@supabase/ui'
+import { Button, IconGlobe, IconTrash } from 'common2'
 
 import { useStore } from 'hooks'
 import ValueContainer from './ValueContainer'
@@ -55,7 +55,7 @@ const DomainList: FC<Props> = ({ canUpdate, onSelectDomainToDelete }) => {
       ) : (
         <div
           className={[
-            'bg-scale-200 border-scale-400 text-scale-1200 flex items-center',
+            'flex items-center border-scale-400 bg-scale-200 text-scale-1200',
             'justify-center gap-2 rounded border px-6 py-8 text-sm',
           ].join(' ')}
         >
diff --git a/studio/components/interfaces/Auth/RedirectDomains/RedirectDomains.tsx b/studio/components/interfaces/Auth/RedirectDomains/RedirectDomains.tsx
index 5eede56fce7..c5e50500e7e 100644
--- a/studio/components/interfaces/Auth/RedirectDomains/RedirectDomains.tsx
+++ b/studio/components/interfaces/Auth/RedirectDomains/RedirectDomains.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { object, string } from 'yup'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Form, Input, Modal } from '@supabase/ui'
+import { Button, Form, Input, Modal } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -101,11 +101,11 @@ const RedirectDomains = () => {
               <Tooltip.Arrow className="radix-tooltip-arrow" />
               <div
                 className={[
-                  'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                  'border-scale-200 border',
+                  'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                  'border border-scale-200',
                 ].join(' ')}
               >
-                <span className="text-scale-1200 text-xs">
+                <span className="text-xs text-scale-1200">
                   You need additional permissions to update redirect URLs
                 </span>
               </div>
@@ -132,7 +132,7 @@ const RedirectDomains = () => {
             return (
               <div className="mb-4 space-y-4 pt-4">
                 <div className="px-5">
-                  <p className="text-scale-1100 text-sm">
+                  <p className="text-sm text-scale-1100">
                     This will add a domain to a list of allowed domains that can interact with your
                     Authenticaton services for this project.
                   </p>
@@ -173,11 +173,11 @@ const RedirectDomains = () => {
       >
         <div className="mb-4 space-y-4 pt-4">
           <div className="px-5">
-            <p className="text-scale-1100 mb-2 text-sm">
+            <p className="mb-2 text-sm text-scale-1100">
               Are you sure you want to remove{' '}
               <span className="text-scale-1200">{selectedDomainToDelete}</span>?
             </p>
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               This domain will no longer work with your authentication configuration.
             </p>
           </div>
diff --git a/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 888e2c4d161..0322305bb9a 100644
--- a/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import { useEffect, useState } from 'react'
 import { number, object, string } from 'yup'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Alert, Button, Form, Input, InputNumber, Toggle, IconEye, IconEyeOff } from '@supabase/ui'
+import { Alert, Button, Form, Input, InputNumber, Toggle, IconEye, IconEyeOff } from 'common2'
 
 import {
   FormActions,
@@ -216,7 +216,7 @@ const SmtpForm = () => {
                 header={
                   <FormSectionLabel>
                     <span>SMTP Provider Settings</span>
-                    <p className="text-scale-900 my-4">
+                    <p className="my-4 text-scale-900">
                       Your SMTP Credentials will always be encrypted in our database.
                     </p>
                   </FormSectionLabel>
@@ -255,7 +255,7 @@ const SmtpForm = () => {
                     name="SMTP_MAX_FREQUENCY"
                     label="Minimum interval between emails being sent"
                     descriptionText="How long between each email can a new email be sent via your SMTP server."
-                    actions={<span className="text-scale-900 mr-3">seconds</span>}
+                    actions={<span className="mr-3 text-scale-900">seconds</span>}
                     disabled={!canUpdateConfig}
                   />
                   <InputNumber
@@ -264,7 +264,7 @@ const SmtpForm = () => {
                     min={0}
                     label="Rate limit for sending emails"
                     descriptionText="How many emails can be sent per hour."
-                    actions={<span className="text-scale-900 mr-3">emails per hour</span>}
+                    actions={<span className="mr-3 text-scale-900">emails per hour</span>}
                     disabled={!canUpdateConfig}
                   />
                   <Input
diff --git a/studio/components/interfaces/Auth/Users/InviteUserModal.tsx b/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
index d27900cc1d8..a83e553aa3b 100644
--- a/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+++ b/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
@@ -1,7 +1,7 @@
 import { useContext, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Modal, Input, IconPlus, IconMail, Form } from '@supabase/ui'
+import { Button, Modal, Input, IconPlus, IconMail, Form } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -67,11 +67,11 @@ const InviteUserModal = () => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to invite users
               </span>
             </div>
@@ -94,7 +94,7 @@ const InviteUserModal = () => {
           onSubmit={onInviteuser}
         >
           {({ isSubmitting }: { isSubmitting: boolean }) => (
-            <div className="py-4 space-y-6">
+            <div className="space-y-6 py-4">
               <Modal.Content>
                 <Input
                   autoFocus
diff --git a/studio/components/interfaces/Auth/Users/UserDropdown.tsx b/studio/components/interfaces/Auth/Users/UserDropdown.tsx
index 13b7601ee43..ddca114e6c1 100644
--- a/studio/components/interfaces/Auth/Users/UserDropdown.tsx
+++ b/studio/components/interfaces/Auth/Users/UserDropdown.tsx
@@ -1,7 +1,7 @@
 import { FC, useContext, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Dropdown, Divider, IconTrash, IconMail, IconMoreHorizontal } from '@supabase/ui'
+import { Button, Dropdown, Divider, IconTrash, IconMail, IconMoreHorizontal } from 'common2'
 
 import { useStore } from 'hooks'
 import { timeout } from 'lib/helpers'
@@ -156,11 +156,11 @@ const UserDropdown: FC<Props> = ({ user, canRemoveUser }) => {
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to delete users
                   </span>
                 </div>
diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx
index 406d3c76955..3a8dcd54060 100644
--- a/studio/components/interfaces/Auth/Users/Users.tsx
+++ b/studio/components/interfaces/Auth/Users/Users.tsx
@@ -1,7 +1,7 @@
 import semver from 'semver'
 import { useEffect, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from '@supabase/ui'
+import { Button, Input, IconSearch, IconX, IconRefreshCw, Listbox, IconUsers } from 'common2'
 
 import { IS_PLATFORM } from 'lib/constants'
 import { PageContext } from 'pages/project/[ref]/auth/users'
@@ -108,9 +108,9 @@ const Users = () => {
           {inviteEnabled && <InviteUserModal />}
         </div>
       </div>
-      <section className="overflow-visible mt-4 px-6">
-        <div className="relative section-block--body rounded">
-          <div className="align-middle inline-block min-w-full">
+      <section className="mt-4 overflow-visible px-6">
+        <div className="section-block--body relative rounded">
+          <div className="inline-block min-w-full align-middle">
             <UsersList />
           </div>
         </div>
diff --git a/studio/components/interfaces/Auth/Users/UsersList.tsx b/studio/components/interfaces/Auth/Users/UsersList.tsx
index def1468399a..40c2721f54a 100644
--- a/studio/components/interfaces/Auth/Users/UsersList.tsx
+++ b/studio/components/interfaces/Auth/Users/UsersList.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconAlertCircle, Loading } from '@supabase/ui'
+import { IconAlertCircle, Loading } from 'common2'
 
 import { PageContext } from 'pages/project/[ref]/auth/users'
 import Table from 'components/to-be-cleaned/Table'
@@ -34,7 +34,7 @@ const UsersList = ({}) => {
                 {/* @ts-ignore */}
                 <Table.td
                   colSpan={7}
-                  className="h-14 p-4 whitespace-nowrap border-t leading-5 text-gray-300 text-sm"
+                  className="h-14 whitespace-nowrap border-t p-4 text-sm leading-5 text-gray-300"
                 >
                   <div className="flex items-center space-x-3 opacity-75">
                     <IconAlertCircle size={16} strokeWidth={2} />
diff --git a/studio/components/interfaces/Auth/Users/UsersListItem.tsx b/studio/components/interfaces/Auth/Users/UsersListItem.tsx
index 0210f8926a9..a0c14bae06d 100644
--- a/studio/components/interfaces/Auth/Users/UsersListItem.tsx
+++ b/studio/components/interfaces/Auth/Users/UsersListItem.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge } from '@supabase/ui'
+import { Badge } from 'common2'
 
 import Table from 'components/to-be-cleaned/Table'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
@@ -29,7 +29,7 @@ const UserListItem: FC<Props> = ({ user, canRemoveUser }) => {
         <span className="text-scale-1200">{!user.phone ? '-' : user.phone}</span>
       </Table.td>
       <Table.td className="hidden 2xl:table-cell">
-        <span className="text-scale-1200 capitalize">
+        <span className="capitalize text-scale-1200">
           {user?.raw_app_meta_data?.provider || user?.app_metadata?.provider}
         </span>
       </Table.td>
diff --git a/studio/components/interfaces/Auth/Users/UsersPagination.tsx b/studio/components/interfaces/Auth/Users/UsersPagination.tsx
index 51629e18e6b..7d9e61e417b 100644
--- a/studio/components/interfaces/Auth/Users/UsersPagination.tsx
+++ b/studio/components/interfaces/Auth/Users/UsersPagination.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 import { PageContext } from 'pages/project/[ref]/auth/users'
 
@@ -28,7 +28,7 @@ const UsersPagination = () => {
           results
         </p>
       </div>
-      <div className="flex-1 flex justify-between sm:justify-end">
+      <div className="flex flex-1 justify-between sm:justify-end">
         {PageState.hasPrevious && (
           <Button type="secondary" disabled={!PageState.hasPrevious} onClick={onPrevious}>
             Previous
diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index 955c03ae1c5..3a4318167b6 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { IconLoader, Modal } from '@supabase/ui'
+import { IconLoader, Modal } from 'common2'
 import { loadStripe } from '@stripe/stripe-js'
 import { Elements } from '@stripe/react-stripe-js'
 
diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
index 444eb12257e..7a0dd3567a8 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Button, Modal } from '@supabase/ui'
+import { Button, Modal } from 'common2'
 import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
 import { useStore } from 'hooks'
 
@@ -56,7 +56,7 @@ const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel }) => {
     <form onSubmit={handleSubmit}>
       <Modal.Content>
         <div
-          className={`transition ${isSaving ? 'opacity-75 pointer-events-none' : 'opacity-100'}`}
+          className={`transition ${isSaving ? 'pointer-events-none opacity-75' : 'opacity-100'}`}
         >
           <PaymentElement />
         </div>
diff --git a/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx b/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
index e3940c04895..0bca204d3e0 100644
--- a/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
+++ b/studio/components/interfaces/Billing/AddOns/ComputeSizeSelection.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { Badge, Button, Radio } from '@supabase/ui'
+import { Badge, Button, Radio } from 'common2'
 
 import { useStore, useFlag } from 'hooks'
 import { getProductPrice } from '../Billing.utils'
@@ -30,7 +30,7 @@ const ComputeSizeSelection: FC<Props> = ({
           <h4 className="text-lg">Database add-ons</h4>
           <Badge color="green">Optional</Badge>
         </div>
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           Choose the database instance size that best fits your needs
         </p>
       </div>
diff --git a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
index c236d347acd..99dcfb2615e 100644
--- a/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
+++ b/studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx
@@ -2,7 +2,7 @@ import { FC, useReducer, useState, useEffect, useRef } from 'react'
 import { useRouter } from 'next/router'
 import { includes, without } from 'lodash'
 import { Transition } from '@headlessui/react'
-import { Button, Form, Input, Modal, IconArrowLeft, Alert } from '@supabase/ui'
+import { Button, Form, Input, Modal, IconArrowLeft, Alert } from 'common2'
 
 import { useStore } from 'hooks'
 import { post, patch } from 'lib/common/fetch'
@@ -174,7 +174,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         enterFrom="transform opacity-0 translate-x-10"
         enterTo="transform opacity-100 translate-x-0"
       >
-        <div className="space-y-8 w-4/5">
+        <div className="w-4/5 space-y-8">
           <div ref={formRef} className="relative">
             <div className="absolute top-[2px] -left-24">
               <Button type="text" icon={<IconArrowLeft />} onClick={onSelectBack}>
@@ -198,13 +198,13 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
                         <label
                           key={option}
                           className={`
-                              text-center rounded-md py-1 pl-2 pr-3 shadow-sm 
-                              transition-all flex items-center space-x-2
-                              duration-100 cursor-pointer text-sm
+                              flex cursor-pointer items-center space-x-2 rounded-md py-1 
+                              pl-2 pr-3 text-center text-sm
+                              shadow-sm transition-all duration-100
                               ${
                                 active
-                                  ? ` opacity-100 bg-scale-1200 text-scale-100 hover:bg-opacity-75`
-                                  : ` bg-scale-700 opacity-25 hover:opacity-50 text-scale-1200`
+                                  ? ` bg-scale-1200 text-scale-100 opacity-100 hover:bg-opacity-75`
+                                  : ` bg-scale-700 text-scale-1200 opacity-25 hover:opacity-50`
                               }
                           `}
                         >
@@ -259,7 +259,7 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         header="Downgrading project to free"
         onCancel={() => setShowConfirmModal(false)}
       >
-        <div className="py-4 space-y-4">
+        <div className="space-y-4 py-4">
           <Modal.Content>
             <Alert
               withIcon
diff --git a/studio/components/interfaces/Billing/Invoices.tsx b/studio/components/interfaces/Billing/Invoices.tsx
index 522a783f5f4..1a4da16190f 100644
--- a/studio/components/interfaces/Billing/Invoices.tsx
+++ b/studio/components/interfaces/Billing/Invoices.tsx
@@ -6,7 +6,7 @@ import {
   IconDownload,
   IconChevronLeft,
   IconChevronRight,
-} from '@supabase/ui'
+} from 'common2'
 
 import { useStore } from 'hooks'
 import { API_URL } from 'lib/constants'
@@ -84,7 +84,7 @@ const Invoices: FC<Props> = ({ projectRef }) => {
   }
 
   return (
-    <div className="my-4 container max-w-4xl space-y-1">
+    <div className="container my-4 max-w-4xl space-y-1">
       <Loading active={loading}>
         <Table
           head={[
@@ -125,7 +125,7 @@ const Invoices: FC<Props> = ({ projectRef }) => {
                         <p>{x.number}</p>
                       </Table.td>
                       <Table.td className="align-right">
-                        <div className="flex items-center space-x-2 justify-end">
+                        <div className="flex items-center justify-end space-x-2">
                           <Button
                             type="outline"
                             icon={<IconDownload />}
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/CostBreakdownModal.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/CostBreakdownModal.tsx
index dc65957fd04..c09cadc3fc6 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/CostBreakdownModal.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/CostBreakdownModal.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { groupBy } from 'lodash'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 
 interface Props {
   visible: boolean
@@ -27,7 +27,7 @@ const CostBreakdownModal: FC<Props> = ({
       header="Cost breakdown details"
       onCancel={onCancel}
     >
-      <div className="py-4 space-y-2">
+      <div className="space-y-2 py-4">
         <Modal.Content>
           <p className="text-sm">
             The following shows the cost breakdown of the invoice that will be billed on{' '}
@@ -40,11 +40,11 @@ const CostBreakdownModal: FC<Props> = ({
           </p>
         </Modal.Content>
         <Modal.Content>
-          <div className="bg-scale-500 border border-scale-600 rounded">
-            <div className="flex items-center py-2 px-4 border-b border-scale-600">
-              <div className="text-xs w-[75%]">Description</div>
-              <div className="text-xs w-[10%] text-right">Qty</div>
-              <div className="text-xs w-[15%] text-right">Amount</div>
+          <div className="rounded border border-scale-600 bg-scale-500">
+            <div className="flex items-center border-b border-scale-600 py-2 px-4">
+              <div className="w-[75%] text-xs">Description</div>
+              <div className="w-[10%] text-right text-xs">Qty</div>
+              <div className="w-[15%] text-right text-xs">Amount</div>
             </div>
             {Object.keys(groupedBreakdown).map((startPeriod: any, idx: number) => {
               const start = new Date(Number(startPeriod) * 1000).toLocaleDateString('en-US', {
@@ -62,16 +62,16 @@ const CostBreakdownModal: FC<Props> = ({
               return (
                 <div key={`breakdown-${idx}`} className="border-b border-scale-600">
                   <div className="flex items-center py-2 px-4 ">
-                    <div className="text-xs w-full text-scale-1100">
+                    <div className="w-full text-xs text-scale-1100">
                       {start} - {end}
                     </div>
                   </div>
                   {groupedBreakdown[startPeriod].map((item: any, index: number) => {
                     return (
                       <div key={`breakdown-row-${index}`} className="flex items-center py-2 px-4">
-                        <div className="text-sm w-[75%]">{item.description}</div>
-                        <div className="text-sm w-[10%] text-right">{item.quantity}</div>
-                        <div className="text-sm w-[15%] text-right">
+                        <div className="w-[75%] text-sm">{item.description}</div>
+                        <div className="w-[10%] text-right text-sm">{item.quantity}</div>
+                        <div className="w-[15%] text-right text-sm">
                           ${(item.amount / 100).toFixed(2)}
                         </div>
                       </div>
@@ -80,21 +80,21 @@ const CostBreakdownModal: FC<Props> = ({
                 </div>
               )
             })}
-            <div className="flex flex-col py-2 px-4 space-y-1">
+            <div className="flex flex-col space-y-1 py-2 px-4">
               <div className="flex items-center">
-                <div className="text-sm w-[75%]">Total amount</div>
-                <div className="text-sm w-[10%] text-right"></div>
-                <div className="text-xl w-[15%] text-right">
+                <div className="w-[75%] text-sm">Total amount</div>
+                <div className="w-[10%] text-right text-sm"></div>
+                <div className="w-[15%] text-right text-xl">
                   ${totalDue < 0 ? 0 : totalDue.toFixed(2)}
                 </div>
               </div>
               {totalDue < 0 && (
                 <div className="flex items-center text-scale-1100">
-                  <div className="text-sm w-[75%]">
+                  <div className="w-[75%] text-sm">
                     Amount returned as credits for unused resources
                   </div>
-                  <div className="text-sm w-[10%] text-right"></div>
-                  <div className="text-sm w-[15%] text-right">${Math.abs(totalDue).toFixed(2)}</div>
+                  <div className="w-[10%] text-right text-sm"></div>
+                  <div className="w-[15%] text-right text-sm">${Math.abs(totalDue).toFixed(2)}</div>
                 </div>
               )}
             </div>
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
index 4f07fda2aa1..1501590cf5b 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentSummaryPanel.tsx
@@ -8,7 +8,7 @@ import {
   IconCreditCard,
   Modal,
   Alert,
-} from '@supabase/ui'
+} from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -93,14 +93,14 @@ const PaymentSummaryPanel: FC<Props> = ({
   return (
     <>
       <div
-        className="bg-panel-body-light dark:bg-panel-body-dark w-full space-y-8 border-l px-6 py-10 lg:px-12"
+        className="w-full space-y-8 border-l bg-panel-body-light px-6 py-10 dark:bg-panel-body-dark lg:px-12"
         style={{ height: 'calc(100vh - 57px)' }}
       >
         <p>Payment Summary</p>
 
         {/* Subscription details */}
         <div className="space-y-1">
-          <p className="text-scale-1100 text-sm">Selected subscription</p>
+          <p className="text-sm text-scale-1100">Selected subscription</p>
           <div className="flex items-center justify-between">
             <p className={`${isChangingPlan ? 'text-scale-1100 line-through' : ''} text-sm`}>
               {getPlanName(currentPlan)}
@@ -124,7 +124,7 @@ const PaymentSummaryPanel: FC<Props> = ({
           <div className="space-y-1">
             <p className="text-sm">Selected add-ons</p>
             {currentComputeSize === undefined && selectedComputeSize === undefined && (
-              <p className="text-scale-1100 text-sm">No add-ons selected</p>
+              <p className="text-sm text-scale-1100">No add-ons selected</p>
             )}
             {currentComputeSize !== undefined && (
               <div className="flex items-center justify-between">
@@ -166,7 +166,7 @@ const PaymentSummaryPanel: FC<Props> = ({
           </div>
         )}
 
-        <div className="bg-scale-600 h-px w-full" />
+        <div className="h-px w-full bg-scale-600" />
 
         <PaymentTotal
           subscriptionPreview={subscriptionPreview}
@@ -178,13 +178,13 @@ const PaymentSummaryPanel: FC<Props> = ({
         <div className="space-y-2">
           <p className="text-sm">Select payment method</p>
           {isLoadingPaymentMethods ? (
-            <div className="bg-scale-400 border-scale-700 flex items-center space-x-4 rounded-md border px-4 py-2">
+            <div className="flex items-center space-x-4 rounded-md border border-scale-700 bg-scale-400 px-4 py-2">
               <IconLoader className="animate-spin" size={14} />
-              <p className="text-scale-1100 text-sm">Retrieving payment methods</p>
+              <p className="text-sm text-scale-1100">Retrieving payment methods</p>
             </div>
           ) : paymentMethods.length === 0 ? (
-            <div className="bg-scale-100 flex items-center justify-between rounded-md border border-dashed px-4 py-2">
-              <div className="text-scale-1100 flex items-center space-x-4">
+            <div className="flex items-center justify-between rounded-md border border-dashed bg-scale-100 px-4 py-2">
+              <div className="flex items-center space-x-4 text-scale-1100">
                 <IconAlertCircle size={16} strokeWidth={1.5} />
                 <p className="text-sm">No saved payment methods</p>
               </div>
@@ -205,11 +205,11 @@ const PaymentSummaryPanel: FC<Props> = ({
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                        'border-scale-200 w-48 border text-center', //border
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                        'w-48 border border-scale-200 text-center', //border
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         {enablePermissions
                           ? 'You need additional permissions to add new payment methods to this organization'
                           : 'Only organization owners can add new payment methods'}
@@ -244,11 +244,11 @@ const PaymentSummaryPanel: FC<Props> = ({
                 )
               })}
               <div
-                className="hover:bg-scale-500 group flex cursor-pointer items-center space-x-2 py-2 px-3 transition"
+                className="group flex cursor-pointer items-center space-x-2 py-2 px-3 transition hover:bg-scale-500"
                 onClick={onSelectAddNewPaymentMethod}
               >
                 <IconPlus size={16} />
-                <p className="text-scale-1000 group-hover:text-scale-1200 transition">
+                <p className="text-scale-1000 transition group-hover:text-scale-1200">
                   Add new payment method
                 </p>
               </div>
@@ -289,7 +289,7 @@ const PaymentSummaryPanel: FC<Props> = ({
             </Alert>
           </Modal.Content>
           <Modal.Content>
-            <p className="text-scale-1200 text-sm">Would you like to update your project now?</p>
+            <p className="text-sm text-scale-1200">Would you like to update your project now?</p>
           </Modal.Content>
           <Modal.Seperator />
           <Modal.Content>
diff --git a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentTotal.tsx b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentTotal.tsx
index e3a252ddedb..7c248533a14 100644
--- a/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentTotal.tsx
+++ b/studio/components/interfaces/Billing/PaymentSummaryPanel/PaymentTotal.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Loading, IconHelpCircle, Button } from '@supabase/ui'
+import { Loading, IconHelpCircle, Button } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { SubscriptionPreview } from '../Billing.types'
 import CostBreakdownModal from './CostBreakdownModal'
@@ -48,7 +48,7 @@ const PaymentTotal: FC<Props> = ({
                       <IconHelpCircle
                         size={16}
                         strokeWidth={1.5}
-                        className="cursor-pointer opacity-50 hover:opacity-100 transition"
+                        className="cursor-pointer opacity-50 transition hover:opacity-100"
                         onClick={() => setShowCostBreakdown(true)}
                       />
                     </Tooltip.Trigger>
@@ -56,11 +56,11 @@ const PaymentTotal: FC<Props> = ({
                       <Tooltip.Arrow className="radix-tooltip-arrow" />
                       <div
                         className={[
-                          'bg-scale-100 shadow py-1 px-2 rounded leading-none', // background
+                          'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
                           'border border-scale-200 ', //border
                         ].join(' ')}
                       >
-                        <span className="text-scale-1200 text-xs">How is this calculated?</span>
+                        <span className="text-xs text-scale-1200">How is this calculated?</span>
                       </div>
                     </Tooltip.Content>
                   </Tooltip.Root>
@@ -106,8 +106,8 @@ const PaymentTotal: FC<Props> = ({
                 <p className="text-sm text-scale-1100">No changes to current subscription</p>
               )}
             </div>
-            <div className="flex justify-end items-end relative -top-[8px]">
-              <p className="text-scale-1100 relative -top-[1px]">$</p>
+            <div className="relative -top-[8px] flex items-end justify-end">
+              <p className="relative -top-[1px] text-scale-1100">$</p>
               <p className="text-2xl">
                 {!hasChanges
                   ? '0.00'
diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx
index 443b7ec98ff..bf0ed988721 100644
--- a/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx
+++ b/studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Button, IconLoader } from '@supabase/ui'
+import { Button, IconLoader } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { useFlag } from 'hooks'
@@ -86,7 +86,7 @@ const PlanCTAButton: FC<Props> = ({ plan, currentPlan, onSelectPlan }) => {
         {ctaText}
       </Button>
       {!disabled && projectUpdateDisabled && (
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           Subscription changes are currently disabled, our engineers are working on a fix
         </p>
       )}
diff --git a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
index 8ddc8587913..a47e76509f7 100644
--- a/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
+++ b/studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconCheck } from '@supabase/ui'
+import { IconCheck } from 'common2'
 
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
 import { StripeProduct } from 'components/interfaces/Billing'
@@ -15,7 +15,7 @@ interface Props {
 const AnimatedGradientBackground = () => (
   <div
     className={[
-      'animate-sway absolute top-0 left-0 h-full w-full',
+      'absolute top-0 left-0 h-full w-full animate-sway',
       'bg-gradient-to-b from-transparent via-transparent to-green-800',
     ].join(' ')}
   />
@@ -59,9 +59,9 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
             )}
             <div className="flex h-full flex-col overflow-hidden rounded border">
               {isCurrentPlan && <CurrentSubscriptionBanner />}
-              <div className="dark:bg-scale-300 bg-white px-8 py-6">
+              <div className="bg-white px-8 py-6 dark:bg-scale-300">
                 <span
-                  className="text-cd text-scale-1200 inline-flex rounded-full text-base font-normal tracking-wide"
+                  className="text-cd inline-flex rounded-full text-base font-normal tracking-wide text-scale-1200"
                   id="tier-standard"
                 >
                   {PRICING_META[plan.id].name}
@@ -72,11 +72,11 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
                       <>
                         <div className="flex items-end gap-1">
                           {PRICING_META[plan.id].from && (
-                            <span className="text-scale-1200 text-base font-medium">From</span>
+                            <span className="text-base font-medium text-scale-1200">From</span>
                           )}
                           <div>
                             <span className="text-2xl">${PRICING_META[plan.id].priceMonthly}</span>
-                            <span className="text-scale-900 ml-1 text-xl font-medium">/mo</span>
+                            <span className="ml-1 text-xl font-medium text-scale-900">/mo</span>
                           </div>
                         </div>
                       </>
@@ -85,7 +85,7 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
                     )}
                     <div className="flex h-8">
                       {PRICING_META[plan.id].warning && (
-                        <div className="bg-brand-300 text-brand-1000 mt-2 rounded-md bg-opacity-30 px-2 py-1 text-xs">
+                        <div className="mt-2 rounded-md bg-brand-300 bg-opacity-30 px-2 py-1 text-xs text-brand-1000">
                           {PRICING_META[plan.id].warning}
                         </div>
                       )}
@@ -99,28 +99,28 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
                     onSelectPlan={onSelectPlan}
                   />
                 </div>
-                <p className="text-scale-1100 text-sm">{PRICING_META[plan.id].description}</p>
+                <p className="text-sm text-scale-1100">{PRICING_META[plan.id].description}</p>
               </div>
               <div
                 className={[
                   'flex-1 flex-col justify-between',
-                  'dark:border-scale-400 space-y-6 border-t',
+                  'space-y-6 border-t dark:border-scale-400',
                   'bg-scale-100 dark:bg-scale-300',
                   'hidden h-full px-8 py-6 lg:flex',
                 ].join(' ')}
               >
                 {PRICING_META[plan.id].preface && (
-                  <p className="text-scale-1200 text-sm">{PRICING_META[plan.id].preface}</p>
+                  <p className="text-sm text-scale-1200">{PRICING_META[plan.id].preface}</p>
                 )}
-                <ul role="list" className="dark:divide-scale-400 divide-y">
+                <ul role="list" className="divide-y dark:divide-scale-400">
                   {PRICING_META[plan.id].features.map((feature) => (
                     <li key={feature} className="flex items-center py-2">
                       <IconCheck
-                        className="text-brand-900 h-3 w-3 "
+                        className="h-3 w-3 text-brand-900 "
                         aria-hidden="true"
                         strokeWidth={3}
                       />
-                      <p className="text-scale-1100 dark:text-scale-1200 mb-0 ml-3 text-xs">
+                      <p className="mb-0 ml-3 text-xs text-scale-1100 dark:text-scale-1200">
                         {feature}
                       </p>
                     </li>
@@ -129,13 +129,13 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
                 <div className="flex flex-col gap-6">
                   <div className="space-y-2">
                     {PRICING_META[plan.id].additional && (
-                      <p className="text-scale-1200 text-sm">{PRICING_META[plan.id].additional}</p>
+                      <p className="text-sm text-scale-1200">{PRICING_META[plan.id].additional}</p>
                     )}
                     {PRICING_META[plan.id].scale && (
-                      <p className="text-scale-900 text-xs">{PRICING_META[plan.id].scale}</p>
+                      <p className="text-xs text-scale-900">{PRICING_META[plan.id].scale}</p>
                     )}
                     {PRICING_META[plan.id].shutdown && (
-                      <p className="text-scale-900 text-xs">{PRICING_META[plan.id].shutdown}</p>
+                      <p className="text-xs text-scale-900">{PRICING_META[plan.id].shutdown}</p>
                     )}
                   </div>
                 </div>
diff --git a/studio/components/interfaces/Billing/ProUpgrade.tsx b/studio/components/interfaces/Billing/ProUpgrade.tsx
index 4a37620f54f..f871bdd40b8 100644
--- a/studio/components/interfaces/Billing/ProUpgrade.tsx
+++ b/studio/components/interfaces/Billing/ProUpgrade.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react'
 import { Transition } from '@headlessui/react'
 import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconHelpCircle, Toggle, Modal } from '@supabase/ui'
+import { Button, IconHelpCircle, Toggle, Modal } from 'common2'
 
 import { useStore } from 'hooks'
 import { post, patch } from 'lib/common/fetch'
@@ -167,7 +167,7 @@ const ProUpgrade: FC<Props> = ({
           <div className="relative space-y-4 px-5">
             <BackButton onClick={() => onSelectBack()} />
             <div className="space-y-8">
-              <h4 className="text-scale-900 text-lg">Change your project's subscription</h4>
+              <h4 className="text-lg text-scale-900">Change your project's subscription</h4>
               <div
                 className="space-y-8 overflow-scroll pb-8"
                 style={{ height: 'calc(100vh - 9rem - 57px)' }}
@@ -178,7 +178,7 @@ const ProUpgrade: FC<Props> = ({
                       <h3 className="text-xl">
                         Welcome to <span className="text-brand-900">Pro</span>
                       </h3>
-                      <p className="text-scale-1100 text-base">
+                      <p className="text-base text-scale-1100">
                         Your new subscription will begin immediately after payment
                       </p>
                     </>
@@ -187,13 +187,13 @@ const ProUpgrade: FC<Props> = ({
                       <h3 className="text-3xl">
                         Managing your <span className="text-brand-900">Pro</span> plan
                       </h3>
-                      <p className="text-scale-1100 text-base">
+                      <p className="text-base text-scale-1100">
                         Your billing cycle will reset after payment
                       </p>
                     </>
                   )}
                 </div>
-                <div className="bg-panel-body-light dark:bg-panel-body-dark border-panel-border-light border-panel-border-dark flex items-center justify-between gap-16 rounded border px-6 py-4 drop-shadow-sm">
+                <div className="flex items-center justify-between gap-16 rounded border border-panel-border-light border-panel-border-dark bg-panel-body-light px-6 py-4 drop-shadow-sm dark:bg-panel-body-dark">
                   <div>
                     <div className="flex items-center space-x-2">
                       <p>Enable spend cap</p>
@@ -204,7 +204,7 @@ const ProUpgrade: FC<Props> = ({
                         onClick={() => setShowSpendCapHelperModal(true)}
                       />
                     </div>
-                    <p className="text-scale-1100 text-sm">
+                    <p className="text-sm text-scale-1100">
                       If enabled, additional resources will not be charged on a per-usage basis
                     </p>
                   </div>
@@ -281,11 +281,11 @@ const ProUpgrade: FC<Props> = ({
               </p>
               {/* Maybe instead of a table, show something more interactive like a spend cap playground */}
               {/* Maybe ideate this in Figma first but this is good enough for now */}
-              <div className="border-scale-600 bg-scale-500 rounded border">
+              <div className="rounded border border-scale-600 bg-scale-500">
                 <div className="flex items-center px-4 pt-2 pb-1">
-                  <p className="text-scale-1100 w-[50%] text-sm">Item</p>
-                  <p className="text-scale-1100 w-[25%] text-sm">Limit</p>
-                  <p className="text-scale-1100 w-[25%] text-sm">Rate</p>
+                  <p className="w-[50%] text-sm text-scale-1100">Item</p>
+                  <p className="w-[25%] text-sm text-scale-1100">Limit</p>
+                  <p className="w-[25%] text-sm text-scale-1100">Rate</p>
                 </div>
                 <div className="py-1">
                   <div className="flex items-center px-4 py-1">
@@ -315,11 +315,11 @@ const ProUpgrade: FC<Props> = ({
                           <Tooltip.Arrow className="radix-tooltip-arrow" />
                           <div
                             className={[
-                              'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                              'border-scale-200 border ', //border
+                              'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                              'border border-scale-200 ', //border
                             ].join(' ')}
                           >
-                            <span className="text-scale-1200 text-xs">
+                            <span className="text-xs text-scale-1200">
                               Monthly Active Users: A user that has made an API request in the last
                               month
                             </span>
diff --git a/studio/components/interfaces/Billing/Subscription/CostBreakdownRow.tsx b/studio/components/interfaces/Billing/Subscription/CostBreakdownRow.tsx
index 5f11df5eb72..1d62580d43a 100644
--- a/studio/components/interfaces/Billing/Subscription/CostBreakdownRow.tsx
+++ b/studio/components/interfaces/Billing/Subscription/CostBreakdownRow.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge } from '@supabase/ui'
+import { Badge } from 'common2'
 
 interface Props {
   item: string
@@ -11,12 +11,12 @@ interface Props {
 
 const CostBreakdownRow: FC<Props> = ({ item, amount, unitPrice, price, freeQuota }) => {
   return (
-    <div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
+    <div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
       <div className="flex w-[40%] items-center gap-3">
         <span className="text-sm">{item}</span>
         {freeQuota && (
           <Badge color="scale">
-            <span className="text-scale-900 text-xs">{`${freeQuota / 1000000000}GB included`}</span>
+            <span className="text-xs text-scale-900">{`${freeQuota / 1000000000}GB included`}</span>
           </Badge>
         )}
       </div>
diff --git a/studio/components/interfaces/Billing/Subscription/Subscription.tsx b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
index aaff5936893..02500b53a8e 100644
--- a/studio/components/interfaces/Billing/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import { FC } from 'react'
 import { sum } from 'lodash'
 import { useRouter } from 'next/router'
-import { Button, Loading } from '@supabase/ui'
+import { Button, Loading } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -65,11 +65,11 @@ const Subscription: FC<Props> = ({
 
   return (
     <Loading active={loading}>
-      <div className="border-panel-border-light dark:border-panel-border-dark mb-8 w-full overflow-hidden rounded border">
+      <div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
         <div className="bg-panel-body-light dark:bg-panel-body-dark">
           <div className="flex items-center justify-between px-6 pt-4">
             <div className="flex flex-col">
-              <p className="text-scale-1100 text-sm">
+              <p className="text-sm text-scale-1100">
                 {showProjectName ? project.name : 'Current subscription'}
               </p>
               <h3 className="mb-0 text-xl">{subscription?.tier.name ?? '-'}</h3>
@@ -95,11 +95,11 @@ const Subscription: FC<Props> = ({
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'border-scale-200 border text-center', //border
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
+                        'border border-scale-200 text-center', //border
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         {projectUpdateDisabled ? (
                           <>
                             Subscription changes are currently disabled.
@@ -131,7 +131,7 @@ const Subscription: FC<Props> = ({
             </div>
           )}
           <div className="mt-2 px-6 pb-4">
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               See our{' '}
               <a href="https://supabase.com/pricing" target="_blank" className="underline">
                 pricing
@@ -147,18 +147,18 @@ const Subscription: FC<Props> = ({
           ) : !loading && subscription ? (
             // Cost breakdown
             <>
-              <div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
+              <div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
                 <div className="w-[40%]">
-                  <p className="text-scale-900 text-xs uppercase">Item</p>
+                  <p className="text-xs uppercase text-scale-900">Item</p>
                 </div>
                 <div className="flex w-[20%] justify-end">
-                  <p className="text-scale-900 text-xs uppercase">Amount</p>
+                  <p className="text-xs uppercase text-scale-900">Amount</p>
                 </div>
                 <div className="flex w-[20%] justify-end">
-                  <p className="text-scale-900 text-xs uppercase">Unit Price</p>
+                  <p className="text-xs uppercase text-scale-900">Unit Price</p>
                 </div>
                 <div className="flex w-[20%] justify-end">
-                  <p className="text-scale-900 text-xs uppercase">Price</p>
+                  <p className="text-xs uppercase text-scale-900">Price</p>
                 </div>
               </div>
               <CostBreakdownRow
@@ -195,9 +195,9 @@ const Subscription: FC<Props> = ({
                     )
                   })
                 )}
-              <div className="border-panel-border-light dark:border-panel-border-dark relative flex items-center border-t px-6 py-3">
+              <div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
                 <div className="w-[80%]">
-                  <p className="text-scale-1100 text-sm">
+                  <p className="text-sm text-scale-1100">
                     Estimated cost for {dayjs.unix(currentPeriodStart).utc().format('MMM D, YYYY')}{' '}
                     - {dayjs.unix(currentPeriodEnd).utc().format('MMM D, YYYY')} so far
                   </p>
diff --git a/studio/components/interfaces/Billing/UpdateSuccess.tsx b/studio/components/interfaces/Billing/UpdateSuccess.tsx
index ca7729cb6c6..5f920e743b5 100644
--- a/studio/components/interfaces/Billing/UpdateSuccess.tsx
+++ b/studio/components/interfaces/Billing/UpdateSuccess.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
-import { Button, IconCheckCircle } from '@supabase/ui'
+import { Button, IconCheckCircle } from 'common2'
 
 interface Props {
   title: string
@@ -14,7 +14,7 @@ const UpdateSuccess: FC<Props> = ({ title, message, projectRef }) => {
   return (
     <div
       style={{ height: 'calc(100vh - 5rem - 49.5px)' }}
-      className="space-y-4 flex flex-col justify-center max-w-xl mx-auto"
+      className="mx-auto flex max-w-xl flex-col justify-center space-y-4"
     >
       <div className="flex items-center space-x-4">
         <IconCheckCircle strokeWidth={2} />
diff --git a/studio/components/interfaces/Database/Backups/BackupItem.tsx b/studio/components/interfaces/Database/Backups/BackupItem.tsx
index 09462c19e8e..ddfd973ca67 100644
--- a/studio/components/interfaces/Database/Backups/BackupItem.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupItem.tsx
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Badge, Button, IconDownload } from '@supabase/ui'
+import { Badge, Button, IconDownload } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -121,10 +121,10 @@ const BackupItem: FC<Props> = ({ projectRef, backup, index }) => {
   return (
     <div
       className={`flex h-12 items-center justify-between px-6 ${
-        index ? 'dark:border-dark border-t' : ''
+        index ? 'border-t dark:border-dark' : ''
       }`}
     >
-      <p className="text-scale-1200 text-sm ">
+      <p className="text-sm text-scale-1200 ">
         {dayjs(backup.inserted_at).format('DD MMM YYYY HH:mm:ss')}
       </p>
       <div className="">{generateSideButtons(backup)}</div>
diff --git a/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx b/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
index 81f1fdb97f9..9c7d92215bf 100644
--- a/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
@@ -1,4 +1,4 @@
-import { IconInfo } from '@supabase/ui'
+import { IconInfo } from 'common2'
 
 const BackupsEmpty = () => {
   return (
diff --git a/studio/components/interfaces/Database/Backups/BackupsError.tsx b/studio/components/interfaces/Database/Backups/BackupsError.tsx
index 6fb7bdd9d77..36df5fffd33 100644
--- a/studio/components/interfaces/Database/Backups/BackupsError.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsError.tsx
@@ -1,4 +1,4 @@
-import { IconInfo } from '@supabase/ui'
+import { IconInfo } from 'common2'
 import Link from 'next/link'
 
 const BackupsError = () => {
diff --git a/studio/components/interfaces/Database/Backups/BackupsList.tsx b/studio/components/interfaces/Database/Backups/BackupsList.tsx
index 6ee1a329e3c..591434decb4 100644
--- a/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -11,7 +11,7 @@ import BackupsError from './BackupsError'
 import BackupsEmpty from './BackupsEmpty'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import InformationBox from 'components/ui/InformationBox'
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 
 interface Props {}
 
diff --git a/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx b/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
index bab01cc1adb..bf5d0033f15 100644
--- a/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
+++ b/studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx
@@ -12,7 +12,7 @@ import {
   Button,
   Modal,
   IconAlertCircle,
-} from '@supabase/ui'
+} from 'common2'
 
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
@@ -192,7 +192,7 @@ const PITRBackupSelection: FC<Props> = () => {
                       <IconSearch size={14} />
                       <input
                         autoFocus
-                        className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+                        className="w-72 bg-transparent text-sm placeholder-scale-1000 outline-none"
                         value={searchString}
                         placeholder={''}
                         onChange={(e: FormEvent<HTMLInputElement>) =>
@@ -252,7 +252,7 @@ const PITRBackupSelection: FC<Props> = () => {
             <div className="flex justify-between space-x-8 py-2">
               <div className="w-2/5 space-y-2 pl-4">
                 <p className="text-sm">Recovery point</p>
-                <p className="text-scale-1100 text-sm">
+                <p className="text-sm text-scale-1100">
                   Select a date and time that you would like to restore your project to
                 </p>
               </div>
@@ -286,15 +286,15 @@ const PITRBackupSelection: FC<Props> = () => {
           <Modal.Content>
             <div className="space-y-2 py-4">
               <div className="space-y-1">
-                <p className="text-scale-1100 text-sm">
+                <p className="text-sm text-scale-1100">
                   Are you sure you want to restore your database from:
                 </p>
-                <p className="text-scale-1200 text-sm">
+                <p className="text-sm text-scale-1200">
                   {dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
                   {getTimezoneOffsetText(selectedTimezone)})?
                 </p>
               </div>
-              <p className="text-scale-1100 text-sm">
+              <p className="text-sm text-scale-1100">
                 This will destroy any new data written since this backup was made.
               </p>
             </div>
diff --git a/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 9cf5b748c98..9b8c01a3944 100644
--- a/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from '@supabase/ui'
+import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from 'common2'
 import { PostgresExtension, PostgresSchema } from '@supabase/postgres-meta'
 
 import { useStore } from 'hooks'
@@ -102,7 +102,7 @@ const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
       onCancel={onCancel}
       size="small"
       header={
-        <div className="flex gap-2 items-baseline">
+        <div className="flex items-baseline gap-2">
           <h5 className="text-sm text-scale-1200">Confirm to enable</h5>
           <code className="text-xs">{extension.name}</code>
         </div>
diff --git a/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx b/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
index a3cec39614e..8460015513a 100644
--- a/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
+++ b/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, IconLoader, Toggle } from '@supabase/ui'
+import { Badge, IconLoader, Toggle } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -62,19 +62,19 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
     <>
       <div
         className={[
-          'border-panel-border-light dark:border-panel-border-dark flex',
+          'flex border-panel-border-light dark:border-panel-border-dark',
           'flex-col overflow-hidden rounded border shadow-sm',
         ].join(' ')}
       >
         <div
           className={[
-            'bg-panel-header-light dark:bg-panel-header-dark border-panel-border-light',
-            'dark:border-panel-border-dark flex border-b p-4 px-6',
+            'border-panel-border-light bg-panel-header-light dark:bg-panel-header-dark',
+            'flex border-b p-4 px-6 dark:border-panel-border-dark',
           ].join(' ')}
         >
           <h3
             title={extension.name}
-            className="text-scale-1200 m-0 h-5 flex-1 truncate text-base uppercase"
+            className="m-0 h-5 flex-1 truncate text-base uppercase text-scale-1200"
           >
             {extension.name}
           </h3>
@@ -96,13 +96,13 @@ const ExtensionCard: FC<Props> = ({ extension }) => {
           ].join(' ')}
         >
           <div className="p-4 px-6">
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               <span className="flex-grow capitalize">{extension.comment}</span>
             </p>
           </div>
           {isOn && extension.schema && (
             <div className="p-4 px-6">
-              <div className="text-scale-1100 text-sm flex-grow space-x-2 flex items-center">
+              <div className="flex flex-grow items-center space-x-2 text-sm text-scale-1100">
                 <span>Schema:</span>
                 <Badge>{`${extension.schema}`}</Badge>
               </div>
diff --git a/studio/components/interfaces/Database/Extensions/Extensions.tsx b/studio/components/interfaces/Database/Extensions/Extensions.tsx
index 942c1c01bc8..35ea788e6a3 100644
--- a/studio/components/interfaces/Database/Extensions/Extensions.tsx
+++ b/studio/components/interfaces/Database/Extensions/Extensions.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { partition, isNull } from 'lodash'
-import { Input, IconSearch, IconAlertCircle } from '@supabase/ui'
+import { Input, IconSearch, IconAlertCircle } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, useFlag, checkPermissions } from 'hooks'
diff --git a/studio/components/interfaces/Database/Functions/CreateFunction.tsx b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
index 5293a1fa18e..9bc1bbdf6f3 100644
--- a/studio/components/interfaces/Database/Functions/CreateFunction.tsx
+++ b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
@@ -11,7 +11,7 @@ import {
   IconPlus,
   Toggle,
   Modal,
-} from '@supabase/ui'
+} from 'common2'
 import { Dictionary } from 'components/grid'
 import { makeAutoObservable } from 'mobx'
 
@@ -368,12 +368,12 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
         visible={visible}
         onCancel={isClosingSidePanel}
         header={_localState.title}
-        className="hooks-sidepanel transform transition-all duration-300 ease-in-out mr-0"
+        className="hooks-sidepanel mr-0 transform transition-all duration-300 ease-in-out"
         loading={_localState.loading}
         onConfirm={handleSubmit}
       >
         <CreateFunctionContext.Provider value={_localState}>
-          <div className="space-y-10 mt-4">
+          <div className="mt-4 space-y-10">
             {_localState.isEditing ? (
               <>
                 <SidePanel.Content>
@@ -414,7 +414,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
                 <SidePanel.Seperator />
                 <SidePanel.Content>
                   <Panel>
-                    <div className={`space-y-8 py-4 bg-bg-alt-light dark:bg-bg-alt-dark rounded`}>
+                    <div className={`space-y-8 rounded bg-bg-alt-light py-4 dark:bg-bg-alt-dark`}>
                       <div className={`px-6`}>
                         <Toggle
                           onChange={() => _localState.toggleAdvancedVisible()}
@@ -460,7 +460,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
           }}
           children={
             <Modal.Content>
-              <p className="text-scale-1100 py-4 text-sm">
+              <p className="py-4 text-sm text-scale-1100">
                 There are unsaved changes. Are you sure you want to close the panel? Your changes
                 will be lost.
               </p>
@@ -519,7 +519,7 @@ const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }
           Arguments can be referenced in the function body using either names or numbers.
         </p>
       </div>
-      <div className="pt-4 space-y-2">
+      <div className="space-y-2 pt-4">
         {readonly && isEmpty(_localState!.formState.args.value) && (
           <span className="text-scale-900">No argument for this function</span>
         )}
@@ -640,10 +640,10 @@ const InputMultiConfigParams: FC = observer(({}) => {
 
   return (
     <div>
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <h5 className="text-base text-scale-1200">Config Params</h5>
       </div>
-      <div className="pt-4 space-y-2">
+      <div className="space-y-2 pt-4">
         {_localState!.formState.configParams.value.map(
           (
             x: { name: string; value: string; error?: { name?: string; value?: string } },
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
index 9bc300c68bc..5c87a997173 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
@@ -1,14 +1,7 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
 import { includes } from 'lodash'
-import {
-  Button,
-  Dropdown,
-  IconEdit3,
-  IconFileText,
-  IconMoreVertical,
-  IconTrash,
-} from '@supabase/ui'
+import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'common2'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -100,11 +93,11 @@ const FunctionList: FC<Props> = ({
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                        'border-scale-200 border',
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         You need additional permissions to update functions
                       </span>
                     </div>
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 4cad4a76591..1f112379413 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { uniqBy, map as lodashMap, includes } from 'lodash'
-import { Button, IconSearch, IconLoader, Input } from '@supabase/ui'
+import { Button, IconSearch, IconLoader, Input } from 'common2'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -53,11 +53,11 @@ const FunctionsList: FC<any> = ({
             onClickCta={() => createFunction()}
           >
             <AlphaPreview />
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               PostgreSQL functions, also known as stored procedures, is a set of SQL and procedural
               commands such as declarations, assignments, loops, flow-of-control, etc.
             </p>
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               It's stored on the database server and can be invoked using the SQL interface.
             </p>
           </ProductEmptyState>
@@ -83,11 +83,11 @@ const FunctionsList: FC<any> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                      'border-scale-200 border',
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'border border-scale-200',
                     ].join(' ')}
                   >
-                    <span className="text-scale-1200 text-xs">
+                    <span className="text-xs text-scale-1200">
                       You need additional permissions to create functions
                     </span>
                   </div>
@@ -96,7 +96,7 @@ const FunctionsList: FC<any> = ({
             </Tooltip.Root>
           </div>
           {filteredFunctions.length <= 0 && (
-            <div className="dark:border-dark mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md">
+            <div className="mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md dark:border-dark">
               <p>No results match your filter query</p>
               <Button type="outline" onClick={() => setFilterString('')}>
                 Reset filter
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/CheckboxEvents.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/CheckboxEvents.tsx
index 5c5cc4a04c4..2eae178f666 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/CheckboxEvents.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/CheckboxEvents.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Checkbox } from '@supabase/ui'
+import { Checkbox } from 'common2'
 import { union, without } from 'lodash'
 import { CreateHookContext } from './'
 
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/InputName.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/InputName.tsx
index c815b8abe2d..5296c478eec 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/InputName.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/InputName.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { CreateHookContext } from './'
 
 const InputName: FC = observer(({}) => {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
index fad49d99d0d..512d57d2362 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/RadioHookService.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Radio, Badge } from '@supabase/ui'
+import { Radio, Badge } from 'common2'
 import { CreateHookContext } from '../'
 
 interface Props {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/index.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/index.tsx
index c4cb24dbf27..967243d823a 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/RadioGroupHookService/index.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Radio } from '@supabase/ui'
+import { Radio } from 'common2'
 
 import { CreateHookContext } from '../'
 import RadioHookService from './RadioHookService'
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/SelectEnabledMode.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/SelectEnabledMode.tsx
index f6a3ee1bfb8..289b44c0b3d 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/SelectEnabledMode.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/SelectEnabledMode.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Select } from '@supabase/ui'
+import { Select } from 'common2'
 import { CreateHookContext } from './'
 
 const SelectEnabledMode: FC = observer(({}) => {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx
index fa26a400134..3ddee629ce2 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceHeaders.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from 'common2'
 
 import { CreateHookContext } from '../'
 import InputServiceHeader from './InputServiceHeader'
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx
index f34339c0386..e97e2beb328 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputMultiServiceParams.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from 'common2'
 
 import { CreateHookContext } from '../'
 import InputServiceParam from './InputServiceParam'
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceHeader.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceHeader.tsx
index ad93fec7e8f..22ddf258aa4 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceHeader.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceHeader.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext, FormEvent } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input, IconTrash, Button } from '@supabase/ui'
+import { Input, IconTrash, Button } from 'common2'
 import { CreateHookContext } from '../'
 
 interface Props {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceParam.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceParam.tsx
index 321f53cc68f..8d544ed59be 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceParam.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceParam.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext, FormEvent } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input, IconTrash, Button } from '@supabase/ui'
+import { Input, IconTrash, Button } from 'common2'
 import { CreateHookContext } from '../'
 
 interface Props {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceTimeout.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceTimeout.tsx
index 587f7399c73..1d4b0c14bd7 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceTimeout.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceTimeout.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { CreateHookContext } from '../'
 
 // Not used currently
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceUrl.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceUrl.tsx
index 2965f03b5c9..7721395459c 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceUrl.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/InputServiceUrl.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { CreateHookContext } from '../'
 
 const InputServiceUrl: FC = observer(({}) => {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/SelectServiceMethod.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/SelectServiceMethod.tsx
index 815902818b3..03929571328 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/SelectServiceMethod.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/SelectServiceMethod.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Select } from '@supabase/ui'
+import { Select } from 'common2'
 import { CreateHookContext } from '../'
 
 const SelectServiceMethod: FC = observer(({}) => {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/ServiceUnavailableBox.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/ServiceUnavailableBox.tsx
index fef98c9b289..197070c5e8f 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/ServiceUnavailableBox.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/ServiceUnavailableBox.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Alert, Button } from '@supabase/ui'
+import { Alert, Button } from 'common2'
 import { CreateHookContext } from '../'
 
 const ServiceUnavailableBox: FC = observer(({}) => {
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
index ec5a3d5d7f4..0b8653682d5 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/ServiceConfigForm/index.tsx
@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { SidePanel } from '@supabase/ui'
+import { SidePanel } from 'common2'
 
 import { CreateHookContext } from '../'
 import SelectServiceMethod from './SelectServiceMethod'
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
index 8e7e4da4258..5fc5383121c 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/TableSelection.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import SVG from 'react-inlinesvg'
 import { FC, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Input, Listbox } from '@supabase/ui'
+import { Input, Listbox } from 'common2'
 
 import { CreateHookContext } from './'
 import { useStore } from 'hooks'
@@ -71,7 +71,7 @@ const TableSelection: FC = observer(({}) => {
             value={x.id}
             label={x.name}
             addOnBefore={() => (
-              <div className="bg-scale-1200 text-scale-100 flex items-center justify-center rounded p-1 ">
+              <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
                   src={'/img/table-editor.svg'}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
diff --git a/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx b/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
index 1821fdaa2d7..05721c35b19 100644
--- a/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
+++ b/studio/components/interfaces/Database/Hooks/CreateHook/index.tsx
@@ -3,7 +3,7 @@ import { FC, useEffect, createContext } from 'react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { isEmpty, mapValues, has, filter, keyBy, isUndefined } from 'lodash'
 import { Dictionary } from 'components/grid'
-import { Badge, Input, SidePanel } from '@supabase/ui'
+import { Badge, Input, SidePanel } from 'common2'
 import { useStore } from 'hooks'
 
 import InputName from './InputName'
@@ -415,7 +415,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Headers</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Headers</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -450,7 +450,7 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
                   <SidePanel.Seperator />
                   <div className="space-y-2 px-6">
                     <div className="flex items-center space-x-2">
-                      <h5 className="text-scale-1200 text-base">HTTP Parameters</h5>
+                      <h5 className="text-base text-scale-1200">HTTP Parameters</h5>
                       <Badge color="gray">Read only</Badge>
                     </div>
                     <div className="space-y-2">
@@ -487,13 +487,13 @@ const CreateHook: FC<CreateHookProps> = ({ hook, visible = true, setVisible }) =
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Conditions to fire hook</h5>
+                <h5 className="text-base text-scale-1200">Conditions to fire hook</h5>
                 <TableSelection />
                 <CheckboxEvents />
               </div>
               <SidePanel.Seperator />
               <div className="space-y-6 px-6">
-                <h5 className="text-scale-1200 text-base">Type of hook</h5>
+                <h5 className="text-base text-scale-1200">Type of hook</h5>
                 <RadioGroupHookService />
               </div>
               <ServiceConfigForm />
diff --git a/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx b/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
index 726fa3e0206..e7d937c47ae 100644
--- a/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
+++ b/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
@@ -3,7 +3,7 @@ import { includes } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from '@supabase/ui'
+import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'common2'
 
 import { checkPermissions, useStore } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
@@ -89,11 +89,11 @@ const HookList: FC<Props> = ({
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                        'border-scale-200 border',
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         You need additional permissions to update webhooks
                       </span>
                     </div>
diff --git a/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx b/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
index 3f3ef740909..4e725b5844f 100644
--- a/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
+++ b/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { includes, uniqBy, map as lodashMap } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Input, IconSearch, IconLoader } from '@supabase/ui'
+import { Button, Input, IconSearch, IconLoader } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -38,7 +38,7 @@ const HooksList: FC<any> = ({
     return (
       <>
         {schemas.length === 0 ? (
-          <span className="text-scale-1100 px-6 py-4">Checking if hooks are enabled...</span>
+          <span className="px-6 py-4 text-scale-1100">Checking if hooks are enabled...</span>
         ) : (
           <ProductEmptyState
             title="Hooks"
@@ -48,7 +48,7 @@ const HooksList: FC<any> = ({
             disabledMessage="You need additional permissions to enable hooks"
           >
             <AlphaPreview />
-            <p className="text-scale-1100 text-sm">Enable hooks on your project.</p>
+            <p className="text-sm text-scale-1100">Enable hooks on your project.</p>
           </ProductEmptyState>
         )}
       </>
@@ -85,7 +85,7 @@ const HooksList: FC<any> = ({
             disabledMessage="You need additional permissions to create webhooks"
           >
             <AlphaPreview />
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               Database Webhooks can be used to trigger serverless functions or send requests to an
               HTTP endpoint.
             </p>
@@ -112,11 +112,11 @@ const HooksList: FC<any> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                      'border-scale-200 border',
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'border border-scale-200',
                     ].join(' ')}
                   >
-                    <span className="text-scale-1200 text-xs">
+                    <span className="text-xs text-scale-1200">
                       You need additional permissions to create webhooks
                     </span>
                   </div>
@@ -125,7 +125,7 @@ const HooksList: FC<any> = ({
             </Tooltip.Root>
           </div>
           {filteredHooks.length <= 0 && (
-            <div className="dark:border-dark mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md">
+            <div className="mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md dark:border-dark">
               <p>No results match your filter query</p>
               <Button type="outline" onClick={() => setFilterString('')}>
                 Reset filter
diff --git a/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx b/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
index ef848d3768b..6440e815158 100644
--- a/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
+++ b/studio/components/interfaces/Database/Pooling/ConnectionPooling.tsx
@@ -10,7 +10,7 @@ import { API_URL } from 'lib/constants'
 import { patch } from 'lib/common/fetch'
 import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 
 interface Props {}
 
@@ -184,7 +184,7 @@ export const PgbouncerConfig: FC<ConfigProps> = observer(
                 showInlineError
                 errorMessage="You must select one of the three options"
               />
-              <div className="flex !mt-1" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
+              <div className="!mt-1 flex" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
                 <p className="text-sm text-scale-900">
                   Specify when a connection can be returned to the pool. To find out the most
                   suitable mode for your use case,{' '}
diff --git a/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/studio/components/interfaces/Database/Publications/PublicationsList.tsx
index 5ae98f38a9a..328af63fded 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsList.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Input, Toggle, IconSearch, IconAlertCircle } from '@supabase/ui'
+import { Button, Input, Toggle, IconSearch, IconAlertCircle } from 'common2'
 
 import { checkPermissions, useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
diff --git a/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx b/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
index c82314add31..86e0bdc5d06 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, Toggle } from '@supabase/ui'
+import { Badge, Toggle } from 'common2'
 import { PostgresPublication, PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
diff --git a/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
index 98719934ca4..b8df17011a1 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from '@supabase/ui'
+import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from 'common2'
 import { PostgresPublication } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
diff --git a/studio/components/interfaces/Database/Roles/RolesList.tsx b/studio/components/interfaces/Database/Roles/RolesList.tsx
index d10f15edf9f..e641818cc53 100644
--- a/studio/components/interfaces/Database/Roles/RolesList.tsx
+++ b/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from 'common2'
 
 import { useStore } from 'hooks'
 import SparkBar from 'components/ui/SparkBar'
diff --git a/studio/components/interfaces/Database/Roles/RolesSettings.tsx b/studio/components/interfaces/Database/Roles/RolesSettings.tsx
index 61691179fc6..5d960a23ab1 100644
--- a/studio/components/interfaces/Database/Roles/RolesSettings.tsx
+++ b/studio/components/interfaces/Database/Roles/RolesSettings.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconChevronLeft } from '@supabase/ui'
+import { Button, IconChevronLeft } from 'common2'
 import Divider from 'components/ui/Divider'
 
 import Panel from 'components/ui/Panel'
@@ -15,8 +15,8 @@ const RolesSettings: FC<Props> = ({ selectedRole, onSelectBack = () => {} }) =>
     <>
       <div className="mb-8">
         <div className="">
-          <nav className="flex -mb-px">
-            <div className="group inline-flex items-center p-1 mr-4 ">
+          <nav className="-mb-px flex">
+            <div className="group mr-4 inline-flex items-center p-1 ">
               <Button
                 type="outline"
                 onClick={() => onSelectBack()}
@@ -27,8 +27,8 @@ const RolesSettings: FC<Props> = ({ selectedRole, onSelectBack = () => {} }) =>
             <a
               href="#"
               className="
-              text-typography-body-strong-light dark:text-typography-body-strong-dark
-              mx-4 group inline-flex items-center p-1 border-b-2 border-green-500 font-medium text-sm focus:outline-none "
+              group mx-4
+              inline-flex items-center border-b-2 border-green-500 p-1 text-sm font-medium text-typography-body-strong-light focus:outline-none dark:text-typography-body-strong-dark "
               aria-current="page"
             >
               <span>Permissions</span>
@@ -38,29 +38,29 @@ const RolesSettings: FC<Props> = ({ selectedRole, onSelectBack = () => {} }) =>
       </div>
 
       <Panel>
-        <Panel.Content className="w-full flex justify-between items-center">
+        <Panel.Content className="flex w-full items-center justify-between">
           <p className="text-sm">Super user</p>
           <code className="text-sm">{selectedRole.is_superuser ? 'true' : 'false'}</code>
         </Panel.Content>
         <Divider light />
-        <Panel.Content className="w-full flex justify-between items-center">
+        <Panel.Content className="flex w-full items-center justify-between">
           <p className="text-sm">User can login</p>
           <code className="text-sm">{selectedRole.can_login ? 'true' : 'false'}</code>
         </Panel.Content>
         <Divider light />
-        <Panel.Content className="w-full flex justify-between items-center">
+        <Panel.Content className="flex w-full items-center justify-between">
           <p className="text-sm">User can create databases</p>
           <code className="text-sm">{selectedRole.can_create_db ? 'true' : 'false'}</code>
         </Panel.Content>
         <Divider light />
-        <Panel.Content className="w-full flex justify-between items-center">
+        <Panel.Content className="flex w-full items-center justify-between">
           <p className="text-sm">
             User can initiate streaming replication and put the system in and out of backup mode
           </p>
           <code className="text-sm">{selectedRole.is_replication_role ? 'true' : 'false'}</code>
         </Panel.Content>
         <Divider light />
-        <Panel.Content className="w-full flex justify-between items-center">
+        <Panel.Content className="flex w-full items-center justify-between">
           <p className="text-sm">User bypasses every row level security policy</p>
           <code className="text-sm">{selectedRole.can_bypass_rls ? 'true' : 'false'}</code>
         </Panel.Content>
diff --git a/studio/components/interfaces/Database/Tables/ColumnList.tsx b/studio/components/interfaces/Database/Tables/ColumnList.tsx
index 83b62b42089..5f280fadc2e 100644
--- a/studio/components/interfaces/Database/Tables/ColumnList.tsx
+++ b/studio/components/interfaces/Database/Tables/ColumnList.tsx
@@ -1,14 +1,6 @@
 import { FC, ReactNode, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import {
-  Input,
-  Button,
-  IconSearch,
-  IconPlus,
-  IconChevronLeft,
-  IconEdit3,
-  IconTrash,
-} from '@supabase/ui'
+import { Input, Button, IconSearch, IconPlus, IconChevronLeft, IconEdit3, IconTrash } from 'common2'
 
 import Table from '../../../to-be-cleaned/Table'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
@@ -70,7 +62,7 @@ const ColumnList: FC<{
           filterString={filterString}
           setFilterString={setFilterString}
           leftComponents={
-            <div className="flex items-center mr-4">
+            <div className="mr-4 flex items-center">
               <Button
                 type="outline"
                 className="mr-4"
diff --git a/studio/components/interfaces/Database/Tables/TableList.tsx b/studio/components/interfaces/Database/Tables/TableList.tsx
index 1edbc0f357a..69d90889b14 100644
--- a/studio/components/interfaces/Database/Tables/TableList.tsx
+++ b/studio/components/interfaces/Database/Tables/TableList.tsx
@@ -1,14 +1,6 @@
 import { FC, ReactNode, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import {
-  Button,
-  IconPlus,
-  Input,
-  IconSearch,
-  IconTrash,
-  IconEdit3,
-  IconColumns,
-} from '@supabase/ui'
+import { Button, IconPlus, Input, IconSearch, IconTrash, IconEdit3, IconColumns } from 'common2'
 
 import { useStore } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx b/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
index dd42f715384..d23f8a3815e 100644
--- a/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
+++ b/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { uniqBy, map as lodashMap } from 'lodash'
 import { Transition } from '@headlessui/react'
-import { Button, IconChevronDown, IconHelpCircle, IconTerminal, SidePanel } from '@supabase/ui'
+import { Button, IconChevronDown, IconHelpCircle, IconTerminal, SidePanel } from 'common2'
 import { Dictionary } from 'components/grid'
 import SqlEditor from 'components/ui/SqlEditor'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
@@ -127,11 +127,11 @@ const SchemaFunctionGroup: FC<SchemaFunctionGroupProps> = observer(({ schema, se
   const _functions = _pageState!.triggerFunctions.filter((x) => x.schema == schema)
   return (
     <div className="space-y-4">
-      <div className="sticky top-0 backdrop-filter backdrop-blur px-6 flex items-center space-x-1">
+      <div className="sticky top-0 flex items-center space-x-1 px-6 backdrop-blur backdrop-filter">
         <h5 className="text-scale-1000">schema</h5>
         <h5>{schema}</h5>
       </div>
-      <div className="space-y-0 divide-y dark:divide-dark border-t border-b dark:border-dark">
+      <div className="space-y-0 divide-y border-t border-b dark:divide-dark dark:border-dark">
         {_functions.map((x) => (
           <Function
             id={x.id}
@@ -157,12 +157,12 @@ const Function: FC<FunctionProps> = ({ id, completeStatement, name, onClick }) =
   const [visible, setVisible] = useState(false)
   return (
     <div
-      className="hover:bg-bg-alt-light dark:hover:bg-bg-alt-dark rounded p-3 px-6 cursor-pointer"
+      className="cursor-pointer rounded p-3 px-6 hover:bg-bg-alt-light dark:hover:bg-bg-alt-dark"
       onClick={() => onClick(id)}
     >
-      <div className="flex items-center space-x-3 justify-between">
+      <div className="flex items-center justify-between space-x-3">
         <div className="flex items-center space-x-3">
-          <div className="bg-scale-1200 p-1 flex items-center justify-center rounded text-scale-100 ">
+          <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
             <IconTerminal strokeWidth={2} size={14} />
           </div>
           <h5 className="mb-0">{name}</h5>
@@ -174,7 +174,7 @@ const Function: FC<FunctionProps> = ({ id, completeStatement, name, onClick }) =
             setVisible(!visible)
           }}
           icon={
-            <IconChevronDown className={visible ? 'transform rotate-0' : 'transform rotate-180'} />
+            <IconChevronDown className={visible ? 'rotate-0 transform' : 'rotate-180 transform'} />
           }
         >
           {visible ? 'Hide definition' : 'View definition'}
@@ -189,7 +189,7 @@ const Function: FC<FunctionProps> = ({ id, completeStatement, name, onClick }) =
         leaveFrom="transform opacity-100"
         leaveTo="transform opacity-0"
       >
-        <div className="h-64 mt-4 border dark:border-dark">
+        <div className="mt-4 h-64 border dark:border-dark">
           <SqlEditor defaultValue={completeStatement} readOnly={true} contextmenu={false} />
         </div>
       </Transition>
diff --git a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
index e56d520c6a0..566e8cdbcb6 100644
--- a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
+++ b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -12,7 +12,7 @@ import {
   IconTerminal,
   Badge,
   Button,
-} from '@supabase/ui'
+} from 'common2'
 import { Dictionary } from 'components/grid'
 import { useRouter } from 'next/router'
 import SVG from 'react-inlinesvg'
@@ -330,8 +330,8 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
         hideFooter={!hasPublicTables}
         className={
           _localState.chooseFunctionFormVisible
-            ? 'hooks-sidepanel transform transition-all duration-300 ease-in-out mr-16'
-            : 'hooks-sidepanel transform transition-all duration-300 ease-in-out mr-0'
+            ? 'hooks-sidepanel mr-16 transform transition-all duration-300 ease-in-out'
+            : 'hooks-sidepanel mr-0 transform transition-all duration-300 ease-in-out'
         }
         loading={_localState.loading}
         onConfirm={handleSubmit}
@@ -339,9 +339,9 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
         {hasPublicTables ? (
           <div className="">
             <CreateTriggerContext.Provider value={_localState}>
-              <div className="space-y-10 my-6">
+              <div className="my-6 space-y-10">
                 {_localState.isEditing ? (
-                  <div className="px-6 space-y-6">
+                  <div className="space-y-6 px-6">
                     <InputName />
                     <SelectEnabledMode />
                   </div>
@@ -351,7 +351,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
                       <InputName />
                     </div>
                     <SidePanel.Seperator />
-                    <div className="px-6 space-y-12">
+                    <div className="space-y-12 px-6">
                       <h5>Conditions to fire trigger</h5>
                       <ListboxTable />
                       <CheckboxEvents />
@@ -423,54 +423,54 @@ const SelectEnabledMode: FC = observer(({}) => {
       <Listbox.Option
         addOnBefore={({ active, selected }: any) => {
           return (
-            <div className="bg-green-900 border border-green-700 shadow-sm w-3 h-3 rounded-full"></div>
+            <div className="h-3 w-3 rounded-full border border-green-700 bg-green-900 shadow-sm"></div>
           )
         }}
         value="ORIGIN"
         label="Origin"
       >
         Origin
-        <span className="text-scale-900 block">This is a default behaviour</span>
+        <span className="block text-scale-900">This is a default behaviour</span>
       </Listbox.Option>
       <Listbox.Option
         addOnBefore={({ active, selected }: any) => {
           return (
-            <div className="bg-green-900 border border-green-700 shadow-sm w-3 h-3 rounded-full"></div>
+            <div className="h-3 w-3 rounded-full border border-green-700 bg-green-900 shadow-sm"></div>
           )
         }}
         value="REPLICA"
         label="Replica"
       >
         Replica
-        <span className="text-scale-900 block">
+        <span className="block text-scale-900">
           Will only fire if the session is in “replica” mode
         </span>
       </Listbox.Option>
       <Listbox.Option
         addOnBefore={({ active, selected }: any) => {
           return (
-            <div className="bg-green-900 border border-green-700 shadow-sm w-3 h-3 rounded-full"></div>
+            <div className="h-3 w-3 rounded-full border border-green-700 bg-green-900 shadow-sm"></div>
           )
         }}
         value="ALWAYS"
         label="Always"
       >
         Always
-        <span className="text-scale-900 block">
+        <span className="block text-scale-900">
           Will fire regardless of the current replication role
         </span>
       </Listbox.Option>
       <Listbox.Option
         addOnBefore={({ active, selected }: any) => {
           return (
-            <div className="bg-red-900 border border-red-700 shadow-sm w-3 h-3 rounded-full"></div>
+            <div className="h-3 w-3 rounded-full border border-red-700 bg-red-900 shadow-sm"></div>
           )
         }}
         value="DISABLED"
         label="Disabled"
       >
         Disabled
-        <span className="text-scale-900 block">Will not fire</span>
+        <span className="block text-scale-900">Will not fire</span>
       </Listbox.Option>
     </Listbox>
   )
@@ -495,11 +495,11 @@ const SelectOrientation: FC = observer(({}) => {
     >
       <Listbox.Option value="ROW" label="Row">
         Row
-        <span className="text-scale-900 block">fires once for each processed row</span>
+        <span className="block text-scale-900">fires once for each processed row</span>
       </Listbox.Option>
       <Listbox.Option value="STATEMENT" label="Statement">
         Statement
-        <span className="text-scale-900 block">fires once for each statement</span>
+        <span className="block text-scale-900">fires once for each statement</span>
       </Listbox.Option>
     </Listbox>
   )
@@ -543,7 +543,7 @@ const ListboxTable: FC = observer(({}) => {
             value={x.id}
             label={x.name}
             addOnBefore={() => (
-              <div className="bg-scale-1200 p-1 flex items-center justify-center rounded text-scale-100 ">
+              <div className="flex items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
                 <SVG
                   src={'/img/table-editor.svg'}
                   style={{ width: `16px`, height: `16px`, strokeWidth: '1px' }}
@@ -556,7 +556,7 @@ const ListboxTable: FC = observer(({}) => {
           >
             <div className="flex flex-row items-center space-x-1">
               <p>{x.name}</p>
-              <p className="text-scale-1000 text-sm">{x.schema}</p>
+              <p className="text-sm text-scale-1000">{x.schema}</p>
             </div>
           </Listbox.Option>
         )
@@ -634,14 +634,14 @@ const ListboxActivation: FC = observer(({}) => {
         value={'BEFORE'}
         label={'Before the event'}
         addOnBefore={() => (
-          <div className="bg-scale-1200  p-1 flex items-center justify-center rounded text-scale-100 ">
+          <div className="flex  items-center justify-center rounded bg-scale-1200 p-1 text-scale-100 ">
             <IconPauseCircle strokeWidth={2} size="small" />
           </div>
         )}
       >
         <div className="flex flex-col">
           <span>{'before'}</span>
-          <span className="text-scale-900 block">
+          <span className="block text-scale-900">
             Trigger fires before the operation is attempted
           </span>
         </div>
@@ -651,14 +651,14 @@ const ListboxActivation: FC = observer(({}) => {
         value={'AFTER'}
         label={'After the event'}
         addOnBefore={() => (
-          <div className="bg-green-1200  p-1 flex items-center justify-center rounded text-scale-100 ">
+          <div className="flex  items-center justify-center rounded bg-green-1200 p-1 text-scale-100 ">
             <IconPlayCircle strokeWidth={2} size="small" />
           </div>
         )}
       >
         <div className="flex flex-col">
           <span>{'after'}</span>
-          <span className="text-scale-900 block">
+          <span className="block text-scale-900">
             Trigger fires after the operation has completed
           </span>
         </div>
@@ -672,7 +672,7 @@ const FunctionForm: FC = observer(({}) => {
 
   return (
     <div className="space-y-4">
-      <div className="px-6 space-y-6">
+      <div className="space-y-6 px-6">
         <h5>Function to trigger</h5>
       </div>
       <div className="px-6">
@@ -692,16 +692,16 @@ const FunctionEmpty: FC = observer(({}) => {
     <button
       type="button"
       onClick={() => _localState!.setChooseFunctionFormVisible(true)}
-      className="w-full relative
-        transition-all
+      className="relative w-full
+        rounded
 
-        shadow-sm
-                  border bg-scale-200 dark:bg-scale-400
-                  border-scale-600
-                  rounded
-                  hover:border-scale-700
-                  hover:bg-scale-300 dark:hover:bg-scale-500
-                  px-5 py-1
+        border
+                  border-scale-600 bg-scale-200 px-5
+                  py-1
+                  shadow-sm
+                  transition-all
+                  hover:border-scale-700 hover:bg-scale-300
+                  dark:bg-scale-400 dark:hover:bg-scale-500
 
                   "
     >
@@ -722,19 +722,19 @@ const FunctionWithArguments: FC = observer(({}) => {
         className="
 
 
-              w-full
-
               relative
-              transition-shadow shadow-sm
-              border border-scale-200 dark:border-scale-500
-              rounded
+
+              flex
+              w-full items-center
+              justify-between space-x-3 rounded
+              border
 
 
-              px-5 py-4
-              flex space-x-3 items-center justify-between"
+              border-scale-200 px-5
+              py-4 shadow-sm transition-shadow dark:border-scale-500"
       >
         <div className="flex items-center gap-2">
-          <div className="flex rounded w-6 h-6 bg-scale-1200 text-scale-100 focus-within:bg-opacity-10 items-center justify-center">
+          <div className="flex h-6 w-6 items-center justify-center rounded bg-scale-1200 text-scale-100 focus-within:bg-opacity-10">
             <IconTerminal size="small" strokeWidth={2} width={14} />
           </div>
           <div className="flex items-center gap-2">
diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
index 292f5414549..9dec61657b5 100644
--- a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
+++ b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
@@ -3,7 +3,7 @@ import { includes } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from '@supabase/ui'
+import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'common2'
 
 import { useStore, checkPermissions } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
@@ -86,11 +86,11 @@ const TriggerList: FC<Props> = ({ filterString, schema, editTrigger, deleteTrigg
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                        'border-scale-200 border',
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                        'border border-scale-200',
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         You need additional permissions to update triggers
                       </span>
                     </div>
diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
index 968673f94a2..e507f45d0c4 100644
--- a/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
+++ b/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { includes, uniqBy, map as lodashMap } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Input, IconSearch, IconLoader } from '@supabase/ui'
+import { Button, Input, IconSearch, IconLoader } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -53,11 +53,11 @@ const TriggersList: FC<any> = ({
             onClickCta={() => createTrigger()}
           >
             <AlphaPreview />
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               A PostgreSQL trigger is a function invoked automatically whenever an event associated
               with a table occurs.
             </p>
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               An event could be any of the following: INSERT, UPDATE, DELETE. A trigger is a special
               user-defined function associated with a table.
             </p>
@@ -84,11 +84,11 @@ const TriggersList: FC<any> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                      'border-scale-200 border',
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                      'border border-scale-200',
                     ].join(' ')}
                   >
-                    <span className="text-scale-1200 text-xs">
+                    <span className="text-xs text-scale-1200">
                       You need additional permissions to create triggers
                     </span>
                   </div>
@@ -97,7 +97,7 @@ const TriggersList: FC<any> = ({
             </Tooltip.Root>
           </div>
           {filteredTriggers.length <= 0 && (
-            <div className="dark:border-dark mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md">
+            <div className="mx-auto flex max-w-lg items-center justify-center space-x-3 rounded border p-6 shadow-md dark:border-dark">
               <p>No results match your filter query</p>
               <Button type="outline" onClick={() => setFilterString('')}>
                 Reset filter
diff --git a/studio/components/interfaces/Functions/CommandRender.tsx b/studio/components/interfaces/Functions/CommandRender.tsx
index bd7a842cd9e..d8817f4e471 100644
--- a/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/studio/components/interfaces/Functions/CommandRender.tsx
@@ -1,4 +1,4 @@
-import { IconCheck, IconClipboard } from '@supabase/ui'
+import { IconCheck, IconClipboard } from 'common2'
 import { useState } from 'react'
 
 const CommandRender = ({ commands }: any) => {
@@ -10,7 +10,7 @@ const CommandRender = ({ commands }: any) => {
           <div key={`command-${idx}`} className="space-y-1">
             <span className="font-mono text-sm text-scale-900">{`> ${item.comment}`}</span>
             <div className="flex items-center gap-2">
-              <div className="flex gap-2 text-scale-1200 font-mono text-sm font-normal">
+              <div className="flex gap-2 font-mono text-sm font-normal text-scale-1200">
                 <span className="text-scale-900">$</span>
                 <span>
                   <span className="">{item.jsx ? item.jsx() : null} </span>
diff --git a/studio/components/interfaces/Functions/FunctionLogsItem.tsx b/studio/components/interfaces/Functions/FunctionLogsItem.tsx
index 67a18e50b1f..90c506db2d3 100644
--- a/studio/components/interfaces/Functions/FunctionLogsItem.tsx
+++ b/studio/components/interfaces/Functions/FunctionLogsItem.tsx
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, IconClipboard, IconExternalLink, IconGlobe } from '@supabase/ui'
+import { Badge, IconClipboard, IconExternalLink, IconGlobe } from 'common2'
 import Table from 'components/to-be-cleaned/Table'
 
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
@@ -23,14 +23,14 @@ const FunctionLogsItem: FC<Props> = ({ log, onClick }) => {
     <Table.tr key={log.id} onClick={onClick}>
       <Table.td className="whitespace-nowrap">
         <div className="flex items-center gap-2">
-          <div className="bg-scale-500 px-2 rounded">{log.function_status}</div>
+          <div className="rounded bg-scale-500 px-2">{log.function_status}</div>
         </div>
       </Table.td>
       <Table.td className="">
         <span className="text-xs text-scale-1100">{log.method}</span>
       </Table.td>
       <Table.td className="">
-        <span className="text-xs text-scale-1100 font-mono">{log.url}</span>
+        <span className="font-mono text-xs text-scale-1100">{log.url}</span>
       </Table.td>
       <Table.td className="">
         <span className="text-scale-1100">
diff --git a/studio/components/interfaces/Functions/FunctionsEmptyState.tsx b/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
index fc9e4c12eac..07c9e7a0a8a 100644
--- a/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
+++ b/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link'
-import { Button, IconBookOpen } from '@supabase/ui'
+import { Button, IconBookOpen } from 'common2'
 import TerminalInstructions from './TerminalInstructions'
 
 const FunctionsEmptyState = () => {
   return (
     <>
-      <div className="grid py-12 lg:grid-cols-12 gap-y-12 lg:gap-x-16 max-w-7xl">
+      <div className="grid max-w-7xl gap-y-12 py-12 lg:grid-cols-12 lg:gap-x-16">
         <div className="col-span-5 space-y-4">
           <p className="max-w-lg text-base text-scale-1200">
             Scalable functions to run your code with no server management.
diff --git a/studio/components/interfaces/Functions/FunctionsNav.tsx b/studio/components/interfaces/Functions/FunctionsNav.tsx
index 01dd022b961..62cacc1bb91 100644
--- a/studio/components/interfaces/Functions/FunctionsNav.tsx
+++ b/studio/components/interfaces/Functions/FunctionsNav.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { useRouter } from 'next/router'
 
 // @ts-ignore
diff --git a/studio/components/interfaces/Functions/TerminalInstructions.tsx b/studio/components/interfaces/Functions/TerminalInstructions.tsx
index ead46f004d5..485448de5e9 100644
--- a/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { Button, IconTerminal, IconMaximize2, IconMinimize2 } from '@supabase/ui'
+import { Button, IconTerminal, IconMaximize2, IconMinimize2 } from 'common2'
 import { useProjectSettings } from 'hooks'
 import { useAccessTokens } from 'hooks/queries/useAccessTokens'
 import { Commands } from './Functions.types'
@@ -85,13 +85,13 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
 
   return (
     <div
-      className="col-span-7 bg-scale-100 dark:bg-scale-300 shadow border rounded overflow-hidden transition-all"
+      className="col-span-7 overflow-hidden rounded border bg-scale-100 shadow transition-all dark:bg-scale-300"
       style={{ maxHeight: showInstructions ? 500 : 80 }}
     >
-      <div className="px-8 py-6 space-y-6">
+      <div className="space-y-6 px-8 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="border p-2 flex items-center justify-center w-8 h-8 bg-scale-100 rounded">
+            <div className="flex h-8 w-8 items-center justify-center rounded border bg-scale-100 p-2">
               <IconTerminal strokeWidth={2} />
             </div>
             <h4>Terminal instructions</h4>
@@ -111,7 +111,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
         </div>
       </div>
       {tokens && tokens.length === 0 ? (
-        <div className="px-8 border-t py-6 space-y-3">
+        <div className="space-y-3 border-t px-8 py-6">
           <div>
             <h3 className="text-base text-scale-1200">You may need to create an access token</h3>
             <p className="text-sm text-scale-1100">
diff --git a/studio/components/interfaces/Home/ClientLibrary.tsx b/studio/components/interfaces/Home/ClientLibrary.tsx
index 30c6836beeb..b982f7a4ee4 100644
--- a/studio/components/interfaces/Home/ClientLibrary.tsx
+++ b/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconBookOpen, IconGitHub, Button, Badge } from '@supabase/ui'
+import { IconBookOpen, IconGitHub, Button, Badge } from 'common2'
 
 interface Props {
   language: string
@@ -11,7 +11,7 @@ interface Props {
 
 const ClientLibrary: FC<Props> = ({ language, releaseState, officialSupport, docsUrl, gitUrl }) => {
   return (
-    <div className="flex space-x-6 items-start">
+    <div className="flex items-start space-x-6">
       <img
         src={`/img/libraries/${language.toLowerCase()}-icon.svg`}
         alt={`${language} logo`}
@@ -19,10 +19,10 @@ const ClientLibrary: FC<Props> = ({ language, releaseState, officialSupport, doc
       />
       <div className="space-y-4">
         <div>
-          <h5 className="text-scale-1200 text-base flex items-center gap-2">
+          <h5 className="flex items-center gap-2 text-base text-scale-1200">
             {language} {releaseState && <Badge color="yellow">{`Public ${releaseState}`}</Badge>}
           </h5>
-          <p className="text-scale-1000 text-sm">
+          <p className="text-sm text-scale-1000">
             {officialSupport
               ? 'This library is officially supported'
               : 'This library is community supported'}
diff --git a/studio/components/interfaces/Home/ExampleProject.tsx b/studio/components/interfaces/Home/ExampleProject.tsx
index 367bb0851c7..0d4d007c9f6 100644
--- a/studio/components/interfaces/Home/ExampleProject.tsx
+++ b/studio/components/interfaces/Home/ExampleProject.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from 'common2'
 import { useStore } from 'hooks'
 import Link from 'next/link'
 
@@ -20,13 +20,13 @@ const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
         <div
           className={[
             'group relative',
-            'bg-panel-header-light dark:bg-panel-header-dark  hover:bg-panel-border-light dark:hover:bg-panel-border-dark border',
-            'border-panel-border-light dark:border-panel-border-dark  hover:border-panel-border-hover-light',
-            'dark:hover:border-panel-border-hover-dark rounded-md p-4 flex flex-row h-32 hover:border-gray-300',
-            'transition ease-in-out duration-150',
+            'border bg-panel-header-light  hover:bg-panel-border-light dark:bg-panel-header-dark dark:hover:bg-panel-border-dark',
+            'border-panel-border-light hover:border-panel-border-hover-light  dark:border-panel-border-dark',
+            'flex h-32 flex-row rounded-md p-4 hover:border-gray-300 dark:hover:border-panel-border-hover-dark',
+            'transition duration-150 ease-in-out',
           ].join(' ')}
         >
-          <div className="flex flex-col mr-4">
+          <div className="mr-4 flex flex-col">
             <img
               className="transition-all group-hover:scale-110"
               src={`/img/libraries/${framework.toLowerCase()}${
@@ -37,9 +37,9 @@ const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
               height={26}
             />
           </div>
-          <div className="space-y-2 w-4/5">
+          <div className="w-4/5 space-y-2">
             <h5 className="text-scale-1200">{title}</h5>
-            <p className="text-scale-1000 text-sm">{description}</p>
+            <p className="text-sm text-scale-1000">{description}</p>
           </div>
           <div
             className="
diff --git a/studio/components/interfaces/Home/Landing.tsx b/studio/components/interfaces/Home/Landing.tsx
index c76796d0782..087ef58aec7 100644
--- a/studio/components/interfaces/Home/Landing.tsx
+++ b/studio/components/interfaces/Home/Landing.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import Head from 'next/head'
 import { observer } from 'mobx-react-lite'
-import { Button, IconGitHub } from '@supabase/ui'
+import { Button, IconGitHub } from 'common2'
 
 import { useStore } from 'hooks'
 import { auth } from 'lib/gotrue'
@@ -47,7 +47,7 @@ const Landing = () => {
           <div className="hidden items-center space-x-3 md:ml-10 md:flex md:pr-4">
             <a
               href="https://supabase.com/docs"
-              className="text-scale-1100 hover:text-scale-1200 text-sm transition-colors"
+              className="text-sm text-scale-1100 transition-colors hover:text-scale-1200"
             >
               Documentation
             </a>
@@ -62,7 +62,7 @@ const Landing = () => {
           <h1 className="text-3xl">
             Give Your Database <span className="text-brand-900">Superpowers</span>
           </h1>
-          <p className="text-scale-1100 mb-10 text-base sm:mx-auto sm:max-w-2xl md:mt-5">
+          <p className="mb-10 text-base text-scale-1100 sm:mx-auto sm:max-w-2xl md:mt-5">
             Create a backend in less than 2 minutes. Start your project with a Postgres database,
             Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.
           </p>
@@ -79,14 +79,14 @@ const Landing = () => {
           </div>
 
           <div className="sm:text-center">
-            <p className="text-scale-900 mt-8 mb-5 text-xs sm:mx-auto sm:max-w-sm">
+            <p className="mt-8 mb-5 text-xs text-scale-900 sm:mx-auto sm:max-w-sm">
               By continuing, you agree to Supabase's{' '}
               <Link href="https://supabase.com/docs/company/terms">
-                <a className="hover:text-scale-1100 underline">Terms of Service</a>
+                <a className="underline hover:text-scale-1100">Terms of Service</a>
               </Link>{' '}
               and{' '}
               <Link href="https://supabase.com/docs/company/privacy">
-                <a className="hover:text-scale-1100 underline">Privacy Policy</a>
+                <a className="underline hover:text-scale-1100">Privacy Policy</a>
               </Link>
               , and to receive periodic emails with updates.
             </p>
@@ -95,7 +95,7 @@ const Landing = () => {
           <hr className="mt-16 max-w-[75px] border-zinc-500 sm:mx-auto " />
 
           <div className="sm:text-center">
-            <p className="text-scale-900 mt-16 mb-5 text-base sm:mx-auto sm:max-w-2xl">
+            <p className="mt-16 mb-5 text-base text-scale-900 sm:mx-auto sm:max-w-2xl">
               Ready to learn about our pay-as-you-go Enterprise plan?
             </p>
             <Link href="https://supabase.com/contact/enterprise">Let's talk!</Link>
diff --git a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx
index adc87c022b1..af286c60823 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/GetStartedPanel.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Button, IconDatabase, IconKey, IconArchive } from '@supabase/ui'
+import { Button, IconDatabase, IconKey, IconArchive } from 'common2'
 import Panel from 'components/ui/Panel'
 
 interface Props {}
@@ -13,10 +13,10 @@ const GetStartedPanel: FC<Props> = ({}) => {
     <>
       <div className="flex flex-col space-y-6">
         <div>
-          <div className="flex flex-col justify-between h-full space-y-6">
+          <div className="flex h-full flex-col justify-between space-y-6">
             <div className="space-y-2">
               <h3 className="text-xl text-scale-1200">Welcome to your new project</h3>
-              <p className="lg:max-w-lg text-base text-scale-1000">
+              <p className="text-base text-scale-1000 lg:max-w-lg">
                 Your project has been deployed on its own instance, with its own url and API all set
                 up and ready to use.
               </p>
@@ -28,13 +28,13 @@ const GetStartedPanel: FC<Props> = ({}) => {
           <Panel>
             <Panel.Content className=" flex flex-col space-y-4 lg:h-40">
               <div className="flex items-center space-x-3">
-                <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                   <IconDatabase strokeWidth={2} size={16} />
                 </div>
                 <h5>Database</h5>
               </div>
               <div className="flex flex-grow">
-                <p className="text-scale-1000 text-sm">
+                <p className="text-sm text-scale-1000">
                   Supabase is built on top of Postgres, an extremely scalable Relational Database.
                 </p>
               </div>
@@ -59,13 +59,13 @@ const GetStartedPanel: FC<Props> = ({}) => {
           <Panel className="">
             <Panel.Content className=" flex flex-col space-y-4 lg:h-40">
               <div className="flex items-center space-x-3">
-                <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                   <IconKey strokeWidth={2} size={16} />
                 </div>
                 <h5>Auth</h5>
               </div>
               <div className="flex flex-grow">
-                <p className="text-scale-1000 text-sm">
+                <p className="text-sm text-scale-1000">
                   Supabase makes it simple to manage your users.
                 </p>
               </div>
@@ -85,13 +85,13 @@ const GetStartedPanel: FC<Props> = ({}) => {
           <Panel>
             <Panel.Content className=" flex flex-col space-y-4 lg:h-40">
               <div className="flex items-center space-x-3">
-                <div className="bg-scale-600 text-scale-1000 shadow-sm rounded p-1.5">
+                <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                   <IconArchive strokeWidth={2} size={16} />
                 </div>
                 <h5>Storage</h5>
               </div>
               <div className="flex flex-grow">
-                <p className="text-scale-1000 text-sm">
+                <p className="text-sm text-scale-1000">
                   Store and serve large files from multiple buckets.
                 </p>
               </div>
diff --git a/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
index 2c911c13826..80390118a2f 100644
--- a/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge, Button } from '@supabase/ui'
+import { Badge, Button } from 'common2'
 
 import { Project } from 'types'
 
@@ -15,16 +15,16 @@ const PausedProjectCard: FC<Props> = ({
   onSelectDelete = () => {},
 }) => {
   return (
-    <li className="col-span-1 flex shadow-sm rounded-md">
-      <a className="w-full col-span-3 md:col-span-1 ">
+    <li className="col-span-1 flex rounded-md shadow-sm">
+      <a className="col-span-3 w-full md:col-span-1 ">
         <div
           className={[
             'bg-panel-header-light dark:bg-panel-header-dark',
             'hover:bg-bg-alt-light dark:hover:bg-bg-alt-dark',
             'border border-border-secondary-light dark:border-border-secondary-dark',
             'hover:border-border-secondary-hover-light dark:hover:border-border-secondary-hover-dark',
-            'p-4 h-32 rounded',
-            'transition ease-in-out duration-150 flex flex-col justify-between',
+            'h-32 rounded p-4',
+            'flex flex-col justify-between transition duration-150 ease-in-out',
           ].join(' ')}
         >
           <div className="flex items-center justify-between space-x-2">
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index 9bdcf08803c..bccdeb34450 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge, IconLoader, IconPauseCircle } from '@supabase/ui'
+import { Badge, IconLoader, IconPauseCircle } from 'common2'
 
 import { Project } from 'types'
 import CardButton from 'components/ui/CardButton'
@@ -29,7 +29,7 @@ const ProjectCard: FC<Props> = ({ project, rewriteHref }) => {
         }
         footer={
           <div className="flex items-end justify-between">
-            <span className="text-scale-1000 text-sm lowercase">{desc}</span>
+            <span className="text-sm lowercase text-scale-1000">{desc}</span>
             {isRestoring ? (
               <div className="grow text-right">
                 <Badge color="brand">
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 59ff713cca6..70825ffc1b3 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Button, IconPlus } from '@supabase/ui'
+import { Button, IconPlus } from 'common2'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 
@@ -46,7 +46,7 @@ const ProjectList: FC<Props> = ({ rewriteHref }) => {
                   <div className="col-span-4 max-w-4xl space-y-4 rounded-lg border-2 border-dashed border-gray-300 py-8 px-6 text-center">
                     <div className="space-y-1">
                       <p>You need additional permissions to view projects from this organization</p>
-                      <p className="text-scale-1100 text-sm">
+                      <p className="text-sm text-scale-1100">
                         Contact your organization owner or adminstrator for assistance.
                       </p>
                     </div>
@@ -55,7 +55,7 @@ const ProjectList: FC<Props> = ({ rewriteHref }) => {
                   <div className="col-span-4 max-w-4xl space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
                     <div className="space-y-1">
                       <p>No projects</p>
-                      <p className="text-scale-1100 text-sm">
+                      <p className="text-sm text-scale-1100">
                         Get started by creating a new project.
                       </p>
                     </div>
diff --git a/studio/components/interfaces/Home/ProjectUsage.tsx b/studio/components/interfaces/Home/ProjectUsage.tsx
index f33f24d119e..0041fb0b990 100644
--- a/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -11,7 +11,7 @@ import {
   IconDatabase,
   IconKey,
   IconZap,
-} from '@supabase/ui'
+} from 'common2'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import Panel from 'components/ui/Panel'
 import { get } from 'lib/common/fetch'
@@ -85,7 +85,7 @@ const ProjectUsage: FC<Props> = ({}) => {
             {selectedInterval.label}
           </Button>
         </Dropdown>
-        <span className="text-scale-1000 text-xs">
+        <span className="text-xs text-scale-1000">
           Statistics for past {selectedInterval.label}
         </span>
       </div>
@@ -97,7 +97,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
+                      <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                         <IconDatabase strokeWidth={2} size={16} />
                       </div>
                     }
@@ -123,7 +123,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
+                      <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                         <IconKey strokeWidth={2} size={16} />
                       </div>
                     }
@@ -149,7 +149,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
+                      <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                         <IconArchive strokeWidth={2} size={16} />
                       </div>
                     }
@@ -175,7 +175,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                 <Panel.Content className="space-y-4">
                   <PanelHeader
                     icon={
-                      <div className="bg-scale-600 text-scale-1000 rounded p-1.5 shadow-sm">
+                      <div className="rounded bg-scale-600 p-1.5 text-scale-1000 shadow-sm">
                         <IconZap strokeWidth={2} size={16} />
                       </div>
                     }
@@ -214,7 +214,7 @@ const PanelHeader = (props: any) => {
       <div
         className={
           'flex items-center space-x-3 opacity-80 transition ' +
-          (props.href ? 'hover:text-gray-1200 cursor-pointer hover:opacity-100' : '')
+          (props.href ? 'cursor-pointer hover:text-gray-1200 hover:opacity-100' : '')
         }
       >
         <p>{props.icon}</p>
diff --git a/studio/components/interfaces/Home/ProjectUsageSection.tsx b/studio/components/interfaces/Home/ProjectUsageSection.tsx
index bdb72fd698d..4b9b2b6e472 100644
--- a/studio/components/interfaces/Home/ProjectUsageSection.tsx
+++ b/studio/components/interfaces/Home/ProjectUsageSection.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { IconLoader, IconAlertCircle } from '@supabase/ui'
+import { IconLoader, IconAlertCircle } from 'common2'
 
 import { useProjectUsage } from 'hooks'
 import { ProjectUsage, NewProjectPanel } from 'components/interfaces/Home'
@@ -32,7 +32,7 @@ const ProjectUsageSection: FC = observer(({}) => {
   return (
     <>
       {isLoading ? (
-        <div className="w-full flex justify-center items-center space-x-2">
+        <div className="flex w-full items-center justify-center space-x-2">
           <IconLoader className="animate-spin" size={14} />
           <p className="text-sm">Retrieving project usage statistics</p>
         </div>
diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
index b399b3c51b8..afb5299fb27 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { isEqual } from 'lodash'
 import { Dictionary } from 'components/grid'
-import { Form, Input, Button, Listbox } from '@supabase/ui'
+import { Form, Input, Button, Listbox } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore, useFlag } from 'hooks'
@@ -80,9 +80,9 @@ const BillingAddress: FC<Props> = ({ loading, address, onAddressUpdated }) => {
       <Panel loading={loading}>
         {loading ? (
           <div className="flex flex-col justify-between space-y-2 py-4 px-4">
-            <div className="shimmering-loader rounded py-3 mx-1 w-2/3" />
-            <div className="shimmering-loader rounded py-3 mx-1 w-1/2" />
-            <div className="shimmering-loader rounded py-3 mx-1 w-1/3" />
+            <div className="shimmering-loader mx-1 w-2/3 rounded py-3" />
+            <div className="shimmering-loader mx-1 w-1/2 rounded py-3" />
+            <div className="shimmering-loader mx-1 w-1/3 rounded py-3" />
           </div>
         ) : !canReadBillingAddress ? (
           <NoPermission resourceText="view this organization's billing address" />
diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index fdca56bc985..f907f629e43 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react'
-import { Form, Input } from '@supabase/ui'
+import { Form, Input } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useFlag, useStore, checkPermissions } from 'hooks'
 import { API_URL } from 'lib/constants'
diff --git a/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
index a973f47ad6c..f225504c851 100644
--- a/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge } from '@supabase/ui'
+import { Badge } from 'common2'
 
 interface Props {
   balance: string | number
diff --git a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
index 1da4ddffd76..5eb8967ec1d 100644
--- a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
@@ -10,7 +10,7 @@ import {
   Alert,
   IconMoreHorizontal,
   IconX,
-} from '@supabase/ui'
+} from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -117,7 +117,7 @@ const PaymentMethods: FC<Props> = ({
             loading={loading}
             footer={
               !loading && (
-                <div className="flex justify-between w-full">
+                <div className="flex w-full justify-between">
                   {!canUpdatePaymentMethods ? (
                     <p className="text-sm text-scale-1000">
                       {enablePermissions
@@ -190,11 +190,11 @@ const PaymentMethods: FC<Props> = ({
                                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                                   <div
                                     className={[
-                                      'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                                      'border-scale-200 w-48 border text-center', //border
+                                      'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                                      'w-48 border border-scale-200 text-center', //border
                                     ].join(' ')}
                                   >
-                                    <span className="text-scale-1200 text-xs">
+                                    <span className="text-xs text-scale-1200">
                                       Your default payment method cannot be deleted
                                     </span>
                                   </div>
diff --git a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
index a1231a5862a..b9590eceb8c 100644
--- a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import dayjs from 'dayjs'
 import { FC, useEffect } from 'react'
-import { IconChevronRight, IconLoader } from '@supabase/ui'
+import { IconChevronRight, IconLoader } from 'common2'
 
 import { useProjectSubscription, useStore } from 'hooks'
 import Panel from 'components/ui/Panel'
@@ -88,7 +88,7 @@ const ProjectsSummary: FC<ProjectsSummaryProps> = ({ projects }) => {
         ))}
         {projects.length === 0 && (
           <Panel.Content>
-            <p className="text-scale-1100 text-sm">No projects created yet</p>
+            <p className="text-sm text-scale-1100">No projects created yet</p>
           </Panel.Content>
         )}
       </Panel>
diff --git a/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx b/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
index e60fed693cb..d231be04b34 100644
--- a/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { isEqual } from 'lodash'
-import { Input, Button, IconPlus, Select, IconX } from '@supabase/ui'
+import { Input, Button, IconPlus, Select, IconX } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useFlag, useStore } from 'hooks'
@@ -150,7 +150,7 @@ const TaxID: FC<Props> = ({ loading, taxIds, onTaxIdsUpdated }) => {
           loading={loading}
           footer={
             !loading && (
-              <div className="flex justify-between w-full">
+              <div className="flex w-full justify-between">
                 {!canUpdateTaxIds ? (
                   <p className="text-sm text-scale-1000">
                     You need additional permissions to update this organization's tax IDs
@@ -183,9 +183,9 @@ const TaxID: FC<Props> = ({ loading, taxIds, onTaxIdsUpdated }) => {
         >
           {loading && taxIdValues.length === 0 ? (
             <div className="flex flex-col justify-between space-y-2 py-4 px-4">
-              <div className="shimmering-loader rounded py-3 mx-1 w-2/3" />
-              <div className="shimmering-loader rounded py-3 mx-1 w-1/2" />
-              <div className="shimmering-loader rounded py-3 mx-1 w-1/3" />
+              <div className="shimmering-loader mx-1 w-2/3 rounded py-3" />
+              <div className="shimmering-loader mx-1 w-1/2 rounded py-3" />
+              <div className="shimmering-loader mx-1 w-1/3 rounded py-3" />
             </div>
           ) : (
             <Panel.Content className="w-3/5 space-y-4">
@@ -230,7 +230,7 @@ const TaxID: FC<Props> = ({ loading, taxIds, onTaxIdsUpdated }) => {
               )}
               {canUpdateTaxIds && (
                 <div
-                  className="flex items-center space-x-2 opacity-50 hover:opacity-100 transition cursor-pointer"
+                  className="flex cursor-pointer items-center space-x-2 opacity-50 transition hover:opacity-100"
                   onClick={() => onAddNewTaxId()}
                 >
                   <IconPlus size={14} />
diff --git a/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx b/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
index 99540bcfc8e..c9b62a966c0 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
@@ -1,7 +1,7 @@
 import { useState, useContext } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Button, Form, Modal, Input } from '@supabase/ui'
+import { Button, Form, Modal, Input } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -74,8 +74,8 @@ const DeleteOrganizationButton = observer(() => {
         onCancel={() => setIsOpen(false)}
         header={
           <div className="flex items-baseline gap-2">
-            <h5 className="text-scale-1200 text-sm">Delete organisation</h5>
-            <span className="text-scale-900 text-xs">Are you sure?</span>
+            <h5 className="text-sm text-scale-1200">Delete organisation</h5>
+            <span className="text-xs text-scale-900">Are you sure?</span>
           </div>
         }
       >
@@ -88,7 +88,7 @@ const DeleteOrganizationButton = observer(() => {
           {({ isSubmitting }: { isSubmitting: boolean }) => (
             <div className="space-y-4 py-3">
               <Modal.Content>
-                <p className="text-scale-900 text-sm">
+                <p className="text-sm text-scale-900">
                   This action <span className="text-scale-1200">cannot</span> be undone. This will
                   permanently delete the <span className="text-scale-1200">{orgName}</span>{' '}
                   organization and remove all of its projects.
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 57cdf83b3e6..583eb05bb5e 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Form, Input } from '@supabase/ui'
+import { Form, Input } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useFlag, useStore, checkPermissions } from 'hooks'
diff --git a/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx b/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
index 29c42743142..a165ea6a344 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { Alert } from '@supabase/ui'
+import { Alert } from 'common2'
 
 import Panel from 'components/ui/Panel'
 import DeleteOrganizationButton from './DeleteOrganizationButton'
diff --git a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 4e3bfae5e66..c8f6937240f 100644
--- a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -6,7 +6,7 @@ import {
   IconDownload,
   IconChevronLeft,
   IconChevronRight,
-} from '@supabase/ui'
+} from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -101,7 +101,7 @@ const InvoicesSettings: FC<Props> = ({ organization }) => {
   }
 
   return (
-    <div className="my-4 container max-w-4xl space-y-1">
+    <div className="container my-4 max-w-4xl space-y-1">
       <Loading active={loading}>
         <Table
           head={[
@@ -138,7 +138,7 @@ const InvoicesSettings: FC<Props> = ({ organization }) => {
                         <p>{x.number}</p>
                       </Table.td>
                       <Table.td className="align-right">
-                        <div className="flex items-center space-x-2 justify-end">
+                        <div className="flex items-center justify-end space-x-2">
                           <Button
                             type="outline"
                             icon={<IconDownload />}
diff --git a/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
index 3d275e2c234..f7c42642d92 100644
--- a/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconAlertCircle } from '@supabase/ui'
+import { Button, IconAlertCircle } from 'common2'
 
 import { useStore } from 'hooks'
 import { getURL } from 'lib/helpers'
diff --git a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
index 55cd54159f2..c775ab4a1c7 100644
--- a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 import InformationBox from 'components/ui/InformationBox'
 
 interface Props {
diff --git a/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
index 9efd058275b..3a103f01097 100644
--- a/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
@@ -1,4 +1,4 @@
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 
 import { useFlag } from 'hooks'
 import InformationBox from 'components/ui/InformationBox'
diff --git a/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index c435b373109..a8b02d8ec6b 100644
--- a/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
 import { object, string } from 'yup'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Form, IconMail, Input, Modal, Select } from '@supabase/ui'
+import { Button, Form, IconMail, Input, Modal, Select } from 'common2'
 
 import { Member, User, Role } from 'types'
 import { checkPermissions, useFlag, useOrganizationDetail, useStore } from 'hooks'
@@ -108,11 +108,11 @@ const InviteMemberButton: FC<Props> = ({ user, members = [], roles = [], rolesAd
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to invite a member to this organization
               </span>
             </div>
diff --git a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index daeed272fd1..7791b4365bd 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Dropdown, IconTrash, IconMoreHorizontal } from '@supabase/ui'
+import { Button, Dropdown, IconTrash, IconMoreHorizontal } from 'common2'
 
 import { Member, Role } from 'types'
 import { useStore, useOrganizationDetail, useFlag, checkPermissions } from 'hooks'
@@ -168,11 +168,11 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                'border-scale-200 border ', //border
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                'border border-scale-200 ', //border
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to manage this team member
               </span>
             </div>
diff --git a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 615e2ca16be..9c6d7b16c36 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useState, useContext, Fragment } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, Button, Loading, Listbox, IconUser, Modal } from '@supabase/ui'
+import { Badge, Button, Loading, Listbox, IconUser, Modal } from 'common2'
 
 import { Member, Role } from 'types'
 import { useStore, useFlag, useOrganizationDetail } from 'hooks'
@@ -127,7 +127,7 @@ const MembersView = () => {
                         <div className="flex items-center space-x-4">
                           <div>
                             {x.invited_id ? (
-                              <span className="border-border-secondary-light dark:border-border-secondary-dark flex rounded-full border-2 p-2">
+                              <span className="flex rounded-full border-2 border-border-secondary-light p-2 dark:border-border-secondary-dark">
                                 <IconUser size={20} strokeWidth={2} />
                               </span>
                             ) : (
@@ -188,11 +188,11 @@ const MembersView = () => {
                                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                                     <div
                                       className={[
-                                        'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                                        'border-scale-200 border ', //border
+                                        'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                                        'border border-scale-200 ', //border
                                       ].join(' ')}
                                     >
-                                      <span className="text-scale-1200 text-xs">
+                                      <span className="text-xs text-scale-1200">
                                         Role can only be changed after the user has accepted the
                                         invite
                                       </span>
@@ -203,11 +203,11 @@ const MembersView = () => {
                                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                                     <div
                                       className={[
-                                        'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                                        'border-scale-200 border ', //border
+                                        'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                                        'border border-scale-200 ', //border
                                       ].join(' ')}
                                     >
-                                      <span className="text-scale-1200 text-xs">
+                                      <span className="text-xs text-scale-1200">
                                         You need additional permissions to manage this team member
                                       </span>
                                     </div>
@@ -262,7 +262,7 @@ const MembersView = () => {
               to{' '}
               <span className="text-scale-1200">{getRoleNameById(selectedMember?.newRoleId)}</span>
             </p>
-            <p className="text-sm text-scale-1200 mt-3">
+            <p className="mt-3 text-sm text-scale-1200">
               By changing the role of this member their permissions will change.
             </p>
           </Modal.Content>
diff --git a/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx b/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
index 094c92d7c0a..a186556801e 100644
--- a/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
@@ -1,5 +1,5 @@
 import { FC, Fragment, useState } from 'react'
-import { IconCheck, IconHelpCircle, Modal } from '@supabase/ui'
+import { IconCheck, IconHelpCircle, Modal } from 'common2'
 import { useFlag } from 'hooks'
 import { PERMISSIONS_MAPPING } from './RolesHelperModal.constants'
 
@@ -23,7 +23,7 @@ const RolesHelperModal: FC<Props> = ({}) => {
       <IconHelpCircle
         size={16}
         strokeWidth={1.5}
-        className="cursor-pointer hover:text-scale-1200 transition"
+        className="cursor-pointer transition hover:text-scale-1200"
         onClick={() => setShowModal(!showModal)}
       />
       <Modal
@@ -34,7 +34,7 @@ const RolesHelperModal: FC<Props> = ({}) => {
         header="Permissions for each role"
         onCancel={() => setShowModal(!showModal)}
       >
-        <div className="py-4 space-y-4">
+        <div className="space-y-4 py-4">
           <Modal.Content>
             <p className="text-sm">
               The following table shows the corresponding permissions for each available role in the
@@ -42,7 +42,7 @@ const RolesHelperModal: FC<Props> = ({}) => {
             </p>
           </Modal.Content>
           <Modal.Content>
-            <div className="bg-scale-400 border border-scale-500 rounded">
+            <div className="rounded border border-scale-500 bg-scale-400">
               <div className="flex items-center border-b border-scale-600">
                 <div className={permissionColumnClassName}>Permissions</div>
                 <div className={roleColumnClassName}>Owner</div>
@@ -59,13 +59,13 @@ const RolesHelperModal: FC<Props> = ({}) => {
               <div className="max-h-[425px] overflow-y-auto">
                 {PERMISSIONS_MAPPING.map((group) => (
                   <Fragment key={group.title}>
-                    <div className="flex items-center py-2 px-4 border-b border-scale-600 last:border-none">
-                      <div className="text-sm w-[100%]">{group.title}</div>
+                    <div className="flex items-center border-b border-scale-600 py-2 px-4 last:border-none">
+                      <div className="w-[100%] text-sm">{group.title}</div>
                     </div>
                     {group.actions.map((action, idx) => (
                       <div
                         key={`${group.title}-${idx}`}
-                        className="bg-scale-500 flex items-center border-b border-scale-600 last:border-none"
+                        className="flex items-center border-b border-scale-600 bg-scale-500 last:border-none"
                       >
                         <div className={permissionColumnClassName}>{action.description}</div>
                         <div className={roleColumnClassName}>
diff --git a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index 32c176e4e26..b996df6d374 100644
--- a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, IconSearch } from '@supabase/ui'
+import { Button, Input, IconSearch } from 'common2'
 
 import { useFlag, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
diff --git a/studio/components/interfaces/Reports/PresetReport.tsx b/studio/components/interfaces/Reports/PresetReport.tsx
index c0cc0e130a8..86f05df3fbb 100644
--- a/studio/components/interfaces/Reports/PresetReport.tsx
+++ b/studio/components/interfaces/Reports/PresetReport.tsx
@@ -1,4 +1,4 @@
-import { Button, IconRefreshCw } from '@supabase/ui'
+import { Button, IconRefreshCw } from 'common2'
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
 import { DatePickerToFrom } from '../Settings/Logs'
 import DatePickers from '../Settings/Logs/Logs.DatePickers'
@@ -52,7 +52,7 @@ const PresetReport: React.FC<Props> = ({ projectRef, preset }) => {
   const isLoading = statusCodes.isLoading || requestPaths.isLoading
 
   return (
-    <div className="mx-auto flex flex-col gap-4 px-5 lg:px-16 xl:px-24 1xl:px-28 2xl:px-32 py-6">
+    <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
       <h1 className="text-2xl text-scale-1200">{config.title}</h1>
       <div className="flex flex-row justify-between">
         <DatePickers
diff --git a/studio/components/interfaces/Reports/ReportWidget.tsx b/studio/components/interfaces/Reports/ReportWidget.tsx
index a792cd27582..484126a994c 100644
--- a/studio/components/interfaces/Reports/ReportWidget.tsx
+++ b/studio/components/interfaces/Reports/ReportWidget.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown, IconMoreVertical } from '@supabase/ui'
+import { Button, Dropdown, IconMoreVertical } from 'common2'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
 import Panel from 'components/ui/Panel'
 import { useRouter } from 'next/router'
@@ -20,7 +20,7 @@ const ReportWidget: React.FC<ReportWidgetProps> = (props) => {
   return (
     <Panel className={'pb-0 ' + props.className} bodyClassName="h-full" wrapWithLoading={false}>
       <Panel.Content className="space-y-4">
-        <div className="flex flex-row justify-between items-start">
+        <div className="flex flex-row items-start justify-between">
           <div className="gap-2">
             <h3>{props.title}</h3>
             <p className="text-sm text-scale-1100">{props.description}</p>
diff --git a/studio/components/interfaces/Reports/Reports.tsx b/studio/components/interfaces/Reports/Reports.tsx
index 477db308ba0..84ff22a9021 100644
--- a/studio/components/interfaces/Reports/Reports.tsx
+++ b/studio/components/interfaces/Reports/Reports.tsx
@@ -14,7 +14,7 @@ import {
   IconPlus,
   IconSave,
   IconSettings,
-} from '@supabase/ui'
+} from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore } from 'hooks'
@@ -305,7 +305,7 @@ const Reports = () => {
 
   return (
     <div className="mx-6 flex flex-col space-y-4" style={{ maxHeight: '100%' }}>
-      <h1 className="text-scale-1200 text-xl">Reports</h1>
+      <h1 className="text-xl text-scale-1200">Reports</h1>
 
       <div className="mb-4 flex items-center justify-between space-x-3">
         <div className="flex items-center space-x-3">
@@ -318,13 +318,13 @@ const Reports = () => {
 
           {startDate && endDate && (
             <div className="hidden items-center space-x-1 lg:flex ">
-              <span className="text-scale-1100 text-sm">
+              <span className="text-sm text-scale-1100">
                 {dayjs(startDate).format('MMM D, YYYY')}
               </span>
               <span className="text-scale-900">
                 <IconArrowRight size={12} />
               </span>
-              <span className="text-scale-1100 text-sm">
+              <span className="text-sm text-scale-1100">
                 {dayjs(endDate).format('MMM D, YYYY')}
               </span>
             </div>
@@ -366,11 +366,11 @@ const Reports = () => {
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     You need additional permissions to update this project's report
                   </span>
                 </div>
@@ -381,7 +381,7 @@ const Reports = () => {
       </div>
 
       {config.layout.length <= 0 ? (
-        <div className="dark:border-dark flex min-h-full items-center justify-center rounded border-2 border-dashed p-16">
+        <div className="flex min-h-full items-center justify-center rounded border-2 border-dashed p-16 dark:border-dark">
           {canUpdateReport ? (
             <Dropdown side="bottom" align="center" overlay={<MetricOptions />}>
               <Button as="span" type="default" iconRight={<IconPlus />}>
@@ -389,7 +389,7 @@ const Reports = () => {
               </Button>
             </Dropdown>
           ) : (
-            <p className="text-scale-1000 text-sm">No charts set up yet in report</p>
+            <p className="text-sm text-scale-1000">No charts set up yet in report</p>
           )}
         </div>
       ) : (
diff --git a/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx b/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx
index 5a789fba7c6..b2246404ea1 100644
--- a/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx
+++ b/studio/components/interfaces/Reports/renderers/OverviewRenderers.tsx
@@ -1,4 +1,4 @@
-import { Button, IconChevronRight } from '@supabase/ui'
+import { Button, IconChevronRight } from 'common2'
 import { jsonSyntaxHighlight } from 'components/interfaces/Settings/Logs/LogsFormatters'
 import { BarChart } from 'components/to-be-cleaned/Charts/ChartRenderer'
 import Table from 'components/to-be-cleaned/Table'
@@ -32,7 +32,7 @@ export const renderStatusCodesChart = (props: ReportWidgetProps<StatusCodesDatum
 )
 export const renderErrorRateChart = (props: ReportWidgetProps) => {
   return (
-    <div className="w-full flex flex-col">
+    <div className="flex w-full flex-col">
       <BarChart
         data={props.data}
         attribute="count"
@@ -77,7 +77,7 @@ export const renderRequestsPathsTable = (props: ReportWidgetProps<PathsDatum>) =
           : percentage > 10
           ? 'bg-yellow-200'
           : 'bg-green-100'
-      } text-xs align-top`}
+      } align-top text-xs`}
     >
       <span className="text-scale-1100">{Number(value).toFixed(1)}</span>
     </Table.td>
@@ -85,7 +85,7 @@ export const renderRequestsPathsTable = (props: ReportWidgetProps<PathsDatum>) =
   return (
     <Table
       containerClassName="max-h-72 w-full overflow-y-auto"
-      className="border border-scale-600 relative rounded"
+      className="relative rounded border border-scale-600"
       head={
         <>
           <Table.th className="sticky top-0 z-10">Path</Table.th>
@@ -113,30 +113,30 @@ export const renderRequestsPathsTable = (props: ReportWidgetProps<PathsDatum>) =
                     <Button
                       onClick={() => setShow(!show)}
                       type="text"
-                      className="w-full text-scale-1200 justify-start space-x-1 flex"
+                      className="flex w-full justify-start space-x-1 text-scale-1200"
                       icon={
                         <span className={`transition ${show ? 'rotate-90' : 'rotate-0'}`}>
                           <IconChevronRight size="tiny" />
                         </span>
                       }
                     >
-                      <div className="flex space-x-2 items-center overflow-x-none">
-                        <p className="text-scale-1200 font-mono text-xs">{row.method}</p>
-                        <p className="font-mono text-scale-1200 text-xs truncate max-w-xs ">
+                      <div className="overflow-x-none flex items-center space-x-2">
+                        <p className="font-mono text-xs text-scale-1200">{row.method}</p>
+                        <p className="max-w-xs truncate font-mono text-xs text-scale-1200 ">
                           {row.path}
                           <span className="text-scale-1000">{row.query_params}</span>
                         </p>
                       </div>
                     </Button>
                   </Table.td>
-                  <Table.td style={{ padding: '0.5rem' }} className="text-xs align-top">
+                  <Table.td style={{ padding: '0.5rem' }} className="align-top text-xs">
                     {row.count}
                   </Table.td>
                   {renderNumericCellWithColorScale(row.avg_origin_time, avgTimePercentage)}
                   {renderNumericCellWithColorScale(row.p99_time, p99TimePercentage)}
-                  <Table.td className="align-top py-1">
+                  <Table.td className="py-1 align-top">
                     <div
-                      className={`mt-1 h-2 rounded w-full bg-green-1100`}
+                      className={`mt-1 h-2 w-full rounded bg-green-1100`}
                       style={{
                         width: `${totalQueryTimePercentage}%`,
                       }}
@@ -146,13 +146,13 @@ export const renderRequestsPathsTable = (props: ReportWidgetProps<PathsDatum>) =
                 <Table.tr className="transition-all duration-500">
                   <Table.td
                     colSpan={4}
-                    className={`w-full overflow-none ${
+                    className={`overflow-none w-full ${
                       show ? 'h-auto opacity-100' : 'table-cell !h-0 !p-0 opacity-0'
                     }`}
                   >
                     <pre
-                      className={`max-w-lg text-xs syntax-highlight overflow-auto bg-scale-300 p-2 rounded  ${
-                        show ? '' : '!p-0 h-0'
+                      className={`syntax-highlight max-w-lg overflow-auto rounded bg-scale-300 p-2 text-xs  ${
+                        show ? '' : 'h-0 !p-0'
                       }`}
                     >
                       <div
diff --git a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLCard.tsx b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLCard.tsx
index c640c3fa8ac..863b1497a9d 100644
--- a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLCard.tsx
+++ b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLCard.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { IconChevronRight, IconLoader } from '@supabase/ui'
+import { IconChevronRight, IconLoader } from 'common2'
 import { SQLTemplate } from '../SQLEditor.types'
 
 interface Props {
@@ -12,12 +12,12 @@ const SQLCard: FC<Props> = ({ template }) => {
 
   return (
     <div
-      className="rounded bg-panel-header-light dark:bg-panel-header-dark transition-colors 
-      border border-panel-border-light dark:border-panel-border-dark 
-      hover:border-panel-border-hover-light dark:hover:border-panel-border-hover-dark 
-      cursor-pointer w-full"
+      className="w-full cursor-pointer rounded border 
+      border-panel-border-light bg-panel-header-light transition-colors 
+      hover:border-panel-border-hover-light dark:border-panel-border-dark 
+      dark:bg-panel-header-dark dark:hover:border-panel-border-hover-dark"
     >
-      <div className="px-6 py-3 border-b dark:border-dark flex items-center justify-between">
+      <div className="flex items-center justify-between border-b px-6 py-3 dark:border-dark">
         <h5 className="m-0">{title}</h5>
         {loading ? (
           <div className="animate-spin">
@@ -29,7 +29,7 @@ const SQLCard: FC<Props> = ({ template }) => {
           </p>
         )}
       </div>
-      <p className="px-6 py-4 capitalize-first">
+      <p className="capitalize-first px-6 py-4">
         <p className="text-scale-1000">{description}</p>
       </p>
     </div>
diff --git a/studio/components/interfaces/SQLEditor/TabSqlQuery/FavouriteButton.tsx b/studio/components/interfaces/SQLEditor/TabSqlQuery/FavouriteButton.tsx
index a1dc3e3b6a1..a54cccbde52 100644
--- a/studio/components/interfaces/SQLEditor/TabSqlQuery/FavouriteButton.tsx
+++ b/studio/components/interfaces/SQLEditor/TabSqlQuery/FavouriteButton.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { useState } from 'react'
-import { Button, IconHeart } from '@supabase/ui'
+import { Button, IconHeart } from 'common2'
 
 import { useStore } from 'hooks'
 import Telemetry from 'lib/telemetry'
diff --git a/studio/components/interfaces/SQLEditor/TabSqlQuery/SavingIndicator.tsx b/studio/components/interfaces/SQLEditor/TabSqlQuery/SavingIndicator.tsx
index eb73ba6f1ff..f1918425416 100644
--- a/studio/components/interfaces/SQLEditor/TabSqlQuery/SavingIndicator.tsx
+++ b/studio/components/interfaces/SQLEditor/TabSqlQuery/SavingIndicator.tsx
@@ -2,7 +2,7 @@ import { FC, useState, useEffect } from 'react'
 import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconAlertCircle, IconCheck, IconLoader, IconRefreshCcw } from '@supabase/ui'
+import { Button, IconAlertCircle, IconCheck, IconLoader, IconRefreshCcw } from 'common2'
 
 import { useStore, usePrevious } from 'hooks'
 import { useSqlStore } from 'localStores/sqlEditor/SqlEditorStore'
@@ -68,11 +68,11 @@ const SavingIndicator: FC<Props> = ({ updateSqlSnippet }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">Saving changes...</span>
+              <span className="text-xs text-scale-1200">Saving changes...</span>
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
@@ -89,16 +89,16 @@ const SavingIndicator: FC<Props> = ({ updateSqlSnippet }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border ',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'border border-scale-200 ',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">All changes saved</span>
+              <span className="text-xs text-scale-1200">All changes saved</span>
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
       )}
-      <span className="text-scale-1000 text-sm">
+      <span className="text-sm text-scale-1000">
         {content.savingState === 'CREATING_FAILED' && 'Failed to create'}
         {content.savingState === 'UPDATING_FAILED' && 'Failed to save'}
       </span>
diff --git a/studio/components/interfaces/SQLEditor/TabSqlQuery/SizeToggleButton.tsx b/studio/components/interfaces/SQLEditor/TabSqlQuery/SizeToggleButton.tsx
index 4ad718e90d0..e748376ec5a 100644
--- a/studio/components/interfaces/SQLEditor/TabSqlQuery/SizeToggleButton.tsx
+++ b/studio/components/interfaces/SQLEditor/TabSqlQuery/SizeToggleButton.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { useSqlStore } from 'localStores/sqlEditor/SqlEditorStore'
-import { Button, IconChevronDown, IconChevronUp } from '@supabase/ui'
+import { Button, IconChevronDown, IconChevronUp } from 'common2'
 
 const SizeToggleButton = () => {
   const sqlEditorStore: any = useSqlStore()
diff --git a/studio/components/interfaces/SQLEditor/TabSqlQuery/UtilityActions.tsx b/studio/components/interfaces/SQLEditor/TabSqlQuery/UtilityActions.tsx
index 290d3dbcbe0..801e26a758d 100644
--- a/studio/components/interfaces/SQLEditor/TabSqlQuery/UtilityActions.tsx
+++ b/studio/components/interfaces/SQLEditor/TabSqlQuery/UtilityActions.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconAlertCircle } from '@supabase/ui'
+import { Button, IconAlertCircle } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -51,11 +51,11 @@ const UtilityActions: FC<Props> = ({ updateSqlSnippet }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                'border-scale-200 border w-48',
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                'w-48 border border-scale-200',
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 Queries are not saved as you do not have sufficient permissions
               </span>
             </div>
diff --git a/studio/components/interfaces/Settings/API/JWTSettings.tsx b/studio/components/interfaces/Settings/API/JWTSettings.tsx
index d595dd1b8b7..0a586a1f61d 100644
--- a/studio/components/interfaces/Settings/API/JWTSettings.tsx
+++ b/studio/components/interfaces/Settings/API/JWTSettings.tsx
@@ -15,7 +15,7 @@ import {
   IconRefreshCw,
   IconPenTool,
   IconAlertCircle,
-} from '@supabase/ui'
+} from 'common2'
 import {
   JwtSecretUpdateError,
   JwtSecretUpdateProgress,
@@ -109,9 +109,9 @@ const JWTSettings: FC<Props> = ({}) => {
   return (
     <>
       <Panel title={<h5 className="mb-0">JWT Settings</h5>}>
-        <Panel.Content className="border-panel-border-interior-light dark:border-panel-border-interior-dark space-y-6 border-t">
+        <Panel.Content className="space-y-6 border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
           {isError ? (
-            <div className="py-8 flex items-center justify-center space-x-2">
+            <div className="flex items-center justify-center space-x-2 py-8">
               <IconAlertCircle size={16} strokeWidth={1.5} />
               <p className="text-sm text-scale-1100">Failed to retrieve JWT settings</p>
             </div>
@@ -139,7 +139,7 @@ const JWTSettings: FC<Props> = ({}) => {
                 layout="horizontal"
               />
               <div className="space-y-3">
-                <div className="dark:bg-bg-alt-dark bg-bg-alt-light dark:border-dark rounded-md border p-3 px-6 shadow-sm">
+                <div className="rounded-md border bg-bg-alt-light p-3 px-6 shadow-sm dark:border-dark dark:bg-bg-alt-dark">
                   {isUpdatingJwtSecret ? (
                     <div className="flex items-center space-x-2">
                       <IconLoader className="animate-spin" size={14} />
@@ -177,11 +177,11 @@ const JWTSettings: FC<Props> = ({}) => {
                                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                                 <div
                                   className={[
-                                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                                    'border-scale-200 border',
+                                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                                    'border border-scale-200',
                                   ].join(' ')}
                                 >
-                                  <span className="text-scale-1200 text-xs">
+                                  <span className="text-xs text-scale-1200">
                                     You need additional permissions to generate a new JWT secret
                                   </span>
                                 </div>
@@ -284,7 +284,7 @@ const JWTSettings: FC<Props> = ({}) => {
       >
         <Modal.Content>
           <div className="space-y-2 py-4">
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               Create a custom JWT secret. Make sure it is a strong combination of characters that
               cannot be guessed easily.
             </p>
diff --git a/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 09902c3e2f4..125fafb1777 100644
--- a/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -2,7 +2,7 @@ import { useContext, FC, useEffect } from 'react'
 import { indexOf } from 'lodash'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Input, Form, IconAlertCircle, InputNumber } from '@supabase/ui'
+import { Input, Form, IconAlertCircle, InputNumber } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore, useProjectPostgrestConfig } from 'hooks'
@@ -119,7 +119,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
               }
             >
               {isError ? (
-                <div className="py-8 flex items-center justify-center space-x-2">
+                <div className="flex items-center justify-center space-x-2 py-8">
                   <IconAlertCircle size={16} strokeWidth={1.5} />
                   <p className="text-sm text-scale-1100">Failed to retrieve API settings</p>
                 </div>
@@ -143,7 +143,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
                             <>
                               <IconAlertCircle strokeWidth={2} />
                               <div className="mt-2 flex flex-col text-center">
-                                <p className="text-sm align-center">
+                                <p className="align-center text-sm">
                                   No schema available to choose
                                 </p>
                                 <p className="text-xs opacity-50">
diff --git a/studio/components/interfaces/Settings/API/ServiceList.tsx b/studio/components/interfaces/Settings/API/ServiceList.tsx
index 8ef56f1d80a..18a534daf35 100644
--- a/studio/components/interfaces/Settings/API/ServiceList.tsx
+++ b/studio/components/interfaces/Settings/API/ServiceList.tsx
@@ -2,7 +2,7 @@ import useSWR from 'swr'
 import { FC, useEffect, useRef } from 'react'
 import { useRouter } from 'next/router'
 import { JwtSecretUpdateError, JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
-import { IconAlertCircle, Input } from '@supabase/ui'
+import { IconAlertCircle, Input } from 'common2'
 
 import { API_URL } from 'lib/constants'
 import { get } from 'lib/common/fetch'
@@ -69,7 +69,7 @@ const ServiceList: FC<Props> = ({ projectRef }) => {
           <Panel title={<h5 className="mb-0">Project URL</h5>}>
             <Panel.Content>
               {isError ? (
-                <div className="py-4 flex items-center justify-center space-x-2">
+                <div className="flex items-center justify-center space-x-2 py-4">
                   <IconAlertCircle size={16} strokeWidth={1.5} />
                   <p className="text-sm text-scale-1100">Failed to retrieve project URL</p>
                 </div>
diff --git a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
index 45d2d1d9c87..5aad2588e40 100644
--- a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
 import { useStore, checkPermissions, useFlag } from 'hooks'
@@ -65,11 +65,11 @@ const DeleteProjectButton: FC<Props> = ({ type = 'danger' }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                'border-scale-200 border ', //border
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                'border border-scale-200 ', //border
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to delete this project
               </span>
             </div>
diff --git a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
index f6a75ee3aa6..edb438a62e7 100644
--- a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
+++ b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Alert } from '@supabase/ui'
+import { Alert } from 'common2'
 
 import { useStore } from 'hooks'
 import Panel from 'components/ui/Panel'
diff --git a/studio/components/interfaces/Settings/General/General.tsx b/studio/components/interfaces/Settings/General/General.tsx
index b0ac84bfebd..f1a6e3107e6 100644
--- a/studio/components/interfaces/Settings/General/General.tsx
+++ b/studio/components/interfaces/Settings/General/General.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Form, Input } from '@supabase/ui'
+import { Form, Input } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions, useFlag } from 'hooks'
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/Infrastructure.tsx b/studio/components/interfaces/Settings/General/Infrastructure/Infrastructure.tsx
index 9b4adcd7b29..4a630d0e9b3 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/Infrastructure.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/Infrastructure.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { observer } from 'mobx-react-lite'
 
 import { useStore } from 'hooks'
@@ -32,7 +32,7 @@ const Infrastructure: FC<Props> = ({}) => {
               <div>
                 <p className="text-sm">Restart server</p>
                 <div className="max-w-[420px]">
-                  <p className="text-scale-1100 text-sm">
+                  <p className="text-sm text-scale-1100">
                     Your project will not be available for a few minutes.
                   </p>
                 </div>
@@ -47,7 +47,7 @@ const Infrastructure: FC<Props> = ({}) => {
                   <div>
                     <p className="text-sm">Pause project</p>
                     <div className="max-w-[420px]">
-                      <p className="text-scale-1100 text-sm">
+                      <p className="text-sm text-scale-1100">
                         Your project will not be accessible while it is paused.
                       </p>
                     </div>
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
index 255ea80ae5a..67bf73d9cc4 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconPause } from '@supabase/ui'
+import { Button, IconPause } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore, useFlag } from 'hooks'
@@ -78,11 +78,11 @@ const PauseProjectButton: FC<Props> = observer(({ projectRef, projectId }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                'border-scale-200 border ', //border
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                'border border-scale-200 ', //border
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to pause this project
               </span>
             </div>
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
index 2818bcc7707..f6081b79a78 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Dropdown, IconChevronDown } from '@supabase/ui'
+import { Button, Dropdown, IconChevronDown } from 'common2'
 
 import { Project } from 'types'
 import { useStore, checkPermissions } from 'hooks'
@@ -102,8 +102,8 @@ const RestartServerButton: FC<Props> = ({ project }) => {
                     }}
                   >
                     <div className="space-y-1">
-                      <p className="text-scale-1200 block">Fast database reboot</p>
-                      <p className="text-scale-1100 block">
+                      <p className="block text-scale-1200">Fast database reboot</p>
+                      <p className="block text-scale-1100">
                         Restarts only the database - faster but may not be able to recover from all
                         failure modes
                       </p>
@@ -126,11 +126,11 @@ const RestartServerButton: FC<Props> = ({ project }) => {
             <Tooltip.Arrow className="radix-tooltip-arrow" />
             <div
               className={[
-                'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                'border-scale-200 border ', //border
+                'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                'border border-scale-200 ', //border
               ].join(' ')}
             >
-              <span className="text-scale-1200 text-xs">
+              <span className="text-xs text-scale-1200">
                 You need additional permissions to restart this project
               </span>
             </div>
diff --git a/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index ea4388fd99e..8a978375d75 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconX, Loading } from '@supabase/ui'
+import { IconX, Loading } from 'common2'
 
 import { LogData, QueryType } from './Logs.types'
 
@@ -71,36 +71,36 @@ const LogSelection: FC<LogSelectionProps> = ({
   return (
     <div
       className={[
-        'relative h-full flex flex-col flex-grow border border-l',
+        'relative flex h-full flex-grow flex-col border border-l',
         'border-panel-border-light dark:border-panel-border-dark',
-        'bg-gray-200 overflow-y-scroll',
+        'overflow-y-scroll bg-gray-200',
       ].join(' ')}
     >
       <div
         className={
-          `overflow-y-scroll transition-all
-          bg-scale-200 absolute w-full h-full text-center flex-col gap-2 flex items-center justify-center opacity-0 ` +
-          (partialLog ? 'opacity-0 z-0' : 'opacity-100 z-10')
+          `absolute flex
+          h-full w-full flex-col items-center justify-center gap-2 overflow-y-scroll bg-scale-200 text-center opacity-0 transition-all ` +
+          (partialLog ? 'z-0 opacity-0' : 'z-10 opacity-100')
         }
       >
         <div
           className={
-            `transition-all
-          duration-500
-          delay-300
+            `flex
           w-full
-          flex
-          flex-col
-          justify-center
-          items-center
-          gap-6
           max-w-sm
-          text-center scale-95 opacity-0 ` +
-            (partialLog || isLoading ? 'mt-0 opacity-0 scale-95' : 'mt-8 opacity-100 scale-100')
+          scale-95
+          flex-col
+          items-center
+          justify-center
+          gap-6
+          text-center
+          opacity-0
+          transition-all delay-300 duration-500 ` +
+            (partialLog || isLoading ? 'mt-0 scale-95 opacity-0' : 'mt-8 scale-100 opacity-100')
           }
         >
-          <div className="relative border border-scale-600 dark:border-scale-400 w-32 h-4 rounded px-2 flex items-center">
-            <div className="h-0.5 rounded-full w-2/3 bg-scale-600 dark:bg-scale-500"></div>
+          <div className="relative flex h-4 w-32 items-center rounded border border-scale-600 px-2 dark:border-scale-400">
+            <div className="h-0.5 w-2/3 rounded-full bg-scale-600 dark:bg-scale-500"></div>
             <div className="absolute right-1 -bottom-4">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -130,19 +130,19 @@ const LogSelection: FC<LogSelectionProps> = ({
       <div
         className=" 
           relative
-          flex-grow
           h-px
+          flex-grow
           bg-scale-300
         "
       >
         <div
-          className="transition absolute cursor-pointer top-6 right-6 text-scale-900 hover:text-scale-1200"
+          className="absolute top-6 right-6 cursor-pointer text-scale-900 transition hover:text-scale-1200"
           onClick={onClose}
         >
           <IconX size={14} strokeWidth={2} />
         </div>
         {isLoading && <Connecting />}
-        <div className="bg-scale-300 py-8 flex flex-col space-y-6">
+        <div className="flex flex-col space-y-6 bg-scale-300 py-8">
           {!isLoading && <Formatter />}
         </div>
       </div>
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
index 07edb226c26..f1e8e3fb529 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@supabase/ui'
+import { Alert } from 'common2'
 import React from 'react'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import LogsDivider from '../Logs.Divider'
@@ -12,8 +12,8 @@ const DatabasePostgresSelectionRender = ({ log }: any) => {
   const DetailedRow = ({ label, value }: { label: string; value: string | React.ReactNode }) => {
     return (
       <div className="grid grid-cols-12">
-        <p className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</p>
-        <p className="text-scale-1200 text-base col-span-8 whitespace-pre-wrap">{value}</p>
+        <p className="col-span-4 whitespace-pre-wrap text-sm text-scale-900">{label}</p>
+        <p className="col-span-8 whitespace-pre-wrap text-base text-scale-1200">{value}</p>
       </div>
     )
   }
@@ -21,9 +21,9 @@ const DatabasePostgresSelectionRender = ({ log }: any) => {
   return (
     <>
       <div className={LOGS_TAILWIND_CLASSES.log_selection_x_padding}>
-        <span className="text-scale-900 text-sm col-span-4">Event message</span>
+        <span className="col-span-4 text-sm text-scale-900">Event message</span>
 
-        <div className="text-xs text-wrap font-mono text-scale-1200 mt-2  whitespace-pre-wrap overflow-x-auto">
+        <div className="text-wrap mt-2 overflow-x-auto whitespace-pre-wrap font-mono  text-xs text-scale-1200">
           {log.event_message}
         </div>
       </div>
@@ -40,8 +40,8 @@ const DatabasePostgresSelectionRender = ({ log }: any) => {
       )}
       <LogsDivider />
       <div className={LOGS_TAILWIND_CLASSES.log_selection_x_padding}>
-        <h3 className="text-lg text-scale-1200 mb-4">Metadata</h3>
-        <pre className="text-sm syntax-highlight overflow-x-auto">
+        <h3 className="mb-4 text-lg text-scale-1200">Metadata</h3>
+        <pre className="syntax-highlight overflow-x-auto text-sm">
           <div
             className="text-wrap"
             dangerouslySetInnerHTML={{
diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 9bff3ebe25a..28400a3932e 100644
--- a/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useMemo } from 'react'
-import { Alert, Button, IconEye, IconEyeOff } from '@supabase/ui'
+import { Alert, Button, IconEye, IconEyeOff } from 'common2'
 import DataGrid from '@supabase/react-data-grid'
 
 import LogSelection, { LogSelectionProps } from './LogSelection'
@@ -182,20 +182,20 @@ const LogTable = ({
   return (
     <>
       <section
-        className={'flex flex-col w-full ' + (!queryType ? 'shadow-lg' : '')}
+        className={'flex w-full flex-col ' + (!queryType ? 'shadow-lg' : '')}
         style={{ maxHeight }}
       >
         {!queryType && (
           <div>
             <div
               className="
-            w-full bg-scale-100 dark:bg-scale-300 
-            rounded-tl rounded-tr
+            flex w-full items-center 
+            justify-between rounded-tl
+            rounded-tr
             border-t
             border-l
-            border-r
-            flex items-center justify-between
-            px-5 py-2
+            border-r bg-scale-100 px-5
+            py-2 dark:bg-scale-300
       "
             >
               <div className="flex items-center gap-2">
@@ -223,11 +223,11 @@ const LogTable = ({
             </div>
           </div>
         )}
-        <div className={`flex flex-row h-full ${!queryType ? 'border-l border-r' : ''}`}>
+        <div className={`flex h-full flex-row ${!queryType ? 'border-l border-r' : ''}`}>
           <DataGrid
             style={{ height: '100%' }}
             className={`
-            flex-grow flex-1
+            flex-1 flex-grow
             ${!queryType ? 'data-grid--logs-explorer' : ' data-grid--simple-logs'} 
           `}
             rowHeight={40}
@@ -239,30 +239,30 @@ const LogTable = ({
             noRowsFallback={
               !isLoading ? (
                 <>
-                  <div className="py-4 w-full h-full flex-col space-y-12">
+                  <div className="h-full w-full flex-col space-y-12 py-4">
                     {!error && (
                       <div
-                        className={`transition-all
-                      duration-500
-                      delay-200
-                      
+                        className={`mt-16
                       flex
+                      scale-100
+                      
                       flex-col
                       items-center
+                      justify-center
                   
                       gap-6
                       text-center
-                      mt-16
-                      opacity-100 
-                      scale-100
+                      opacity-100
+                      transition-all 
+                      delay-200
                       
-                      justify-center
+                      duration-500
                     `}
                       >
                         <>
                           <div className="flex flex-col gap-1">
-                            <div className="relative border border-scale-600 border-dashed dark:border-scale-900 w-32 h-4 rounded px-2 flex items-center"></div>
-                            <div className="relative border border-scale-600 border-dashed dark:border-scale-900 w-32 h-4 rounded px-2 flex items-center">
+                            <div className="relative flex h-4 w-32 items-center rounded border border-dashed border-scale-600 px-2 dark:border-scale-900"></div>
+                            <div className="relative flex h-4 w-32 items-center rounded border border-dashed border-scale-600 px-2 dark:border-scale-900">
                               <div className="absolute right-1 -bottom-4">
                                 <svg
                                   xmlns="http://www.w3.org/2000/svg"
@@ -320,10 +320,10 @@ const LogTable = ({
             <div
               className={
                 queryType
-                  ? 'w-1/2 flex flex-col'
+                  ? 'flex w-1/2 flex-col'
                   : focusedLog
-                  ? 'w-1/2 flex flex-col'
-                  : 'w-0 hidden'
+                  ? 'flex w-1/2 flex-col'
+                  : 'hidden w-0'
               }
             >
               <LogSelection
diff --git a/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
index bda56d1bfad..7b4e69550e3 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
+++ b/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
@@ -1,4 +1,4 @@
-import { Alert, Button, Dropdown, IconClock } from '@supabase/ui'
+import { Alert, Button, Dropdown, IconClock } from 'common2'
 import { DatePicker } from 'components/ui/DatePicker'
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
diff --git a/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx b/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
index 434a9d2668d..f0461735f7f 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
+++ b/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { FC, useState } from 'react'
-import { Button, IconChevronRight, IconMaximize2, IconPlay } from '@supabase/ui'
+import { Button, IconChevronRight, IconMaximize2, IconPlay } from 'common2'
 import Table from 'components/to-be-cleaned/Table'
 import { useRouter } from 'next/router'
 import SqlSnippetCode from './Logs.SqlSnippetCode'
@@ -56,7 +56,7 @@ const SavedQueriesItem: FC<Props> = ({ item }: Props) => {
       <Table.td
         className={`${
           expand ? ' h-auto opacity-100' : 'h-0 opacity-0'
-        } transition-all expanded-row-content bg-scale-100 border-l border-r !pt-0 !pb-0`}
+        } expanded-row-content border-l border-r bg-scale-100 !pt-0 !pb-0 transition-all`}
         colSpan={5}
       >
         {expand && <SqlSnippetCode>{item.content.sql}</SqlSnippetCode>}
diff --git a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
index 4d3a92c6713..cb2397ca24a 100644
--- a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { LogQueryError } from '..'
 
 export interface ErrorRendererProps {
@@ -11,7 +11,7 @@ const DefaultErrorRenderer: React.FC<ErrorRendererProps> = ({ error }) => (
     size="tiny"
     value={typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
     borderless
-    className="font-mono w-full mt-4"
+    className="mt-4 w-full font-mono"
     copy
     rows={7}
   />
diff --git a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
index c5c8332e2d0..23c396d7acc 100644
--- a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/LogsErrorRenderers.stories.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import DefaultErrorRenderer from './DefaultErrorRenderer'
 import ResourcesExceededErrorRenderer from './ResourcesExceededErrorRenderer'
-import { Alert } from '@supabase/ui'
+import { Alert } from 'common2'
 
 export default {
   title: 'Logs',
diff --git a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
index 2d41f559137..cb454860726 100644
--- a/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/ResourcesExceededErrorRenderer.tsx
@@ -1,9 +1,9 @@
-import { Accordion, Input } from '@supabase/ui'
+import { Accordion, Input } from 'common2'
 import { ErrorRendererProps } from './DefaultErrorRenderer'
 
 const ResourcesExceededErrorRenderer: React.FC<ErrorRendererProps> = ({ error, isCustomQuery }) => (
-  <div className="text-scale-1100 flex flex-col gap-2">
-    <div className="text-sm flex flex-col gap-1">
+  <div className="flex flex-col gap-2 text-scale-1100">
+    <div className="flex flex-col gap-1 text-sm">
       <p>This query requires too much memory to be executed.</p>
       <p>
         {isCustomQuery
@@ -27,7 +27,7 @@ const ResourcesExceededErrorRenderer: React.FC<ErrorRendererProps> = ({ error, i
           size="tiny"
           value={JSON.stringify(error, null, 2)}
           borderless
-          className="font-mono w-full mt-4"
+          className="mt-4 w-full font-mono"
           copy
           rows={5}
         />
diff --git a/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx b/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
index 3825fd1817a..2d88aac6ddd 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFilterPopover.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Form, Popover } from '@supabase/ui'
+import { Button, Checkbox, Form, Popover } from 'common2'
 import React, { useState } from 'react'
 import { Filters, FilterSet } from '.'
 
@@ -49,7 +49,7 @@ const LogsFilterPopover: React.FC<Props> = ({
         >
           {({ isSubmitting }: { isSubmitting: boolean }) => (
             <>
-              <div className="py-6 space-y-4">
+              <div className="space-y-4 py-6">
                 {options.options.map((x, i: number) => (
                   <React.Fragment key={x.key}>
                     <Checkbox
@@ -65,7 +65,7 @@ const LogsFilterPopover: React.FC<Props> = ({
                   </React.Fragment>
                 ))}
               </div>
-              <div className="flex items-center justify-end gap-2 bg-scale-200 dark:bg-scale-400 py-2 px-3 border-t border-scale-400 dark:border-scale-500 ">
+              <div className="flex items-center justify-end gap-2 border-t border-scale-400 bg-scale-200 py-2 px-3 dark:border-scale-500 dark:bg-scale-400 ">
                 <Button size="tiny" type="default" onClick={handleReset} htmlType="button">
                   Clear
                 </Button>
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index 1ac89c1f5ae..e3e642d1767 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -4,7 +4,7 @@
  * for http response codes
  */
 
-import { IconAlertCircle, IconInfo } from '@supabase/ui'
+import { IconAlertCircle, IconInfo } from 'common2'
 import dayjs from 'dayjs'
 import { isUnixMicro, unixMicroToIsoTimestamp } from '.'
 
@@ -24,10 +24,10 @@ export const ResponseCodeFormatter = ({ value }: any) => {
     case '1':
     case '2':
       return (
-        <div className="flex items-center h-full">
+        <div className="flex h-full items-center">
           <div
-            className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center
-            bg-scale-500 dark:bg-scale-400 border
+            className="relative flex h-6 items-center justify-center rounded border bg-scale-500 px-2
+            py-1 text-center dark:bg-scale-400
             "
           >
             <label className="block font-mono text-sm text-scale-900">{value}</label>
@@ -38,10 +38,10 @@ export const ResponseCodeFormatter = ({ value }: any) => {
     // 5XX responses
     case '5':
       return (
-        <div className="flex items-center h-full">
+        <div className="flex h-full items-center">
           <div
-            className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center
-            bg-red-400
+            className="relative flex h-6 items-center justify-center rounded bg-red-400 px-2 py-1
+            text-center
 
             "
           >
@@ -54,10 +54,10 @@ export const ResponseCodeFormatter = ({ value }: any) => {
     case '4':
     case '3':
       return (
-        <div className="flex items-center h-full">
+        <div className="flex h-full items-center">
           <div
-            className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center
-            bg-amber-400
+            className="relative flex h-6 items-center justify-center rounded bg-amber-400 px-2 py-1
+            text-center
 
             "
           >
@@ -71,10 +71,10 @@ export const ResponseCodeFormatter = ({ value }: any) => {
     // All other responses
     default:
       return (
-        <div className="flex items-center h-full">
+        <div className="flex h-full items-center">
           <div
-            className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center
-            bg-scale-300
+            className="relative flex h-6 items-center justify-center rounded bg-scale-300 px-2 py-1
+            text-center
 
             "
           >
@@ -116,11 +116,11 @@ export const SeverityFormatter = ({
     case 'FATAL':
     case 'ERROR':
       return (
-        <div className="flex items-center h-full gap-1">
-          <div className=" p-0.5 rounded !text-red-900">
+        <div className="flex h-full items-center gap-1">
+          <div className=" rounded p-0.5 !text-red-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
-          <span className="!text-red-900 !block titlecase">{text}</span>
+          <span className="titlecase !block !text-red-900">{text}</span>
         </div>
       )
       break
@@ -129,33 +129,33 @@ export const SeverityFormatter = ({
 
     case 'DEBUG':
       return (
-        <div className="flex items-center h-full gap-1">
-          <div className=" p-0.5 rounded !text-blue-900">
+        <div className="flex h-full items-center gap-1">
+          <div className=" rounded p-0.5 !text-blue-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
-          <span className="!text-blue-900 !block titlecase">{text}</span>
+          <span className="titlecase !block !text-blue-900">{text}</span>
         </div>
       )
       break
 
     case 'LOG':
       return (
-        <div className="flex items-center h-full gap-1">
-          <div className=" p-0.5 rounded !text-blue-900">
+        <div className="flex h-full items-center gap-1">
+          <div className=" rounded p-0.5 !text-blue-900">
             <IconInfo size={14} strokeWidth={2} />
           </div>
-          <span className="!text-blue-900 !block titlecase">{text}</span>
+          <span className="titlecase !block !text-blue-900">{text}</span>
         </div>
       )
       break
 
     case 'WARNING':
       return (
-        <div className="flex items-center h-full gap-1">
-          <div className=" p-0.5 rounded !text-amber-900">
+        <div className="flex h-full items-center gap-1">
+          <div className=" rounded p-0.5 !text-amber-900">
             <IconAlertCircle size={14} strokeWidth={2} />
           </div>
-          <span className="!text-amber-900 !block titlecase">{text}</span>
+          <span className="titlecase !block !text-amber-900">{text}</span>
         </div>
       )
       break
@@ -163,8 +163,8 @@ export const SeverityFormatter = ({
     // All other responses
     default:
       return (
-        <div className="flex items-center h-full">
-          <div className="relative rounded px-2 py-1 text-center h-6 flex justify-center items-center bg-scale-300">
+        <div className="flex h-full items-center">
+          <div className="relative flex h-6 items-center justify-center rounded bg-scale-300 px-2 py-1 text-center">
             <label className="block font-mono text-sm text-scale-900">{text}</label>
           </div>
         </div>
@@ -198,7 +198,7 @@ export const TimestampLocalFormatter = ({
  */
 
 export const HeaderFormmater = ({ value }: any) => {
-  return <div className="text-scale-900 font-normal flex items-center text-xs h-full">{value}</div>
+  return <div className="flex h-full items-center text-xs font-normal text-scale-900">{value}</div>
 }
 
 /*
diff --git a/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx b/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx
index e89f59acb84..9ded6c99b68 100644
--- a/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsNavigation.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { useFlag } from 'hooks'
 import { useRouter } from 'next/router'
 
diff --git a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index 5fa9ad73775..092924c91a8 100644
--- a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { IconAlertCircle, IconRewind, Button, Card, Input } from '@supabase/ui'
+import { IconAlertCircle, IconRewind, Button, Card, Input } from 'common2'
 
 import {
   LogTable,
@@ -126,7 +126,7 @@ export const LogsPreviewer: React.FC<Props> = ({
   }
 
   return (
-    <div className="h-full flex flex-col flex-grow">
+    <div className="flex h-full flex-grow flex-col">
       <PreviewFilterPanel
         csvData={logData}
         isLoading={isLoading}
@@ -160,8 +160,8 @@ export const LogsPreviewer: React.FC<Props> = ({
         className={
           'transition-all duration-500 ' +
           (showChart && !isLoading && logData.length > 0
-            ? 'opacity-100 h-24 pt-4 mb-4'
-            : 'opacity-0 h-0')
+            ? 'mb-4 h-24 pt-4 opacity-100'
+            : 'h-0 opacity-0')
         }
       >
         <div className={condensedLayout ? 'px-4' : ''}>
@@ -179,7 +179,7 @@ export const LogsPreviewer: React.FC<Props> = ({
           )}
         </div>
       </div>
-      <div className="flex flex-col flex-grow relative pt-4">
+      <div className="relative flex flex-grow flex-col pt-4">
         <ShimmerLine active={isLoading} />
         <LoadingOpacity active={isLoading}>
           <LogTable
@@ -193,7 +193,7 @@ export const LogsPreviewer: React.FC<Props> = ({
           />
         </LoadingOpacity>
         {!error && (
-          <div className="p-2 flex flex-row justify-between">
+          <div className="flex flex-row justify-between p-2">
             <Button onClick={loadOlder} icon={<IconRewind />} type="default">
               Load older
             </Button>
@@ -201,8 +201,8 @@ export const LogsPreviewer: React.FC<Props> = ({
           </div>
         )}
         {error && (
-          <div className="flex w-full h-full justify-center items-center mx-auto">
-            <Card className="flex flex-col gap-y-2  w-2/5 bg-scale-400">
+          <div className="mx-auto flex h-full w-full items-center justify-center">
+            <Card className="flex w-2/5 flex-col  gap-y-2 bg-scale-400">
               <div className="flex flex-row gap-x-2 py-2">
                 <IconAlertCircle size={16} />
                 <p className="text-scale-1000">Sorry! An error occured when fetching data.</p>
diff --git a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index c88af9d5b15..27451a706de 100644
--- a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown, IconChevronDown, IconPlay, Badge, Popover, Alert } from '@supabase/ui'
+import { Button, Dropdown, IconChevronDown, IconPlay, Badge, Popover, Alert } from 'common2'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -52,14 +52,14 @@ const LogsQueryPanel: React.FC<Props> = ({
   return (
     <div
       className="
-  border
-  border-panel-border-light dark:border-panel-border-dark rounded rounded-bl-none rounded-br-none
-  bg-panel-header-light dark:bg-panel-header-dark
+  rounded
+  rounded-bl-none rounded-br-none border border-panel-border-light bg-panel-header-light
+  dark:border-panel-border-dark dark:bg-panel-header-dark
   
   "
     >
-      <div className="px-5 py-2 flex items-center justify-between w-full">
-        <div className="flex flex-row gap-x-4 items-center justify-between w-full">
+      <div className="flex w-full items-center justify-between px-5 py-2">
+        <div className="flex w-full flex-row items-center justify-between gap-x-4">
           <div className="flex items-center gap-2">
             <Dropdown
               side="bottom"
@@ -69,7 +69,7 @@ const LogsQueryPanel: React.FC<Props> = ({
                 .map((source) => (
                   <Dropdown.Item key={source} onClick={() => onSelectSource(source)}>
                     <div className="flex flex-col gap-1">
-                      <span className="font-mono text-scale-1100 font-bold">{source}</span>
+                      <span className="font-mono font-bold text-scale-1100">{source}</span>
                       <span className="text-scale-1100">{LOGS_SOURCE_DESCRIPTION[source]}</span>
                     </div>
                   </Dropdown.Item>
@@ -104,7 +104,7 @@ const LogsQueryPanel: React.FC<Props> = ({
             <div className="overflow-hidden">
               <div
                 className={` transition-all duration-300 ${
-                  warnings.length > 0 ? 'opacity-100' : 'invisible w-0 h-0 opacity-0'
+                  warnings.length > 0 ? 'opacity-100' : 'invisible h-0 w-0 opacity-0'
                 }`}
               >
                 <Popover
@@ -153,11 +153,11 @@ const LogsQueryPanel: React.FC<Props> = ({
                         <Tooltip.Arrow className="radix-tooltip-arrow" />
                         <div
                           className={[
-                            'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                            'border-scale-200 border',
+                            'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                            'border border-scale-200',
                           ].join(' ')}
                         >
-                          <span className="text-scale-1200 text-xs">
+                          <span className="text-xs text-scale-1200">
                             You need additional permissions to save your query
                           </span>
                         </div>
diff --git a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index 1fe51c341ab..b5b7ef3442f 100644
--- a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -7,7 +7,7 @@ import {
   IconExternalLink,
   IconEye,
   IconEyeOff,
-} from '@supabase/ui'
+} from 'common2'
 import { Filters, LogSearchCallback, LogTemplate, PREVIEWER_DATEPICKER_HELPERS } from '.'
 import { FILTER_OPTIONS, LogsTableName } from './Logs.constants'
 import LogsFilterPopover from './LogsFilterPopover'
@@ -133,7 +133,7 @@ const PreviewFilterPanel: FC<Props> = ({
               hasEdits && (
                 <button
                   onClick={() => handleInputSearch(search)}
-                  className="text-scale-1100 hover:text-scale-1200 mx-2"
+                  className="mx-2 text-scale-1100 hover:text-scale-1200"
                 >
                   {'↲'}
                 </button>
diff --git a/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx b/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
index 5d6a7532283..d6f84f1ac28 100644
--- a/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
+++ b/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
@@ -1,4 +1,4 @@
-import { Button, IconPlay } from '@supabase/ui'
+import { Button, IconPlay } from 'common2'
 import Table from 'components/to-be-cleaned/Table'
 import { useRouter } from 'next/router'
 import { LogSqlSnippets } from 'types'
@@ -15,7 +15,7 @@ const RecentQueriesItem: React.FC<Props> = ({ item }) => {
   return (
     <Table.tr key={item.sql}>
       <Table.td
-        className={`transition-all expanded-row-content bg-scale-100 border-l border-r !pt-0 !pb-0 !px-3`}
+        className={`expanded-row-content border-l border-r bg-scale-100 !px-3 !pt-0 !pb-0 transition-all`}
       >
         <SqlSnippetCode>{item.sql}</SqlSnippetCode>
       </Table.td>
diff --git a/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx b/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
index b7b7a71a90c..69c3f908823 100644
--- a/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
+++ b/studio/components/interfaces/Settings/Logs/UpgradePrompt.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import dayjs from 'dayjs'
 import { useState } from 'react'
-import { Button, IconHelpCircle, IconLoader, Modal } from '@supabase/ui'
+import { Button, IconHelpCircle, IconLoader, Modal } from 'common2'
 
 import { TIER_QUERY_LIMITS } from '.'
 import { useProjectSubscription } from 'hooks'
@@ -30,7 +30,7 @@ const UpgradePrompt: React.FC<Props> = ({ projectRef, from }) => {
       <div
         className={`flex flex-row items-center gap-3 px-2 py-1 text-xs transition-all ${
           isExceedingLimit
-            ? 'text-yellow-1100  rounded border border-yellow-700 bg-yellow-200 font-semibold'
+            ? 'rounded  border border-yellow-700 bg-yellow-200 font-semibold text-yellow-1100'
             : ''
         }`}
       >
@@ -38,7 +38,7 @@ const UpgradePrompt: React.FC<Props> = ({ projectRef, from }) => {
         <IconHelpCircle
           size={16}
           strokeWidth={1.5}
-          className="text-scale-1100 hover:text-scale-1200 cursor-pointer transition"
+          className="cursor-pointer text-scale-1100 transition hover:text-scale-1200"
           onClick={() => setShowHelperModal(true)}
         />
         {queryLimit.promptUpgrade && (
@@ -63,10 +63,10 @@ const UpgradePrompt: React.FC<Props> = ({ projectRef, from }) => {
                 project is on. The table below shows an overview of the duration for which your logs
                 will be retained for based on each plan.
               </p>
-              <div className="border-scale-600 bg-scale-500 rounded border">
+              <div className="rounded border border-scale-600 bg-scale-500">
                 <div className="flex items-center px-4 pt-2 pb-1">
-                  <p className="text-scale-1100 w-[40%] text-sm">Plan</p>
-                  <p className="text-scale-1100 w-[60%] text-sm">Retention duration</p>
+                  <p className="w-[40%] text-sm text-scale-1100">Plan</p>
+                  <p className="w-[60%] text-sm text-scale-1100">Retention duration</p>
                 </div>
                 <div className="py-1">
                   <div className="flex items-center px-4 py-1">
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.constants.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.constants.tsx
index 032653ff0de..27b25a5ec84 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.constants.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.constants.tsx
@@ -1,4 +1,4 @@
-import { IconArchive, IconDatabase, IconKey } from '@supabase/ui'
+import { IconArchive, IconDatabase, IconKey } from 'common2'
 
 export const usageBasedItems = [
   {
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
index 0350719dc31..4a68370c5c3 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react'
-import { Badge, IconAlertCircle, Loading } from '@supabase/ui'
+import { Badge, IconAlertCircle, Loading } from 'common2'
 
 import { useStore, useProjectUsage } from 'hooks'
 import { formatBytes } from 'lib/helpers'
@@ -65,7 +65,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                   'border-panel-border-light dark:border-panel-border-dark',
                 ].join(' ')}
               >
-                <table className="bg-panel-body-light dark:bg-panel-body-dark w-full">
+                <table className="w-full bg-panel-body-light dark:bg-panel-body-dark">
                   {/* Header */}
                   <thead className="bg-panel-header-light dark:bg-panel-header-dark">
                     <tr className="overflow-hidden rounded">
@@ -107,7 +107,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                         return (
                           <tr
                             key={feature.title}
-                            className="border-panel-border-light dark:border-panel-border-dark border-t"
+                            className="border-t border-panel-border-light dark:border-panel-border-dark"
                           >
                             <td className="whitespace-nowrap px-6 py-3 text-sm text-scale-1200">
                               {feature.title}
@@ -115,7 +115,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                             {ui.selectedProject?.subscription_tier !== undefined && (
                               <>
                                 {showUsageExceedMessage && (
-                                  <td className="w-1/5 whitespace-nowrap p-3 text-sm lg:table-cell hidden text-scale-1200">
+                                  <td className="hidden w-1/5 whitespace-nowrap p-3 text-sm text-scale-1200 lg:table-cell">
                                     {(usageRatio * 100).toFixed(2)} %
                                   </td>
                                 )}
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
index 1bc4a7afa03..69cc9185116 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Loading } from '@supabase/ui'
+import { Loading } from 'common2'
 
 import { useProjectSubscription, useProjectUsage } from 'hooks'
 import { formatBytes } from 'lib/helpers'
@@ -42,7 +42,7 @@ const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, filter
 
             return (
               <div key={feature.key} className="space-y-1">
-                <h5 className="text-scale-1200 text-sm">{feature.title}</h5>
+                <h5 className="text-sm text-scale-1200">{feature.title}</h5>
                 <SparkBar
                   type="horizontal"
                   barClass={`${
diff --git a/studio/components/interfaces/Support/Success.tsx b/studio/components/interfaces/Support/Success.tsx
index 3a81091e441..45eb150decf 100644
--- a/studio/components/interfaces/Support/Success.tsx
+++ b/studio/components/interfaces/Support/Success.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link'
-import { Button, IconCheckCircle } from '@supabase/ui'
+import { Button, IconCheckCircle } from 'common2'
 
 const Success = () => {
   return (
-    <div className="space-y-4 my-10 mx-32 relative">
+    <div className="relative my-10 mx-32 space-y-4">
       <div className="absolute -left-14 -top-2.5">
         <IconCheckCircle strokeWidth={2} size={24} background="brand" />
       </div>
diff --git a/studio/components/interfaces/Support/SupportForm.tsx b/studio/components/interfaces/Support/SupportForm.tsx
index 8513664b5a3..ae26f85b4ce 100644
--- a/studio/components/interfaces/Support/SupportForm.tsx
+++ b/studio/components/interfaces/Support/SupportForm.tsx
@@ -2,7 +2,7 @@ import { isUndefined } from 'lodash'
 import { useRouter } from 'next/router'
 import { useEffect, useReducer, useState, FC, ChangeEvent, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconMail, IconPlus, IconX, Input, Listbox } from '@supabase/ui'
+import { Button, IconMail, IconPlus, IconX, Input, Listbox } from 'common2'
 
 import { useStore } from 'hooks'
 import { Project } from 'types'
@@ -309,7 +309,7 @@ const SupportForm: FC<Props> = ({ setSent }) => {
           />
         </div>
 
-        <div className="px-6 text-area-text-sm">
+        <div className="text-area-text-sm px-6">
           <Input.TextArea
             label="Message"
             placeholder="Describe the issue you're facing, along with any relevant information. Please be as detailed and specific as possible."
@@ -320,10 +320,10 @@ const SupportForm: FC<Props> = ({ setSent }) => {
             error={formState.body.error}
           />
         </div>
-        <div className="px-6 space-y-4">
+        <div className="space-y-4 px-6">
           <div className="space-y-1">
-            <p className="block text-scale-1100 text-sm">Attachments</p>
-            <p className="block text-scale-1000 text-sm">
+            <p className="block text-sm text-scale-1100">Attachments</p>
+            <p className="block text-sm text-scale-1000">
               Upload up to {MAX_ATTACHMENTS} screenshots that might be relevant to the issue that
               you're facing
             </p>
@@ -343,11 +343,11 @@ const SupportForm: FC<Props> = ({ setSent }) => {
             {uploadedDataUrls.map((x: any, idx: number) => (
               <div
                 style={{ backgroundImage: `url("${x}")` }}
-                className="bg-center bg-cover bg-no-repeat h-14 w-14 rounded relative"
+                className="relative h-14 w-14 rounded bg-cover bg-center bg-no-repeat"
               >
                 <div
                   className={[
-                    'rounded-full w-4 h-4 bg-red-900 flex items-center justify-center',
+                    'flex h-4 w-4 items-center justify-center rounded-full bg-red-900',
                     'absolute -top-1 -right-1 cursor-pointer',
                   ].join(' ')}
                   onClick={() => removeUploadedFile(idx)}
@@ -359,8 +359,8 @@ const SupportForm: FC<Props> = ({ setSent }) => {
             {uploadedFiles.length < MAX_ATTACHMENTS && (
               <div
                 className={[
-                  'border border-scale-800 transition opacity-50 hover:opacity-100',
-                  'w-14 h-14 rounded flex items-center justify-center group cursor-pointer',
+                  'border border-scale-800 opacity-50 transition hover:opacity-100',
+                  'group flex h-14 w-14 cursor-pointer items-center justify-center rounded',
                 ].join(' ')}
                 onClick={() => {
                   if (uploadButtonRef.current) (uploadButtonRef.current as any).click()
diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 58347bd93be..7a162b8094d 100644
--- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { Button, IconAlertCircle, IconLock } from '@supabase/ui'
+import { Button, IconAlertCircle, IconLock } from 'common2'
 import { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta'
 
 import { useStore } from 'hooks'
@@ -15,7 +15,7 @@ const GridHeaderActions: FC<Props> = ({ table }) => {
   const policies = meta.policies.list((policy: PostgresPolicy) => policy.table_id === table.id)
 
   return (
-    <div className="space-x-3 flex items-center">
+    <div className="flex items-center space-x-3">
       <Link href={`/project/${projectRef}/auth/policies#${table.id}`}>
         <a>
           <Button
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
index 4a5df6029fb..06b9619c77d 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ActionBar.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 interface ActionBarProps {
   loading?: boolean
@@ -33,7 +33,7 @@ const ActionBar: FC<ActionBarProps> = ({
   }
 
   return (
-    <div className="border-scale-500 flex w-full justify-between space-x-3 border-t px-3 py-4">
+    <div className="flex w-full justify-between space-x-3 border-t border-scale-500 px-3 py-4">
       <Button size="small" onClick={closePanel} type="default" htmlType="button">
         {backButtonLabel}
       </Button>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnDefaultValue.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnDefaultValue.tsx
index 8c3818e61ce..bb86c8f2a9d 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnDefaultValue.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnDefaultValue.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { isNil } from 'lodash'
-import { Select } from '@supabase/ui'
+import { Select } from 'common2'
 import { PostgresType } from '@supabase/postgres-meta'
 
 import InputWithSuggestions from './InputWithSuggestions'
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index 4570eb13c90..919352f5f64 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react'
 import { isUndefined, isEmpty } from 'lodash'
 import { Dictionary } from 'components/grid'
-import { Checkbox, SidePanel, Input } from '@supabase/ui'
+import { Checkbox, SidePanel, Input } from 'common2'
 import {
   PostgresColumn,
   PostgresRelationship,
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index 7da2c4ca6c9..d9c5924f47b 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { isUndefined } from 'lodash'
-import { Button, IconArrowRight, IconLink } from '@supabase/ui'
+import { Button, IconArrowRight, IconLink } from 'common2'
 
 import { ColumnField } from '../SidePanelEditor.types'
 import InformationBox from 'components/ui/InformationBox'
@@ -88,7 +88,7 @@ const ColumnForeignKeyInformation: FC<{
       block
       icon={<IconLink />}
       title={
-        <div className="text-scale-900 flex items-center justify-between">
+        <div className="flex items-center justify-between text-scale-900">
           <div className="space-y-2">
             <span>This column has the following foreign key relation:</span>
             <div className="flex items-center space-x-2">
@@ -125,18 +125,18 @@ const ColumnForeignKeyAdded: FC<{
       block
       icon={<IconLink />}
       title={
-        <div className="text-scale-1100 flex items-center justify-between">
+        <div className="flex items-center justify-between text-scale-1100">
           <div className="space-y-2">
             <span>
               The following foreign key relation will be{' '}
               <span className="text-brand-900">added</span>:
             </span>
-            <div className="text-scale-1200 flex items-center space-x-2">
+            <div className="flex items-center space-x-2 text-scale-1200">
               <span className={`${columnName.length > 0 ? 'text-code' : ''} max-w-xs truncate`}>
                 {columnName || 'This column'}
               </span>
               <IconArrowRight size={14} strokeWidth={2} />
-              <span className="text-code max-w-xs truncate">
+              <span className="max-w-xs truncate text-code">
                 {foreignKey?.target_table_schema}.{foreignKey?.target_table_name}.
                 {foreignKey?.target_column_name}
               </span>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index c88cb1aabff..525928501b4 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { IconCalendar, IconType, IconHash, Listbox, IconToggleRight, Input } from '@supabase/ui'
+import { IconCalendar, IconType, IconHash, Listbox, IconToggleRight, Input } from 'common2'
 import { PostgresType } from '@supabase/postgres-meta'
 import { POSTGRES_DATA_TYPES, POSTGRES_DATA_TYPE_OPTIONS } from '../SidePanelEditor.constants'
 import { PostgresDataTypeOption } from '../SidePanelEditor.types'
@@ -105,7 +105,7 @@ const ColumnType: FC<Props> = ({
             value={enumType.name}
             label={enumType.name}
             addOnBefore={() => {
-              return <div className="bg-scale-1200 mx-1 h-2 w-2 rounded-full" />
+              return <div className="mx-1 h-2 w-2 rounded-full bg-scale-1200" />
             }}
           >
             <div className="flex items-center space-x-4">
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
index b73579ecfb0..c8ee0e8189f 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
@@ -6,7 +6,7 @@
 // the component over to the UI library
 
 import { FC, useEffect, useRef, useState } from 'react'
-import { Button, Dropdown, IconList, Input } from '@supabase/ui'
+import { Button, Dropdown, IconList, Input } from 'common2'
 import { Suggestion } from './ColumnEditor.types'
 
 const MAX_SUGGESTIONS = 3
@@ -95,7 +95,7 @@ const InputWithSuggestions: FC<Props> = ({
                       onClick={() => onSelectSuggestion(suggestion)}
                     >
                       <div className="text-sm">{suggestion.name}</div>
-                      <div className="text-scale-900 text-xs">{suggestion.description}</div>
+                      <div className="text-xs text-scale-900">{suggestion.description}</div>
                     </Dropdown.Item>
                   ))}
                 </>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index eecfd3dca56..7ab9059cc3b 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useState } from 'react'
 import { get, find, isEmpty, sortBy } from 'lodash'
 import { Dictionary } from 'components/grid'
-import { SidePanel, Listbox, IconHelpCircle } from '@supabase/ui'
+import { SidePanel, Listbox, IconHelpCircle } from 'common2'
 import { PostgresTable, PostgresColumn } from '@supabase/postgres-meta'
 
 import ActionBar from '../ActionBar'
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/DateTimeInput.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/DateTimeInput.tsx
index 0461c1abbf8..a8f9be4c765 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/DateTimeInput.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/DateTimeInput/DateTimeInput.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import { getColumnType } from './DateTimeInput.utils'
 import dayjs from 'dayjs'
 
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
index cf02167097e..81424267f63 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { isUndefined, includes } from 'lodash'
-import { Button, Select, Input, IconLink, IconArrowRight, IconEdit2 } from '@supabase/ui'
+import { Button, Select, Input, IconLink, IconArrowRight, IconEdit2 } from 'common2'
 
 import { RowField } from './RowEditor.types'
 import DateTimeInput from './DateTimeInput'
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownBreadCrumbs.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownBreadCrumbs.tsx
index 6c9599b1531..f7e969371da 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownBreadCrumbs.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownBreadCrumbs.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { last } from 'lodash'
-import { IconHome, IconChevronRight } from '@supabase/ui'
+import { IconHome, IconChevronRight } from 'common2'
 
 interface Props {
   breadcrumbs: string[]
@@ -16,9 +16,9 @@ const DrilldownBreadCrumbs: FC<Props> = ({ breadcrumbs = [], onSelectBreadcrumb
           <div className="flex items-center space-x-2" key={crumb}>
             <IconChevronRight size={16} strokeWidth={2} />
             {crumb === last(breadcrumbs) ? (
-              <p className="text-xs font-mono">{crumb}</p>
+              <p className="font-mono text-xs">{crumb}</p>
             ) : (
-              <p className="text-xs font-mono">
+              <p className="font-mono text-xs">
                 <div
                   className="cursor-pointer"
                   onClick={() =>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx
index 4049fc1f140..fb90c6290e0 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/DrilldownViewer/DrilldownPane.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from 'common2'
 import { isNull } from 'lodash'
 import { Dictionary } from 'components/grid'
 
@@ -14,7 +14,7 @@ const DrilldownPane: FC<Props> = ({ pane, jsonData, activeKey, onSelectKey = ()
   if (!jsonData) {
     return (
       <div className={`flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
-        <div className="py-2 px-5 flex space-x-2">
+        <div className="flex space-x-2 py-2 px-5">
           <p className="text-sm">Invalid JSON</p>
         </div>
       </div>
@@ -23,9 +23,9 @@ const DrilldownPane: FC<Props> = ({ pane, jsonData, activeKey, onSelectKey = ()
 
   if (Object.keys(jsonData).length === 0) {
     return (
-      <div className={`flex-1 max-w-[50%] ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
-        <div className="py-2 px-5 flex space-x-2">
-          <p className="opacity-50 text-sm">No data available</p>
+      <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
+        <div className="flex space-x-2 py-2 px-5">
+          <p className="text-sm opacity-50">No data available</p>
         </div>
       </div>
     )
@@ -40,28 +40,28 @@ const DrilldownPane: FC<Props> = ({ pane, jsonData, activeKey, onSelectKey = ()
   )
 
   return (
-    <div className={`flex-1 max-w-[50%] ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
+    <div className={`max-w-[50%] flex-1 ${pane === 2 ? 'border-l border-gray-500' : ''}`}>
       {keysWithChildren.map((key: string) => (
         <div
           key={key}
           className={`
               ${key === activeKey ? 'bg-gray-100 dark:bg-gray-400' : ''}
-              group flex items-center justify-between
-              cursor-pointer py-2 px-5 hover:bg-gray-100 dark:hover:bg-gray-500
+              group flex cursor-pointer items-center
+              justify-between py-2 px-5 hover:bg-gray-100 dark:hover:bg-gray-500
             `}
           onClick={() => onSelectKey(key, pane)}
         >
-          <p className="text-xs font-mono !text-blue-700 dark:!text-blue-1100">{key}</p>
+          <p className="font-mono text-xs !text-blue-700 dark:!text-blue-1100">{key}</p>
           <div className={`${key === activeKey ? 'block' : 'hidden'} group-hover:block`}>
             <IconChevronRight strokeWidth={2} size={16} />
           </div>
         </div>
       ))}
       {keysWithoutChildren.map((key: string) => (
-        <div key={key} className="py-2 px-5 flex space-x-2">
-          <p className="text-xs font-mono !text-blue-700 dark:!text-blue-1100">{key}:</p>
+        <div key={key} className="flex space-x-2 py-2 px-5">
+          <p className="font-mono text-xs !text-blue-700 dark:!text-blue-1100">{key}:</p>
           <p
-            className={`text-xs font-mono break-all ${
+            className={`break-all font-mono text-xs ${
               typeof jsonData[key] !== 'string'
                 ? '!text-green-700 dark:!text-green-1000'
                 : '!text-yellow-700 dark:!text-yellow-900'
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
index 49777e9672d..dcc59c12a0e 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
@@ -1,5 +1,5 @@
 import { FC, useState, useEffect } from 'react'
-import { SidePanel } from '@supabase/ui'
+import { SidePanel } from 'common2'
 
 import { useStore } from 'hooks'
 import JsonEditor from './JsonCodeEditor'
@@ -78,7 +78,7 @@ const JsonEdit: FC<JsonEditProps> = ({ column, jsonString, visible, closePanel,
         <SidePanel.Content>
           <div className="mt-4 flex flex-auto flex-col space-y-4">
             {view === 'edit' ? (
-              <div className="dark:border-dark h-[500px] w-full flex-grow border">
+              <div className="h-[500px] w-full flex-grow border dark:border-dark">
                 <JsonEditor onInputChange={onInputChange} defaultValue={jsonStr.toString()} />
               </div>
             ) : (
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ReferenceRowViewer.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ReferenceRowViewer.tsx
index efbf737e6f3..792e20f5771 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ReferenceRowViewer.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ReferenceRowViewer.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
-import { SidePanel, IconLoader, IconXCircle } from '@supabase/ui'
+import { SidePanel, IconLoader, IconXCircle } from 'common2'
 import { PostgresRelationship } from '@supabase/postgres-meta'
 
 import ActionBar from '../ActionBar'
@@ -51,12 +51,12 @@ const ReferenceRowViewer: FC<Props> = ({ visible, referenceRow, closePanel }) =>
           {loading ? (
             <div className="flex h-full flex-col items-center justify-center space-y-2">
               <IconLoader className="animate-spin" />
-              <p className="text-scale-1100 text-sm">Loading reference row</p>
+              <p className="text-sm text-scale-1100">Loading reference row</p>
             </div>
           ) : !row ? (
             <div className="flex h-full flex-col items-center justify-center space-y-2">
               <IconXCircle />
-              <p className="text-scale-1100 text-sm">
+              <p className="text-sm text-scale-1100">
                 Unable to find the corresponding row in {foreignKey?.target_table_schema}.
                 {foreignKey?.target_table_name}
               </p>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
index 5b3bfb9d459..d31d3523830 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { isUndefined, partition, isEmpty } from 'lodash'
-import { SidePanel } from '@supabase/ui'
+import { SidePanel } from 'common2'
 import { Dictionary } from 'components/grid'
 import { Query } from 'components/grid/query/Query'
 import { PostgresTable } from '@supabase/postgres-meta'
@@ -188,8 +188,8 @@ const RowEditor: FC<Props> = ({
                 <SidePanel.Content>
                   <div className="space-y-10 py-6">
                     <div>
-                      <h3 className="text-scale-1200 text-base">Optional Fields</h3>
-                      <p className="text-scale-900 text-sm">
+                      <h3 className="text-base text-scale-1200">Optional Fields</h3>
+                      <p className="text-sm text-scale-900">
                         These are columns that do not need any value
                       </p>
                     </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
index 8664cbfb1c3..7e7525128c6 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from 'react'
 import { find, isEmpty, isUndefined } from 'lodash'
 import { Query, Dictionary } from 'components/grid'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 import {
   PostgresRelationship,
   PostgresTable,
@@ -289,7 +289,7 @@ const SidePanelEditor: FC<Props> = ({
         }}
         children={
           <Modal.Content>
-            <p className="text-scale-1100 py-4 text-sm">
+            <p className="py-4 text-sm text-scale-1100">
               There are unsaved changes. Are you sure you want to close the panel? Your changes will
               be lost.
             </p>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index 383788bad03..7554c39894c 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -1,15 +1,6 @@
 import { FC } from 'react'
 import { isUndefined } from 'lodash'
-import {
-  Checkbox,
-  Input,
-  IconX,
-  IconMenu,
-  Popover,
-  IconLink,
-  IconSettings,
-  Button,
-} from '@supabase/ui'
+import { Checkbox, Input, IconX, IconMenu, Popover, IconLink, IconSettings, Button } from 'common2'
 import { PostgresType } from '@supabase/postgres-meta'
 
 import { ColumnField } from '../SidePanelEditor.types'
@@ -152,7 +143,7 @@ const Column: FC<Props> = ({
               className="pointer-events-auto"
               header={
                 <div className="flex items-center justify-center">
-                  <h5 className="text-scale-1200 text-sm">Extra options</h5>
+                  <h5 className="text-sm text-scale-1200">Extra options</h5>
                 </div>
               }
               overlay={[
@@ -217,11 +208,11 @@ const Column: FC<Props> = ({
             >
               <div className="group flex items-center -space-x-1">
                 {settingsCount > 0 && (
-                  <div className="bg-scale-1200 dark:bg-scale-100 text-scale-100 dark:text-scale-1100 rounded-full py-0.5 px-2 text-xs">
+                  <div className="rounded-full bg-scale-1200 py-0.5 px-2 text-xs text-scale-100 dark:bg-scale-100 dark:text-scale-1100">
                     {settingsCount}
                   </div>
                 )}
-                <div className="text-scale-1100 group-hover:text-scale-1200 transition-colors">
+                <div className="text-scale-1100 transition-colors group-hover:text-scale-1200">
                   <IconSettings size={18} strokeWidth={1} />
                 </div>
               </div>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index d61808d5664..dc856d036d0 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react'
 import { partition, isEmpty, isUndefined } from 'lodash'
-import { Alert, Button, IconEdit, IconHelpCircle, IconKey, IconTrash } from '@supabase/ui'
+import { Alert, Button, IconEdit, IconHelpCircle, IconKey, IconTrash } from 'common2'
 import {
   PostgresTable,
   PostgresColumn,
@@ -196,17 +196,17 @@ const ColumnManagement: FC<Props> = ({
             {/* Drag handle */}
             {isNewRecord && <div className="w-[5%]" />}
             <div className="w-[25%]">
-              <h5 className="text-scale-900 text-xs">Name</h5>
+              <h5 className="text-xs text-scale-900">Name</h5>
             </div>
             <div className="w-[25%]">
-              <h5 className="text-scale-900 text-xs">Type</h5>
+              <h5 className="text-xs text-scale-900">Type</h5>
             </div>
             <div className={`${isNewRecord ? 'w-[25%]' : 'w-[30%]'} flex items-center space-x-2`}>
-              <h5 className="text-scale-900 text-xs">Default Value</h5>
+              <h5 className="text-xs text-scale-900">Default Value</h5>
 
               <Tooltip.Root delayDuration={0}>
                 <Tooltip.Trigger>
-                  <h5 className="text-scale-900 text-xs">
+                  <h5 className="text-xs text-scale-900">
                     <IconHelpCircle size={15} strokeWidth={1.5} />
                   </h5>
                 </Tooltip.Trigger>
@@ -214,11 +214,11 @@ const ColumnManagement: FC<Props> = ({
                   <Tooltip.Arrow className="radix-tooltip-arrow" />
                   <div
                     className={[
-                      'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                      'border-scale-200 border ', //border
+                      'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                      'border border-scale-200 ', //border
                     ].join(' ')}
                   >
-                    <span className="text-scale-1200 text-xs">
+                    <span className="text-xs text-scale-1200">
                       Can be either a value or a SQL expression
                     </span>
                   </div>
@@ -226,7 +226,7 @@ const ColumnManagement: FC<Props> = ({
               </Tooltip.Root>
             </div>
             <div className="w-[10%]">
-              <h5 className="text-scale-900 text-xs">Primary</h5>
+              <h5 className="text-xs text-scale-900">Primary</h5>
             </div>
             {/* Empty space */}
             <div className={`${hasImportContent ? 'w-[10%]' : 'w-0'}`} />
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 1bfc22d5a89..331a9669b71 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -1,5 +1,5 @@
 import { DragEvent, useRef, useState, FC } from 'react'
-import { Button, IconLoader, IconFileText } from '@supabase/ui'
+import { Button, IconLoader, IconFileText } from 'common2'
 import SparkBar from 'components/ui/SparkBar'
 
 interface Props {
@@ -36,13 +36,13 @@ const SpreadSheetFileUpload: FC<Props> = ({
   return (
     <div className="space-y-10">
       <div>
-        <p className="text-scale-1100 mb-2 text-sm">
+        <p className="mb-2 text-sm text-scale-1100">
           Upload a CSV or TSV file. The first row should be the headers of the table, and your
           headers should not include any special characters other than hyphens (
           <span className="text-code">-</span>) or underscores (<span className="text-code">_</span>
           ).
         </p>
-        <p className="text-scale-900 text-xs">
+        <p className="text-xs text-scale-900">
           Tip: Datetime columns should be formatted as YYYY-MM-DD HH:mm:ss
         </p>
       </div>
@@ -64,7 +64,7 @@ const SpreadSheetFileUpload: FC<Props> = ({
         <div className="flex h-32 flex-col items-center justify-center space-y-2 rounded-md border border-dashed dark:border-gray-500">
           <div className="flex items-center space-x-2">
             <IconFileText size={14} strokeWidth={1.5} />
-            <h3 className="text-scale-1200 text-base">{uploadedFile.name}</h3>
+            <h3 className="text-base text-scale-1200">{uploadedFile.name}</h3>
           </div>
           {parseProgress === 100 ? (
             <Button type="outline" onClick={removeUploadedFile}>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx
index 5168fcdcc8f..b1686ec64f0 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadSheetTextInput.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 
 interface Props {
   input: string
@@ -9,7 +9,7 @@ interface Props {
 const SpreadSheetTextInput: FC<Props> = ({ input, onInputChange }) => (
   <div className="space-y-10">
     <div>
-      <p className="text-sm text-scale-1100 mb-2">
+      <p className="mb-2 text-sm text-scale-1100">
         Copy a table from a spreadsheet program such as Google Sheets or Excel and paste it in the
         field below. The first row should be the headers of the table, and your headers should not
         include any special characters other than hyphens (<code>-</code>) or underscores (
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
index 65e60548cef..34c6564ad64 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState, FC, useEffect } from 'react'
 import { debounce, includes } from 'lodash'
-import { SidePanel, Tabs, IconArrowRight, IconChevronRight } from '@supabase/ui'
+import { SidePanel, Tabs, IconArrowRight, IconChevronRight } from 'common2'
 
 import { useStore } from 'hooks'
 import ActionBar from '../../ActionBar'
@@ -8,7 +8,11 @@ import SpreadSheetTextInput from './SpreadSheetTextInput'
 import SpreadSheetFileUpload from './SpreadSheetFileUpload'
 import SpreadsheetPreview from './SpreadsheetPreview'
 import { SpreadsheetData } from './SpreadsheetImport.types'
-import { acceptedFileExtension, parseSpreadsheet, parseSpreadsheetText } from './SpreadsheetImport.utils'
+import {
+  acceptedFileExtension,
+  parseSpreadsheet,
+  parseSpreadsheetText,
+} from './SpreadsheetImport.utils'
 import { UPLOAD_FILE_TYPES, EMPTY_SPREADSHEET_DATA } from './SpreadsheetImport.constants'
 
 interface Props {
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
index ee39ae9d9ab..162487db29a 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { isUndefined, isEmpty } from 'lodash'
-import { Badge, Checkbox, SidePanel, Input } from '@supabase/ui'
+import { Badge, Checkbox, SidePanel, Input } from 'common2'
 import { PostgresTable, PostgresType } from '@supabase/postgres-meta'
 
 import { useStore } from 'hooks'
diff --git a/studio/components/layouts/AccountLayout/SidebarItem.tsx b/studio/components/layouts/AccountLayout/SidebarItem.tsx
index a5d63c3b125..328fa12d3fe 100644
--- a/studio/components/layouts/AccountLayout/SidebarItem.tsx
+++ b/studio/components/layouts/AccountLayout/SidebarItem.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { Menu, IconLogOut, IconArrowUpRight } from '@supabase/ui'
+import { Menu, IconLogOut, IconArrowUpRight } from 'common2'
 
 interface Props {
   id: any
@@ -47,20 +47,20 @@ const SidebarItem: FC<Props> = ({
       <a className="block" target={isExternal ? '_blank' : '_self'}>
         <button
           className={[
-            'ring-scale-1200 border-scale-500 group-hover:border-scale-900 group',
+            'group border-scale-500 ring-scale-1200 group-hover:border-scale-900',
             'flex max-w-full cursor-pointer items-center space-x-2 py-1 font-normal',
             'outline-none focus-visible:z-10 focus-visible:ring-1',
           ].join(' ')}
           onClick={onClick}
         >
           {isExternal && (
-            <span className="text-scale-900 group-hover:text-scale-1100 truncate text-sm transition">
+            <span className="truncate text-sm text-scale-900 transition group-hover:text-scale-1100">
               <IconArrowUpRight size="tiny" />
             </span>
           )}
           <span
             title={label}
-            className="text-scale-1100 group-hover:text-scale-1200 w-full truncate text-sm transition"
+            className="w-full truncate text-sm text-scale-1100 transition group-hover:text-scale-1200"
           >
             {isSubitem ? <p>{label}</p> : label}
           </span>
diff --git a/studio/components/layouts/AccountLayout/WithSidebar.tsx b/studio/components/layouts/AccountLayout/WithSidebar.tsx
index e05c347b248..6f3dfba1d92 100644
--- a/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 import { isUndefined } from 'lodash'
-import { Menu, IconArrowUpRight, Badge, IconLogOut } from '@supabase/ui'
+import { Menu, IconArrowUpRight, Badge, IconLogOut } from 'common2'
 import { useFlag } from 'hooks'
 import LayoutHeader from '../ProjectLayout/LayoutHeader'
 import { SidebarLink, SidebarSection } from './AccountLayout.types'
@@ -49,14 +49,14 @@ const WithSidebar: FC<Props> = ({
           id="with-sidebar"
           style={{ height: maxHeight, maxHeight }}
           className={[
-            'bg-sidebar-linkbar-light dark:bg-sidebar-linkbar-dark h-full',
-            'hide-scrollbar dark:border-dark w-64 overflow-auto border-r',
+            'h-full bg-sidebar-linkbar-light dark:bg-sidebar-linkbar-dark',
+            'hide-scrollbar w-64 overflow-auto border-r dark:border-dark',
           ].join(' ')}
         >
           {title && (
             <div className="mb-2">
-              <div className="dark:border-dark flex h-12 max-h-12 items-center border-b px-6">
-                <h4 className="text-lg mb-0">{title}</h4>
+              <div className="flex h-12 max-h-12 items-center border-b px-6 dark:border-dark">
+                <h4 className="mb-0 text-lg">{title}</h4>
               </div>
             </div>
           )}
@@ -73,7 +73,7 @@ const WithSidebar: FC<Props> = ({
                     subitemsParentKey={subitemsParentKey}
                   />
                 ) : (
-                  <div className="dark:border-dark border-b py-5 px-6" key={section.key}>
+                  <div className="border-b py-5 px-6 dark:border-dark" key={section.key}>
                     <SidebarItem
                       links={section.links}
                       subitems={subitems}
@@ -106,7 +106,7 @@ const SectionWithHeaders: FC<SectionWithHeadersProps> = ({
   subitems,
   subitemsParentKey,
 }) => (
-  <div key={section.heading} className="dark:border-dark border-b py-5 px-6">
+  <div key={section.heading} className="border-b py-5 px-6 dark:border-dark">
     {section.heading && <Menu.Group title={section.heading} />}
     {section.versionLabel && (
       <div className="mb-1 px-3">
@@ -210,17 +210,17 @@ const SidebarLinkItem: FC<SidebarLinkProps> = ({
     <Link href={href || ''}>
       <a className="block" target={isExternal ? '_blank' : '_self'}>
         <button
-          className="ring-scale-1200 border-scale-500 group-hover:border-scale-900 group flex max-w-full cursor-pointer items-center space-x-2 py-1 font-normal outline-none focus-visible:z-10 focus-visible:ring-1"
+          className="group flex max-w-full cursor-pointer items-center space-x-2 border-scale-500 py-1 font-normal outline-none ring-scale-1200 focus-visible:z-10 focus-visible:ring-1 group-hover:border-scale-900"
           onClick={onClick || (() => {})}
         >
           {isExternal && (
-            <span className="text-scale-900 group-hover:text-scale-1100 truncate text-sm transition">
+            <span className="truncate text-sm text-scale-900 transition group-hover:text-scale-1100">
               <IconArrowUpRight size={'tiny'} />
             </span>
           )}
           <span
             title={label}
-            className="text-scale-1100 group-hover:text-scale-1200 w-full truncate text-sm transition"
+            className="w-full truncate text-sm text-scale-1100 transition group-hover:text-scale-1200"
           >
             {isSubitem ? <p>{label}</p> : label}
           </span>
diff --git a/studio/components/layouts/BillingLayout.tsx b/studio/components/layouts/BillingLayout.tsx
index d82aeae034d..6e13cbdd75b 100644
--- a/studio/components/layouts/BillingLayout.tsx
+++ b/studio/components/layouts/BillingLayout.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 import { useStore, withAuth } from 'hooks'
 import { observer } from 'mobx-react-lite'
-import { IconX } from '@supabase/ui'
+import { IconX } from 'common2'
 
 import BaseLayout from 'components/layouts'
 
@@ -17,17 +17,17 @@ const BillingLayout: FC<Props> = ({ children }) => {
     <BaseLayout hideHeader hideIconBar>
       <div className="flex h-full w-full flex-col">
         {/* Header */}
-        <div className="dark:border-dark flex items-center space-x-4 border-b py-4 px-5">
+        <div className="flex items-center space-x-4 border-b py-4 px-5 dark:border-dark">
           <Link href={`/project/${ui.selectedProject?.ref}/settings/billing`} passHref>
-            <a className="text-scale-900 hover:text-scale-1200 transition-colors">
+            <a className="text-scale-900 transition-colors hover:text-scale-1200">
               <IconX size={16} strokeWidth={1.5} />
             </a>
           </Link>
           <div className="flex items-center space-x-6">
-            <h1 className="text-scale-1200 text-sm">Customize your plan</h1>
-            <div className="bg-scale-600 h-6 w-px"></div>
+            <h1 className="text-sm text-scale-1200">Customize your plan</h1>
+            <div className="h-6 w-px bg-scale-600"></div>
             <div className="flex items-center space-x-3">
-              <p className="text-scale-1100 text-sm">{ui.selectedOrganization?.name}</p>
+              <p className="text-sm text-scale-1100">{ui.selectedOrganization?.name}</p>
               <span className="text-scale-800">
                 <svg
                   viewBox="0 0 24 24"
@@ -43,7 +43,7 @@ const BillingLayout: FC<Props> = ({ children }) => {
                   <path d="M16 3.549L7.12 20.600"></path>
                 </svg>
               </span>
-              <p className="text-scale-1100 text-sm">{ui.selectedProject?.name}</p>
+              <p className="text-sm text-scale-1100">{ui.selectedProject?.name}</p>
             </div>
           </div>
         </div>
diff --git a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
index 38a28bb7186..122ccbb4616 100644
--- a/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
+++ b/studio/components/layouts/DocsLayout/DocsLayout.utils.tsx
@@ -1,5 +1,5 @@
 import { ProductMenuGroup } from 'components/ui/ProductMenu/ProductMenu.types'
-import { IconBook, IconBookOpen } from '@supabase/ui'
+import { IconBook, IconBookOpen } from 'common2'
 
 export const generateDocsMenu = (
   ref: string,
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index 2b30a084cc4..cbcd65371e9 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, ReactNode } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconCode } from '@supabase/ui'
+import { IconCode } from 'common2'
 
 import { checkPermissions, useStore, withAuth } from 'hooks'
 import FunctionsNav from '../interfaces/Functions/FunctionsNav'
@@ -52,25 +52,25 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
         <>
           <div className="mx-auto max-w-5xl py-24 px-5">
             <div
-              className="flex 
-            flex-col 
-            gap-y-4
-            xl:flex-row 
-            item-center 
-            justify-between"
+              className="item-center 
+            flex 
+            flex-col
+            justify-between 
+            gap-y-4 
+            xl:flex-row"
             >
               <div className="flex items-center gap-3">
                 <div
                   className={[
-                    'w-6 h-6 bg-brand-300 border border-brand-600 rounded',
-                    'text-brand-900 flex items-center justify-center',
+                    'h-6 w-6 rounded border border-brand-600 bg-brand-300',
+                    'flex items-center justify-center text-brand-900',
                   ].join(' ')}
                 >
                   <IconCode size={14} strokeWidth={3} />
                 </div>
                 <div className="flex items-center space-x-4">
                   <h1 className="text-2xl text-scale-1200">Edge Functions</h1>
-                  <p className="text-scale-1000 mt-1">Beta</p>
+                  <p className="mt-1 text-scale-1000">Beta</p>
                 </div>
               </div>
             </div>
@@ -79,19 +79,19 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
           </div>
         </>
       ) : (
-        <div className="h-full flex flex-col flex-grow py-6">
+        <div className="flex h-full flex-grow flex-col py-6">
           <div
             className={[
-              'w-full mx-auto transition-all flex flex-col',
-              'px-5 lg:px-16 xl:px-24 1xl:px-28 2xl:px-32 gap-4',
+              'mx-auto flex w-full flex-col transition-all',
+              '1xl:px-28 gap-4 px-5 lg:px-16 xl:px-24 2xl:px-32',
             ].join(' ')}
           >
-            <div className="flex flex-col gap-y-4 xl:flex-row item-center justify-between">
+            <div className="item-center flex flex-col justify-between gap-y-4 xl:flex-row">
               <div className="flex items-center gap-3">
                 <div
                   className={[
-                    'w-6 h-6 bg-brand-300 border border-brand-600 rounded',
-                    'text-brand-900 flex items-center justify-center',
+                    'h-6 w-6 rounded border border-brand-600 bg-brand-300',
+                    'flex items-center justify-center text-brand-900',
                   ].join(' ')}
                 >
                   <IconCode size={14} strokeWidth={3} />
@@ -99,11 +99,11 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
 
                 <div className="flex items-center space-x-4">
                   <Link href={`/project/${ref}/functions`}>
-                    <h1 className="transition-colors text-2xl text-scale-1200 cursor-pointer hover:text-scale-1100">
+                    <h1 className="cursor-pointer text-2xl text-scale-1200 transition-colors hover:text-scale-1100">
                       Edge Functions
                     </h1>
                   </Link>
-                  <p className="text-scale-1000 mt-1">Beta</p>
+                  <p className="mt-1 text-scale-1000">Beta</p>
                 </div>
 
                 {name && (
@@ -132,8 +132,8 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
           </div>
           <div
             className={[
-              'h-full flex flex-col flex-grow w-full mx-auto transition-all',
-              'px-5 lg:px-16 xl:px-24 1xl:px-28 2xl:px-32 gap-4',
+              'mx-auto flex h-full w-full flex-grow flex-col transition-all',
+              '1xl:px-28 gap-4 px-5 lg:px-16 xl:px-24 2xl:px-32',
             ].join(' ')}
           >
             {children}
diff --git a/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx b/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx
index 7850190b5e1..70cdba2271e 100644
--- a/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx
+++ b/studio/components/layouts/LogsExplorerLayout/LogsExplorerLayout.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, ReactNode } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, IconList, Loading } from '@supabase/ui'
+import { Badge, IconList, Loading } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore, withAuth } from 'hooks'
@@ -42,17 +42,17 @@ const PageLayout: FC<Props> = ({ subtitle, children }) => {
 
   return (
     <BaseLayout>
-      <div className="h-full flex flex-col flex-grow py-6">
+      <div className="flex h-full flex-grow flex-col py-6">
         <div
           className={[
-            'w-full mx-auto flex flex-col transition-all gap-4 px-5',
-            'lg:px-16 xl:px-24 1xl:px-28 2xl:px-32',
+            'mx-auto flex w-full flex-col gap-4 px-5 transition-all',
+            '1xl:px-28 lg:px-16 xl:px-24 2xl:px-32',
           ].join(' ')}
         >
           <div className="flex items-center gap-3">
             <div
-              className="w-6 h-6 bg-brand-300 border border-brand-600 rounded text-brand-900
-            flex items-center justify-center
+              className="flex h-6 w-6 items-center justify-center rounded border
+            border-brand-600 bg-brand-300 text-brand-900
           "
             >
               <IconList size={14} strokeWidth={3} />
@@ -64,8 +64,8 @@ const PageLayout: FC<Props> = ({ subtitle, children }) => {
         </div>
         <div
           className={[
-            'h-full w-full flex flex-col flex-grow mx-auto gap-4 transition-all',
-            'px-5 lg:px-16 1xl:px-28 2xl:px-32',
+            'mx-auto flex h-full w-full flex-grow flex-col gap-4 transition-all',
+            '1xl:px-28 px-5 lg:px-16 2xl:px-32',
           ].join(' ')}
         >
           {children}
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index f8b15fa1f77..bdf4df38714 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { FC, useEffect, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, IconArrowRight, IconLoader, Button } from '@supabase/ui'
+import { Badge, IconArrowRight, IconLoader, Button } from 'common2'
 import ExampleProject from 'components/interfaces/Home/ExampleProject'
 import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
@@ -47,7 +47,7 @@ const ProjectBuildingState: FC<ProjectBuildingState> = ({ project }) => {
       <div className="mx-6 flex flex-col space-y-16">
         <div className=" flex flex-col gap-4">
           <div className="flex items-center space-x-3">
-            <h1 className="text-scale-1200 text-3xl">{project?.name}</h1>
+            <h1 className="text-3xl text-scale-1200">{project?.name}</h1>
             <Badge color="brand">
               <div className="flex items-center gap-2">
                 <IconLoader className="animate-spin" size={12} />
@@ -60,26 +60,26 @@ const ProjectBuildingState: FC<ProjectBuildingState> = ({ project }) => {
             </Badge>
           </div>
           <div>
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               {' '}
               We are provisioning your database and API endpoints
             </p>
-            <p className="text-scale-1100 text-sm"> This may take a few minutes</p>
+            <p className="text-sm text-scale-1100"> This may take a few minutes</p>
           </div>
         </div>
         <div>
           <div className=" grid grid-cols-12 gap-12">
             <div className="col-span-12 space-y-12 lg:col-span-4">
               <div>
-                <h4 className="text-scale-1200 text-base">While you wait</h4>
+                <h4 className="text-base text-scale-1200">While you wait</h4>
 
                 <ChecklistItem
                   description={
-                    <p className="text-scale-1100 text-sm">
+                    <p className="text-sm text-scale-1100">
                       Browse the Supabase{' '}
                       <Link href="https://supabase.com/docs">
                         <a
-                          className="text-brand-900 hover:text-brand-1200 mb-0 transition-colors"
+                          className="mb-0 text-brand-900 transition-colors hover:text-brand-1200"
                           target="_blank"
                         >
                           documentation
@@ -91,10 +91,10 @@ const ProjectBuildingState: FC<ProjectBuildingState> = ({ project }) => {
                 />
               </div>
               <div>
-                <h4 className="text-scale-1200 text-base">Not working?</h4>
+                <h4 className="text-base text-scale-1200">Not working?</h4>
                 <ChecklistItem
                   description={
-                    <p className="text-scale-1100 text-sm">
+                    <p className="text-sm text-scale-1100">
                       Try refreshing after a couple of minutes.
                     </p>
                   }
@@ -103,7 +103,7 @@ const ProjectBuildingState: FC<ProjectBuildingState> = ({ project }) => {
                   <ChecklistItem
                     description={
                       <>
-                        <p className="text-scale-1100 mb-4 text-sm">
+                        <p className="mb-4 text-sm text-scale-1100">
                           If your dashboard hasn't connected within 2 minutes, you can open a
                           support ticket.
                         </p>
diff --git a/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index aec6262c5db..44375cdcdbb 100644
--- a/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { FC, useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, Button, IconLoader, IconMonitor, IconServer, Modal } from '@supabase/ui'
+import { Badge, Button, IconLoader, IconMonitor, IconServer, Modal } from 'common2'
 
 import { Project } from 'types'
 import { useStore } from 'hooks'
@@ -61,7 +61,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
               </Badge>
             </div>
           </div>
-          <div className="bg-scale-300 border-scale-400 flex h-[500px] items-center justify-center rounded border p-8">
+          <div className="flex h-[500px] items-center justify-center rounded border border-scale-400 bg-scale-300 p-8">
             <div className="w-[420px] space-y-4">
               <div className="mx-auto flex max-w-[300px] items-center justify-center space-x-4 lg:space-x-8">
                 <IconMonitor className="text-scale-1100" size={50} strokeWidth={1.5} />
@@ -72,7 +72,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
               <div className="space-y-1">
                 <p className="text-center">Connecting to {project.name}</p>
                 <p
-                  className="text-scale-1100 cursor-pointer text-center text-sm opacity-60 transition hover:opacity-100"
+                  className="cursor-pointer text-center text-sm text-scale-1100 opacity-60 transition hover:opacity-100"
                   onClick={() => setShowModal(true)}
                 >
                   This may take a few minutes
@@ -95,7 +95,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
         onCancel={() => setShowModal(false)}
         header={
           <div className="flex items-baseline gap-2">
-            <h5 className="text-scale-1200 text-sm">Checking the health of your database</h5>
+            <h5 className="text-sm text-scale-1200">Checking the health of your database</h5>
           </div>
         }
         size="medium"
@@ -105,7 +105,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
         <div className="py-4">
           <Modal.Content>
             <div className="space-y-4">
-              <p className="text-scale-1200 text-sm">
+              <p className="text-sm text-scale-1200">
                 Your project might be facing resource constraints and hence is having trouble
                 connecting. You can verify this by checking your{' '}
                 <span className="text-brand-1000">
@@ -121,7 +121,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
                 </span>
                 .
               </p>
-              <p className="text-scale-1200 text-sm">
+              <p className="text-sm text-scale-1200">
                 If your project is facing resource constraints, you can{' '}
                 <span className="text-brand-1000">
                   <Link href={`/project/${project.ref}/reports`}>
@@ -130,7 +130,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
                 </span>{' '}
                 your project's subscription to a Pro for access to larger compute sizes.
               </p>
-              <p className="text-scale-1200 text-sm">
+              <p className="text-sm text-scale-1200">
                 However, if your project still fails to connect thereafter, you can open a support
                 ticket{' '}
                 <span className="text-brand-1000">
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
index 5b28006c2db..15ad3fdf411 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, IconMessageCircle, Popover } from '@supabase/ui'
+import { Button, IconMessageCircle, Popover } from 'common2'
 import FeedbackWidget from './FeedbackWidget'
 
 const FeedbackDropdown = () => {
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 39a94303977..e4005b418f0 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, FC } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Button, Input, Popover } from '@supabase/ui'
+import { Button, Input, Popover } from 'common2'
 
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
@@ -75,14 +75,14 @@ const FeedbackWidget: FC<Props> = ({ onClose }) => {
           Have a technical issue? Contact{' '}
           <Link href="/support/new">
             <a>
-              <span className="cursor-pointer transition-colors text-brand-900 hover:text-brand-1200">
+              <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
                 Supabase support
               </span>
             </a>
           </Link>{' '}
           or{' '}
           <a href="https://supabase.com/docs" target="_blank">
-            <span className="cursor-pointer transition-colors text-brand-900 hover:text-brand-1200">
+            <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
               browse our docs
             </span>
           </a>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
index cc1ad3302a5..22317ef0f0e 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -6,7 +6,7 @@ import {
   Popover,
   IconBookOpen,
   IconActivity,
-} from '@supabase/ui'
+} from 'common2'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import Link from 'next/link'
@@ -28,8 +28,8 @@ const HelpPopover: FC<Props> = () => {
       side="bottom"
       sideOffset={8}
       overlay={
-        <div className="space-y-4 my-4 w-96">
-          <div className="px-5 space-y-4 my-5">
+        <div className="my-4 w-96 space-y-4">
+          <div className="my-5 space-y-4 px-5">
             <h5 className="text-scale-1200">Need help with your project?</h5>
             <p className="text-sm text-scale-900">
               For issues with your project hosted on supabase.com, or other inquiries about our
@@ -58,8 +58,8 @@ const HelpPopover: FC<Props> = () => {
             </p>
           </div>
           <Popover.Seperator />
-          <div className="space-y-2 mb-4">
-            <div className="px-5 mb-4">
+          <div className="mb-4 space-y-2">
+            <div className="mb-4 px-5">
               <h5 className={'mb-2'}>Reach out to the community</h5>
 
               <p className="text-sm text-scale-900">
@@ -69,13 +69,13 @@ const HelpPopover: FC<Props> = () => {
             </div>
             <div className="px-5">
               <div
-                className="relative px-5 py-4 pb-12 rounded overflow-hidden space-y-2 shadow-md"
+                className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md"
                 style={{ background: '#404EED' }}
               >
                 <a
                   href="https://discord.supabase.com"
                   target="_blank"
-                  className="block cursor-pointer dark"
+                  className="dark block cursor-pointer"
                 >
                   <Image
                     className="absolute left-0 top-0 opacity-50"
@@ -86,7 +86,7 @@ const HelpPopover: FC<Props> = () => {
                   />
                   <Button
                     type="secondary"
-                    icon={<SVG src={`/img/discord-icon.svg`} className="w-4 h-4" />}
+                    icon={<SVG src={`/img/discord-icon.svg`} className="h-4 w-4" />}
                   >
                     <span style={{ color: '#404EED' }}>Join Discord server</span>
                   </Button>
@@ -94,7 +94,7 @@ const HelpPopover: FC<Props> = () => {
               </div>
             </div>
             <div className="px-5">
-              <div className="relative px-5 py-4 pb-12 rounded overflow-hidden space-y-2 shadow-md">
+              <div className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md">
                 <a
                   href="https://github.com/supabase/supabase/discussions"
                   target="_blank"
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 3945814e465..c9eae917b48 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -10,7 +10,7 @@ import ProjectDropdown from './ProjectDropdown'
 import FeedbackDropdown from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopover from './NotificationsPopover'
-import { Badge } from '@supabase/ui'
+import { Badge } from 'common2'
 import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
@@ -33,7 +33,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
   return (
     <div
       className={`flex h-12 max-h-12 items-center justify-between py-2 px-5 ${
-        headerBorder ? 'dark:border-dark border-b' : ''
+        headerBorder ? 'border-b dark:border-dark' : ''
       }`}
     >
       <div className="-ml-2 flex items-center text-sm">
@@ -78,7 +78,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
         ) : (
           <Link href="/">
             <a
-              className={`text-scale-1200 cursor-pointer px-2 py-1 text-xs focus:bg-transparent focus:outline-none`}
+              className={`cursor-pointer px-2 py-1 text-xs text-scale-1200 focus:bg-transparent focus:outline-none`}
             >
               Supabase
             </a>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationActions.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationActions.tsx
index 1bf5f150b46..da8cf9e7dcd 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationActions.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationActions.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 import { Project } from 'types'
 
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index 29f19f4a857..46ca7b21536 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -1,6 +1,6 @@
 import { FC, Fragment, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Button, IconBell, Popover } from '@supabase/ui'
+import { Button, IconBell, Popover } from 'common2'
 import {
   Notification,
   NotificationStatus,
@@ -103,7 +103,7 @@ const NotificationsPopover: FC<Props> = () => {
             <div className="max-h-[380px] overflow-y-auto py-2">
               {notifications.length === 0 ? (
                 <div className="py-2 px-4">
-                  <p className="text-scale-1000 text-sm">No notifications available</p>
+                  <p className="text-sm text-scale-1000">No notifications available</p>
                 </div>
               ) : (
                 <>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
index 5559588b127..9947074ff2a 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, Divider, IconPlus } from '@supabase/ui'
+import { Button, Dropdown, Divider, IconPlus } from 'common2'
 
 import { useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
index 4a411d8b429..e3b6de94933 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, IconPlus, Popover } from '@supabase/ui'
+import { Button, Dropdown, IconPlus, Popover } from 'common2'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
 
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 6c0d846faa5..097af321a44 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -3,7 +3,7 @@ import { FC } from 'react'
 import { isUndefined } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { Button, Dropdown, IconHome, IconSettings, IconUser } from '@supabase/ui'
+import { Button, Dropdown, IconHome, IconSettings, IconUser } from 'common2'
 
 import { useFlag, useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
@@ -29,7 +29,7 @@ const NavigationBar: FC<Props> = ({}) => {
       style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
       className={[
         'flex w-14 flex-col justify-between overflow-y-hidden p-2',
-        'bg-sidebar-light dark:bg-sidebar-dark dark:border-dark border-r',
+        'border-r bg-sidebar-light dark:border-dark dark:bg-sidebar-dark',
       ].join(' ')}
     >
       <ul className="flex flex-col space-y-2">
@@ -51,7 +51,7 @@ const NavigationBar: FC<Props> = ({}) => {
             link: `/project/${projectRef}`,
           }}
         />
-        <div className="bg-scale-500 h-px w-full"></div>
+        <div className="h-px w-full bg-scale-500"></div>
         {productRoutes.map((route) => (
           <NavigationIconButton
             key={route.key}
@@ -59,7 +59,7 @@ const NavigationBar: FC<Props> = ({}) => {
             isActive={activeRoute === route.key}
           />
         ))}
-        <div className="bg-scale-500 h-px w-full"></div>
+        <div className="h-px w-full bg-scale-500"></div>
         {otherRoutes.map((route) => (
           <NavigationIconButton
             key={route.key}
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
index 80d494395fa..16dd0421752 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx
@@ -7,7 +7,7 @@ import {
   IconList,
   IconSettings,
   IconUsers,
-} from '@supabase/ui'
+} from 'common2'
 import SVG from 'react-inlinesvg'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
diff --git a/studio/components/layouts/ProjectLayout/PausingState.tsx b/studio/components/layouts/ProjectLayout/PausingState.tsx
index bcf4e83ea60..ce09a7a497f 100644
--- a/studio/components/layouts/ProjectLayout/PausingState.tsx
+++ b/studio/components/layouts/ProjectLayout/PausingState.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge, IconLoader, IconCircle } from '@supabase/ui'
+import { Badge, IconLoader, IconCircle } from 'common2'
 import { Project } from 'types'
 
 interface Props {
@@ -22,7 +22,7 @@ const PausingState: FC<Props> = ({ project }) => {
           </div>
         </div>
         <div className="mx-auto mt-8 mb-16 w-full max-w-7xl">
-          <div className="bg-scale-300 border-scale-400 mx-6 flex h-[500px] items-center justify-center rounded border p-8">
+          <div className="mx-6 flex h-[500px] items-center justify-center rounded border border-scale-400 bg-scale-300 p-8">
             <div className="grid w-[380px] gap-4">
               <div className="relative mx-auto max-w-[300px]">
                 <div className="absolute flex h-full w-full items-center justify-center">
@@ -31,7 +31,7 @@ const PausingState: FC<Props> = ({ project }) => {
                 <IconCircle className="text-scale-900" size={50} strokeWidth={1.5} />
               </div>
               <p className="text-center">Pausing {project.name}</p>
-              <p className="text-scale-1100 mt-4 text-center text-sm">
+              <p className="mt-4 text-center text-sm text-scale-1100">
                 You may restore your project anytime thereafter, and your data will be restored to
                 when it was initially paused.
               </p>
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index e57fe2cb52a..c1ef72fb517 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Alert, Button, IconPauseCircle } from '@supabase/ui'
+import { Alert, Button, IconPauseCircle } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { Project } from 'types'
@@ -62,7 +62,7 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
           </div>
         )}
         <div className="mx-auto mb-16 w-full max-w-7xl">
-          <div className="bg-scale-300 border-scale-400 mx-6 flex h-[500px] items-center justify-center rounded border p-8">
+          <div className="mx-6 flex h-[500px] items-center justify-center rounded border border-scale-400 bg-scale-300 p-8">
             <div className="grid w-[420px] gap-4">
               <div className="mx-auto flex max-w-[300px] items-center justify-center space-x-4 lg:space-x-8">
                 <IconPauseCircle className="text-scale-1100" size={50} strokeWidth={1.5} />
@@ -87,11 +87,11 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
                       <Tooltip.Arrow className="radix-tooltip-arrow" />
                       <div
                         className={[
-                          'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                          'border-scale-200 border ', //border
+                          'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                          'border border-scale-200 ', //border
                         ].join(' ')}
                       >
-                        <span className="text-scale-1200 text-xs">
+                        <span className="text-xs text-scale-1200">
                           You need additional permissions to resume this project
                         </span>
                       </div>
@@ -102,7 +102,7 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
               </div>
 
               {!hasExceedActiveFreeProjectsLimit && (
-                <p className="text-scale-1000 mt-4 text-sm">
+                <p className="mt-4 text-sm text-scale-1000">
                   Restore this project and get back to building the next big thing!
                 </p>
               )}
diff --git a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index b359f921af2..6f79fa7d209 100644
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -13,7 +13,7 @@ import {
   IconChevronDown,
   Modal,
   IconEdit2,
-} from '@supabase/ui'
+} from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useOptimisticSqlSnippetCreate, useStore, checkPermissions } from 'hooks'
@@ -121,7 +121,7 @@ const DropdownMenu = observer(({ tabInfo }: { tabInfo: QueryTab }) => {
         onSelectCancel={() => setDeleteModalOpen(false)}
       >
         <Modal.Content>
-          <p className="text-scale-1100 py-4 text-sm">{`Are you sure you want to remove '${name}' ?`}</p>
+          <p className="py-4 text-sm text-scale-1100">{`Are you sure you want to remove '${name}' ?`}</p>
         </Modal.Content>
       </ConfirmationModal>
     </div>
diff --git a/studio/components/layouts/StorageLayout/StorageMenu.tsx b/studio/components/layouts/StorageLayout/StorageMenu.tsx
index 3a8933430e7..f7dde73c0b9 100644
--- a/studio/components/layouts/StorageLayout/StorageMenu.tsx
+++ b/studio/components/layouts/StorageLayout/StorageMenu.tsx
@@ -13,7 +13,7 @@ import {
   Alert,
   IconEdit,
   IconTrash,
-} from '@supabase/ui'
+} from 'common2'
 
 import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
 import { STORAGE_ROW_STATUS } from 'components/to-be-cleaned/Storage/Storage.constants'
@@ -39,8 +39,8 @@ const StorageMenu: FC<Props> = () => {
   } = storageExplorerStore || {}
 
   return (
-    <Menu type="pills" className="my-6 flex flex-col flex-grow px-5">
-      <div className="px-2 mb-6">
+    <Menu type="pills" className="my-6 flex flex-grow flex-col px-5">
+      <div className="mb-6 px-2">
         <Button
           block
           type="default"
@@ -60,7 +60,7 @@ const StorageMenu: FC<Props> = () => {
           <div>
             <Menu.Group title="All buckets" />
             {!loaded ? (
-              <div className="py-2 px-2 flex items-center space-x-2">
+              <div className="flex items-center space-x-2 py-2 px-2">
                 <IconLoader className="animate-spin" size={14} strokeWidth={2} />
                 <span className="text-sm">Loading buckets</span>
               </div>
diff --git a/studio/components/layouts/WizardLayout.tsx b/studio/components/layouts/WizardLayout.tsx
index 6feb3fa30fd..42cf8b58591 100644
--- a/studio/components/layouts/WizardLayout.tsx
+++ b/studio/components/layouts/WizardLayout.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import Link from 'next/link'
-import { IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from 'common2'
 import { withAuth, useFlag } from 'hooks'
 import { observer } from 'mobx-react-lite'
 
@@ -27,7 +27,7 @@ export const WizardLayoutWithoutAuth = observer(WizardLayout)
 const Header: FC<any> = ({ organization, project }) => {
   let stepNumber = organization ? 1 : project ? 2 : 0
   return (
-    <div className="dark:border-dark border-b p-3">
+    <div className="border-b p-3 dark:border-dark">
       <div className="PageHeader">
         <div className="Breadcrumbs flex justify-between">
           <div className="flex items-center text-sm">
@@ -37,7 +37,7 @@ const Header: FC<any> = ({ organization, project }) => {
                   <img
                     src="/img/supabase-logo.svg"
                     alt="Supabase"
-                    className="dark:border-dark rounded border p-1 hover:border-white"
+                    className="rounded border p-1 hover:border-white dark:border-dark"
                     style={{ height: 24 }}
                   />
                 </a>
diff --git a/studio/components/to-be-cleaned/AlphaPreview.tsx b/studio/components/to-be-cleaned/AlphaPreview.tsx
index a5ba90dbaa1..4403fe5d406 100644
--- a/studio/components/to-be-cleaned/AlphaPreview.tsx
+++ b/studio/components/to-be-cleaned/AlphaPreview.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@supabase/ui'
+import { Alert } from 'common2'
 
 const AlphaPreview = () => {
   return (
diff --git a/studio/components/to-be-cleaned/Charts/ChartHandler.tsx b/studio/components/to-be-cleaned/Charts/ChartHandler.tsx
index 8b8b17fa3e1..e504f48b396 100644
--- a/studio/components/to-be-cleaned/Charts/ChartHandler.tsx
+++ b/studio/components/to-be-cleaned/Charts/ChartHandler.tsx
@@ -1,7 +1,7 @@
 import React, { FC, ReactNode, useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { isUndefined } from 'lodash'
-import { Button, IconActivity, IconAlertCircle, IconBarChart, IconLoader } from '@supabase/ui'
+import { Button, IconActivity, IconAlertCircle, IconBarChart, IconLoader } from 'common2'
 import { Dictionary } from 'components/grid'
 
 import { API_URL } from 'lib/constants'
@@ -125,7 +125,7 @@ const ChartHandler: FC<Props> = ({
 
   if (loading) {
     return (
-      <div className="w-full h-52 flex flex-col space-y-4 items-center justify-center">
+      <div className="flex h-52 w-full flex-col items-center justify-center space-y-4">
         <IconLoader className="animate-spin text-scale-700" />
         <p className="text-xs text-scale-900">Loading data for {label}</p>
       </div>
@@ -134,20 +134,20 @@ const ChartHandler: FC<Props> = ({
 
   if (isUndefined(chartData)) {
     return (
-      <div className="w-full h-52 flex flex-col space-y-4 items-center justify-center">
+      <div className="flex h-52 w-full flex-col items-center justify-center space-y-4">
         <IconAlertCircle className="text-scale-700" />
-        <p className="text-scale-900 text-xs">Unable to load data for {label}</p>
+        <p className="text-xs text-scale-900">Unable to load data for {label}</p>
       </div>
     )
   }
 
   return (
-    <div className="w-full h-full">
-      <div className="flex justify-between absolute right-6 z-50">
+    <div className="h-full w-full">
+      <div className="absolute right-6 z-50 flex justify-between">
         <div className="space-y-3">{children}</div>
         {!hideChartType && (
           <div>
-            <div className="flex space-x-3 w-full">
+            <div className="flex w-full space-x-3">
               <Button
                 type="default"
                 icon={chartStyle === 'bar' ? <IconActivity /> : <IconBarChart />}
diff --git a/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx b/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
index cc3546f9060..28ab4e5f026 100644
--- a/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
+++ b/studio/components/to-be-cleaned/Charts/ChartRenderer.tsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { Loading } from '@supabase/ui'
+import { Loading } from 'common2'
 import { useState } from 'react'
 import {
   BarChart as RechartBarChart,
@@ -89,7 +89,7 @@ const Header = ({
   const highlighted = (
     <h5
       className={
-        'text-scale-1200 text-xl font-normal ' + (minimalHeader ? 'text-base' : 'text-2xl')
+        'text-xl font-normal text-scale-1200 ' + (minimalHeader ? 'text-base' : 'text-2xl')
       }
     >
       {title}
@@ -97,7 +97,7 @@ const Header = ({
     </h5>
   )
   const date = (
-    <h5 className="text-scale-900 text-xs">
+    <h5 className="text-xs text-scale-900">
       {focus ? (
         data && data[focus] && day(data[focus].period_start).format(FOCUS_FORMAT)
       ) : (
@@ -247,7 +247,7 @@ export function BarChart({
                 </RechartBarChart>
               </ResponsiveContainer>
               {data && (
-                <div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
+                <div className="-mt-5 flex items-center justify-between text-xs text-scale-900">
                   <span>
                     {day(data[0].period_start).format(
                       customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
@@ -369,7 +369,7 @@ export function AreaChart({
               </RechartAreaChart>
             </ResponsiveContainer>
             {data && (
-              <div className="text-scale-900 -mt-5 flex items-center justify-between text-xs">
+              <div className="-mt-5 flex items-center justify-between text-xs text-scale-900">
                 <span>
                   {dayjs(data[0].period_start).format(
                     customDateFormat ? customDateFormat : DATE_FORMAT__WITH_TIME
diff --git a/studio/components/to-be-cleaned/DateRangePicker.tsx b/studio/components/to-be-cleaned/DateRangePicker.tsx
index cb5afc396c4..4cf776166a8 100644
--- a/studio/components/to-be-cleaned/DateRangePicker.tsx
+++ b/studio/components/to-be-cleaned/DateRangePicker.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { Button, Dropdown, IconChevronDown } from '@supabase/ui'
+import { Button, Dropdown, IconChevronDown } from 'common2'
 import dayjs from 'dayjs'
 import { DATE_FORMAT } from 'lib/constants'
 
diff --git a/studio/components/to-be-cleaned/Docs/Description.js b/studio/components/to-be-cleaned/Docs/Description.js
index 3a87f17d551..9804af725d0 100644
--- a/studio/components/to-be-cleaned/Docs/Description.js
+++ b/studio/components/to-be-cleaned/Docs/Description.js
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, IconLoader } from '@supabase/ui'
+import { Button, IconLoader } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -85,7 +85,7 @@ export default function Description({ content, metadata, onChange = () => {} })
       />
       <div
         className={`flex items-center gap-2 ${
-          hasChanged ? 'opacity-100' : 'opacity-0 cursor-default h-0'
+          hasChanged ? 'opacity-100' : 'h-0 cursor-default opacity-0'
         } ${animateCss}`}
       >
         <Button
@@ -100,7 +100,7 @@ export default function Description({ content, metadata, onChange = () => {} })
         </Button>
         <Button disabled={!hasChanged} onClick={updateDescription}>
           {isUpdating ? (
-            <IconLoader className="animate-spin mx-auto" size={14} strokeWidth={2} />
+            <IconLoader className="mx-auto animate-spin" size={14} strokeWidth={2} />
           ) : (
             <span>Save</span>
           )}
diff --git a/studio/components/to-be-cleaned/Docs/Param.js b/studio/components/to-be-cleaned/Docs/Param.js
index bc134d9729e..90b903b9229 100644
--- a/studio/components/to-be-cleaned/Docs/Param.js
+++ b/studio/components/to-be-cleaned/Docs/Param.js
@@ -1,4 +1,4 @@
-import { Badge } from '@supabase/ui'
+import { Badge } from 'common2'
 import Description from './Description'
 
 const Param = ({
@@ -12,20 +12,20 @@ const Param = ({
 }) => {
   return (
     <>
-      <div className="flex justify-between items-center mb-4 ">
-        <code className="px-2 inline-block">{name}</code>
+      <div className="mb-4 flex items-center justify-between ">
+        <code className="inline-block px-2">{name}</code>
         <Badge color={required ? 'amber' : 'scale'}>{required ? 'Required' : 'Optional'}</Badge>
       </div>
       {format && format != type && (
         <div className="mb-4 flex items-center gap-2">
-          <label className="uppercase text-xs font-mono text-scale-900">Format:</label>
+          <label className="font-mono text-xs uppercase text-scale-900">Format:</label>
           <code className="px-2">{format}</code>
           {type}
         </div>
       )}
       {description !== false && (
         <>
-          <label className="uppercase text-xs font-mono text-scale-900">Description</label>
+          <label className="font-mono text-xs uppercase text-scale-900">Description</label>
           <Description content={description} metadata={metadata} onChange={onDesciptionUpdated} />
         </>
       )}
diff --git a/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js b/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
index 97f93d6cba9..e3b6a2a4e81 100644
--- a/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
+++ b/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { toJS } from 'mobx'
-import { Button, Dropdown, IconPlus } from '@supabase/ui'
+import { Button, Dropdown, IconPlus } from 'common2'
 import { observer } from 'mobx-react-lite'
 
 const OrganizationDropdown = ({ organizations }) => {
diff --git a/studio/components/to-be-cleaned/ListIcons.tsx b/studio/components/to-be-cleaned/ListIcons.tsx
index 0882a68b3b9..82574c6cf5d 100644
--- a/studio/components/to-be-cleaned/ListIcons.tsx
+++ b/studio/components/to-be-cleaned/ListIcons.tsx
@@ -1,8 +1,8 @@
-import { IconDatabase } from '@supabase/ui'
+import { IconDatabase } from 'common2'
 import SVG from 'react-inlinesvg'
 
 export const vercelIcon = (
-  <div className="bg-black dark:bg-white p-1 flex items-center justify-center rounded">
+  <div className="flex items-center justify-center rounded bg-black p-1 dark:bg-white">
     <svg
       className="m-auto fill-current text-white dark:text-black"
       width="12px"
@@ -15,7 +15,7 @@ export const vercelIcon = (
 )
 
 export const databaseIcon = (
-  <div className="bg-green-500 p-1 flex items-center justify-center rounded dark:text-typography-body-dark ">
+  <div className="flex items-center justify-center rounded bg-green-500 p-1 dark:text-typography-body-dark ">
     {/* <SVG
       src={'/icons/feather/database.svg'}
       style={{ width: `12px`, height: `12px`, strokeWidth: '2px' }}
diff --git a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModal.js b/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModal.js
index 26e1caf6c1c..29323505c2d 100644
--- a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModal.js
+++ b/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModal.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Modal } from '@supabase/ui'
+import { Button, Modal } from 'common2'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 function ConfirmModal({
@@ -54,7 +54,7 @@ function ConfirmModal({
       children={
         description && (
           <Modal.Content>
-            <p className="text-sm text-scale-1100 py-4">{description}</p>
+            <p className="py-4 text-sm text-scale-1100">{description}</p>
           </Modal.Content>
         )
       }
diff --git a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js b/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js
index b4a97bddf13..fac26dc81ec 100644
--- a/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js
+++ b/studio/components/to-be-cleaned/ModalsDeprecated/ConfirmModalwithState.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 
 export default function ConfirmModal({
   title,
diff --git a/studio/components/to-be-cleaned/ProductEmptyState.tsx b/studio/components/to-be-cleaned/ProductEmptyState.tsx
index 61d02ad2287..a43721f965c 100644
--- a/studio/components/to-be-cleaned/ProductEmptyState.tsx
+++ b/studio/components/to-be-cleaned/ProductEmptyState.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { FC, ReactNode } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
@@ -26,8 +26,8 @@ const ProductEmptyState: FC<Props> = ({
   const hasAction = (ctaButtonLabel && onClickCta) || (infoButtonUrl && infoButtonLabel)
 
   return (
-    <div className="flex items-center justify-center w-full h-full">
-      <div className="flex space-x-4 p-6 rounded border border-panel-border-light dark:border-panel-border-dark bg-panel-body-light dark:bg-panel-body-dark shadow-md">
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex space-x-4 rounded border border-panel-border-light bg-panel-body-light p-6 shadow-md dark:border-panel-border-dark dark:bg-panel-body-dark">
         {/* A graphic can probably be placed here as a sibling to the div below*/}
         <div className="flex flex-col">
           <div className="w-80 space-y-4">
@@ -47,11 +47,11 @@ const ProductEmptyState: FC<Props> = ({
                         <Tooltip.Arrow className="radix-tooltip-arrow" />
                         <div
                           className={[
-                            'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                            'border-scale-200 border',
+                            'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                            'border border-scale-200',
                           ].join(' ')}
                         >
-                          <span className="text-scale-1200 text-xs">{disabledMessage}</span>
+                          <span className="text-xs text-scale-1200">{disabledMessage}</span>
                         </div>
                       </Tooltip.Content>
                     )}
diff --git a/studio/components/to-be-cleaned/Reports/EditReportModal.tsx b/studio/components/to-be-cleaned/Reports/EditReportModal.tsx
index 6aeadc04f92..dafa6b3528a 100644
--- a/studio/components/to-be-cleaned/Reports/EditReportModal.tsx
+++ b/studio/components/to-be-cleaned/Reports/EditReportModal.tsx
@@ -2,7 +2,7 @@ import React, { FC, useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { toJS } from 'mobx'
-import { Input, Modal } from '@supabase/ui'
+import { Input, Modal } from 'common2'
 
 import { useStore } from 'hooks'
 import { useProjectContentStore } from 'stores/projectContentStore'
diff --git a/studio/components/to-be-cleaned/SimpleCodeBlock.tsx b/studio/components/to-be-cleaned/SimpleCodeBlock.tsx
index a22de412035..2e0c7278f48 100644
--- a/studio/components/to-be-cleaned/SimpleCodeBlock.tsx
+++ b/studio/components/to-be-cleaned/SimpleCodeBlock.tsx
@@ -10,7 +10,7 @@ import Highlight, { defaultProps } from 'prism-react-renderer'
 import defaultTheme from 'prism-react-renderer/themes/palenight'
 import Clipboard from 'clipboard'
 import rangeParser from 'parse-numeric-range'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { copyToClipboard } from 'lib/helpers'
 
 const highlightLinesRangeRegex = /{([\d,-]+)}/
@@ -92,7 +92,7 @@ const SimpleCodeBlock: FC<any> = ({ children, className: languageClassName, meta
                 )
               })}
             </pre>
-            <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity absolute right-0 top-0">
+            <div className="invisible absolute right-0 top-0 opacity-0 transition-opacity group-hover:visible group-hover:opacity-100">
               <Button
                 size="tiny"
                 type="default"
diff --git a/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js b/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js
index 755494493ce..4ecc0a5f122 100644
--- a/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/RenameQuery.js
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 
 import { useStore } from 'hooks'
 import { useSqlStore } from 'localStores/sqlEditor/SqlEditorStore'
-import { Button, Form, Input, Modal } from '@supabase/ui'
+import { Button, Form, Input, Modal } from 'common2'
 
 const RenameQuery = observer(({ tabId, onComplete, visible, onCancel }) => {
   const { ui, content: contentStore } = useStore()
diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index 3fbdfcd0174..2ee5330cd52 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -5,7 +5,7 @@ import { CSVLink } from 'react-csv'
 import { debounce } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState } from 'react'
-import { Button, Dropdown, IconChevronDown } from '@supabase/ui'
+import { Button, Dropdown, IconChevronDown } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useKeyboardShortcuts, useStore, useWindowDimensions, checkPermissions } from 'hooks'
@@ -178,7 +178,7 @@ const MonacoEditor = ({ error, updateSqlSnippet }) => {
   }
 
   return (
-    <div className="dark:border-dark flex-grow overflow-y-auto border-b">
+    <div className="flex-grow overflow-y-auto border-b dark:border-dark">
       <Editor
         className="monaco-editor"
         theme={'supabase'}
diff --git a/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx b/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx
index 0a377d29bba..60abd04f4dd 100644
--- a/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx
+++ b/studio/components/to-be-cleaned/Storage/CreateBucketModal.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { Modal, Alert, Button, Input, Toggle } from '@supabase/ui'
+import { Modal, Alert, Button, Input, Toggle } from 'common2'
 
 interface Props {
   visible: boolean
@@ -67,7 +67,7 @@ const CreateBucketModal: FC<Props> = ({
     >
       <form className="space-y-6 py-4">
         <Modal.Content>
-          <div className="flex items-center relative">
+          <div className="relative flex items-center">
             <Input
               autoFocus
               label="Name of bucket"
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.js
index c960fca85cd..9061bd3b6ce 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/ConfirmDeleteModal.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Modal, Button, Alert } from '@supabase/ui'
+import { Modal, Button, Alert } from 'common2'
 
 const ConfirmDeleteModal = ({
   visible = false,
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
index 8972c794999..c5a94ee5511 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerColumn.js
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { get, sum } from 'lodash'
-import { Checkbox, IconUpload } from '@supabase/ui'
+import { Checkbox, IconUpload } from 'common2'
 import { Transition } from '@headlessui/react'
 import { useContextMenu } from 'react-contexify'
 
@@ -29,16 +29,16 @@ const DragOverOverlay = ({ isOpen, onDragLeave, onDrop, folderIsEmpty }) => {
       <div
         onDragLeave={onDragLeave}
         onDrop={onDrop}
-        className="absolute w-full h-full top-0 flex items-center justify-center"
+        className="absolute top-0 flex h-full w-full items-center justify-center"
         style={{ backgroundColor: folderIsEmpty ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.2)' }}
       >
         {!folderIsEmpty && (
           <div
-            className="w-3/4 h-32 border-2 border-dashed border-gray-400 rounded-md flex flex-col items-center justify-center p-6 pointer-events-none"
+            className="pointer-events-none flex h-32 w-3/4 flex-col items-center justify-center rounded-md border-2 border-dashed border-gray-400 p-6"
             style={{ backgroundColor: 'rgba(0,0,0,0.7)' }}
           >
-            <IconUpload className="text-white pointer-events-none" size={20} strokeWidth={2} />
-            <p className="text-center text-sm mt-2 pointer-events-none">
+            <IconUpload className="pointer-events-none text-white" size={20} strokeWidth={2} />
+            <p className="pointer-events-none mt-2 text-center text-sm">
               Drop your files to upload to this folder
             </p>
           </div>
@@ -138,7 +138,7 @@ const FileExplorerColumn = ({
             : 'w-64 border-r border-panel-border-light dark:border-panel-border-dark'
         }
         ${view === STORAGE_VIEWS.COLUMNS ? '' : ''}
-        relative flex-shrink-0 overflow-auto flex flex-col hide-scrollbar
+        hide-scrollbar relative flex flex-shrink-0 flex-col overflow-auto
       `}
       onContextMenu={displayMenu}
       onDragOver={onDragOver}
@@ -152,8 +152,8 @@ const FileExplorerColumn = ({
       {/* Checkbox selection for select all */}
       {view === STORAGE_VIEWS.COLUMNS && (
         <div
-          className={`bg-table-header-light dark:bg-table-header-dark sticky top-0 z-10 flex items-center px-2.5 mb-0 ${
-            haveSelectedItems > 0 ? 'opacity-100 py-3 h-10' : 'opacity-0 py-0 h-0'
+          className={`sticky top-0 z-10 mb-0 flex items-center bg-table-header-light px-2.5 dark:bg-table-header-dark ${
+            haveSelectedItems > 0 ? 'h-10 py-3 opacity-100' : 'h-0 py-0 opacity-0'
           } transition-all duration-200`}
           onClick={(event) => event.stopPropagation()}
         >
@@ -172,19 +172,19 @@ const FileExplorerColumn = ({
       {view === STORAGE_VIEWS.LIST && (
         <div
           className="
-          bg-panel-footer-light dark:bg-panel-footer-dark
-          px-2.5 py-2 flex items-center min-w-min sticky top-0 z-10
-          border-b border-panel-border-light dark:border-panel-border-dark
+          sticky top-0
+          z-10 flex min-w-min items-center border-b border-panel-border-light bg-panel-footer-light px-2.5
+          py-2 dark:border-panel-border-dark dark:bg-panel-footer-dark
         "
         >
-          <div className="flex items-center w-[40%] min-w-[250px]">
+          <div className="flex w-[40%] min-w-[250px] items-center">
             <SelectAllCheckbox />
             <p className="text-sm">Name</p>
           </div>
-          <p className="text-sm w-[11%] min-w-[100px]">Size</p>
-          <p className="text-sm w-[14%] min-w-[100px]">Type</p>
-          <p className="text-sm w-[15%] min-w-[160px]">Created at</p>
-          <p className="text-sm w-[15%] min-w-[160px]">Last modified at</p>
+          <p className="w-[11%] min-w-[100px] text-sm">Size</p>
+          <p className="w-[14%] min-w-[100px] text-sm">Type</p>
+          <p className="w-[15%] min-w-[160px] text-sm">Created at</p>
+          <p className="w-[15%] min-w-[160px] text-sm">Last modified at</p>
         </div>
       )}
 
@@ -193,7 +193,7 @@ const FileExplorerColumn = ({
         <div
           className={`
             ${fullWidth ? 'w-full' : 'w-64 border-r border-gray-500'}
-            flex-shrink-0 overflow-auto flex flex-col space-y-1 my-1
+            my-1 flex flex-shrink-0 flex-col space-y-1 overflow-auto
           `}
         >
           <ShimmeringLoader />
@@ -232,10 +232,10 @@ const FileExplorerColumn = ({
 
       {/* Drag drop upload CTA for when column is empty */}
       {column.items.length === 0 && column.status !== STORAGE_ROW_STATUS.LOADING && (
-        <div className="h-full w-full flex flex-col items-center justify-center">
+        <div className="flex h-full w-full flex-col items-center justify-center">
           <img src="/img/storage-placeholder.svg" className="opacity-75" />
           <p className="my-3 opacity-75">Drop your files here</p>
-          <p className="text-sm text-center w-40 text-scale-1100">
+          <p className="w-40 text-center text-sm text-scale-1100">
             Or upload them via the "Upload file" button above
           </p>
         </div>
@@ -255,8 +255,8 @@ const FileExplorerColumn = ({
       {view === STORAGE_VIEWS.LIST && (
         <div
           className="
-          bg-panel-footer-light dark:bg-panel-footer-dark
-          px-2.5 py-2 flex items-center min-w-min sticky bottom-0 z-10
+          sticky bottom-0
+          z-10 flex min-w-min items-center bg-panel-footer-light px-2.5 py-2 dark:bg-panel-footer-dark
         "
         >
           <p className="text-sm">
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
index a0b93393bc9..5b985abb110 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeader.js
@@ -16,7 +16,7 @@ import {
   IconEdit2,
   IconLoader,
   IconChevronsUp,
-} from '@supabase/ui'
+} from 'common2'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 import { STORAGE_VIEWS, STORAGE_SORT_BY, STORAGE_SORT_BY_ORDER } from '../Storage.constants.ts'
 
@@ -198,9 +198,9 @@ const FileExplorerHeader = ({
   return (
     <div
       className="
-    bg-panel-header-light dark:bg-panel-header-dark
-    border-panel-border-light dark:border-panel-border-dark
-    flex h-[40px] items-center justify-between rounded-t-md border-b px-2"
+    flex h-[40px]
+    items-center justify-between
+    rounded-t-md border-b border-panel-border-light bg-panel-header-light px-2 dark:border-panel-border-dark dark:bg-panel-header-dark"
     >
       {/* Navigation */}
       <div className={`flex items-center ${isEditingPath ? 'w-1/2' : ''}`}>
@@ -340,7 +340,7 @@ const FileExplorerHeader = ({
             </Button>
           </Dropdown>
         </div>
-        <div className="border-panel-border-light dark:border-panel-border-dark h-6 border-r" />
+        <div className="h-6 border-r border-panel-border-light dark:border-panel-border-dark" />
         <div className="flex items-center space-x-1">
           <div className="hidden">
             <input ref={uploadButtonRef} type="file" multiple onChange={onFilesUpload} />
@@ -366,7 +366,7 @@ const FileExplorerHeader = ({
         {/* Search: Disabled for now */}
         {view === STORAGE_VIEWS.LIST && (
           <>
-            <div className="border-panel-border-light dark:border-panel-border-dark h-6 border-r" />
+            <div className="h-6 border-r border-panel-border-light dark:border-panel-border-dark" />
             <div className="flex items-center">
               {isSearching ? (
                 <Input
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.js
index 8a765a96c5a..add43fb5d90 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.js
@@ -1,4 +1,4 @@
-import { Button, IconDownload, IconTrash2, IconMove, IconX } from '@supabase/ui'
+import { Button, IconDownload, IconTrash2, IconMove, IconX } from 'common2'
 
 const FileExplorerHeaderSelection = ({
   selectedItems = [],
@@ -8,15 +8,15 @@ const FileExplorerHeaderSelection = ({
   onUnselectAllItems = () => {},
 }) => {
   return (
-    <div className="px-2 py-1 rounded-t-md bg-brand-700 dark:bg-brand-600 flex items-center shadow z-10 h-[40px]">
+    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-700 px-2 py-1 shadow dark:bg-brand-600">
       <Button
         icon={<IconX size={16} strokeWidth={2} />}
         type="text"
         shadow={false}
         onClick={onUnselectAllItems}
       />
-      <div className="flex items-center space-x-3 ml-4">
-        <p className="text-sm text-scale-1200 mb-0">
+      <div className="ml-4 flex items-center space-x-3">
+        <p className="mb-0 text-sm text-scale-1200">
           <span style={{ fontVariantNumeric: 'tabular-nums' }}>{selectedItems.length}</span> items
           selected
         </p>
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
index 04c1322adc2..ad36b0fba11 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerRow.js
@@ -15,7 +15,7 @@ import {
   IconCopy,
   IconEdit,
   IconMove,
-} from '@supabase/ui'
+} from 'common2'
 import SVG from 'react-inlinesvg'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useContextMenu } from 'react-contexify'
@@ -115,7 +115,7 @@ const FileExplorerRow = ({
 
     return (
       <div className="storage-row flex items-center justify-between rounded bg-gray-500">
-        <div className="flex flex-grow items-center h-full px-2.5">
+        <div className="flex h-full flex-grow items-center px-2.5">
           <div className="">
             <RowIcon
               view={view}
@@ -128,7 +128,7 @@ const FileExplorerRow = ({
             <input
               autoFocus
               ref={inputRef}
-              className="storage-row-input text-sm ml-3 p-0 px-1 h-full bg-inherit"
+              className="storage-row-input ml-3 h-full bg-inherit p-0 px-1 text-sm"
               type="text"
               value={itemName}
               onChange={(event) => setItemName(event.target.value)}
@@ -209,7 +209,7 @@ const FileExplorerRow = ({
 
   return (
     <div
-      className="border-b dark:border-dark h-full"
+      className="h-full border-b dark:border-dark"
       onContextMenu={(event) => {
         event.stopPropagation()
         item.type === STORAGE_ROW_TYPES.FILE
@@ -219,7 +219,7 @@ const FileExplorerRow = ({
     >
       <div
         className={[
-          'storage-row px-2.5 flex items-center group h-full',
+          'storage-row group flex h-full items-center px-2.5',
           'hover:bg-panel-footer-light dark:hover:bg-panel-footer-dark',
           `${isOpened ? 'bg-scale-400' : ''}`,
           `${isPreviewed ? 'bg-green-500 hover:bg-green-500 dark:hover:bg-green-500' : ''}`,
@@ -269,7 +269,7 @@ const FileExplorerRow = ({
               }}
             />
           </div>
-          <p title={item.name} className="text-sm truncate" style={{ width: nameWidth }}>
+          <p title={item.name} className="truncate text-sm" style={{ width: nameWidth }}>
             {item.name}
           </p>
           {item.isCorrupted && (
@@ -281,11 +281,11 @@ const FileExplorerRow = ({
                 <Tooltip.Arrow className="radix-tooltip-arrow" />
                 <div
                   className={[
-                    'bg-scale-100 rounded py-1 px-2 leading-none shadow',
-                    'border-scale-200 border',
+                    'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                    'border border-scale-200',
                   ].join(' ')}
                 >
-                  <span className="text-scale-1200 text-xs">
+                  <span className="text-xs text-scale-1200">
                     File is corrupted, please delete and reupload again.
                   </span>
                 </div>
@@ -296,10 +296,10 @@ const FileExplorerRow = ({
 
         {view === STORAGE_VIEWS.LIST && (
           <>
-            <p className="text-sm truncate w-[11%] min-w-[100px]">{size}</p>
-            <p className="text-sm truncate w-[14%] min-w-[100px]">{mimeType}</p>
-            <p className="text-sm truncate w-[15%] min-w-[160px]">{createdAt}</p>
-            <p className="text-sm truncate w-[15%] min-w-[160px]">{updatedAt}</p>
+            <p className="w-[11%] min-w-[100px] truncate text-sm">{size}</p>
+            <p className="w-[14%] min-w-[100px] truncate text-sm">{mimeType}</p>
+            <p className="w-[15%] min-w-[160px] truncate text-sm">{createdAt}</p>
+            <p className="w-[15%] min-w-[160px] truncate text-sm">{updatedAt}</p>
           </>
         )}
 
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/MoveItemsModal.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/MoveItemsModal.js
index d538bd603cb..d9e850e8e6f 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/MoveItemsModal.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/MoveItemsModal.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Modal, Button, Input, Space } from '@supabase/ui'
+import { Modal, Button, Input, Space } from 'common2'
 
 const MoveItemsModal = ({
   bucketName = '',
@@ -57,7 +57,7 @@ const MoveItemsModal = ({
     >
       <Modal.Content>
         <form className="my-4">
-          <div className="flex items-center relative">
+          <div className="relative flex items-center">
             <Input
               autoFocus
               label={`Path to new directory in ${bucketName}`}
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js
index 203296f90cf..d568c22f90d 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.js
@@ -6,7 +6,7 @@ import {
   IconDownload,
   IconTrash2,
   IconAlertCircle,
-} from '@supabase/ui'
+} from 'common2'
 import SVG from 'react-inlinesvg'
 import { formatBytes } from 'lib/helpers'
 import { Transition } from '@headlessui/react'
@@ -25,14 +25,14 @@ const PreviewFile = ({ mimeType, previewUrl }) => {
   }
   if (previewUrl === 'loading') {
     return (
-      <div className="w-full h-full flex items-center justify-center text-scale-900">
+      <div className="flex h-full w-full items-center justify-center text-scale-900">
         <IconLoader size={14} strokeWidth={2} className="animate-spin" />
       </div>
     )
   }
   if (previewUrl === 'skipped') {
     return (
-      <div className="w-full h-full flex flex-col items-center justify-center">
+      <div className="flex h-full w-full flex-col items-center justify-center">
         <SVG
           src={'/img/file-filled.svg'}
           alt={'No preview'}
@@ -40,7 +40,7 @@ const PreviewFile = ({ mimeType, previewUrl }) => {
             code.replace(/svg/, 'svg class="mx-auto w-32 h-32 text-color-inherit opacity-75"')
           }
         />
-        <p className="text-sm text-center mt-2 w-2/5">
+        <p className="mt-2 w-2/5 text-center text-sm">
           File size is too large to preview in the explorer
         </p>
       </div>
@@ -49,17 +49,17 @@ const PreviewFile = ({ mimeType, previewUrl }) => {
   if (mimeType.includes('image')) {
     return (
       <div
-        className="w-full h-full flex items-center justify-center bg-center bg-contain bg-no-repeat"
+        className="flex h-full w-full items-center justify-center bg-contain bg-center bg-no-repeat"
         style={{ backgroundImage: `url('${previewUrl}')` }}
       />
     )
   }
   if (mimeType.includes('audio')) {
     return (
-      <div className="w-full h-full flex items-center justify-center px-10">
+      <div className="flex h-full w-full items-center justify-center px-10">
         <audio key={previewUrl} controls style={{ width: 'inherit' }}>
           <source src={previewUrl} type="audio/mpeg" />
-          <p className="text-scale-1100 text-sm">
+          <p className="text-sm text-scale-1100">
             Your browser does not support the audio element.
           </p>
         </audio>
@@ -68,10 +68,10 @@ const PreviewFile = ({ mimeType, previewUrl }) => {
   }
   if (mimeType.includes('video')) {
     return (
-      <div className="w-full h-full flex items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
         <video key={previewUrl} controls style={{ maxHeight: '100%' }}>
           <source src={previewUrl} type="video/mp4" />
-          <p className="text-scale-1100 text-sm">Your browser does not support the video tag.</p>
+          <p className="text-sm text-scale-1100">Your browser does not support the video tag.</p>
         </video>
       </div>
     )
@@ -113,12 +113,12 @@ const PreviewPane = ({
     >
       <div
         className="
-        bg-panel-header-light dark:bg-panel-header-dark
-        h-full p-4 border-l border-panel-border-light dark:border-panel-border-dark"
+        h-full border-l
+        border-panel-border-light bg-panel-header-light p-4 dark:border-panel-border-dark dark:bg-panel-header-dark"
         style={{ width }}
       >
         {/* Preview Header */}
-        <div className="w-full flex justify-end text-scale-900 hover:text-scale-1200 transition-colors">
+        <div className="flex w-full justify-end text-scale-900 transition-colors hover:text-scale-1200">
           <IconX
             className="cursor-pointer"
             size={14}
@@ -128,8 +128,8 @@ const PreviewPane = ({
         </div>
 
         {/* Preview Thumbnail*/}
-        <div className="border border-panel-border-light dark:border-panel-border-dark my-4">
-          <div className="w-full h-56 2xl:h-72 flex items-center">
+        <div className="my-4 border border-panel-border-light dark:border-panel-border-dark">
+          <div className="flex h-56 w-full items-center 2xl:h-72">
             <PreviewFile mimeType={mimeType} previewUrl={file.previewUrl} />
           </div>
         </div>
@@ -137,7 +137,7 @@ const PreviewPane = ({
         <div className="w-full space-y-6">
           {/* Preview Information */}
           <div className="space-y-1">
-            <h5 className="text-scale-1200 break-words text-base">{file.name}</h5>
+            <h5 className="break-words text-base text-scale-1200">{file.name}</h5>
             {file.isCorrupted && (
               <div className="flex items-center space-x-2">
                 <IconAlertCircle size={14} strokeWidth={2} className="text-scale-1100" />
@@ -157,17 +157,17 @@ const PreviewPane = ({
           {/* Preview Metadata */}
           <div className="space-y-2">
             <div>
-              <label className="text-xs text-scale-900 mb-1">Added on</label>
+              <label className="mb-1 text-xs text-scale-900">Added on</label>
               <p className="text-sm text-scale-1100">{createdAt}</p>
             </div>
             <div>
-              <label className="text-xs text-scale-900 mb-1">Last modified</label>
+              <label className="mb-1 text-xs text-scale-900">Last modified</label>
               <p className="text-sm text-scale-1100">{updatedAt}</p>
             </div>
           </div>
 
           {/* Actions */}
-          <div className="flex space-x-2 border-b pb-4 border-panel-border-light dark:border-panel-border-dark">
+          <div className="flex space-x-2 border-b border-panel-border-light pb-4 dark:border-panel-border-dark">
             <Button
               type="default"
               icon={<IconDownload size={16} strokeWidth={2} />}
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js
index ab24567ffa5..3b1173e8965 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.js
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconLoader } from '@supabase/ui'
+import { IconLoader } from 'common2'
 import { find, get, isEmpty, filter } from 'lodash'
 
 import { useStore } from 'hooks'
@@ -144,7 +144,7 @@ const StoragePolicies = () => {
   return (
     <div className="flex min-h-full w-full flex-col">
       <h3 className="text-xl">Storage policies</h3>
-      <p className="text-scale-1100 text-sm mt-2">
+      <p className="mt-2 text-sm text-scale-1100">
         Safeguard your files with policies that define the operations allowed for your users at the
         bucket level.
       </p>
@@ -179,7 +179,7 @@ const StoragePolicies = () => {
           })}
 
           <div className="!mb-4 w-full border-b border-gray-600" />
-          <p className="text-scale-1000 text-sm">
+          <p className="text-sm text-scale-1000">
             You may also write policies for the tables under the storage schema directly for greater
             control
           </p>
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js
index 4a235ec3444..2f3e5a22ace 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesBucketRow.js
@@ -6,7 +6,7 @@ import {
   IconEdit,
   IconTrash,
   IconMoreVertical,
-} from '@supabase/ui'
+} from 'common2'
 import { isEmpty } from 'lodash'
 import Panel from 'components/ui/Panel'
 
@@ -20,11 +20,11 @@ const PolicyRow = ({
   const { name, command } = policy
   return (
     <div className="group">
-      <Panel.Content className="flex gap-2 justify-between py-4 border-b border-panel-border-light dark:border-panel-border-dark">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-3">
+      <Panel.Content className="flex justify-between gap-2 border-b border-panel-border-light py-4 dark:border-panel-border-dark">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
           <div className="font-mono text-xs text-scale-900">{command}</div>
-          <div className="flex flex-col lg:flex-row gap-2">
-            <span className="text-sm text-scale-1200 truncate">{name}</span>
+          <div className="flex flex-col gap-2 lg:flex-row">
+            <span className="truncate text-sm text-scale-1200">{name}</span>
           </div>
         </div>
         <Dropdown
@@ -85,10 +85,10 @@ const StoragePoliciesBucketRow = ({
   return (
     <Panel
       title={[
-        <div key={label} className="flex items-center justify-between w-full">
+        <div key={label} className="flex w-full items-center justify-between">
           <div className="flex items-center space-x-4">
             <IconArchive className="text-scale-1000" size="small" />
-            <h4 className="text-lg m-0">
+            <h4 className="m-0 text-lg">
               <span>{label}</span>
             </h4>
             {bucket.public && <Badge color="yellow">Public</Badge>}
@@ -117,7 +117,7 @@ const StoragePoliciesBucketRow = ({
           ))}
           {policies.length !== 0 ? (
             <div className="px-6 py-2">
-              <p className="text-scale-1100 text-sm">{getFooterLabel()}</p>
+              <p className="text-sm text-scale-1100">{getFooterLabel()}</p>
             </div>
           ) : null}
         </div>
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.js
index 5d017de6952..31e953f5b8e 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.js
@@ -1,4 +1,4 @@
-import { Modal, IconChevronLeft } from '@supabase/ui'
+import { Modal, IconChevronLeft } from 'common2'
 import { pull } from 'lodash'
 import { useState, useEffect } from 'react'
 
@@ -181,7 +181,7 @@ const StoragePoliciesEditPolicyModal = ({
           <div className="flex items-center space-x-3">
             <span
               onClick={onSelectBackFromTemplates}
-              className="text-scale-900 hover:text-scale-1200 cursor-pointer transition-colors"
+              className="cursor-pointer text-scale-900 transition-colors hover:text-scale-1200"
             >
               <IconChevronLeft strokeWidth={2} size={14} />
             </span>
@@ -192,7 +192,7 @@ const StoragePoliciesEditPolicyModal = ({
     }
     return (
       <div className="flex items-center space-x-3">
-        <h4 className="text-lg m-0">{getTitle()}</h4>
+        <h4 className="m-0 text-lg">{getTitle()}</h4>
       </div>
     )
   }
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js
index 9ffdb0024ed..405ce825a61 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditor.js
@@ -1,4 +1,4 @@
-import { Badge, Button, Checkbox, Input, Modal } from '@supabase/ui'
+import { Badge, Button, Checkbox, Input, Modal } from 'common2'
 import { get } from 'lodash'
 
 import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from '../Storage.constants'
@@ -10,10 +10,10 @@ const PolicyDefinition = ({ definition = '', onUpdatePolicyDefinition = () => {}
   return (
     <div className="flex space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
-        <label className="text-scale-1100 text-base" htmlFor="policy-name">
+        <label className="text-base text-scale-1100" htmlFor="policy-name">
           Policy definition
         </label>
-        <p className="text-scale-900 text-sm">
+        <p className="text-sm text-scale-900">
           Provide a SQL conditional expression that returns a boolean.
         </p>
       </div>
@@ -29,10 +29,10 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = (
   return (
     <div className="flex justify-between space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
-        <label className="text-scale-1100 text-base" htmlFor="allowed-operation">
+        <label className="text-base text-scale-1100" htmlFor="allowed-operation">
           Allowed operation
         </label>
-        <p className="text-scale-900 text-sm">
+        <p className="text-sm text-scale-900">
           Based on the operations you have selected, you can use the highlighted functions in the{' '}
           <a
             href="https://supabase.com/docs/reference/javascript/storage-from-list"
@@ -82,7 +82,7 @@ const PolicyAllowedOperations = ({ allowedOperations = [], onToggleOperation = (
 }
 
 const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () => {} }) => (
-  <div className="dark:border-dark flex w-full items-center justify-end space-x-4 border-t px-6 py-3">
+  <div className="flex w-full items-center justify-end space-x-4 border-t px-6 py-3 dark:border-dark">
     <Button type="default" onClick={onViewTemplates}>
       View templates
     </Button>
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesPlaceholder.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesPlaceholder.js
index 721a723a88e..ee955b8727b 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesPlaceholder.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesPlaceholder.js
@@ -1,10 +1,10 @@
-import { IconArchive } from '@supabase/ui'
+import { IconArchive } from 'common2'
 import Panel from 'components/ui/Panel'
 
 const StoragePoliciesPlaceholder = ({ guiHeight }) => (
   <Panel
     title={[
-      <div key="storagePlaceholder" className="flex items-center justify-between w-full">
+      <div key="storagePlaceholder" className="flex w-full items-center justify-between">
         <div className="flex items-center space-x-4">
           <IconArchive size="small" />
           <h4>Bucket policies</h4>
diff --git a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesReview.js b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesReview.js
index 52739f936a1..8889f661cd4 100644
--- a/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesReview.js
+++ b/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesReview.js
@@ -1,10 +1,10 @@
-import { Button, Modal } from '@supabase/ui'
+import { Button, Modal } from 'common2'
 import { useState } from 'react'
 import SqlEditor from 'components/ui/SqlEditor'
 
 const ReviewEmptyState = () => {
   return (
-    <div className="flex items-center justify-center my-10 opacity-50 space-x-2">
+    <div className="my-10 flex items-center justify-center space-x-2 opacity-50">
       <p>There are no changes made to this policy</p>
     </div>
   )
@@ -25,7 +25,7 @@ const StoragePoliciesReview = ({
     <>
       <Modal.Content>
         <div className="space-y-6 py-8">
-          <div className="space-y-8 flex items-center justify-between space-x-4">
+          <div className="flex items-center justify-between space-y-8 space-x-4">
             <div className="flex flex-col">
               <p className="text-sm text-scale-1100">
                 These are the SQL statements that will be used to create your policies. The suffix
@@ -50,7 +50,7 @@ const StoragePoliciesReview = ({
           </div>
         </div>
       </Modal.Content>
-      <div className="px-6 py-4 w-full flex justify-end items-center gap-2 border-t dark:border-dark">
+      <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 dark:border-dark">
         <Button type="default" onClick={onSelectBack}>
           Back to edit
         </Button>
diff --git a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index 12db485f291..427e4f67d15 100644
--- a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -1,6 +1,6 @@
 import useSWR from 'swr'
 import { FC, useState } from 'react'
-import { Button, Form, Input, Listbox } from '@supabase/ui'
+import { Button, Form, Input, Listbox } from 'common2'
 
 import { useStore } from 'hooks'
 import { patch, get } from 'lib/common/fetch'
@@ -105,8 +105,8 @@ const StorageConfig = ({ config, projectRef }: any) => {
           return (
             <>
               <div className="mb-6">
-                <h3 className="text-scale-1200 mb-2 text-xl">Storage settings</h3>
-                <div className="text-scale-900 text-sm">
+                <h3 className="mb-2 text-xl text-scale-1200">Storage settings</h3>
+                <div className="text-sm text-scale-900">
                   Configure your project's storage settings
                 </div>
               </div>
@@ -114,11 +114,11 @@ const StorageConfig = ({ config, projectRef }: any) => {
                 <div
                   className={[
                     'bg-scale-100 dark:bg-scale-300',
-                    'border-scale-400 overflow-hidden',
+                    'overflow-hidden border-scale-400',
                     'rounded-md border shadow',
                   ].join(' ')}
                 >
-                  <div className="divide-scale-400 flex flex-col gap-0 divide-y">
+                  <div className="flex flex-col gap-0 divide-y divide-scale-400">
                     <div className="block grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
                       <div className="relative col-span-12 flex flex-col gap-6 lg:col-span-4">
                         <p className="text-sm">Upload file size limit</p>
@@ -158,7 +158,7 @@ const StorageConfig = ({ config, projectRef }: any) => {
                             </Listbox>
                           </div>
                         </div>
-                        <p className="text-scale-1100 text-sm">
+                        <p className="text-sm text-scale-1100">
                           {selectedUnit !== StorageSizeUnits.BYTES &&
                             `Equivalent to ${convertToBytes(
                               values.fileSizeLimit,
@@ -179,7 +179,7 @@ const StorageConfig = ({ config, projectRef }: any) => {
                       />
                     </div>
                   )}
-                  <div className="border-scale-400 border-t" />
+                  <div className="border-t border-scale-400" />
                   <div className="flex justify-between py-4 px-8">
                     <div className="flex w-full items-center justify-end gap-2">
                       <div className="flex gap-2">
diff --git a/studio/components/to-be-cleaned/Storage/ToggleBucketPublicModal.tsx b/studio/components/to-be-cleaned/Storage/ToggleBucketPublicModal.tsx
index 8682bad32e2..0bae6dd83bc 100644
--- a/studio/components/to-be-cleaned/Storage/ToggleBucketPublicModal.tsx
+++ b/studio/components/to-be-cleaned/Storage/ToggleBucketPublicModal.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from 'react'
-import { Modal, Alert, Button } from '@supabase/ui'
+import { Modal, Alert, Button } from 'common2'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
 
 interface Props {
diff --git a/studio/components/to-be-cleaned/forms/AutoTextArea.js b/studio/components/to-be-cleaned/forms/AutoTextArea.js
index 01aed57c14f..18a09305e64 100644
--- a/studio/components/to-be-cleaned/forms/AutoTextArea.js
+++ b/studio/components/to-be-cleaned/forms/AutoTextArea.js
@@ -1,4 +1,4 @@
-import { Input } from '@supabase/ui'
+import { Input } from 'common2'
 import React, { useState, useEffect, useRef } from 'react'
 
 const AutoTextArea = (props) => {
diff --git a/studio/components/to-be-cleaned/forms/SchemaFormPanel.js b/studio/components/to-be-cleaned/forms/SchemaFormPanel.js
index 4b116f477bb..74657ad1ea1 100644
--- a/studio/components/to-be-cleaned/forms/SchemaFormPanel.js
+++ b/studio/components/to-be-cleaned/forms/SchemaFormPanel.js
@@ -1,6 +1,6 @@
 import SchemaForm from './SchemaForm'
 import React, { useState } from 'react'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 export default function SchemaFormPanel({
   schema,
@@ -40,17 +40,17 @@ export default function SchemaFormPanel({
     <section className="section-block mb-8">
       <div
         className="
-          px-6 h-12
-          bg-panel-header-light dark:bg-panel-header-dark
-          border-b border-panel-border-light dark:border-panel-border-dark
-          flex overflow-hidden items-center"
+          flex h-12
+          items-center overflow-hidden
+          border-b border-panel-border-light bg-panel-header-light
+          px-6 dark:border-panel-border-dark dark:bg-panel-header-dark"
       >
         <div className="flex-1 text-left">
           <h6>{title || ''}</h6>
         </div>
         <div
           className={`flex transition duration-150 ${
-            hasChanged ? 'opacity-100' : 'opacity-0 cursor-default'
+            hasChanged ? 'opacity-100' : 'cursor-default opacity-0'
           }`}
         >
           <Button onClick={onClickCancel} type="default" disabled={!hasChanged}>
diff --git a/studio/components/to-be-cleaned/forms/SecretField.tsx b/studio/components/to-be-cleaned/forms/SecretField.tsx
index 602a4c408b9..adc457db0d4 100644
--- a/studio/components/to-be-cleaned/forms/SecretField.tsx
+++ b/studio/components/to-be-cleaned/forms/SecretField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IconEye, IconEyeOff } from '@supabase/ui'
+import { IconEye, IconEyeOff } from 'common2'
 import { connectField, filterDOMProps } from 'uniforms'
 
 const SecretField: React.FC = (props: any) => {
diff --git a/studio/components/to-be-cleaned/forms/ToggleField.js b/studio/components/to-be-cleaned/forms/ToggleField.js
index 5b05bc29e05..9300bb20e4d 100644
--- a/studio/components/to-be-cleaned/forms/ToggleField.js
+++ b/studio/components/to-be-cleaned/forms/ToggleField.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { connectField, filterDOMProps } from 'uniforms'
-import { Toggle } from '@supabase/ui'
+import { Toggle } from 'common2'
 
 function ToggleField({
   disabled,
diff --git a/studio/components/ui/BackButton.tsx b/studio/components/ui/BackButton.tsx
index 7210e6fa3f3..ca5257fef36 100644
--- a/studio/components/ui/BackButton.tsx
+++ b/studio/components/ui/BackButton.tsx
@@ -1,8 +1,8 @@
-import { Button, IconArrowLeft } from '@supabase/ui'
+import { Button, IconArrowLeft } from 'common2'
 
 export function BackButton({ onClick }: { onClick: () => void }) {
   return (
-    <div className="2xl:absolute 2xl:top-[2px] -ml-2 2xl:-left-24">
+    <div className="-ml-2 2xl:absolute 2xl:top-[2px] 2xl:-left-24">
       <Button type="text" icon={<IconArrowLeft />} onClick={onClick}>
         Back
       </Button>
diff --git a/studio/components/ui/CSVButton.tsx b/studio/components/ui/CSVButton.tsx
index edc65394bd1..cabda4c0dbc 100644
--- a/studio/components/ui/CSVButton.tsx
+++ b/studio/components/ui/CSVButton.tsx
@@ -1,4 +1,4 @@
-import { Button, IconDownloadCloud } from '@supabase/ui'
+import { Button, IconDownloadCloud } from 'common2'
 import { ButtonProps } from '@supabase/ui/dist/cjs/components/Button/Button'
 import { flattenDeep } from 'lodash'
 import React, { useMemo, useRef } from 'react'
diff --git a/studio/components/ui/CardButton.tsx b/studio/components/ui/CardButton.tsx
index 203639c3a72..77835902586 100644
--- a/studio/components/ui/CardButton.tsx
+++ b/studio/components/ui/CardButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { IconChevronRight } from '@supabase/ui'
+import { IconChevronRight } from 'common2'
 import Link from 'next/link'
 
 interface Props {
@@ -85,7 +85,7 @@ const CardButton: FC<Props> = ({
         <h5 className="text-scale-1200">{title}</h5>
         {(children || description) && (
           <div className="flex w-full flex-1 flex-col">
-            <p className="text-scale-1100 text-sm">{description}</p>
+            <p className="text-sm text-scale-1100">{description}</p>
             <div className="w-full">{children && children}</div>
           </div>
         )}
@@ -94,14 +94,14 @@ const CardButton: FC<Props> = ({
       {isLink && (
         <div
           className="
-          text-scale-900
-          group-hover:text-scale-1200
           absolute
           right-4
           top-4
+          text-scale-900
           transition-all
           duration-200
           group-hover:right-3
+          group-hover:text-scale-1200
         "
         >
           <IconChevronRight />
diff --git a/studio/components/ui/Charts/EmptyState.tsx b/studio/components/ui/Charts/EmptyState.tsx
index 582703dea27..e17e323d161 100644
--- a/studio/components/ui/Charts/EmptyState.tsx
+++ b/studio/components/ui/Charts/EmptyState.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconBarChart2 } from '@supabase/ui'
+import { IconBarChart2 } from 'common2'
 
 interface Props {
   title?: string
@@ -12,10 +12,10 @@ const EmptyState: FC<Props> = ({
 }) => (
   <div
     className="
-      border-scale-600 flex
-      h-full w-full flex-col
-      items-center justify-center space-y-2 border
-      border-dashed text-center py-4 space-y-2
+      flex h-full
+      w-full flex-col items-center
+      justify-center space-y-2 space-y-2 border
+      border-dashed border-scale-600 py-4 text-center
     "
   >
     <IconBarChart2 className="text-scale-1100" />
diff --git a/studio/components/ui/ConfirmationModal.tsx b/studio/components/ui/ConfirmationModal.tsx
index d74b83f7765..064d756b84e 100644
--- a/studio/components/ui/ConfirmationModal.tsx
+++ b/studio/components/ui/ConfirmationModal.tsx
@@ -1,4 +1,4 @@
-import { Modal, Button, Space } from '@supabase/ui'
+import { Modal, Button, Space } from 'common2'
 import { MouseEventHandler } from 'react'
 import { FC, useState, useEffect } from 'react'
 
diff --git a/studio/components/ui/DatePicker/DatePicker.tsx b/studio/components/ui/DatePicker/DatePicker.tsx
index 1cb3eada1c7..e6cc53fda54 100644
--- a/studio/components/ui/DatePicker/DatePicker.tsx
+++ b/studio/components/ui/DatePicker/DatePicker.tsx
@@ -7,7 +7,7 @@ import {
   IconChevronRight,
   IconArrowRight,
   IconCalendar,
-} from '@supabase/ui'
+} from 'common2'
 
 import { format } from 'date-fns'
 import TimeSplitInput from './TimeSplitInput'
@@ -131,11 +131,11 @@ function _DatePicker({
             </div>
             <div
               className={`
-                      text-scale-900 
                       flex 
                       w-12 
-                      items-center
+                      items-center 
                       justify-center
+                      text-scale-900
                     `}
             >
               <IconArrowRight strokeWidth={1.5} size={14} />
@@ -190,7 +190,7 @@ function _DatePicker({
                     >
                       <IconChevronLeft size={16} strokeWidth={2} />
                     </button>
-                    <span className="text-scale-1100 text-sm">{format(date, 'MMMM yyyy')}</span>
+                    <span className="text-sm text-scale-1100">{format(date, 'MMMM yyyy')}</span>
                     <button
                       onClick={increaseMonth}
                       disabled={nextMonthButtonDisabled}
diff --git a/studio/components/ui/DatePicker/TimeSplitInput.tsx b/studio/components/ui/DatePicker/TimeSplitInput.tsx
index a6c31c56e5d..275b3050533 100644
--- a/studio/components/ui/DatePicker/TimeSplitInput.tsx
+++ b/studio/components/ui/DatePicker/TimeSplitInput.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { IconClock } from '@supabase/ui'
+import { IconClock } from 'common2'
 
 import { format } from 'date-fns'
 
@@ -173,12 +173,12 @@ const TimeSplitInput = ({
   return (
     <div
       className={`
-        flex items-center justify-center gap-0
-        text-xs text-scale-1100 bg-scale-100 dark:bg-scaleA-300 border border-scale-700 h-7 rounded
-        ${focus && ' outline outline-2 outline-scale-500 border-scale-800'}
+        flex h-7 items-center justify-center
+        gap-0 rounded border border-scale-700 bg-scale-100 text-xs text-scale-1100 dark:bg-scaleA-300
+        ${focus && ' border-scale-800 outline outline-2 outline-scale-500'}
     `}
     >
-      <div className="text-scale-900 mr-1">
+      <div className="mr-1 text-scale-900">
         <IconClock size={14} strokeWidth={1.5} />
       </div>
 
@@ -191,13 +191,13 @@ const TimeSplitInput = ({
         onChange={(e) => handleOnChange(e.target.value, 'HH')}
         aria-label="Hours"
         className="
-            w-4
-            text-center
-            text-xs
-            p-0
-            text-scale-1200 bg-transparent outline-none
-            border-none
             ring-none
+            w-4
+            border-none
+            bg-transparent
+            p-0 text-center text-xs
+            text-scale-1200
+            outline-none
             ring-0
             focus:ring-0
         "
@@ -213,13 +213,13 @@ const TimeSplitInput = ({
         onChange={(e) => handleOnChange(e.target.value, 'mm')}
         aria-label="Minutes"
         className="
-            w-4
-            text-center
-            text-xs
-            p-0
-            text-scale-1200 bg-transparent outline-none
-            border-none
             ring-none
+            w-4
+            border-none
+            bg-transparent
+            p-0 text-center text-xs
+            text-scale-1200
+            outline-none
             ring-0
             focus:ring-0
         "
@@ -235,13 +235,13 @@ const TimeSplitInput = ({
         onChange={(e) => handleOnChange(e.target.value, 'ss')}
         aria-label="Seconds"
         className="
-            w-4
-            text-center
-            text-xs
-            p-0
-            text-scale-1200 bg-transparent outline-none
-            border-none
             ring-none
+            w-4
+            border-none
+            bg-transparent
+            p-0 text-center text-xs
+            text-scale-1200
+            outline-none
             ring-0
             focus:ring-0
         "
diff --git a/studio/components/ui/Dialogs/ConfirmDialog.js b/studio/components/ui/Dialogs/ConfirmDialog.js
index cf6b5afb5df..47193b0ff6c 100644
--- a/studio/components/ui/Dialogs/ConfirmDialog.js
+++ b/studio/components/ui/Dialogs/ConfirmDialog.js
@@ -1,4 +1,4 @@
-import { Modal, Button, Form } from '@supabase/ui'
+import { Modal, Button, Form } from 'common2'
 import { useState, useEffect } from 'react'
 
 // [Joshen] As of 280222, let's just use THIS component as the one and only confirmation modal
@@ -49,7 +49,7 @@ const ConfirmModal = ({
       >
         {() => {
           return (
-            <div className="py-4 space-y-4">
+            <div className="space-y-4 py-4">
               <Modal.Content>
                 <p className="text-sm text-scale-1100">{description}</p>
               </Modal.Content>
diff --git a/studio/components/ui/DisabledWarningDueToIncident.tsx b/studio/components/ui/DisabledWarningDueToIncident.tsx
index 1c01977100e..3387168b533 100644
--- a/studio/components/ui/DisabledWarningDueToIncident.tsx
+++ b/studio/components/ui/DisabledWarningDueToIncident.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 import InformationBox from 'components/ui/InformationBox'
 
 interface Props {
diff --git a/studio/components/ui/Error.tsx b/studio/components/ui/Error.tsx
index 28605550e8b..cae4c77ec68 100644
--- a/studio/components/ui/Error.tsx
+++ b/studio/components/ui/Error.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import Link from 'next/link'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 export default function EmptyPageState({ error }: any) {
   useEffect(() => {
@@ -11,7 +11,7 @@ export default function EmptyPageState({ error }: any) {
     <div className="mx-auto flex h-full w-full flex-col items-center justify-center space-y-6">
       <div className="flex w-[320px] flex-col items-center justify-center space-y-3">
         <h4 className="text-lg">Something went wrong 🤕</h4>
-        <p className="text-scale-1100 text-center text-sm">
+        <p className="text-center text-sm text-scale-1100">
           Sorry about that, please try again later or feel free to reach out to us if the problem
           persists.
         </p>
@@ -28,7 +28,7 @@ export default function EmptyPageState({ error }: any) {
           </a>
         </Link>
       </div>
-      <p className="text-scale-1100 text-sm">
+      <p className="text-sm text-scale-1100">
         Error: [{error?.code}] {error?.message}
       </p>
     </div>
diff --git a/studio/components/ui/Forms/FormActions.tsx b/studio/components/ui/Forms/FormActions.tsx
index 02e09e83b2c..24d889369ae 100644
--- a/studio/components/ui/Forms/FormActions.tsx
+++ b/studio/components/ui/Forms/FormActions.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 interface Props {
   form: React.HTMLProps<HTMLButtonElement>['form']
@@ -22,12 +22,12 @@ const FormActions = ({
   return (
     <div
       className={[
-        'flex items-center gap-2 w-full',
+        'flex w-full items-center gap-2',
         // justify actions to right if no helper text
         helper ? 'justify-between' : 'justify-end',
       ].join(' ')}
     >
-      {helper && <span className="text-scale-900 text-sm">{helper}</span>}
+      {helper && <span className="text-sm text-scale-900">{helper}</span>}
       <div className="flex items-center gap-2">
         <Button disabled={isDisabled} type="default" htmlType="reset" onClick={() => handleReset()}>
           Cancel
diff --git a/studio/components/ui/InformationBox.tsx b/studio/components/ui/InformationBox.tsx
index 27c3d0522cc..5cb6ffdd8ca 100644
--- a/studio/components/ui/InformationBox.tsx
+++ b/studio/components/ui/InformationBox.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactNode, useState } from 'react'
-import { IconMaximize2, IconMinimize2 } from '@supabase/ui'
+import { IconMaximize2, IconMinimize2 } from 'common2'
 
 interface Props {
   icon?: ReactNode
@@ -31,19 +31,19 @@ const InformationBox: FC<Props> = ({
   return (
     <div
       className={`${block ? 'block w-full' : ''}
-      bg-scale-100 dark:bg-scale-400 border-scale-600 dark:border-scale-500 block w-full rounded border py-3 ${className}`}
+      block w-full rounded border border-scale-600 bg-scale-100 py-3 dark:border-scale-500 dark:bg-scale-400 ${className}`}
     >
       <div className="flex flex-col px-4">
         <div className="flex items-center justify-between">
           <div className="flex w-full space-x-3 lg:items-center">
             {icon && <span className="text-scale-900">{icon}</span>}
             <div className="flex-grow">
-              <h5 className="text-scale-1200 text-sm">{title}</h5>
+              <h5 className="text-sm text-scale-1200">{title}</h5>
             </div>
           </div>
           {description && !hideCollapse ? (
             <div
-              className="text-scale-900 cursor-pointer"
+              className="cursor-pointer text-scale-900"
               onClick={() => setIsExpanded(!isExpanded)}
             >
               {isExpanded ? (
@@ -60,13 +60,13 @@ const InformationBox: FC<Props> = ({
           }`}
           style={{ maxHeight: isExpanded ? 500 : 0 }}
         >
-          <div className="text-scale-1100 text-sm">{description}</div>
+          <div className="text-sm text-scale-1100">{description}</div>
 
           {url && (
             <a
               href={url}
               target="_blank"
-              className="text-scale-1100 hover:text-scale-1200 text-sm underline transition-colors"
+              className="text-sm text-scale-1100 underline transition-colors hover:text-scale-1200"
             >
               {urlLabel}
             </a>
diff --git a/studio/components/ui/Modals/TextConfirmModal.tsx b/studio/components/ui/Modals/TextConfirmModal.tsx
index 1d3e43ca9bd..73756d80c3f 100644
--- a/studio/components/ui/Modals/TextConfirmModal.tsx
+++ b/studio/components/ui/Modals/TextConfirmModal.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import { Modal, Button, Input, Alert, Form } from '@supabase/ui'
+import { Modal, Button, Input, Alert, Form } from 'common2'
 
 interface Props {
   loading: boolean
@@ -58,7 +58,7 @@ const TextConfirmModal: FC<Props> = ({
                 </Modal.Content>
               )}
               <Modal.Content>
-                <p className="mb-2 text-sm block">{text}</p>
+                <p className="mb-2 block text-sm">{text}</p>
               </Modal.Content>
               <Modal.Seperator />
               <Modal.Content>
diff --git a/studio/components/ui/MultiSelect/Badges.tsx b/studio/components/ui/MultiSelect/Badges.tsx
index 8be757695c9..100332a87d7 100644
--- a/studio/components/ui/MultiSelect/Badges.tsx
+++ b/studio/components/ui/MultiSelect/Badges.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconX } from '@supabase/ui'
+import { IconX } from 'common2'
 
 export const BadgeDisabled: FC<{ name: string }> = ({ name }) => (
   <div
diff --git a/studio/components/ui/MultiSelect/index.tsx b/studio/components/ui/MultiSelect/index.tsx
index a3a85005d46..a04321e9186 100644
--- a/studio/components/ui/MultiSelect/index.tsx
+++ b/studio/components/ui/MultiSelect/index.tsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect, useState, FormEvent, KeyboardEvent, ReactNode } from 'react'
 import { orderBy, filter, without } from 'lodash'
-import { Popover, IconCheck, IconAlertCircle, IconSearch } from '@supabase/ui'
+import { Popover, IconCheck, IconAlertCircle, IconSearch } from 'common2'
 
 import { BadgeDisabled, BadgeSelected } from './Badges'
 
@@ -101,7 +101,7 @@ export default function MultiSelect({
       <div
         className={[
           'form-control form-control--multi-select',
-          'bg-scaleA-200 border-scale-700 border',
+          'border border-scale-700 bg-scaleA-200',
           'multi-select relative block w-full w-full space-x-1 overflow-auto rounded',
         ].join(' ')}
         ref={ref}
@@ -116,7 +116,7 @@ export default function MultiSelect({
               <IconSearch size={14} />
               <input
                 autoFocus
-                className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+                className="w-72 bg-transparent text-sm placeholder-scale-1000 outline-none"
                 value={searchString}
                 placeholder={searchPlaceholder}
                 onKeyPress={onKeyPress}
@@ -165,7 +165,7 @@ export default function MultiSelect({
               ) : options.length === 0 ? (
                 <div
                   className={[
-                    'dark:border-dark flex h-full w-full flex-col',
+                    'flex h-full w-full flex-col dark:border-dark',
                     'items-center justify-center border border-dashed p-3',
                   ].join(' ')}
                 >
@@ -174,14 +174,14 @@ export default function MultiSelect({
                   ) : (
                     <div className="flex w-full items-center space-x-2">
                       <IconAlertCircle strokeWidth={1.5} size={18} className="text-scale-1000" />
-                      <p className="text-scale-1000 text-sm">No options available</p>
+                      <p className="text-sm text-scale-1000">No options available</p>
                     </div>
                   )}
                 </div>
               ) : (
                 <div
                   className={[
-                    'dark:border-dark flex h-full w-full flex-col',
+                    'flex h-full w-full flex-col dark:border-dark',
                     'items-center justify-center border border-dashed p-3',
                   ].join(' ')}
                 >
@@ -189,7 +189,7 @@ export default function MultiSelect({
                     emptyMessage
                   ) : (
                     <div className="flex w-full items-center space-x-2">
-                      <p className="text-scale-1000 text-sm">No options found</p>
+                      <p className="text-sm text-scale-1000">No options found</p>
                     </div>
                   )}
                 </div>
@@ -205,7 +205,7 @@ export default function MultiSelect({
             ].join(' ')}
           >
             {selectedOptions.length === 0 && placeholder && (
-              <div className="text-scale-1000 px-2 text-sm">{placeholder}</div>
+              <div className="px-2 text-sm text-scale-1000">{placeholder}</div>
             )}
             {formattedOptions.map((option) => {
               const active =
@@ -231,7 +231,7 @@ export default function MultiSelect({
       </div>
 
       {descriptionText && (
-        <span className="form-text text-muted text-sm mt-2">{descriptionText}</span>
+        <span className="form-text text-muted mt-2 text-sm">{descriptionText}</span>
       )}
     </div>
   )
diff --git a/studio/components/ui/NoPermission.tsx b/studio/components/ui/NoPermission.tsx
index 8e1870eb465..a548af5c394 100644
--- a/studio/components/ui/NoPermission.tsx
+++ b/studio/components/ui/NoPermission.tsx
@@ -1,4 +1,4 @@
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 import { FC } from 'react'
 
 interface Props {
@@ -23,7 +23,7 @@ const NoPermission: FC<Props> = ({ resourceText, isFullPage = false }) => {
           <div className="space-y-1">
             <p className="text-sm">You need additional permissions to {resourceText}</p>
             <div>
-              <p className="text-scale-1100 text-sm">
+              <p className="text-sm text-scale-1100">
                 Contact your organization owner or adminstrator for assistance.
               </p>
             </div>
@@ -35,7 +35,7 @@ const NoPermission: FC<Props> = ({ resourceText, isFullPage = false }) => {
 
   if (isFullPage) {
     return (
-      <div className="h-full flex items-center justify-center">
+      <div className="flex h-full items-center justify-center">
         <div className="w-[550px]">
           <NoPermissionMessage />
         </div>
diff --git a/studio/components/ui/OveragesBanner/OveragesBanner.tsx b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
index 401c2c087ce..dc3a39f8f90 100644
--- a/studio/components/ui/OveragesBanner/OveragesBanner.tsx
+++ b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { FC } from 'react'
-import { Alert, Button } from '@supabase/ui'
+import { Alert, Button } from 'common2'
 
 import { useStore, useProjectUsage } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
@@ -84,7 +84,7 @@ const OveragesBanner: FC<Props> = ({ tier, minimal }) => {
         }
         actions={
           minimal ? (
-            <div className="h-full flex items-center">
+            <div className="flex h-full items-center">
               <Link href={`/project/${ref}/settings/billing`}>
                 <a>
                   <Button type="default">Explore usage details</Button>
diff --git a/studio/components/ui/Panel.tsx b/studio/components/ui/Panel.tsx
index 5feb0106002..0ee17dc8eca 100644
--- a/studio/components/ui/Panel.tsx
+++ b/studio/components/ui/Panel.tsx
@@ -1,4 +1,4 @@
-import { Loading } from '@supabase/ui'
+import { Loading } from 'common2'
 import React, { ReactNode } from 'react'
 
 interface Props {
@@ -31,13 +31,13 @@ function Panel(props: Props) {
   const content = (
     <div
       className={`
-        border border-panel-border-light dark:border-panel-border-dark
-        shadow-sm overflow-hidden
-        rounded-md ${props.noMargin ? '' : 'mb-8'} ${props.className}`}
+        overflow-hidden rounded-md border
+        border-panel-border-light shadow-sm
+        dark:border-panel-border-dark ${props.noMargin ? '' : 'mb-8'} ${props.className}`}
     >
       {props.title && (
         <div className={headerClasses.join(' ')}>
-          <div className="px-6 py-4 flex items-center">{props.title}</div>
+          <div className="flex items-center px-6 py-4">{props.title}</div>
         </div>
       )}
       <div className={`bg-panel-body-light dark:bg-panel-body-dark ${props.bodyClassName || ''}`}>
@@ -47,10 +47,10 @@ function Panel(props: Props) {
       {props.footer && (
         <div
           className="
-      bg-panel-footer-light dark:bg-panel-footer-dark
-      border-t border-panel-border-interior-light dark:border-panel-border-interior-dark"
+      border-t border-panel-border-interior-light
+      bg-panel-footer-light dark:border-panel-border-interior-dark dark:bg-panel-footer-dark"
         >
-          <div className="px-6 h-12 flex items-center">{props.footer}</div>
+          <div className="flex h-12 items-center px-6">{props.footer}</div>
         </div>
       )}
     </div>
diff --git a/studio/components/ui/ProductMenu/ProductMenu.tsx b/studio/components/ui/ProductMenu/ProductMenu.tsx
index e59b970dbcf..c20d561a234 100644
--- a/studio/components/ui/ProductMenu/ProductMenu.tsx
+++ b/studio/components/ui/ProductMenu/ProductMenu.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { Badge, Menu } from '@supabase/ui'
+import { Badge, Menu } from 'common2'
 import ProductMenuItem from './ProductMenuItem'
 import { ProductMenuGroup, ProductMenuGroupItem } from './ProductMenu.types'
 
@@ -42,7 +42,7 @@ const ProductMenu: FC<Props> = ({ page, menu }) => {
                 </div>
               </div>
             </div>
-            {idx !== menu.length - 1 && <div className="bg-scale-500 h-px w-full"></div>}
+            {idx !== menu.length - 1 && <div className="h-px w-full bg-scale-500"></div>}
           </div>
         ))}
       </Menu>
diff --git a/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
index eafbec75206..bf4d6d1009e 100644
--- a/studio/components/ui/ProductMenu/ProductMenuItem.tsx
+++ b/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
-import { Button, IconExternalLink, Menu } from '@supabase/ui'
+import { Button, IconExternalLink, Menu } from 'common2'
 
 interface Props {
   name: string | ReactNode
diff --git a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
index 5f19a2ce73d..5d534a3d685 100644
--- a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
+++ b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { IconAlertCircle, IconLoader, Input } from '@supabase/ui'
+import { IconAlertCircle, IconLoader, Input } from 'common2'
 import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -47,14 +47,14 @@ const DisplayApiSettings = () => {
       }
     >
       {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center space-x-2 py-8">
           <IconAlertCircle size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsError ? 'Failed to retrieve API keys' : 'Failed to update JWT secret'}
           </p>
         </div>
       ) : isApiKeysEmpty || isProjectSettingsLoading || isJwtSecretUpdateStatusLoading ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center space-x-2 py-8">
           <IconLoader className="animate-spin" size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsLoading || isApiKeysEmpty
@@ -86,7 +86,7 @@ const DisplayApiSettings = () => {
                   ))}
                   {x.tags === 'service_role' && (
                     <>
-                      <code className="text-xs bg-red-900 text-white">{'secret'}</code>
+                      <code className="bg-red-900 text-xs text-white">{'secret'}</code>
                     </>
                   )}
                   {x.tags === 'anon' && <code className="text-xs text-code">{'public'}</code>}
diff --git a/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx b/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
index ffb3b76f0e2..f3eb61febff 100644
--- a/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
+++ b/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useRouter } from 'next/router'
-import { Input, IconAlertCircle, IconLoader } from '@supabase/ui'
+import { Input, IconAlertCircle, IconLoader } from 'common2'
 import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import { useJwtSecretUpdateStatus, useProjectSettings } from 'hooks'
 import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
@@ -31,7 +31,7 @@ const DisplayConfigSettings = () => {
   return (
     <ConfigContentWrapper>
       {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center space-x-2 py-8">
           <IconAlertCircle size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsError
@@ -40,7 +40,7 @@ const DisplayConfigSettings = () => {
           </p>
         </div>
       ) : isProjectSettingsLoading || isJwtSecretUpdateStatusLoading ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center space-x-2 py-8">
           <IconLoader className="animate-spin" size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsLoading ? 'Retrieving API keys' : 'JWT secret is being updated'}
diff --git a/studio/components/ui/UpgradeToPro.tsx b/studio/components/ui/UpgradeToPro.tsx
index 256188ff527..ce66ce696e0 100644
--- a/studio/components/ui/UpgradeToPro.tsx
+++ b/studio/components/ui/UpgradeToPro.tsx
@@ -1,4 +1,4 @@
-import { Button, IconClock } from '@supabase/ui'
+import { Button, IconClock } from 'common2'
 import Link from 'next/link'
 import { FC } from 'react'
 
@@ -24,7 +24,7 @@ const UpgradeToPro: FC<Props> = ({ primaryText, projectRef, secondaryText }) =>
         <div className="space-y-1">
           <p className="text-sm">{primaryText}</p>
           <div>
-            <p className="text-scale-1100 text-sm">{secondaryText}</p>
+            <p className="text-sm text-scale-1100">{secondaryText}</p>
           </div>
         </div>
         <Link href={`/project/${projectRef}/settings/billing`}>
diff --git a/studio/components/ui/WarningBanner.tsx b/studio/components/ui/WarningBanner.tsx
index 02ea412d50b..fe4ce5e14b3 100644
--- a/studio/components/ui/WarningBanner.tsx
+++ b/studio/components/ui/WarningBanner.tsx
@@ -1,4 +1,4 @@
-import { IconAlertCircle } from '@supabase/ui'
+import { IconAlertCircle } from 'common2'
 
 const WarningBanner = ({ title, description }: { title: string; description?: string }) => {
   return (
@@ -7,7 +7,7 @@ const WarningBanner = ({ title, description }: { title: string; description?: st
         <div className="mt-1 text-yellow-1100 dark:text-yellow-800">
           <IconAlertCircle size={14} strokeWidth={2} />
         </div>
-        <div className="flex flex-col xl:flex-row gap-x-3 items-start xl:items-center">
+        <div className="flex flex-col items-start gap-x-3 xl:flex-row xl:items-center">
           <h2 className="text-sm text-scale-1200 dark:text-scale-100">{title}</h2>
           {description && (
             <p className="text-xs text-yellow-1200 dark:text-yellow-800">{description}</p>
diff --git a/studio/lib/constants/metrics.tsx b/studio/lib/constants/metrics.tsx
index d98c8aeaced..d10ed97e301 100644
--- a/studio/lib/constants/metrics.tsx
+++ b/studio/lib/constants/metrics.tsx
@@ -1,4 +1,4 @@
-import { IconActivity, IconArchive, IconDatabase, IconKey, IconHeart } from '@supabase/ui'
+import { IconActivity, IconArchive, IconDatabase, IconKey, IconHeart } from 'common2'
 
 export const METRIC_CATEGORIES = {
   API: {
diff --git a/studio/pages/404.tsx b/studio/pages/404.tsx
index 4c55a1f4f18..e856078ca8c 100644
--- a/studio/pages/404.tsx
+++ b/studio/pages/404.tsx
@@ -2,7 +2,7 @@ import { NextPage } from 'next'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 
 import { useStore } from 'hooks'
 
@@ -19,11 +19,11 @@ const Error404: NextPage = ({}) => {
   }, [])
 
   return (
-    <div className="w-full h-screen relative flex flex-col items-center justify-center mx-auto">
-      <div className="absolute top-0 w-full max-w-7xl mx-auto pt-6 px-8 sm:px-6 lg:px-8">
+    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center">
+      <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
         <nav className="relative flex items-center justify-between sm:h-10">
-          <div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
-            <div className="flex items-center justify-between w-full md:w-auto">
+          <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
+            <div className="flex w-full items-center justify-between md:w-auto">
               <a href="/">
                 <Image
                   src={theme == 'dark' ? '/img/supabase-dark.svg' : '/img/supabase-light.svg'}
@@ -37,18 +37,18 @@ const Error404: NextPage = ({}) => {
         </nav>
       </div>
       <div
-        className={`absolute select-none filter transition opacity-[5%] duration-200 ${
+        className={`absolute select-none opacity-[5%] filter transition duration-200 ${
           show404 ? 'blur-sm' : 'blur-none'
         }`}
       >
         <h1 style={{ fontSize: '28rem' }}>404</h1>
       </div>
       <div
-        className={`transition flex flex-col space-y-6 items-center justify-center ${
+        className={`flex flex-col items-center justify-center space-y-6 transition ${
           show404 ? 'opacity-100' : 'opacity-0'
         }`}
       >
-        <div className="w-[380px] flex flex-col items-center justify-center space-y-3 text-center">
+        <div className="flex w-[380px] flex-col items-center justify-center space-y-3 text-center">
           <h3 className="text-xl">Looking for something? 🔍</h3>
           <p className="text-scale-1100">We couldn't find the page that you're looking for!</p>
         </div>
diff --git a/studio/pages/500.tsx b/studio/pages/500.tsx
index 60b3413e139..7829672b597 100644
--- a/studio/pages/500.tsx
+++ b/studio/pages/500.tsx
@@ -1,7 +1,7 @@
 import { NextPage } from 'next'
 import Link from 'next/link'
 import Image from 'next/image'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { observer } from 'mobx-react-lite'
 
 import { useStore } from 'hooks'
@@ -11,11 +11,11 @@ const Error500: NextPage = ({}) => {
   const { theme } = ui
 
   return (
-    <div className="w-full h-full relative flex flex-col space-y-6 items-center justify-center mx-auto">
-      <div className="absolute top-0 w-full max-w-7xl mx-auto pt-6 px-8 sm:px-6 lg:px-8">
+    <div className="relative mx-auto flex h-full w-full flex-col items-center justify-center space-y-6">
+      <div className="absolute top-0 mx-auto w-full max-w-7xl px-8 pt-6 sm:px-6 lg:px-8">
         <nav className="relative flex items-center justify-between sm:h-10">
-          <div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
-            <div className="flex items-center justify-between w-full md:w-auto">
+          <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
+            <div className="flex w-full items-center justify-between md:w-auto">
               <a href="/">
                 <Image
                   src={theme == 'dark' ? '/img/supabase-dark.svg' : '/img/supabase-light.svg'}
@@ -28,7 +28,7 @@ const Error500: NextPage = ({}) => {
           </div>
         </nav>
       </div>
-      <div className="w-[320px] flex flex-col items-center justify-center space-y-3">
+      <div className="flex w-[320px] flex-col items-center justify-center space-y-3">
         <h4 className="text-lg">Something went wrong 🤕</h4>
         <p className="text-center">
           Sorry about that, please try again later or feel free to reach out to us if the problem
diff --git a/studio/pages/account/me.tsx b/studio/pages/account/me.tsx
index 32b8e63640f..988392de773 100644
--- a/studio/pages/account/me.tsx
+++ b/studio/pages/account/me.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
-import { IconMoon, IconSun, Input, Listbox } from '@supabase/ui'
+import { IconMoon, IconSun, Input, Listbox } from 'common2'
 
 import { useProfile, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index 2a837c8f4a8..06b1bc2b9e1 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
-import { Button, IconCheckSquare, Loading } from '@supabase/ui'
+import { Button, IconCheckSquare, Loading } from 'common2'
 
 import { useProfile, useStore } from 'hooks'
 import { auth } from 'lib/gotrue'
@@ -132,7 +132,7 @@ const JoinOrganizationPage = () => {
         <p className="text-scale-900">
           To accept this invitation, you will need to{' '}
           <a
-            className="text-brand-900 cursor-pointer"
+            className="cursor-pointer text-brand-900"
             onClick={async () => {
               await auth.signOut()
               router.reload()
@@ -160,27 +160,27 @@ const JoinOrganizationPage = () => {
     <>
       <div className="flex flex-col gap-2 px-6 py-8">
         <>
-          <p className="text-scale-1200 text-sm">You have been invited to join </p>
+          <p className="text-sm text-scale-1200">You have been invited to join </p>
           {organization_name ? (
             <>
-              <p className="text-scale-1200 text-3xl">
+              <p className="text-3xl text-scale-1200">
                 {name ? name : organization_name ? `${organization_name}` : 'an organization'}
               </p>
               {!token_does_not_exist && (
-                <p className="text-scale-900 text-sm">an organization on Supabase</p>
+                <p className="text-sm text-scale-900">an organization on Supabase</p>
               )}
             </>
           ) : (
             <>
-              <p className="text-scale-1200 text-3xl">{'an organization'}</p>
+              <p className="text-3xl text-scale-1200">{'an organization'}</p>
             </>
           )}
-          {slug && <p className="text-scale-900 text-xs">{`organization slug: ${slug}`}</p>}
+          {slug && <p className="text-xs text-scale-900">{`organization slug: ${slug}`}</p>}
         </>
       </div>
 
       <div
-        className={['border-scale-400 border-t', isError ? 'bg-sand-100' : 'bg-transparent'].join(
+        className={['border-t border-scale-400', isError ? 'bg-sand-100' : 'bg-transparent'].join(
           ' '
         )}
       >
@@ -206,7 +206,7 @@ const JoinOrganizationPage = () => {
 
           {!profile && (
             <div className="flex flex-col gap-3">
-              <p className="text-scale-900 text-xs">
+              <p className="text-xs text-scale-900">
                 You will need to sign in to accept this invitation
               </p>
               <div className="flex justify-center gap-3">
@@ -231,7 +231,7 @@ const JoinOrganizationPage = () => {
   return (
     <div
       className={[
-        'bg-scale-200 flex h-full min-h-screen',
+        'flex h-full min-h-screen bg-scale-200',
         'w-full flex-col place-items-center',
         'items-center justify-center gap-8 px-5',
       ].join(' ')}
@@ -247,8 +247,8 @@ const JoinOrganizationPage = () => {
       </Link>
       <div
         className="
-          bg-scale-100 border-scale-400 mx-auto overflow-hidden
-          rounded-md border text-center shadow
+          mx-auto overflow-hidden rounded-md border
+          border-scale-400 bg-scale-100 text-center shadow
           md:w-[400px]
           "
       >
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index c5104c1c2ae..d0567fdf748 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -4,7 +4,7 @@ import { debounce, isUndefined, values } from 'lodash'
 import { toJS } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import generator from 'generate-password'
-import { Button, Listbox, IconUsers, Input, IconLoader, Alert } from '@supabase/ui'
+import { Button, Listbox, IconUsers, Input, IconLoader, Alert } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
@@ -215,7 +215,7 @@ const Wizard: NextPageWithLayout = () => {
           </Button>
           <div className="items-center space-x-3">
             {!projectCreationDisabled && (
-              <span className="text-scale-900 text-xs">You can rename your project later</span>
+              <span className="text-xs text-scale-900">You can rename your project later</span>
             )}
             <Button
               onClick={onClickNext}
@@ -230,7 +230,7 @@ const Wizard: NextPageWithLayout = () => {
     >
       <>
         <Panel.Content className="pt-0 pb-6">
-          <p className="text-scale-900 text-sm">
+          <p className="text-sm text-scale-900">
             Your project will have its own dedicated instance and full postgres database.
             <br />
             An API will be set up so you can easily interact with your new database.
@@ -238,12 +238,12 @@ const Wizard: NextPageWithLayout = () => {
           </p>
         </Panel.Content>
         {projectCreationDisabled ? (
-          <Panel.Content className="border-panel-border-interior-light dark:border-panel-border-interior-dark border-t pb-8">
+          <Panel.Content className="border-t border-panel-border-interior-light pb-8 dark:border-panel-border-interior-dark">
             <DisabledWarningDueToIncident title="Project creation is currently disabled" />
           </Panel.Content>
         ) : (
           <>
-            <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark space-y-4 border-t border-b">
+            <Panel.Content className="Form section-block--body has-inputs-centered space-y-4 border-t border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
               {organizations.length > 0 && (
                 <Listbox
                   label="Organization"
@@ -268,7 +268,7 @@ const Wizard: NextPageWithLayout = () => {
             </Panel.Content>
             {canCreateProject && (
               <>
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-t border-b">
+                <Panel.Content className="Form section-block--body has-inputs-centered border-t border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input
                     id="project-name"
                     layout="horizontal"
@@ -281,7 +281,7 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-b">
+                <Panel.Content className="Form section-block--body has-inputs-centered border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input
                     id="password"
                     copy={dbPass.length > 0}
@@ -303,7 +303,7 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark border-b">
+                <Panel.Content className="Form section-block--body has-inputs-centered border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Listbox
                     layout="horizontal"
                     label="Region"
diff --git a/studio/pages/new/index.tsx b/studio/pages/new/index.tsx
index b1400188ffd..f84382e34ab 100644
--- a/studio/pages/new/index.tsx
+++ b/studio/pages/new/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, Input } from '@supabase/ui'
+import { Button, Input } from 'common2'
 import { useRouter } from 'next/router'
 
 import { API_URL } from 'lib/constants'
@@ -69,7 +69,7 @@ const Wizard: NextPageWithLayout = () => {
             Cancel
           </Button>
           <div className="flex items-center space-x-3">
-            <p className="text-scale-900 text-xs">You can rename your organization later</p>
+            <p className="text-xs text-scale-900">You can rename your organization later</p>
             <Button onClick={onClickSubmit} loading={newOrgLoading} disabled={newOrgLoading}>
               Create organization
             </Button>
@@ -79,7 +79,7 @@ const Wizard: NextPageWithLayout = () => {
     >
       <Panel.Content className="pt-0">
         <p className="text-sm">This is your organization's name within Supabase.</p>
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           For example, you can use the name of your company or department
         </p>
       </Panel.Content>
diff --git a/studio/pages/org/[slug]/settings.tsx b/studio/pages/org/[slug]/settings.tsx
index c7d79c06efb..adb4d3efa2e 100644
--- a/studio/pages/org/[slug]/settings.tsx
+++ b/studio/pages/org/[slug]/settings.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index 7fb5b053e97..070d9c6ce12 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -1,6 +1,6 @@
 import useSWR, { mutate } from 'swr'
 import { useRouter } from 'next/router'
-import { Button, Dropdown, IconKey } from '@supabase/ui'
+import { Button, Dropdown, IconKey } from 'common2'
 import { FC, createContext, useContext, useEffect, useState } from 'react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 
@@ -139,9 +139,9 @@ const DocView: FC<any> = observer(({}) => {
                 onClick={() => setSelectedLang('js')}
                 className={`${
                   selectedLang == 'js'
-                    ? 'text-scale-1200 bg-scale-300 dark:bg-scale-200 font-medium'
-                    : 'text-scale-900 bg-scale-100 dark:bg-scale-100'
-                } border-scale-200 hover:text-scale-1200 relative inline-flex items-center border-r p-1 px-2 text-sm transition focus:outline-none`}
+                    ? 'bg-scale-300 font-medium text-scale-1200 dark:bg-scale-200'
+                    : 'bg-scale-100 text-scale-900 dark:bg-scale-100'
+                } relative inline-flex items-center border-r border-scale-200 p-1 px-2 text-sm transition hover:text-scale-1200 focus:outline-none`}
               >
                 JavaScript
               </button>
@@ -150,22 +150,22 @@ const DocView: FC<any> = observer(({}) => {
                 onClick={() => setSelectedLang('bash')}
                 className={`${
                   selectedLang == 'bash'
-                    ? 'text-scale-1200 bg-scale-300 dark:bg-scale-200 font-medium'
-                    : 'text-scale-900 bg-scale-100 dark:bg-scale-100'
-                } border-scale-200 hover:text-scale-1200 relative inline-flex items-center border-r p-1 px-2 text-sm transition focus:outline-none`}
+                    ? 'bg-scale-300 font-medium text-scale-1200 dark:bg-scale-200'
+                    : 'bg-scale-100 text-scale-900 dark:bg-scale-100'
+                } relative inline-flex items-center border-r border-scale-200 p-1 px-2 text-sm transition hover:text-scale-1200 focus:outline-none`}
               >
                 Bash
               </button>
               {selectedLang == 'bash' && (
                 <div className="flex">
-                  <div className="text-scale-900 flex items-center gap-2 p-1 pl-2 text-xs">
+                  <div className="flex items-center gap-2 p-1 pl-2 text-xs text-scale-900">
                     <IconKey size={12} strokeWidth={1.5} />
                     <span>Project API key :</span>
                   </div>
                   <Dropdown
                     align="end"
                     side="bottom"
-                    className="text-scale-900 cursor-pointer border-none bg-transparent p-0 pl-2 pr-8 text-sm"
+                    className="cursor-pointer border-none bg-transparent p-0 pl-2 pr-8 text-sm text-scale-900"
                     overlay={
                       <>
                         <Dropdown.Item key="hide" onClick={() => setShowApiKey(DEFAULT_KEY)}>
diff --git a/studio/pages/project/[ref]/auth/policies.tsx b/studio/pages/project/[ref]/auth/policies.tsx
index 5942bbd54e7..64b057248db 100644
--- a/studio/pages/project/[ref]/auth/policies.tsx
+++ b/studio/pages/project/[ref]/auth/policies.tsx
@@ -1,6 +1,6 @@
 import React, { useState, PropsWithChildren, FC } from 'react'
 import { isEmpty } from 'lodash'
-import { Button, IconSearch, Input } from '@supabase/ui'
+import { Button, IconSearch, Input } from 'common2'
 import { observer } from 'mobx-react-lite'
 import { checkPermissions, useStore } from 'hooks'
 import { AuthLayout } from 'components/layouts'
@@ -92,7 +92,7 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
 
 AuthPoliciesPage.getLayout = (page) => (
   <AuthLayout title="Auth">
-    <div className="p-4 h-full">{page}</div>
+    <div className="h-full p-4">{page}</div>
   </AuthLayout>
 )
 
diff --git a/studio/pages/project/[ref]/database/backups/pitr.tsx b/studio/pages/project/[ref]/database/backups/pitr.tsx
index 75991a421ae..52df3f93217 100644
--- a/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useStore, checkPermissions } from 'hooks'
@@ -19,7 +19,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
 
   return (
     <div className="mx-auto max-w-4xl space-y-6 px-5 pt-12 pb-20">
-      <h3 className="text-scale-1200 text-xl">Backups</h3>
+      <h3 className="text-xl text-scale-1200">Backups</h3>
 
       <Tabs
         type="underlined"
@@ -33,7 +33,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
       </Tabs>
 
       <div className="space-y-4">
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           Restore your project from a specific date and time.
         </p>
         {canReadPhysicalBackups ? (
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index 07b30249b2a..d2bb6bd25ad 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Tabs } from '@supabase/ui'
+import { Tabs } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
@@ -18,7 +18,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
 
   return (
     <div className="mx-auto max-w-4xl space-y-6 px-5 pt-12 pb-20">
-      <h3 className="text-scale-1200 text-xl">Backups</h3>
+      <h3 className="text-xl text-scale-1200">Backups</h3>
 
       <Tabs
         type="underlined"
@@ -32,7 +32,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
       </Tabs>
 
       <div className="space-y-4">
-        <p className="text-scale-1100 text-sm">
+        <p className="text-sm text-scale-1100">
           Projects are backed up daily around midnight of your project's region and can be restored
           at any time.
         </p>
diff --git a/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx b/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx
index 85e8adc49d8..ede5f08c28b 100644
--- a/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx
+++ b/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { useRouter } from 'next/router'
 import { uniqBy, map as lodashMap } from 'lodash'
 import { FC, useState, useEffect } from 'react'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { observer } from 'mobx-react-lite'
 
 import { useStore } from 'hooks'
@@ -80,7 +80,7 @@ const HookLogs: FC<any> = observer(() => {
         </div>
       </div>
 
-      <div className="bg-bg-alt-light border-t border-b">
+      <div className="border-t border-b bg-bg-alt-light">
         <div className="divide-y-2 ">
           {logsData?.map((log: any) => {
             return (
diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx
index 541095f6f05..d6f474e7180 100644
--- a/studio/pages/project/[ref]/database/tables.tsx
+++ b/studio/pages/project/[ref]/database/tables.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { isUndefined } from 'lodash'
 import { PostgresColumn, PostgresTable } from '@supabase/postgres-meta'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 
 import { useStore } from 'hooks'
 
@@ -144,7 +144,7 @@ const DatabaseTables: NextPageWithLayout = () => {
         }
         children={
           <Modal.Content>
-            <p className="text-scale-1100 py-4 text-sm">
+            <p className="py-4 text-sm text-scale-1100">
               Are you sure you want to delete the selected table? This action cannot be undone.
             </p>
           </Modal.Content>
@@ -160,7 +160,7 @@ const DatabaseTables: NextPageWithLayout = () => {
         header={`Confirm deletion of column "${selectedColumnToDelete?.name}"`}
         children={
           <Modal.Content>
-            <p className="text-scale-1100 py-4 text-sm">
+            <p className="py-4 text-sm text-scale-1100">
               Are you sure you want to delete the selected column? This action cannot be undone.
             </p>
           </Modal.Content>
diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx
index 799a6c06870..2821d8d242e 100644
--- a/studio/pages/project/[ref]/editor/[id].tsx
+++ b/studio/pages/project/[ref]/editor/[id].tsx
@@ -3,7 +3,7 @@ import { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { isUndefined, isNaN } from 'lodash'
-import { Modal } from '@supabase/ui'
+import { Modal } from 'common2'
 import { PostgresTable, PostgresColumn } from '@supabase/postgres-meta'
 
 import Base64 from 'lib/base64'
@@ -177,7 +177,7 @@ const TableEditorPage: NextPage = () => {
         header={`Confirm deletion of column "${selectedColumnToDelete?.name}"`}
         children={
           <Modal.Content>
-            <p className="text-scale-1100 py-4 text-sm">
+            <p className="py-4 text-sm text-scale-1100">
               Are you sure you want to delete the selected column? This action cannot be undone.
             </p>
           </Modal.Content>
@@ -195,7 +195,7 @@ const TableEditorPage: NextPage = () => {
         }
         children={
           <Modal.Content>
-            <p className="text-scale-1100 py-4 text-sm">
+            <p className="py-4 text-sm text-scale-1100">
               Are you sure you want to delete the selected table? This action cannot be undone.
             </p>
           </Modal.Content>
diff --git a/studio/pages/project/[ref]/functions/[id]/details.tsx b/studio/pages/project/[ref]/functions/[id]/details.tsx
index 54118e02a2e..03bea07798d 100644
--- a/studio/pages/project/[ref]/functions/[id]/details.tsx
+++ b/studio/pages/project/[ref]/functions/[id]/details.tsx
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { IconGlobe, IconTerminal } from '@supabase/ui'
+import { IconGlobe, IconTerminal } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
@@ -141,31 +141,31 @@ const PageLayout: NextPageWithLayout = () => {
       <div>
         <div
           className="
-        px-10 py-8 bg-scale-100 dark:bg-scale-300 rounded border drop-shadow-sm
-        space-y-6
+        space-y-6 rounded border bg-scale-100 px-10 py-8 drop-shadow-sm
+        dark:bg-scale-300
         "
         >
-          <div className="space-y-4 w-full">
+          <div className="w-full space-y-4">
             <div className="grid grid-cols-3">
-              <span className="block text-scale-1000 text-sm mb-1">Function Name</span>
+              <span className="mb-1 block text-sm text-scale-1000">Function Name</span>
               <div className="text-sm text-scale-1200">{selectedFunction?.name}</div>
             </div>
 
             <div className="grid grid-cols-3">
-              <span className="block text-scale-1000 text-sm mb-1">Status</span>
-              <div className="flex flex-col gap-2 col-span-2">
+              <span className="mb-1 block text-sm text-scale-1000">Status</span>
+              <div className="col-span-2 flex flex-col gap-2">
                 <div className="flex">
                   <div
                     className="
-                    text-base bg-brand-300 dark:bg-brand-100 px-3 py-0.5 rounded-full lowercasefirst-letter
-                    flex flex-row items-center gap-3 lowercase text-brand-900
+                    lowercasefirst-letter flex flex-row items-center gap-3 rounded-full bg-brand-300
+                    px-3 py-0.5 text-base lowercase text-brand-900 dark:bg-brand-100
               "
                   >
                     {selectedFunction?.status}
-                    <div className="relative w-2 h-2">
+                    <div className="relative h-2 w-2">
                       <span className="flex h-2 w-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-800 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-900"></span>
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-800 opacity-75"></span>
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-900"></span>
                       </span>
                     </div>
                   </div>
@@ -175,37 +175,37 @@ const PageLayout: NextPageWithLayout = () => {
           </div>
 
           <div className="grid grid-cols-3">
-            <span className="block text-scale-1000 text-sm mb-1 cols-span-1">Endpoint URL</span>
+            <span className="cols-span-1 mb-1 block text-sm text-scale-1000">Endpoint URL</span>
             <div className="col-span-2">
-              <span className="text-sm text-scale-1200 break-words w-full">{`https://${ref}.functions.supabase.co/${selectedFunction?.slug}`}</span>
+              <span className="w-full break-words text-sm text-scale-1200">{`https://${ref}.functions.supabase.co/${selectedFunction?.slug}`}</span>
             </div>
           </div>
 
           <div className="grid grid-cols-3">
-            <span className="block text-scale-1000 text-sm mb-1">Created At</span>
-            <div className="text-sm text-scale-1200 col-span-2">
+            <span className="mb-1 block text-sm text-scale-1000">Created At</span>
+            <div className="col-span-2 text-sm text-scale-1200">
               {selectedFunction?.created_at &&
                 dayjs(selectedFunction.created_at).format('dddd, MMMM D, YYYY h:mm A')}
             </div>
           </div>
 
           <div className="grid grid-cols-3">
-            <span className="block text-scale-1000 text-sm mb-1">Updated At</span>
-            <div className="text-sm text-scale-1200 col-span-2">
+            <span className="mb-1 block text-sm text-scale-1000">Updated At</span>
+            <div className="col-span-2 text-sm text-scale-1200">
               {selectedFunction?.updated_at &&
                 dayjs(selectedFunction.updated_at).format('dddd, MMMM D, YYYY h:mm A')}
             </div>
           </div>
 
           <div className="grid grid-cols-3">
-            <span className="block text-scale-1000 text-sm mb-1">Version</span>
-            <div className="text-sm text-scale-1200 col-span-2">v{selectedFunction?.version}</div>
+            <span className="mb-1 block text-sm text-scale-1000">Version</span>
+            <div className="col-span-2 text-sm text-scale-1200">v{selectedFunction?.version}</div>
           </div>
 
           <div className="grid grid-cols-3">
-            <span className="block text-scale-1000 text-sm mb-1">Regions</span>
-            <div className="flex flex-col gap-1 col-span-2">
-              <div className="text-sm text-scale-1200 flex items-center gap-2">
+            <span className="mb-1 block text-sm text-scale-1000">Regions</span>
+            <div className="col-span-2 flex flex-col gap-1">
+              <div className="flex items-center gap-2 text-sm text-scale-1200">
                 <IconGlobe />
                 <span>Earth</span>
               </div>
@@ -217,13 +217,13 @@ const PageLayout: NextPageWithLayout = () => {
 
       <div>
         <div
-          className="px-10 py-8
-        bg-scale-100 dark:bg-scale-300 border drop-shadow-sm
-        rounded
-        space-y-6"
+          className="space-y-6 rounded
+        border bg-scale-100 px-10 py-8
+        drop-shadow-sm
+        dark:bg-scale-300"
         >
           <div className="flex items-center gap-3">
-            <div className="border p-2 flex items-center justify-center w-8 h-8 text-scale-100 dark:text-scale-1200 bg-scale-1200 dark:bg-scale-100 rounded">
+            <div className="flex h-8 w-8 items-center justify-center rounded border bg-scale-1200 p-2 text-scale-100 dark:bg-scale-100 dark:text-scale-1200">
               <IconTerminal strokeWidth={2} />
             </div>
             <h4>Command line access</h4>
diff --git a/studio/pages/project/[ref]/functions/[id]/index.tsx b/studio/pages/project/[ref]/functions/[id]/index.tsx
index d5facfd36f9..68f8f458627 100644
--- a/studio/pages/project/[ref]/functions/[id]/index.tsx
+++ b/studio/pages/project/[ref]/functions/[id]/index.tsx
@@ -2,7 +2,7 @@ import useSWR from 'swr'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
-import { Button } from '@supabase/ui'
+import { Button } from 'common2'
 import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
@@ -120,7 +120,7 @@ const PageLayout: NextPageWithLayout = () => {
           })}
         </div>
 
-        <span className="text-scale-1000 text-xs">
+        <span className="text-xs text-scale-1000">
           Statistics for past {selectedInterval.label}
         </span>
       </div>
diff --git a/studio/pages/project/[ref]/logs-explorer/index.tsx b/studio/pages/project/[ref]/logs-explorer/index.tsx
index e0c7ed91d7c..7091bee16e1 100644
--- a/studio/pages/project/[ref]/logs-explorer/index.tsx
+++ b/studio/pages/project/[ref]/logs-explorer/index.tsx
@@ -3,7 +3,7 @@ import toast from 'react-hot-toast'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Input, Modal, Form, Button } from '@supabase/ui'
+import { Input, Modal, Form, Button } from 'common2'
 
 import { useStore } from 'hooks'
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
@@ -217,7 +217,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
                   </div>
                 </Modal.Content>
               </div>
-              <div className="bg-scale-300 border-t py-3">
+              <div className="border-t bg-scale-300 py-3">
                 <Modal.Content>
                   <div className="flex items-center justify-end gap-2">
                     <Button
diff --git a/studio/pages/project/[ref]/logs-explorer/recent.tsx b/studio/pages/project/[ref]/logs-explorer/recent.tsx
index edc8ae71d12..16637f76bc8 100644
--- a/studio/pages/project/[ref]/logs-explorer/recent.tsx
+++ b/studio/pages/project/[ref]/logs-explorer/recent.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { Button, IconClock, IconSave, Loading } from '@supabase/ui'
+import { Button, IconClock, IconSave, Loading } from 'common2'
 import { useStore, withAuth } from 'hooks'
 import RecentQueriesItem from 'components/interfaces/Settings/Logs/RecentQueriesItem'
 import LogsExplorerLayout from 'components/layouts/LogsExplorerLayout/LogsExplorerLayout'
@@ -49,8 +49,8 @@ export const LogsSavedPage: NextPageWithLayout = () => {
         <>
           <div className="my-auto flex h-full flex-grow flex-col items-center justify-center gap-1">
             <IconClock className="animate-bounce" />
-            <h3 className="text-scale-1200 text-lg">No Recent Queries Yet</h3>
-            <p className="text-scale-900 text-sm">
+            <h3 className="text-lg text-scale-1200">No Recent Queries Yet</h3>
+            <p className="text-sm text-scale-900">
               Your recent queries run from the{' '}
               <Link href={`/project/${ref}/logs-explorer`}>
                 <span className="cursor-pointer font-bold underline">Query</span>
diff --git a/studio/pages/project/[ref]/logs-explorer/saved.tsx b/studio/pages/project/[ref]/logs-explorer/saved.tsx
index 49998332f54..7150c0a2085 100644
--- a/studio/pages/project/[ref]/logs-explorer/saved.tsx
+++ b/studio/pages/project/[ref]/logs-explorer/saved.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { IconSave, Loading } from '@supabase/ui'
+import { IconSave, Loading } from 'common2'
 import { useStore } from 'hooks'
 import { LogsSavedQueriesItem } from 'components/interfaces/Settings/Logs'
 import LogsExplorerLayout from 'components/layouts/LogsExplorerLayout/LogsExplorerLayout'
@@ -43,8 +43,8 @@ export const LogsSavedPage: NextPageWithLayout = () => {
       {saved.length === 0 && (
         <div className="my-auto flex h-full flex-grow flex-col items-center justify-center gap-1">
           <IconSave className="animate-bounce" />
-          <h3 className="text-scale-1200 text-lg">No Saved Queries Yet</h3>
-          <p className="text-scale-900 text-sm">
+          <h3 className="text-lg text-scale-1200">No Saved Queries Yet</h3>
+          <p className="text-sm text-scale-900">
             Saved queries will appear here. Queries can be saved from the{' '}
             <Link href={`/project/${ref}/logs-explorer`}>
               <span className="cursor-pointer font-bold underline">Query</span>
diff --git a/studio/pages/project/[ref]/logs-explorer/templates.tsx b/studio/pages/project/[ref]/logs-explorer/templates.tsx
index 1c538c2f5da..bd9246ef5eb 100644
--- a/studio/pages/project/[ref]/logs-explorer/templates.tsx
+++ b/studio/pages/project/[ref]/logs-explorer/templates.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer, useStaticRendering } from 'mobx-react-lite'
-import { IconCode, Badge, Collapsible, Button, Popover } from '@supabase/ui'
+import { IconCode, Badge, Collapsible, Button, Popover } from 'common2'
 import { TEMPLATES } from 'components/interfaces/Settings/Logs'
 import LogsExplorerLayout from 'components/layouts/LogsExplorerLayout/LogsExplorerLayout'
 import CardButton from 'components/ui/CardButton'
@@ -21,12 +21,12 @@ export const LogsTemplatesPage: NextPageWithLayout = () => {
               title={template.label}
               icon={
                 <div
-                  className="text-scale-100 bg-scale-1200 duration-400 group-hover:bg-brand-900 group-hover:text-brand-1200 flex h-6
-                    w-6
-                    items-center
-                    justify-center
-                    rounded
+                  className="duration-400 flex h-6 w-6 items-center justify-center rounded
+                    bg-scale-1200
+                    text-scale-100
                     transition-colors
+                    group-hover:bg-brand-900
+                    group-hover:text-brand-1200
                   "
                 >
                   <div className="scale-100 group-hover:scale-110">
@@ -42,10 +42,10 @@ export const LogsTemplatesPage: NextPageWithLayout = () => {
                   <Popover
                     onOpenChange={setShowPreview}
                     open={showPreview}
-                    className="bg-scale-100 rounded-lg"
+                    className="rounded-lg bg-scale-100"
                     size="content"
                     overlay={
-                      <pre className="bg-scale-100 whitespace-pre-line break-words rounded-lg p-4 text-sm">
+                      <pre className="whitespace-pre-line break-words rounded-lg bg-scale-100 p-4 text-sm">
                         {template.searchString}
                       </pre>
                     }
diff --git a/studio/pages/project/[ref]/settings/billing/index.tsx b/studio/pages/project/[ref]/settings/billing/index.tsx
index d74abc74d9e..cce9331bd87 100644
--- a/studio/pages/project/[ref]/settings/billing/index.tsx
+++ b/studio/pages/project/[ref]/settings/billing/index.tsx
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { FC, useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Loading, IconArrowRight } from '@supabase/ui'
+import { Loading, IconArrowRight } from 'common2'
 
 import { Project, NextPageWithLayout } from 'types'
 import { useProjectPaygStatistics, useProjectSubscription, useStore } from 'hooks'
@@ -80,8 +80,8 @@ const Settings: FC<SettingsProps> = ({ project }) => {
       />
       {loading ? (
         <Loading active={loading}>
-          <div className="border-panel-border-light dark:border-panel-border-dark mb-8 w-full overflow-hidden rounded border">
-            <div className="bg-panel-body-light dark:bg-panel-body-dark flex items-center justify-center px-6 py-6">
+          <div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
+            <div className="flex items-center justify-center bg-panel-body-light px-6 py-6 dark:bg-panel-body-dark">
               <p>Loading usage breakdown</p>
             </div>
           </div>
diff --git a/studio/pages/project/[ref]/settings/billing/update/index.tsx b/studio/pages/project/[ref]/settings/billing/update/index.tsx
index c39fe993a65..fa984df04bc 100644
--- a/studio/pages/project/[ref]/settings/billing/update/index.tsx
+++ b/studio/pages/project/[ref]/settings/billing/update/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
-import { Button, Modal } from '@supabase/ui'
+import { Button, Modal } from 'common2'
 
 import { useStore, useSubscriptionStats } from 'hooks'
 import { get } from 'lib/common/fetch'
@@ -149,7 +149,7 @@ const BillingUpdate: NextPageWithLayout = () => {
       >
         <div className="space-y-4 py-4">
           <Modal.Content>
-            <p className="text-scale-1100 text-sm">
+            <p className="text-sm text-scale-1100">
               Your account is entitled up to {freeProjectsLimit} free projects across all
               organizations you own. You will need to delete or upgrade an existing free project
               first, before being able to downgrade this project.
diff --git a/studio/pages/project/[ref]/settings/database.tsx b/studio/pages/project/[ref]/settings/database.tsx
index d51b816003c..195db848b77 100644
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { debounce } from 'lodash'
 import generator from 'generate-password'
-import { Input, Button, IconDownload, IconArrowRight, Tabs, Modal } from '@supabase/ui'
+import { Input, Button, IconDownload, IconArrowRight, Tabs, Modal } from 'common2'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
@@ -244,11 +244,11 @@ const ResetDbPassword: FC<any> = () => {
                     <Tooltip.Arrow className="radix-tooltip-arrow" />
                     <div
                       className={[
-                        'bg-scale-100 rounded py-1 px-2 leading-none shadow', // background
-                        'border-scale-200 border ', //border
+                        'rounded bg-scale-100 py-1 px-2 leading-none shadow', // background
+                        'border border-scale-200 ', //border
                       ].join(' ')}
                     >
-                      <span className="text-scale-1200 text-xs">
+                      <span className="text-xs text-scale-1200">
                         You need additional permissions to reset the database password
                       </span>
                     </div>
@@ -261,7 +261,7 @@ const ResetDbPassword: FC<any> = () => {
       </Panel>
       <Modal
         hideFooter
-        header={<h5 className="text-scale-1200 text-sm">Reset database password</h5>}
+        header={<h5 className="text-sm text-scale-1200">Reset database password</h5>}
         confirmText="Reset password"
         alignFooter="right"
         size="medium"
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 514494bde05..cc435ce8c59 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -1,7 +1,7 @@
 import SVG from 'react-inlinesvg'
 import { useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Button, IconArrowLeft } from '@supabase/ui'
+import { Button, IconArrowLeft } from 'common2'
 
 import { withAuth, useFlag } from 'hooks'
 import Success from 'components/interfaces/Support/Success'
@@ -35,7 +35,7 @@ const SupportPage = () => {
             <SVG src={`/img/supabase-logo.svg`} className="h-4 w-4" />
             <h4 className="m-0 text-lg">Supabase support</h4>
           </div>
-          <div className="bg-panel-body-light dark:bg-panel-body-dark dark:border-dark min-w-full space-y-12 rounded border py-8 shadow-md">
+          <div className="min-w-full space-y-12 rounded border bg-panel-body-light py-8 shadow-md dark:border-dark dark:bg-panel-body-dark">
             {sent ? <Success /> : <SupportForm setSent={setSent} />}
           </div>
         </div>
diff --git a/studio/pages/vercel/complete.tsx b/studio/pages/vercel/complete.tsx
index 7f542aaf7ed..693ff9411ce 100644
--- a/studio/pages/vercel/complete.tsx
+++ b/studio/pages/vercel/complete.tsx
@@ -1,7 +1,7 @@
 import { createContext, useEffect, useState } from 'react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
-import { Button, IconLoader } from '@supabase/ui'
+import { Button, IconLoader } from 'common2'
 
 const PageContext = createContext(null)
 function IntegrationComplete() {
@@ -32,7 +32,7 @@ function IntegrationComplete() {
     // @ts-ignore
     <PageContext.Provider value={PageState}>
       <VercelIntegrationLayout>
-        <div className="max-w-sm mx-auto">
+        <div className="mx-auto max-w-sm">
           <IconLoader className="animate-spin" size={30} />
           <p className="pt-4 text-lg">Your new project is spinning up</p>
           <p className="pt-2">This may take up to 2 mins, but you can continue on Vercel.</p>
diff --git a/studio/pages/vercel/integrate.tsx b/studio/pages/vercel/integrate.tsx
index 6a9282e741d..1ee7eb45c86 100644
--- a/studio/pages/vercel/integrate.tsx
+++ b/studio/pages/vercel/integrate.tsx
@@ -4,7 +4,7 @@ import { toast } from 'react-hot-toast'
 import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { makeAutoObservable, runInAction } from 'mobx'
-import { Button, Select, IconPlusCircle, IconX, IconChevronRight, Listbox } from '@supabase/ui'
+import { Button, Select, IconPlusCircle, IconX, IconChevronRight, Listbox } from 'common2'
 import Divider from 'components/ui/Divider'
 
 import { Dictionary } from 'components/grid'
@@ -280,11 +280,11 @@ const IntegrationProject: FC = observer(() => {
         </Select>
       </div>
       <div
-        className="bg-panel-header-light dark:bg-panel-header-dark border-border-secondary-light dark:border-border-secondary-dark 
-      w-full rounded-sm border"
+        className="w-full rounded-sm border border-border-secondary-light 
+      bg-panel-header-light dark:border-border-secondary-dark dark:bg-panel-header-dark"
       >
         <div className="flex items-center justify-between p-6">
-          <h4 className="text-lg my-auto mr-8 capitalize">{name}</h4>
+          <h4 className="my-auto mr-8 text-lg capitalize">{name}</h4>
           <Button disabled={loading || !!errorMsg} loading={loading} onClick={onClick}>
             Deploy
           </Button>
@@ -485,7 +485,7 @@ const ProjectLinkList: FC = observer(() => {
       </ul>
       <div className="py-2">
         {_store.projectLinkRemaining == 0 ? (
-          <p className="text-scale-1000 text-sm">
+          <p className="text-sm text-scale-1000">
             All Vercel projects for selected scope have been added
           </p>
         ) : (
@@ -498,7 +498,7 @@ const ProjectLinkList: FC = observer(() => {
             >
               {`Add another Vercel Project`}
             </Button>
-            <p className="text-scale-1000 text-sm">
+            <p className="text-sm text-scale-1000">
               {_store.projectLinkRemaining} project(s) remaining
             </p>
           </div>
@@ -612,7 +612,7 @@ const ProjectLinkItem: FC<ProjectLinkItemProps> = observer(
             </div>
           )}
         </div>
-        {error && <p className="text-scale-1000 text-sm">{error}</p>}
+        {error && <p className="text-sm text-scale-1000">{error}</p>}
         {_store.waitingIntegration && result && (
           <p
             className={`text-sm ${
diff --git a/studio/pages/vercel/setupOrg.tsx b/studio/pages/vercel/setupOrg.tsx
index 12241c20e7d..dc1a241875e 100644
--- a/studio/pages/vercel/setupOrg.tsx
+++ b/studio/pages/vercel/setupOrg.tsx
@@ -1,7 +1,7 @@
 import { createContext, useEffect, useContext, useState, ChangeEvent } from 'react'
 import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
-import { Button, Input, Select } from '@supabase/ui'
+import { Button, Input, Select } from 'common2'
 import { runInAction } from 'mobx'
 
 import { API_URL } from 'lib/constants'
@@ -170,7 +170,7 @@ const OrgSelection = observer(({}) => {
 
   return (
     <div className="">
-      <div className="mt-1 mb-8 relative">
+      <div className="relative mt-1 mb-8">
         <Select
           label="Choose an organization"
           value={PageState.selectedOrg?.slug}
diff --git a/studio/pages/vercel/setupProject.tsx b/studio/pages/vercel/setupProject.tsx
index 56401efd3a9..e0869810ac8 100644
--- a/studio/pages/vercel/setupProject.tsx
+++ b/studio/pages/vercel/setupProject.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { makeAutoObservable } from 'mobx'
 import { debounce } from 'lodash'
-import { Button, Input, Listbox } from '@supabase/ui'
+import { Button, Input, Listbox } from 'common2'
 import { Dictionary } from 'components/grid'
 import generator from 'generate-password'