diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx
index eeef64ab8c9ae..9b774a17b9c81 100644
--- a/apps/studio/components/interfaces/Account/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx
@@ -6,16 +6,15 @@ import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { DatePicker } from 'components/ui/DatePicker'
 import { FilterPopover } from 'components/ui/FilterPopover'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import type { AuditLog } from 'data/organizations/organization-audit-logs-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProfileAuditLogsQuery } from 'data/profile/profile-audit-logs-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
-import { formatSelectedDateRange } from '../Organization/AuditLogs/AuditLogs.utils'
+import { LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
 
 const AuditLogs = () => {
   const currentTime = dayjs().utc().set('millisecond', 0)
@@ -33,12 +32,16 @@ const AuditLogs = () => {
   const { data: projects } = useProjectsQuery()
   const { data: organizations } = useOrganizationsQuery()
   const { data, error, isLoading, isSuccess, isError, isRefetching, refetch } =
-    useProfileAuditLogsQuery({
-      iso_timestamp_start: dateRange.from,
-      iso_timestamp_end: dateRange.to,
-    })
+    useProfileAuditLogsQuery(
+      {
+        iso_timestamp_start: dateRange.from,
+        iso_timestamp_end: dateRange.to,
+      },
+      {
+        retry: false,
+      }
+    )
 
-  const retentionPeriod = data?.retention_period ?? 0
   const logs = data?.result ?? []
   const sortedLogs = logs
     ?.sort((a, b) =>
@@ -54,9 +57,6 @@ const AuditLogs = () => {
       }
     })
 
-  const minDate = dayjs().subtract(retentionPeriod, 'days')
-  const maxDate = dayjs()
-
   // This feature depends on the subscription tier of the user. Free user can view logs up to 1 day
   // in the past. The API limits the logs to maximum of 1 day and 5 minutes so when the page is
   // viewed for more than 5 minutes, the call parameters needs to be updated. This also works with
@@ -88,35 +88,38 @@ const AuditLogs = () => {
               activeOptions={filters.projects}
               onSaveFilters={(values) => setFilters({ ...filters, projects: values })}
             />
-            <DatePicker
-              hideTime
-              hideClear
-              triggerButtonType="dashed"
-              triggerButtonTitle=""
-              from={dateRange.from}
-              to={dateRange.to}
-              minDate={minDate.toDate()}
-              maxDate={maxDate.toDate()}
-              onChange={(value) => {
-                if (value.from !== null && value.to !== null) {
-                  const { from, to } = formatSelectedDateRange(value)
-                  setDateRange({ from, to })
-                }
-              }}
-              renderFooter={() => {
-                return (
-                  <Alert title="" variant="info" className="mx-3 pl-2 pr-2 pt-1 pb-2">
-                    You have a log retention period of{' '}
-                    <span className="text-brand">
-                      {retentionPeriod} day
-                      {retentionPeriod > 1 ? 's' : ''}
-                    </span>
-                    . You may only view logs from{' '}
-                    {dayjs().subtract(retentionPeriod, 'days').format('DD MMM YYYY')} as the
-                    earliest date.
-                  </Alert>
-                )
-              }}
+            <LogsDatePicker
+              hideWarnings
+              value={dateRange}
+              onSubmit={(value) => setDateRange(value)}
+              helpers={[
+                {
+                  text: 'Last 1 hour',
+                  calcFrom: () => dayjs().subtract(1, 'hour').toISOString(),
+                  calcTo: () => dayjs().toISOString(),
+                },
+                {
+                  text: 'Last 3 hours',
+                  calcFrom: () => dayjs().subtract(3, 'hour').toISOString(),
+                  calcTo: () => dayjs().toISOString(),
+                },
+
+                {
+                  text: 'Last 6 hours',
+                  calcFrom: () => dayjs().subtract(6, 'hour').toISOString(),
+                  calcTo: () => dayjs().toISOString(),
+                },
+                {
+                  text: 'Last 12 hours',
+                  calcFrom: () => dayjs().subtract(12, 'hour').toISOString(),
+                  calcTo: () => dayjs().toISOString(),
+                },
+                {
+                  text: 'Last 24 hours',
+                  calcFrom: () => dayjs().subtract(1, 'day').toISOString(),
+                  calcTo: () => dayjs().toISOString(),
+                },
+              ]}
             />
             {isSuccess && (
               <>
diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index 0895737379e51..f14eb4f2030af 100644
--- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -31,8 +31,7 @@ import {
   Button,
   WarningIcon,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
-import { formatSelectedDateRange } from './AuditLogs.utils'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 
 // [Joshen considerations]
 // - Maybe fix the height of the table to the remaining height of the viewport, so that the search input is always visible
@@ -69,14 +68,7 @@ const AuditLogs = () => {
       },
       {
         enabled: canReadAuditLogs,
-        retry(_failureCount, error) {
-          if (error.message.endsWith('upgrade to Team or Enterprise Plan to access audit logs.')) {
-            return false
-          }
-          return true
-        },
-        retryOnMount: false,
-        refetchOnWindowFocus: false,
+        retry: false,
       }
     )
 
@@ -139,6 +131,77 @@ const AuditLogs = () => {
     <>
       <ScaffoldContainerLegacy>
         <div className="space-y-4 flex flex-col">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <p className="text-xs prose">Filter by</p>
+              <FilterPopover
+                name="Users"
+                options={activeMembers}
+                labelKey="username"
+                valueKey="gotrue_id"
+                activeOptions={filters.users}
+                onSaveFilters={(values) => setFilters({ ...filters, users: values })}
+              />
+              <FilterPopover
+                name="Projects"
+                options={
+                  projects?.filter((p) => p.organization_id === currentOrganization?.id) ?? []
+                }
+                labelKey="name"
+                valueKey="ref"
+                activeOptions={filters.projects}
+                onSaveFilters={(values) => setFilters({ ...filters, projects: values })}
+              />
+              <LogsDatePicker
+                hideWarnings
+                value={dateRange}
+                onSubmit={(value) => setDateRange(value)}
+                helpers={[
+                  {
+                    text: 'Last 1 hour',
+                    calcFrom: () => dayjs().subtract(1, 'hour').toISOString(),
+                    calcTo: () => dayjs().toISOString(),
+                  },
+                  {
+                    text: 'Last 3 hours',
+                    calcFrom: () => dayjs().subtract(3, 'hour').toISOString(),
+                    calcTo: () => dayjs().toISOString(),
+                  },
+
+                  {
+                    text: 'Last 6 hours',
+                    calcFrom: () => dayjs().subtract(6, 'hour').toISOString(),
+                    calcTo: () => dayjs().toISOString(),
+                  },
+                  {
+                    text: 'Last 12 hours',
+                    calcFrom: () => dayjs().subtract(12, 'hour').toISOString(),
+                    calcTo: () => dayjs().toISOString(),
+                  },
+                  {
+                    text: 'Last 24 hours',
+                    calcFrom: () => dayjs().subtract(1, 'day').toISOString(),
+                    calcTo: () => dayjs().toISOString(),
+                  },
+                ]}
+              />
+              {isSuccess && (
+                <>
+                  <div className="h-[20px] border-r border-strong !ml-4 !mr-2" />
+                  <p className="prose text-xs">Viewing {sortedLogs.length} logs in total</p>
+                </>
+              )}
+            </div>
+            <Button
+              type="default"
+              disabled={isLoading || isRefetching}
+              icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
+              onClick={() => refetch()}
+            >
+              {isRefetching ? 'Refreshing' : 'Refresh'}
+            </Button>
+          </div>
+
           {isLoading && (
             <div className="space-y-2">
               <ShimmeringLoader />
@@ -176,6 +239,15 @@ const AuditLogs = () => {
                   </div>
                 </div>
               </Alert_Shadcn_>
+            ) : error.message.includes('range exceeded') ? (
+              <Alert_Shadcn_ variant="destructive" title="Date range too large">
+                <WarningIcon />
+                <AlertTitle_Shadcn_>Date range too large</AlertTitle_Shadcn_>
+                <AlertDescription_Shadcn_>
+                  The selected date range exceeds the maximum allowed period. Please select a
+                  smaller time range.
+                </AlertDescription_Shadcn_>
+              </Alert_Shadcn_>
             ) : (
               <AlertError error={error} subject="Failed to retrieve audit logs" />
             )
@@ -183,79 +255,6 @@ const AuditLogs = () => {
 
           {isSuccess && (
             <>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <p className="text-xs prose">Filter by</p>
-                  <FilterPopover
-                    name="Users"
-                    options={activeMembers}
-                    labelKey="username"
-                    valueKey="gotrue_id"
-                    activeOptions={filters.users}
-                    onSaveFilters={(values) => setFilters({ ...filters, users: values })}
-                  />
-                  <FilterPopover
-                    name="Projects"
-                    options={
-                      projects?.filter((p) => p.organization_id === currentOrganization?.id) ?? []
-                    }
-                    labelKey="name"
-                    valueKey="ref"
-                    activeOptions={filters.projects}
-                    onSaveFilters={(values) => setFilters({ ...filters, projects: values })}
-                  />
-                  <DatePicker
-                    hideTime
-                    hideClear
-                    triggerButtonType="dashed"
-                    triggerButtonTitle=""
-                    from={dateRange.from}
-                    to={dateRange.to}
-                    minDate={minDate.toDate()}
-                    maxDate={maxDate.toDate()}
-                    onChange={(value) => {
-                      if (value.from !== null && value.to !== null) {
-                        const { from, to } = formatSelectedDateRange(value)
-                        setDateRange({ from, to })
-                      }
-                    }}
-                    renderFooter={() => {
-                      return (
-                        <Admonition
-                          showIcon={false}
-                          type="default"
-                          className="w-auto mx-2 px-3 py-2"
-                        >
-                          <div className="text-xs text-foreground-light">
-                            Your organization has a log retention period of{' '}
-                            <span className="text-brand">
-                              {retentionPeriod} day
-                              {retentionPeriod > 1 ? 's' : ''}
-                            </span>
-                            . You may only view logs from{' '}
-                            {dayjs().subtract(retentionPeriod, 'days').format('DD MMM YYYY')} as the
-                            earliest date.
-                          </div>
-                        </Admonition>
-                      )
-                    }}
-                  />
-                  {isSuccess && (
-                    <>
-                      <div className="h-[20px] border-r border-strong !ml-4 !mr-2" />
-                      <p className="prose text-xs">Viewing {sortedLogs.length} logs in total</p>
-                    </>
-                  )}
-                </div>
-                <Button
-                  type="default"
-                  disabled={isLoading || isRefetching}
-                  icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
-                  onClick={() => refetch()}
-                >
-                  {isRefetching ? 'Refreshing' : 'Refresh'}
-                </Button>
-              </div>
               {logs.length === 0 ? (
                 <div className="bg-surface-100 border rounded p-4 flex items-center justify-between">
                   <p className="prose text-sm">
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
index b4a7010cce6a2..258a65f1dfb52 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.DatePickers.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import dayjs from 'dayjs'
-import { ChevronLeft, ChevronRight, Clock, XIcon } from 'lucide-react'
-import { PropsWithChildren, useEffect, useState } from 'react'
+import { ChevronLeft, ChevronRight, Clock, HistoryIcon, XIcon } from 'lucide-react'
+import { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import DatePicker from 'react-datepicker'
 
 import { Label } from '@ui/components/shadcn/ui/label'
@@ -20,6 +20,7 @@ import {
 } from 'ui'
 import { LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD } from './Logs.constants'
 import type { DatetimeHelper } from './Logs.types'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 
 export type DatePickerValue = {
   to: string
@@ -34,6 +35,7 @@ interface Props {
   onSubmit: (value: DatePickerValue) => void
   buttonTriggerProps?: ButtonProps
   popoverContentProps?: typeof PopoverContent_Shadcn_
+  hideWarnings?: boolean
 }
 
 export const LogsDatePicker = ({
@@ -42,9 +44,12 @@ export const LogsDatePicker = ({
   value,
   buttonTriggerProps,
   popoverContentProps,
+  hideWarnings,
 }: PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(false)
 
+  const todayButtonRef = useRef<HTMLButtonElement>(null)
+
   // Reset the state when the popover closes
   useEffect(() => {
     if (!open) {
@@ -315,8 +320,13 @@ export const LogsDatePicker = ({
               />
             </div>
             <div className="flex-shrink">
-              <Button
-                icon={<XIcon size={14} />}
+              <ButtonTooltip
+                tooltip={{
+                  content: {
+                    text: 'Clear time range',
+                  },
+                }}
+                icon={<HistoryIcon size={14} />}
                 type="text"
                 size="tiny"
                 className="px-1.5"
@@ -324,13 +334,20 @@ export const LogsDatePicker = ({
                   setStartTime({ HH: '00', mm: '00', ss: '00' })
                   setEndTime({ HH: '00', mm: '00', ss: '00' })
                 }}
-              ></Button>
+              ></ButtonTooltip>
             </div>
           </div>
           <div className="p-2 border-t">
             <DatePicker
               inline
               selectsRange
+              todayButton={
+                <div className="sr-only">
+                  <Button type="text" size="tiny" ref={todayButtonRef}>
+                    Go to today
+                  </Button>
+                </div>
+              }
               onChange={(dates) => {
                 handleDatePickerChange(dates)
               }}
@@ -371,7 +388,7 @@ export const LogsDatePicker = ({
               )}
             />
           </div>
-          {isLargeRange && (
+          {isLargeRange && !hideWarnings && (
             <div className="text-xs px-3 py-1.5 border-y bg-warning-300 text-warning-foreground border-warning-500 text-warning-600">
               Large ranges may result in memory errors for <br /> big projects.
             </div>
@@ -393,6 +410,10 @@ export const LogsDatePicker = ({
             <Button
               type="default"
               onClick={() => {
+                // [Jordi]: Workaround so that if the user is in a different month, the datepicker will move the view to the current month
+                if (todayButtonRef.current) {
+                  todayButtonRef.current.click()
+                }
                 setStartDate(new Date())
                 setEndDate(new Date())
               }}
diff --git a/apps/studio/components/interfaces/Storage/__tests__/CreateBucketModal.test.tsx b/apps/studio/components/interfaces/Storage/__tests__/CreateBucketModal.test.tsx
index b0c4c7fc7b935..4d0b2d37c5508 100644
--- a/apps/studio/components/interfaces/Storage/__tests__/CreateBucketModal.test.tsx
+++ b/apps/studio/components/interfaces/Storage/__tests__/CreateBucketModal.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event'
 
 import { addAPIMock } from 'tests/lib/msw'
 import { ProjectContextProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+
 import { render } from 'tests/helpers'
 import { routerMock } from 'tests/lib/route-mock'
 import CreateBucketModal from '../CreateBucketModal'
diff --git a/apps/studio/components/interfaces/Storage/__tests__/EditBucketModal.test.tsx b/apps/studio/components/interfaces/Storage/__tests__/EditBucketModal.test.tsx
index 4824277d55735..0ae722625860b 100644
--- a/apps/studio/components/interfaces/Storage/__tests__/EditBucketModal.test.tsx
+++ b/apps/studio/components/interfaces/Storage/__tests__/EditBucketModal.test.tsx
@@ -8,7 +8,6 @@ import { addAPIMock } from 'tests/lib/msw'
 import { ProjectContextProvider } from 'components/layouts/ProjectLayout/ProjectContext'
 import { Bucket } from 'data/storage/buckets-query'
 import { render } from 'tests/helpers'
-import { routerMock } from 'tests/lib/route-mock'
 import EditBucketModal from '../EditBucketModal'
 
 const bucket: Bucket = {
@@ -43,8 +42,6 @@ const Page = ({ onClose }: { onClose: () => void }) => {
 
 describe(`EditBucketModal`, () => {
   beforeEach(() => {
-    // useParams
-    routerMock.setCurrentUrl(`/project/default/storage/buckets/test`)
     // useSelectedProject -> Project
     addAPIMock({
       method: `get`,
diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx
index f9dc116ecfd08..2a23a8950a01e 100644
--- a/apps/studio/components/interfaces/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { ProfileImage } from 'components/ui/ProfileImage'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSignOut } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
 import { useProfile } from 'lib/profile'
@@ -33,6 +34,7 @@ export function UserDropdown() {
   const appStateSnapshot = useAppStateSnapshot()
   const setCommandMenuOpen = useSetCommandMenuOpen()
   const { openFeaturePreviewModal } = useFeaturePreviewModal()
+  const profileShowEmailEnabled = useIsFeatureEnabled('profile:show_email')
 
   return (
     <DropdownMenu>
@@ -61,7 +63,7 @@ export function UserDropdown() {
                   >
                     {profile.username}
                   </span>
-                  {profile.primary_email !== profile.username && (
+                  {profile.primary_email !== profile.username && profileShowEmailEnabled && (
                     <span
                       title={profile.primary_email}
                       className="w-full text-left text-foreground-light text-xs truncate"
diff --git a/apps/studio/data/profile/types.ts b/apps/studio/data/profile/types.ts
index 4b756ae7e08da..0759884e69709 100644
--- a/apps/studio/data/profile/types.ts
+++ b/apps/studio/data/profile/types.ts
@@ -3,5 +3,3 @@ import type { components } from 'data/api'
 export type Profile = components['schemas']['ProfileResponse'] & {
   profileImageUrl?: string
 }
-
-export type Feature = Profile['disabled_features'][number]
diff --git a/apps/studio/hooks/misc/useIsFeatureEnabled.ts b/apps/studio/hooks/misc/useIsFeatureEnabled.ts
index 2542fb5ddb3ae..6811deba42c15 100644
--- a/apps/studio/hooks/misc/useIsFeatureEnabled.ts
+++ b/apps/studio/hooks/misc/useIsFeatureEnabled.ts
@@ -1,43 +1,21 @@
-import type { Feature } from 'data/profile/types'
+import { isFeatureEnabled, type Feature } from 'common'
 import { useProfile } from 'lib/profile'
 
-function checkFeature(feature: Feature, features?: Feature[]) {
-  return !features?.includes(feature) ?? true
-}
-
-type SnakeToCamelCase<S extends string> = S extends `${infer First}_${infer Rest}`
-  ? `${First}${SnakeToCamelCase<Capitalize<Rest>>}`
-  : S
-
-type FeatureToCamelCase<S extends Feature> = S extends `${infer P}:${infer R}`
-  ? `${SnakeToCamelCase<P>}${Capitalize<SnakeToCamelCase<R>>}`
-  : SnakeToCamelCase<S>
-
-function featureToCamelCase(feature: Feature) {
-  return feature
-    .replace(/:/g, '_')
-    .split('_')
-    .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
-    .join('') as FeatureToCamelCase<typeof feature>
-}
-
 function useIsFeatureEnabled<T extends Feature[]>(
   features: T
-): { [key in FeatureToCamelCase<T[number]>]: boolean }
-function useIsFeatureEnabled(features: Feature): boolean
+): ReturnType<typeof isFeatureEnabled<T>>
+function useIsFeatureEnabled(features: Feature): ReturnType<typeof isFeatureEnabled>
 function useIsFeatureEnabled<T extends Feature | Feature[]>(features: T) {
   const { profile } = useProfile()
+  const disabledFeatures = profile?.disabled_features
 
+  // This code branch is to make the type checker happy, it's intentionally
+  // the same as the isFeatureEnabled function call below.
   if (Array.isArray(features)) {
-    return Object.fromEntries(
-      features.map((feature) => [
-        featureToCamelCase(feature),
-        checkFeature(feature, profile?.disabled_features),
-      ])
-    )
+    return isFeatureEnabled(features, disabledFeatures)
   }
 
-  return checkFeature(features, profile?.disabled_features)
+  return isFeatureEnabled(features, disabledFeatures)
 }
 
 export { useIsFeatureEnabled }
diff --git a/apps/studio/tests/vitestSetup.ts b/apps/studio/tests/vitestSetup.ts
index e32fd66226fb0..f309589b528ca 100644
--- a/apps/studio/tests/vitestSetup.ts
+++ b/apps/studio/tests/vitestSetup.ts
@@ -37,6 +37,15 @@ beforeAll(() => {
 
   vi.mock('next/compat/router', () => require('next-router-mock'))
 
+  // Mock the useParams hook from common module globally
+  vi.mock('common', async (importOriginal) => {
+    const actual = await importOriginal()
+    return {
+      ...(typeof actual === 'object' ? actual : {}),
+      useParams: () => ({ ref: 'default' }),
+    }
+  })
+
   routerMock.useParser(createDynamicRouteParser(['/projects/[ref]']))
 })
 
diff --git a/packages/common/enabled-features/enabled-features.json b/packages/common/enabled-features/enabled-features.json
new file mode 100644
index 0000000000000..523eda6e3236c
--- /dev/null
+++ b/packages/common/enabled-features/enabled-features.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "./enabled-features.schema.json",
+
+  "profile:show_email": true,
+  "profile:update": true
+}
diff --git a/packages/common/enabled-features/enabled-features.schema.json b/packages/common/enabled-features/enabled-features.schema.json
new file mode 100644
index 0000000000000..bef56000407bc
--- /dev/null
+++ b/packages/common/enabled-features/enabled-features.schema.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+
+    "profile:show_email": {
+      "type": "boolean",
+      "description": "Show the user's email address in the toolbar"
+    },
+    "profile:update": {
+      "type": "boolean",
+      "description": "Allow the user to change their profile information (first name, last name)"
+    }
+  },
+  "required": ["profile:show_email", "profile:update"],
+  "additionalProperties": false
+}
diff --git a/packages/common/enabled-features/index.ts b/packages/common/enabled-features/index.ts
new file mode 100644
index 0000000000000..ec5987eb6dd5c
--- /dev/null
+++ b/packages/common/enabled-features/index.ts
@@ -0,0 +1,60 @@
+import type { components } from 'api-types'
+import enabledFeaturesRaw from './enabled-features.json'
+
+const enabledFeaturesStaticObj = enabledFeaturesRaw as Omit<typeof enabledFeaturesRaw, '$schema'>
+
+type Profile = components['schemas']['ProfileResponse']
+
+export type Feature = Profile['disabled_features'][number] | keyof typeof enabledFeaturesStaticObj
+
+const disabledFeaturesStaticArray = Object.entries(enabledFeaturesStaticObj)
+  .filter(([_, value]) => !value)
+  .map(([key]) => key as Feature)
+
+function checkFeature(feature: Feature, features: Set<Feature>) {
+  return !features.has(feature)
+}
+
+type SnakeToCamelCase<S extends string> = S extends `${infer First}_${infer Rest}`
+  ? `${First}${SnakeToCamelCase<Capitalize<Rest>>}`
+  : S
+
+type FeatureToCamelCase<S extends Feature> = S extends `${infer P}:${infer R}`
+  ? `${SnakeToCamelCase<P>}${Capitalize<SnakeToCamelCase<R>>}`
+  : SnakeToCamelCase<S>
+
+function featureToCamelCase(feature: Feature) {
+  return feature
+    .replace(/:/g, '_')
+    .split('_')
+    .map((word, index) => (index === 0 ? word : word[0].toUpperCase() + word.slice(1)))
+    .join('') as FeatureToCamelCase<typeof feature>
+}
+
+function isFeatureEnabled<T extends Feature[]>(
+  features: T,
+  runtimeDisabledFeatures?: Feature[]
+): { [key in FeatureToCamelCase<T[number]>]: boolean }
+function isFeatureEnabled(features: Feature, runtimeDisabledFeatures?: Feature[]): boolean
+function isFeatureEnabled<T extends Feature | Feature[]>(
+  features: T,
+  runtimeDisabledFeatures?: Feature[]
+) {
+  const disabledFeatures = new Set([
+    ...(runtimeDisabledFeatures ?? []),
+    ...disabledFeaturesStaticArray,
+  ])
+
+  if (Array.isArray(features)) {
+    return Object.fromEntries(
+      features.map((feature) => [
+        featureToCamelCase(feature),
+        checkFeature(feature, disabledFeatures),
+      ])
+    )
+  }
+
+  return checkFeature(features, disabledFeatures)
+}
+
+export { isFeatureEnabled }
diff --git a/packages/common/index.tsx b/packages/common/index.tsx
index 863f4ebbc4657..84a0675e8a435 100644
--- a/packages/common/index.tsx
+++ b/packages/common/index.tsx
@@ -2,10 +2,11 @@ export * from './auth'
 export * from './consent-state'
 export * from './constants'
 export * from './database-types'
+export * from './enabled-features'
+export * from './feature-flags'
 export * from './gotrue'
 export * from './helpers'
 export * from './hooks'
 export * from './MetaFavicons/pages-router'
 export * from './Providers'
 export * from './telemetry'
-export * from './feature-flags'
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
index cd6c94d6e8b0c..6bfd004e4e643 100644
--- a/packages/common/tsconfig.json
+++ b/packages/common/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
 }