diff --git a/apps/studio/components/interfaces/App/AppBannerWrapper.tsx b/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
index 185bb34eabfc7..30163b90e14ff 100644
--- a/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
+++ b/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react'
 
+import { useIncidentStatusQuery } from '@/data/platform/incident-status-query'
 import { useFlag } from 'common'
 import { ClockSkewBanner } from 'components/layouts/AppLayout/ClockSkewBanner'
 import { IncidentBanner } from 'components/layouts/AppLayout/IncidentBanner'
@@ -7,8 +8,12 @@ import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
 import { OrganizationResourceBanner } from '../Organization/HeaderBanner'
 
 export const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
+  const { data: incidents } = useIncidentStatusQuery()
+
   const ongoingIncident =
-    useFlag('ongoingIncident') || process.env.NEXT_PUBLIC_ONGOING_INCIDENT === 'true'
+    useFlag('ongoingIncident') ||
+    process.env.NEXT_PUBLIC_ONGOING_INCIDENT === 'true' ||
+    (incidents?.length ?? 0) > 0
   const showNoticeBanner = useFlag('showNoticeBanner')
   const clockSkewBanner = useFlag('clockSkewBanner')
 
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
index 70daf4bde1dd6..e3e491f304f82 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
@@ -4,6 +4,10 @@ import { isEmpty, isUndefined, noop } from 'lodash'
 import { useState } from 'react'
 import { toast } from 'sonner'
 
+import { useTableApiAccessPrivilegesMutation } from '@/data/privileges/table-api-access-mutation'
+import { useDataApiGrantTogglesEnabled } from '@/hooks/misc/useDataApiGrantTogglesEnabled'
+import { type ApiPrivilegesByRole } from '@/lib/data-api-types'
+import type { DeepReadonly, Prettify } from '@/lib/type-helpers'
 import { useParams } from 'common'
 import { type GeneratedPolicy } from 'components/interfaces/Auth/Policies/Policies.utils'
 import { databasePoliciesKeys } from 'data/database-policies/keys'
@@ -33,7 +37,7 @@ import { usePHFlag } from 'hooks/ui/useFlag'
 import { useUrlState } from 'hooks/ui/useUrlState'
 import { useTrack } from 'lib/telemetry/track'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
-import { useTableEditorStateSnapshot } from 'state/table-editor'
+import { useTableEditorStateSnapshot, type TableEditorState } from 'state/table-editor'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import type { Dictionary } from 'types'
 import { SonnerProgress } from 'ui'
@@ -57,6 +61,10 @@ import {
   updateTable,
 } from './SidePanelEditor.utils'
 import { SpreadsheetImport } from './SpreadsheetImport/SpreadsheetImport'
+import {
+  useTableApiAccessHandlerWithHistory,
+  type TableApiAccessParams,
+} from './TableEditor/ApiAccessToggle'
 import { TableEditor } from './TableEditor/TableEditor'
 import type { ImportContent } from './TableEditor/TableEditor.types'
 
@@ -89,6 +97,12 @@ type SaveTableParamsExisting = SaveTableParamsBase & {
 }
 
 type SaveTablePayloadBase = {
+  /**
+   * Comment to set on the table
+   *
+   * `null` removes existing comment
+   * `undefined` leaves comment unchanged
+   */
   comment?: string | null
 }
 
@@ -106,7 +120,7 @@ type SaveTablePayloadExisting = SaveTablePayloadBase & {
   rls_enabled?: boolean
 }
 
-type SaveTableConfiguration = {
+type SaveTableConfiguration = Prettify<{
   tableId?: number
   importContent?: ImportContent
   isRLSEnabled: boolean
@@ -114,6 +128,47 @@ type SaveTableConfiguration = {
   isDuplicateRows: boolean
   existingForeignKeyRelations: ForeignKeyConstraint[]
   primaryKey?: Constraint
+}>
+
+const DUMMY_TABLE_API_ACCESS_PARAMS: TableApiAccessParams = {
+  type: 'new',
+}
+
+const createTableApiAccessHandlerParams = ({
+  enabled,
+  snap,
+  selectedTable,
+}: {
+  enabled: boolean
+  snap: DeepReadonly<TableEditorState>
+  selectedTable?: PostgresTable
+}): TableApiAccessParams | undefined => {
+  if (!enabled) return undefined
+
+  const tableSidePanel = snap.sidePanel?.type === 'table' ? snap.sidePanel : undefined
+  if (!tableSidePanel) return undefined
+
+  if (tableSidePanel.mode === 'new') {
+    return {
+      type: 'new',
+    }
+  }
+
+  if (!selectedTable) return undefined
+
+  if (tableSidePanel.mode === 'duplicate') {
+    return {
+      type: 'duplicate',
+      templateSchemaName: selectedTable.schema,
+      templateTableName: selectedTable.name,
+    }
+  }
+
+  return {
+    type: 'edit',
+    schemaName: selectedTable.schema,
+    tableName: selectedTable.name,
+  }
 }
 
 export interface SidePanelEditorProps {
@@ -142,6 +197,8 @@ export const SidePanelEditor = ({
   const { data: project } = useSelectedProjectQuery()
   const { data: org } = useSelectedOrganizationQuery()
   const getImpersonatedRoleState = useGetImpersonatedRoleState()
+
+  const isApiGrantTogglesEnabled = useDataApiGrantTogglesEnabled()
   const generatePoliciesFlag = usePHFlag<string>('tableCreateGeneratePolicies')
 
   const [isEdited, setIsEdited] = useState<boolean>(false)
@@ -151,6 +208,19 @@ export const SidePanelEditor = ({
     connectionString: project?.connectionString,
   })
 
+  const tableApiAccessParams = createTableApiAccessHandlerParams({
+    enabled: isApiGrantTogglesEnabled,
+    snap,
+    selectedTable,
+  })
+  const apiAccessToggleHandler = useTableApiAccessHandlerWithHistory(
+    // Dummy params used to appease TypeScript, actually gated by enabled flag
+    tableApiAccessParams ?? DUMMY_TABLE_API_ACCESS_PARAMS,
+    {
+      enabled: tableApiAccessParams !== undefined,
+    }
+  )
+
   const { confirmOnClose, modalProps: closeConfirmationModalProps } = useConfirmOnClose({
     checkIsDirty: () => isEdited,
     onClose: () => {
@@ -179,6 +249,9 @@ export const SidePanelEditor = ({
   const { mutateAsync: updatePublication } = useDatabasePublicationUpdateMutation({
     onError: () => {},
   })
+  const { mutateAsync: updateApiPrivileges } = useTableApiAccessPrivilegesMutation({
+    onError: () => {}, // Errors handled inline
+  })
 
   const isDuplicating = snap.sidePanel?.type === 'table' && snap.sidePanel.mode === 'duplicate'
 
@@ -480,6 +553,26 @@ export const SidePanelEditor = ({
     }
   }
 
+  const updateTableApiAccess = async (
+    table: RetrieveTableResult,
+    privileges: DeepReadonly<ApiPrivilegesByRole>
+  ) => {
+    if (!project) return console.error('Project is required')
+
+    try {
+      await updateApiPrivileges({
+        projectRef: project.ref,
+        connectionString: project.connectionString ?? undefined,
+        relationId: table.id,
+        privileges,
+      })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : undefined
+      const toastDetail = message ? `: ${message}` : ''
+      toast.error(`Failed to update API access privileges for ${table.name}${toastDetail}`)
+    }
+  }
+
   const saveTable = async ({
     action,
     payload,
@@ -492,6 +585,19 @@ export const SidePanelEditor = ({
     let toastId
     let saveTableError = false
 
+    if (isApiGrantTogglesEnabled && !apiAccessToggleHandler.isSuccess) {
+      if (apiAccessToggleHandler.isPending) {
+        toast.info(
+          'Cannot save table yet because Data API settings are still loading. Please try again in a moment.'
+        )
+      } else {
+        toast.error(
+          'Cannot save table because there was an error loading Data API settings. Please refresh the page and try again.'
+        )
+      }
+      return
+    }
+
     const {
       importContent,
       isRLSEnabled,
@@ -521,6 +627,15 @@ export const SidePanelEditor = ({
 
         if (isRealtimeEnabled) await updateTableRealtime(table, true)
 
+        if (isApiGrantTogglesEnabled) {
+          const privilegesToSet = apiAccessToggleHandler.data?.schemaExposed
+            ? apiAccessToggleHandler.data.privileges
+            : undefined
+          if (privilegesToSet) {
+            await updateTableApiAccess(table, privilegesToSet)
+          }
+        }
+
         // Invalidate queries for table creation
         await Promise.all([
           queryClient.invalidateQueries({
@@ -577,6 +692,15 @@ export const SidePanelEditor = ({
         })
         if (isRealtimeEnabled) await updateTableRealtime(table, isRealtimeEnabled)
 
+        if (isApiGrantTogglesEnabled) {
+          const privilegesToSet = apiAccessToggleHandler.data?.schemaExposed
+            ? apiAccessToggleHandler.data.privileges
+            : undefined
+          if (privilegesToSet) {
+            await updateTableApiAccess(table, privilegesToSet)
+          }
+        }
+
         await Promise.all([
           queryClient.invalidateQueries({
             queryKey: tableKeys.list(project?.ref, table.schema, includeColumns),
@@ -614,6 +738,14 @@ export const SidePanelEditor = ({
         }
         if (isTableLike(table)) {
           await updateTableRealtime(table, isRealtimeEnabled)
+          if (isApiGrantTogglesEnabled) {
+            const privilegesToSet = apiAccessToggleHandler.data?.schemaExposed
+              ? apiAccessToggleHandler.data.privileges
+              : undefined
+            if (privilegesToSet) {
+              await updateTableApiAccess(table, privilegesToSet)
+            }
+          }
         }
 
         if (hasError) {
@@ -761,6 +893,7 @@ export const SidePanelEditor = ({
         closePanel={onClosePanel}
         saveChanges={saveTable}
         updateEditorDirty={() => setIsEdited(true)}
+        apiAccessToggleHandler={apiAccessToggleHandler}
       />
       <SchemaEditor
         visible={snap.sidePanel?.type === 'schema'}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
new file mode 100644
index 0000000000000..2357d328d357d
--- /dev/null
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
@@ -0,0 +1,493 @@
+import { Settings } from 'lucide-react'
+import Link from 'next/link'
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react'
+import { usePreviousDistinct } from 'react-use'
+
+import { useTableApiAccessQuery } from '@/data/privileges/table-api-access-query'
+import { useStaticEffectEvent } from '@/hooks/useStaticEffectEvent'
+import {
+  API_ACCESS_ROLES,
+  API_PRIVILEGE_TYPES,
+  checkDataApiPrivilegesNonEmpty,
+  DEFAULT_DATA_API_PRIVILEGES,
+  EMPTY_DATA_API_PRIVILEGES,
+  isApiPrivilegeType,
+  type ApiAccessRole,
+  type ApiPrivilegesByRole,
+} from '@/lib/data-api-types'
+import type { DeepReadonly, Prettify } from '@/lib/type-helpers'
+import { useDatabaseSelectorStateSnapshot } from '@/state/database-selector'
+import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
+import { useLoadBalancersQuery } from 'data/read-replicas/load-balancers-query'
+import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
+import { useIsSchemaExposed } from 'hooks/misc/useIsSchemaExposed'
+import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { Button, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, Switch } from 'ui'
+import { Admonition } from 'ui-patterns'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from 'ui-patterns/multi-select'
+
+const ROLE_LABELS: Record<ApiAccessRole, string> = {
+  anon: 'Anonymous (anon)',
+  authenticated: 'Authenticated',
+}
+
+namespace ApiAccessToggleProps {
+  type New = {
+    type: 'new'
+  }
+  type Duplicate = {
+    type: 'duplicate'
+    templateSchemaName: string
+    templateTableName: string
+  }
+  type Edit = {
+    type: 'edit'
+    schemaName: string
+    tableName: string
+  }
+  export type Option = New | Duplicate | Edit
+}
+
+export type TableApiAccessParams = ApiAccessToggleProps.Option
+
+type FetchState<T> =
+  | { isError: true; isPending: false; isSuccess: false; data: undefined }
+  | {
+      isError: false
+      isPending: true
+      isSuccess: false
+      data: undefined
+    }
+  | {
+      isError: false
+      isPending: false
+      isSuccess: true
+      data: Prettify<T>
+    }
+
+type TableApiAccessHandlerResult =
+  | { schemaExposed: false }
+  | {
+      schemaExposed: true
+      privileges: DeepReadonly<ApiPrivilegesByRole>
+      setPrivileges: Dispatch<SetStateAction<DeepReadonly<ApiPrivilegesByRole>>>
+    }
+
+type TableApiAccessHandlerReturn = FetchState<TableApiAccessHandlerResult>
+
+const useTableApiAccessHandler = (
+  params: ApiAccessToggleProps.Option,
+  { enabled = true } = {}
+): TableApiAccessHandlerReturn => {
+  const isNewTable = params.type === 'new'
+  const isDuplicate = params.type === 'duplicate'
+  const isExisting = params.type === 'edit'
+
+  const { selectedSchema } = useQuerySchemaState()
+  const currentTableSchema = isNewTable
+    ? selectedSchema
+    : isDuplicate
+      ? params.templateSchemaName
+      : params.schemaName
+
+  const { data: project } = useSelectedProjectQuery({ enabled })
+  const schemaExposure = useIsSchemaExposed(
+    {
+      projectRef: project?.ref,
+      schemaName: currentTableSchema,
+    },
+    { enabled }
+  )
+
+  const shouldReadExistingGrants = isDuplicate || isExisting
+  const permissionsTemplateSchema = !shouldReadExistingGrants
+    ? undefined
+    : isDuplicate
+      ? params.templateSchemaName
+      : params.schemaName
+  const permissionsTemplateTable = !shouldReadExistingGrants
+    ? undefined
+    : isDuplicate
+      ? params.templateTableName
+      : params.tableName
+  const canResolvePrivilegeParams = Boolean(
+    shouldReadExistingGrants &&
+      project?.ref &&
+      permissionsTemplateSchema &&
+      permissionsTemplateTable
+  )
+  const isPrivilegesQueryEnabled = enabled && canResolvePrivilegeParams
+  const apiAccessStatus = useTableApiAccessQuery(
+    {
+      projectRef: project?.ref,
+      connectionString: project?.connectionString ?? undefined,
+      schemaName: permissionsTemplateSchema ?? '',
+      tableNames: permissionsTemplateTable ? [permissionsTemplateTable] : [],
+    },
+    { enabled: isPrivilegesQueryEnabled }
+  )
+
+  const privilegesForTable = permissionsTemplateTable
+    ? apiAccessStatus.data?.[permissionsTemplateTable]
+    : undefined
+
+  const [privileges, setPrivileges] = useState<DeepReadonly<ApiPrivilegesByRole>>(
+    DEFAULT_DATA_API_PRIVILEGES
+  )
+
+  const hasLoadedInitialData = useRef(false)
+
+  const resetState = useStaticEffectEvent(() => {
+    hasLoadedInitialData.current = !shouldReadExistingGrants
+    setPrivileges(DEFAULT_DATA_API_PRIVILEGES)
+  })
+  useEffect(() => {
+    resetState()
+  }, [params.type, selectedSchema, permissionsTemplateSchema, permissionsTemplateTable, resetState])
+
+  const syncApiPrivileges = useStaticEffectEvent(() => {
+    if (hasLoadedInitialData.current) return
+    if (!apiAccessStatus.isSuccess) return
+    if (!privilegesForTable) return
+
+    hasLoadedInitialData.current = true
+    if (privilegesForTable.apiAccessType === 'access') {
+      setPrivileges(privilegesForTable.privileges)
+    } else if (privilegesForTable.apiAccessType === 'exposed-schema-no-grants') {
+      setPrivileges(EMPTY_DATA_API_PRIVILEGES)
+    } else {
+      // Used as a dummy default value but is never exposed since the schema is
+      // not exposed
+      setPrivileges(DEFAULT_DATA_API_PRIVILEGES)
+    }
+  })
+  useEffect(() => {
+    syncApiPrivileges()
+  }, [apiAccessStatus.status, syncApiPrivileges])
+
+  const isPending =
+    !enabled ||
+    schemaExposure.status === 'pending' ||
+    (shouldReadExistingGrants && apiAccessStatus.isPending)
+  if (isPending) {
+    return { isError: false, isPending: true, isSuccess: false, data: undefined }
+  }
+
+  const isError = schemaExposure.isError || (shouldReadExistingGrants && apiAccessStatus.isError)
+  if (isError) {
+    return { isError: true, isPending: false, isSuccess: false, data: undefined }
+  }
+
+  const isSchemaExposed = schemaExposure.data === true
+  if (!isSchemaExposed) {
+    return {
+      isError: false,
+      isPending: false,
+      isSuccess: true,
+      data: { schemaExposed: false },
+    }
+  }
+
+  return {
+    isError: false,
+    isPending: false,
+    isSuccess: true,
+    data: {
+      schemaExposed: true,
+      privileges,
+      setPrivileges,
+    },
+  }
+}
+
+export type TableApiAccessHandlerWithHistoryReturn = FetchState<
+  TableApiAccessHandlerResult & {
+    clearAllPrivileges: () => void
+    restorePreviousPrivileges: () => void
+  }
+>
+
+export const useTableApiAccessHandlerWithHistory = (
+  params: ApiAccessToggleProps.Option,
+  { enabled = true } = {}
+): TableApiAccessHandlerWithHistoryReturn => {
+  const innerResult = useTableApiAccessHandler(params, { enabled })
+
+  const privileges = innerResult.data?.schemaExposed ? innerResult.data.privileges : undefined
+  const previous = usePreviousDistinct(privileges)
+
+  const clearAllPrivileges = useStaticEffectEvent(() => {
+    if (!innerResult.isSuccess) return
+    if (!innerResult.data.schemaExposed) return
+    innerResult.data?.setPrivileges(EMPTY_DATA_API_PRIVILEGES)
+  })
+
+  const restorePreviousPrivileges = useStaticEffectEvent(() => {
+    if (!innerResult.isSuccess) return
+    if (!innerResult.data.schemaExposed) return
+    innerResult.data?.setPrivileges(previous ?? DEFAULT_DATA_API_PRIVILEGES)
+  })
+
+  if (!innerResult.isSuccess) {
+    return innerResult
+  }
+
+  return {
+    ...innerResult,
+    data: { ...innerResult.data, clearAllPrivileges, restorePreviousPrivileges },
+  }
+}
+
+type ApiAccessToggleProps = {
+  projectRef?: string
+  schemaName?: string
+  tableName?: string
+  handler: TableApiAccessHandlerWithHistoryReturn
+}
+
+export const ApiAccessToggle = ({
+  projectRef,
+  schemaName,
+  tableName,
+  handler,
+}: ApiAccessToggleProps): ReactNode => {
+  const [isPrivilegesPopoverOpen, setIsPrivilegesPopoverOpen] = useState(false)
+
+  const isPending = handler.isPending
+  const isError = handler.isError
+  const isSchemaExposed = handler.data?.schemaExposed
+  const isDisabled = isPending || isError || !isSchemaExposed
+
+  const privileges =
+    handler.isSuccess && handler.data.schemaExposed ? handler.data.privileges : undefined
+  const hasNonEmptyPrivileges = checkDataApiPrivilegesNonEmpty(privileges)
+
+  const handleMasterToggle = (checked: boolean) => {
+    if (!handler.isSuccess) return
+    if (!isSchemaExposed) return
+
+    if (checked) {
+      handler.data?.restorePreviousPrivileges()
+    } else {
+      handler.data?.clearAllPrivileges()
+    }
+  }
+
+  const handlePrivilegesChange = (role: ApiAccessRole) => (values: string[]) => {
+    if (!handler.isSuccess) return
+    if (!isSchemaExposed) return
+    if (!privileges) return
+
+    handler.data?.setPrivileges((oldPrivileges) => {
+      return {
+        ...oldPrivileges,
+        [role]: values.filter(isApiPrivilegeType),
+      }
+    })
+  }
+
+  const totalAvailablePrivileges = API_ACCESS_ROLES.length * API_PRIVILEGE_TYPES.length
+  const totalSelectedPrivileges = Object.values(privileges ?? {}).reduce(
+    (sum, rolePrivileges) => sum + rolePrivileges.length,
+    0
+  )
+  const hasPartialPrivileges =
+    totalSelectedPrivileges > 0 && totalSelectedPrivileges < totalAvailablePrivileges
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="space-y-1">
+            <p className="text-sm text-foreground flex items-center gap-1.5">
+              Data API Access
+              <InfoTooltip side="top" className="max-w-80">
+                This controls which operations the <code className="text-xs">anon</code> and{' '}
+                <code className="text-xs">authenticated</code> roles can perform on this table via
+                the Data API. Unselected privileges are revoked from these roles.
+              </InfoTooltip>
+            </p>
+            <p className="text-sm text-foreground-lighter">
+              Allow this table to be queried via Supabase client libraries or the API directly
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Popover_Shadcn_
+              open={isPrivilegesPopoverOpen}
+              onOpenChange={setIsPrivilegesPopoverOpen}
+            >
+              <PopoverTrigger_Shadcn_ asChild disabled={isDisabled || !hasNonEmptyPrivileges}>
+                <Button type="text" className="w-6 h-6 p-0 text-foreground-light">
+                  <Settings strokeWidth={1.5} size={16} />
+                  {hasPartialPrivileges && (
+                    <span className="absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-foreground shadow-sm" />
+                  )}
+                </Button>
+              </PopoverTrigger_Shadcn_>
+              <PopoverContent_Shadcn_ align="end" className="w-[420px] space-y-3">
+                {!isDisabled && (
+                  <>
+                    <p className="text-sm text-foreground">Adjust API privileges per role</p>
+                    <div className="space-y-2">
+                      {API_ACCESS_ROLES.map((role) => (
+                        <div key={role} className="space-y-2">
+                          <p className="text-sm text-foreground flex items-center gap-1.5">
+                            {ROLE_LABELS[role]}
+                          </p>
+                          <MultiSelector
+                            values={(privileges?.[role] as string[]) ?? []}
+                            onValuesChange={handlePrivilegesChange(role)}
+                          >
+                            <MultiSelectorTrigger
+                              label="Select privileges"
+                              badgeLimit={4}
+                              deletableBadge={true}
+                            />
+                            <MultiSelectorContent>
+                              <MultiSelectorList>
+                                {API_PRIVILEGE_TYPES.map((privilege) => (
+                                  <MultiSelectorItem key={privilege} value={privilege}>
+                                    {privilege}
+                                  </MultiSelectorItem>
+                                ))}
+                              </MultiSelectorList>
+                            </MultiSelectorContent>
+                          </MultiSelector>
+                        </div>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </PopoverContent_Shadcn_>
+            </Popover_Shadcn_>
+            <Switch
+              checked={hasNonEmptyPrivileges}
+              onCheckedChange={handleMasterToggle}
+              disabled={isDisabled}
+            />
+          </div>
+        </div>
+      </div>
+      <SchemaExposureOptions
+        projectRef={projectRef}
+        schemaName={schemaName}
+        tableName={tableName}
+        isPending={isPending}
+        isError={isError}
+        isSchemaExposed={isSchemaExposed}
+        hasNonEmptyPrivileges={!!privileges ? hasNonEmptyPrivileges : undefined}
+      />
+    </div>
+  )
+}
+
+const SchemaExposureOptions = ({
+  projectRef,
+  schemaName,
+  tableName,
+  isPending,
+  isError,
+  isSchemaExposed,
+  hasNonEmptyPrivileges,
+}: {
+  projectRef?: string
+  schemaName?: string
+  tableName?: string
+  isPending: boolean
+  isError: boolean
+  isSchemaExposed?: boolean
+  hasNonEmptyPrivileges?: boolean
+}): ReactNode => {
+  const { selectedDatabaseId } = useDatabaseSelectorStateSnapshot()
+
+  const { data: customDomainData } = useCustomDomainsQuery({ projectRef })
+  const { data: loadBalancers } = useLoadBalancersQuery({ projectRef })
+  const { data: databases } = useReadReplicasQuery({ projectRef })
+
+  const apiEndpoint = useMemo(() => {
+    const isCustomDomainActive = customDomainData?.customDomain?.status === 'active'
+    if (isCustomDomainActive && selectedDatabaseId === projectRef) {
+      return `https://${customDomainData.customDomain.hostname}`
+    }
+
+    const loadBalancerSelected = selectedDatabaseId === 'load-balancer'
+    if (loadBalancerSelected) {
+      return loadBalancers?.[0]?.endpoint
+    }
+
+    const selectedDatabase = databases?.find((db) => db.identifier === selectedDatabaseId)
+    return selectedDatabase?.restUrl
+  }, [
+    projectRef,
+    databases,
+    selectedDatabaseId,
+    customDomainData?.customDomain?.status,
+    customDomainData?.customDomain?.hostname,
+    loadBalancers,
+  ])
+  const apiBaseUrl = useMemo(() => {
+    if (!apiEndpoint) return undefined
+    return apiEndpoint.endsWith('/') ? apiEndpoint.slice(0, -1) : apiEndpoint
+  }, [apiEndpoint])
+
+  const tablePath = !(schemaName && tableName)
+    ? undefined
+    : schemaName === 'public'
+      ? tableName
+      : `${schemaName}.${tableName}`
+  const apiUrl = apiBaseUrl && tablePath ? `${apiBaseUrl}/${tablePath}` : undefined
+
+  return (
+    <>
+      {isError && (
+        <Admonition type="warning" title="An error occurred while fetching Data API settings." />
+      )}
+
+      {isSchemaExposed && apiUrl && hasNonEmptyPrivileges && (
+        <Input
+          copy
+          readOnly
+          className="font-mono text-xs p-3 text-foreground-lighter"
+          value={apiUrl}
+        />
+      )}
+
+      {!isPending && !isError && !isSchemaExposed && (
+        <Admonition
+          type="default"
+          title={`The "${schemaName}" schema is not exposed via the Data API`}
+          description={
+            <>
+              To enable API access for this table, you need to first expose the{' '}
+              <code className="text-xs">{schemaName}</code> schema in your{' '}
+              <Link
+                href={`/project/${projectRef}/settings/api`}
+                className="text-foreground hover:underline"
+              >
+                API settings
+              </Link>
+              .
+            </>
+          }
+        />
+      )}
+    </>
+  )
+}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSManagement/RLSManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSManagement/RLSManagement.tsx
index 278d455c5d338..6bbcfd08456f3 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSManagement/RLSManagement.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSManagement/RLSManagement.tsx
@@ -25,6 +25,7 @@ interface RLSManagementProps {
   foreignKeyRelations?: ForeignKey[] // For new tables
   isNewRecord: boolean
   isDuplicating: boolean
+  isExposed?: boolean
   generatedPolicies?: GeneratedPolicy[]
   onRLSUpdate?: (isEnabled: boolean) => void
   onGeneratedPoliciesChange?: (policies: GeneratedPolicy[]) => void
@@ -36,6 +37,7 @@ export const RLSManagement = ({
   foreignKeyRelations = [],
   isNewRecord,
   isDuplicating,
+  isExposed,
   generatedPolicies = [],
   onRLSUpdate,
   onGeneratedPoliciesChange,
@@ -162,7 +164,10 @@ export const RLSManagement = ({
       <Admonition
         // [Joshen] Using CSS to determine visibility here as the onSuccess within ToggleRLSButton doesn't get triggered
         // if we dynamically render this component, since this admonition gets unmounted from the DOM once RLS is updated
-        className={cn('mb-0', !isNewRecord && !isRLSEnabled ? 'block' : 'hidden')}
+        className={cn(
+          'mb-0',
+          !isNewRecord && !isRLSEnabled && isExposed !== false ? 'block' : 'hidden'
+        )}
         type="warning"
         title="Row Level Security is currently disabled"
         description="Your table is currently accessible by anyone on the internet. We recommend enabling RLS to restrict access."
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
index 66c325dd7c42d..9b71ffaeba82b 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -3,6 +3,8 @@ import { isEmpty, noop } from 'lodash'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
+import { useDataApiGrantTogglesEnabled } from '@/hooks/misc/useDataApiGrantTogglesEnabled'
+import { checkDataApiPrivilegesNonEmpty } from '@/lib/data-api-types'
 import type { GeneratedPolicy } from 'components/interfaces/Auth/Policies/Policies.utils'
 import { DocsButton } from 'components/ui/DocsButton'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
@@ -31,6 +33,7 @@ import { formatForeignKeys } from '../ForeignKeySelector/ForeignKeySelector.util
 import type { SaveTableParams } from '../SidePanelEditor'
 import type { ColumnField } from '../SidePanelEditor.types'
 import { SpreadsheetImport } from '../SpreadsheetImport/SpreadsheetImport'
+import { ApiAccessToggle, type TableApiAccessHandlerWithHistoryReturn } from './ApiAccessToggle'
 import ColumnManagement from './ColumnManagement'
 import { ForeignKeysManagement } from './ForeignKeysManagement/ForeignKeysManagement'
 import { HeaderTitle } from './HeaderTitle'
@@ -61,6 +64,7 @@ export interface TableEditorProps {
   closePanel: () => void
   saveChanges: (params: SaveTableParams) => void
   updateEditorDirty: () => void
+  apiAccessToggleHandler: TableApiAccessHandlerWithHistoryReturn
 }
 
 export const TableEditor = ({
@@ -71,6 +75,7 @@ export const TableEditor = ({
   closePanel = noop,
   saveChanges = noop,
   updateEditorDirty = noop,
+  apiAccessToggleHandler,
 }: TableEditorProps) => {
   const track = useTrack()
   const snap = useTableEditorStateSnapshot()
@@ -78,6 +83,8 @@ export const TableEditor = ({
   const { realtimeAll: realtimeEnabled } = useIsFeatureEnabled(['realtime:all'])
   const { docsRowLevelSecurityGuidePath } = useCustomContent(['docs:row_level_security_guide_path'])
 
+  const isApiGrantTogglesEnabled = useDataApiGrantTogglesEnabled()
+
   const [params, setParams] = useUrlState()
   const { data: project } = useSelectedProjectQuery()
   const { selectedSchema } = useQuerySchemaState()
@@ -339,6 +346,12 @@ export const TableEditor = ({
 
   if (!tableFields) return null
 
+  const isApiAccessAndPoliciesSectionShown = isApiGrantTogglesEnabled || generatePoliciesEnabled
+  const isExposed = isApiGrantTogglesEnabled
+    ? !!apiAccessToggleHandler.data?.schemaExposed &&
+      checkDataApiPrivilegesNonEmpty(apiAccessToggleHandler.data.privileges)
+    : undefined
+
   return (
     <SidePanel
       data-testid="table-editor-side-panel"
@@ -542,22 +555,36 @@ export const TableEditor = ({
         </>
       )}
 
-      {/* [Joshen] Temporarily hide this section if duplicating, as we aren't duplicating policies atm when duplicating tables */}
-      {/* We should do this thought, but let's do this in another PR as the current one is already quite big */}
-      {generatePoliciesEnabled && !isDuplicating && (
+      {isApiAccessAndPoliciesSectionShown && (
         <>
           <SidePanel.Separator />
-          <SidePanel.Content className="space-y-10 py-6">
-            <RLSManagement
-              table={table}
-              tableFields={tableFields}
-              foreignKeyRelations={isNewRecord ? fkRelations : undefined}
-              isNewRecord={isNewRecord}
-              isDuplicating={isDuplicating}
-              generatedPolicies={generatedPolicies}
-              onGeneratedPoliciesChange={setGeneratedPolicies}
-              onRLSUpdate={(value) => onUpdateField({ isRLSEnabled: value })}
-            />
+          <SidePanel.Content className="py-6 space-y-6">
+            {isApiGrantTogglesEnabled && (
+              <ApiAccessToggle
+                projectRef={project?.ref}
+                schemaName={isNewRecord ? selectedSchema : table?.schema}
+                tableName={
+                  isNewRecord || isDuplicating ? tableFields.name : tableFields.name || table?.name
+                }
+                handler={apiAccessToggleHandler}
+              />
+            )}
+
+            {/* [Joshen] Temporarily hide this section if duplicating, as we aren't duplicating policies atm when duplicating tables */}
+            {/* We should do this thought, but let's do this in another PR as the current one is already quite big */}
+            {generatePoliciesEnabled && !isDuplicating && (
+              <RLSManagement
+                table={table}
+                tableFields={tableFields}
+                foreignKeyRelations={isNewRecord ? fkRelations : undefined}
+                isNewRecord={isNewRecord}
+                isDuplicating={isDuplicating}
+                isExposed={isExposed}
+                generatedPolicies={generatedPolicies}
+                onGeneratedPoliciesChange={setGeneratedPolicies}
+                onRLSUpdate={(value) => onUpdateField({ isRLSEnabled: value })}
+              />
+            )}
           </SidePanel.Content>
         </>
       )}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.types.ts b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.types.ts
index 2f068d8b25998..5db5952c5438f 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.types.ts
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.types.ts
@@ -1,14 +1,15 @@
+import type { Prettify } from '@/lib/type-helpers'
 import type { Dictionary } from 'types'
 import type { ColumnField } from '../SidePanelEditor.types'
 
-export interface TableField {
+export type TableField = Prettify<{
   id: number
   name: string
   comment?: string | null
   columns: ColumnField[]
   isRLSEnabled: boolean
   isRealtimeEnabled: boolean
-}
+}>
 
 export interface ImportContent {
   file?: File
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 5b9dcb157324a..fd41515e8386b 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -472,13 +472,11 @@ const EntityTooltipTrigger = ({
     )
   }
 
-  // Show warning for tables with RLS enabled but no policies
-  if (
-    isDataApiExposedBadgeEnabled &&
+  const isRlsEnabledNoPolicies =
     entity.type === ENTITY_TYPE.TABLE &&
-    apiAccessData?.hasApiAccess &&
+    apiAccessData?.apiAccessType === 'access' &&
     tableHasRlsEnabledNoPolicyLint
-  ) {
+  if (isDataApiExposedBadgeEnabled && isRlsEnabledNoPolicies) {
     return (
       <Tooltip>
         <TooltipTrigger className="min-w-4" aria-label="Table exposed via Data API">
@@ -492,8 +490,9 @@ const EntityTooltipTrigger = ({
     )
   }
 
-  // Show globe icon for tables with API access, RLS enabled and policies
-  if (isDataApiExposedBadgeEnabled && apiAccessData?.hasApiAccess) {
+  const isApiExposedWithRlsAndPolicies =
+    apiAccessData?.apiAccessType === 'access' && !tableHasRlsEnabledNoPolicyLint
+  if (isDataApiExposedBadgeEnabled && isApiExposedWithRlsAndPolicies) {
     return (
       <Tooltip>
         <TooltipTrigger className="min-w-4" aria-label="Table exposed via Data API">
diff --git a/apps/studio/data/config/project-postgrest-config-query.ts b/apps/studio/data/config/project-postgrest-config-query.ts
index a50c479e685ac..4c455992003e0 100644
--- a/apps/studio/data/config/project-postgrest-config-query.ts
+++ b/apps/studio/data/config/project-postgrest-config-query.ts
@@ -5,6 +5,18 @@ import { get, handleError } from 'data/fetchers'
 import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { configKeys } from './keys'
 
+/**
+ * Parses the exposed schema string returned from PostgREST config.
+ *
+ * @param schemaString - e.g., `public,graphql_public`
+ */
+export const parseDbSchemaString = (schemaString: string): string[] => {
+  return schemaString
+    .split(',')
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0)
+}
+
 export type ProjectPostgrestConfigVariables = {
   projectRef?: string
 }
diff --git a/apps/studio/data/privileges/table-api-access-mutation.ts b/apps/studio/data/privileges/table-api-access-mutation.ts
new file mode 100644
index 0000000000000..8b49714e4b46e
--- /dev/null
+++ b/apps/studio/data/privileges/table-api-access-mutation.ts
@@ -0,0 +1,114 @@
+import pgMeta from '@supabase/pg-meta'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import {
+  API_ACCESS_ROLES,
+  API_PRIVILEGE_TYPES,
+  type ApiPrivilegesByRole,
+} from '@/lib/data-api-types'
+import type { DeepReadonly } from '@/lib/type-helpers'
+import { executeSql } from 'data/sql/execute-sql-query'
+import type { UseCustomMutationOptions } from 'types'
+import type { ConnectionVars } from '../common.types'
+import { lintKeys } from '../lint/keys'
+import { invalidateTablePrivilegesQuery } from './table-privileges-query'
+
+export type TableApiAccessPrivilegesVariables = ConnectionVars & {
+  relationId: number
+  privileges: DeepReadonly<ApiPrivilegesByRole>
+}
+
+export async function updateTableApiAccessPrivileges({
+  projectRef,
+  connectionString,
+  relationId,
+  privileges,
+}: TableApiAccessPrivilegesVariables) {
+  const sqlStatements: string[] = []
+
+  for (const role of API_ACCESS_ROLES) {
+    const rolePrivileges = privileges[role]
+
+    // Determine which privileges to grant and revoke for this role
+    const privilegesToGrant = rolePrivileges
+    const privilegesToRevoke = API_PRIVILEGE_TYPES.filter((p) => !rolePrivileges.includes(p))
+
+    // Revoke privileges that should be removed
+    if (privilegesToRevoke.length > 0) {
+      const revokeGrants = privilegesToRevoke.map((privilegeType) => ({
+        grantee: role,
+        privilegeType,
+        relationId,
+      }))
+      const revokeSql = pgMeta.tablePrivileges.revoke(revokeGrants).sql.trim()
+      if (revokeSql) sqlStatements.push(revokeSql)
+    }
+
+    // Grant privileges that should be added
+    if (privilegesToGrant.length > 0) {
+      const grantGrants = privilegesToGrant.map((privilegeType) => ({
+        grantee: role,
+        privilegeType,
+        relationId,
+      }))
+      const grantSql = pgMeta.tablePrivileges.grant(grantGrants).sql.trim()
+      if (grantSql) sqlStatements.push(grantSql)
+    }
+  }
+
+  if (sqlStatements.length === 0) {
+    return null
+  }
+
+  const { result } = await executeSql<[]>({
+    projectRef,
+    connectionString,
+    sql: sqlStatements.join('\n'),
+    queryKey: ['table-api-access', 'update-privileges'],
+  })
+
+  return result
+}
+
+type UpdateTableApiAccessPrivilegesData = Awaited<ReturnType<typeof updateTableApiAccessPrivileges>>
+
+export const useTableApiAccessPrivilegesMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseCustomMutationOptions<
+    UpdateTableApiAccessPrivilegesData,
+    Error,
+    TableApiAccessPrivilegesVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<UpdateTableApiAccessPrivilegesData, Error, TableApiAccessPrivilegesVariables>({
+    mutationFn: (vars) => updateTableApiAccessPrivileges(vars),
+    async onSuccess(data, variables, context) {
+      const { projectRef } = variables
+      await Promise.all([
+        invalidateTablePrivilegesQuery(queryClient, projectRef),
+        // This affects the result of the RLS disabled lint, so we need to
+        // invalidate it
+        queryClient.invalidateQueries({
+          queryKey: lintKeys.lint(projectRef),
+        }),
+      ])
+
+      await onSuccess?.(data, variables, context)
+    },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to update API access privileges: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
+    ...options,
+  })
+}
diff --git a/apps/studio/data/privileges/table-api-access-query.ts b/apps/studio/data/privileges/table-api-access-query.ts
index 5cadf938bf64a..585cebb608b95 100644
--- a/apps/studio/data/privileges/table-api-access-query.ts
+++ b/apps/studio/data/privileges/table-api-access-query.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 
 import type { ConnectionVars } from 'data/common.types'
-import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useIsSchemaExposed } from 'hooks/misc/useIsSchemaExposed'
 import { isApiAccessRole, isApiPrivilegeType, type ApiPrivilegesByRole } from 'lib/data-api-types'
 import type { Prettify } from 'lib/type-helpers'
 import type { UseCustomQueryOptions } from 'types'
@@ -17,18 +17,6 @@ import {
 const STABLE_EMPTY_ARRAY: any[] = []
 const STABLE_EMPTY_OBJECT = {}
 
-/**
- * Parses the exposed schema string returned from PostgREST config.
- *
- * @param schemaString - e.g., `public,graphql_public`
- */
-const parseDbSchemaString = (schemaString: string): string[] => {
-  return schemaString
-    .split(',')
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0)
-}
-
 const getApiPrivilegesByRole = (
   privileges: TablePrivilegesData[number]['privileges']
 ): ApiPrivilegesByRole => {
@@ -72,32 +60,37 @@ export type UseTableApiAccessQueryParams = Prettify<
   }
 >
 
+export type DataApiAccessType = 'none' | 'exposed-schema-no-grants' | 'access'
+
 export type TableApiAccessData =
   | {
-      hasApiAccess: true
+      apiAccessType: 'access'
       privileges: ApiPrivilegesByRole
     }
   | {
-      hasApiAccess: false
+      apiAccessType: 'none' | 'exposed-schema-no-grants'
     }
 
-export type TableApiAccessMap = Record<string, TableApiAccessData>
+export type TableApiAccessMap = Prettify<Record<string, TableApiAccessData>>
 
 export type UseTableApiAccessQueryReturn =
   | {
       data: TableApiAccessMap
+      status: 'success'
       isSuccess: true
       isPending: false
       isError: false
     }
   | {
       data: undefined
+      status: 'pending'
       isSuccess: false
       isPending: true
       isError: false
     }
   | {
       data: undefined
+      status: 'error'
       isSuccess: false
       isPending: false
       isError: true
@@ -118,52 +111,43 @@ export const useTableApiAccessQuery = (
     'enabled'
   > = {}
 ): UseTableApiAccessQueryReturn => {
-  const {
-    data: dbSchemaString,
-    isPending: isConfigPending,
-    isError: isConfigError,
-  } = useProjectPostgrestConfigQuery(
-    { projectRef },
-    { enabled, select: ({ db_schema }) => db_schema }
-  )
-  const exposedSchemas = useMemo((): string[] => {
-    if (!dbSchemaString) return []
-    return parseDbSchemaString(dbSchemaString)
-  }, [dbSchemaString])
-
   const uniqueTableNames = useMemo(() => {
     return new Set(
       tableNames.filter((tableName) => typeof tableName === 'string' && tableName.length > 0)
     )
   }, [tableNames])
   const hasTables = uniqueTableNames.size > 0
-  const isSchemaExposed = exposedSchemas.includes(schemaName)
-  const enablePrivilegesQuery = enabled && isSchemaExposed && hasTables
-
-  const {
-    data: privileges,
-    isPending: isPrivilegesPending,
-    isError: isPrivilegesError,
-  } = useTablePrivilegesQuery(
+
+  const schemaExposureStatus = useIsSchemaExposed({ projectRef, schemaName }, { enabled })
+  const isSchemaExposed = schemaExposureStatus.isSuccess && schemaExposureStatus.data === true
+
+  const enablePrivilegesQuery = enabled && hasTables
+  const privilegeStatus = useTablePrivilegesQuery(
     { projectRef, connectionString },
     { enabled: enablePrivilegesQuery, ...options }
   )
 
   const result: UseTableApiAccessQueryReturn = useMemo(() => {
-    const isPending = isConfigPending || (enablePrivilegesQuery && isPrivilegesPending)
+    const isPending =
+      !enabled ||
+      schemaExposureStatus.status === 'pending' ||
+      (enablePrivilegesQuery && privilegeStatus.isPending)
     if (isPending) {
       return {
         data: undefined,
+        status: 'pending',
         isSuccess: false,
         isPending: true,
         isError: false,
       }
     }
 
-    const isError = isConfigError || (enablePrivilegesQuery && isPrivilegesError)
+    const isError =
+      schemaExposureStatus.status === 'error' || (enablePrivilegesQuery && privilegeStatus.isError)
     if (isError) {
       return {
         data: undefined,
+        status: 'error',
         isSuccess: false,
         isPending: false,
         isError: true,
@@ -173,6 +157,7 @@ export const useTableApiAccessQuery = (
     if (!hasTables) {
       return {
         data: STABLE_EMPTY_OBJECT,
+        status: 'success',
         isSuccess: true,
         isPending: false,
         isError: false,
@@ -181,12 +166,12 @@ export const useTableApiAccessQuery = (
 
     const resultData: TableApiAccessMap = {}
     const tablePrivilegesByName = isSchemaExposed
-      ? mapPrivilegesByTableName(privileges, schemaName, uniqueTableNames)
+      ? mapPrivilegesByTableName(privilegeStatus.data, schemaName, uniqueTableNames)
       : {}
 
     uniqueTableNames.forEach((tableName) => {
       if (!isSchemaExposed) {
-        resultData[tableName] = { hasApiAccess: false }
+        resultData[tableName] = { apiAccessType: 'none' }
         return
       }
 
@@ -196,27 +181,28 @@ export const useTableApiAccessQuery = (
 
       resultData[tableName] = hasAnonOrAuthenticatedPrivileges
         ? {
-            hasApiAccess: true,
+            apiAccessType: 'access',
             privileges: tablePrivileges,
           }
-        : { hasApiAccess: false }
+        : { apiAccessType: 'exposed-schema-no-grants' }
     })
 
     return {
       data: resultData,
+      status: 'success',
       isSuccess: true,
       isPending: false,
       isError: false,
     }
   }, [
+    enabled,
     enablePrivilegesQuery,
     hasTables,
-    isConfigError,
-    isConfigPending,
-    isPrivilegesError,
-    isPrivilegesPending,
+    schemaExposureStatus.status,
     isSchemaExposed,
-    privileges,
+    privilegeStatus.isPending,
+    privilegeStatus.isError,
+    privilegeStatus.data,
     schemaName,
     uniqueTableNames,
   ])
diff --git a/apps/studio/hooks/misc/useDataApiGrantTogglesEnabled.ts b/apps/studio/hooks/misc/useDataApiGrantTogglesEnabled.ts
new file mode 100644
index 0000000000000..b64dff684d866
--- /dev/null
+++ b/apps/studio/hooks/misc/useDataApiGrantTogglesEnabled.ts
@@ -0,0 +1,14 @@
+import { useFlag } from 'common'
+import { usePHFlag } from '../ui/useFlag'
+
+/**
+ * Determine whether a user has access to Data API grant toggles.
+ *
+ * Requires that the ConfigCat flag for Data API badges and the PostHog flag
+ * for Table Editor API access are both enabled.
+ */
+export const useDataApiGrantTogglesEnabled = (): boolean => {
+  const isDataApiBadgesEnabled = useFlag('dataApiExposedBadge')
+  const isTableEditorApiAccessEnabled = usePHFlag<boolean>('tableEditorApiAccessToggle')
+  return isDataApiBadgesEnabled && !!isTableEditorApiAccessEnabled
+}
diff --git a/apps/studio/hooks/misc/useIsSchemaExposed.ts b/apps/studio/hooks/misc/useIsSchemaExposed.ts
new file mode 100644
index 0000000000000..1d4b6c777faf8
--- /dev/null
+++ b/apps/studio/hooks/misc/useIsSchemaExposed.ts
@@ -0,0 +1,74 @@
+import { useMemo } from 'react'
+
+import {
+  parseDbSchemaString,
+  useProjectPostgrestConfigQuery,
+} from 'data/config/project-postgrest-config-query'
+
+type UseIsSchemaExposedParams = {
+  projectRef?: string
+  schemaName?: string
+}
+
+type UseIsSchemaExposedOptions = {
+  enabled?: boolean
+}
+
+export type UseIsSchemaExposedReturn =
+  | {
+      status: 'pending'
+      data: undefined
+      isPending: true
+      isError: false
+      isSuccess: false
+    }
+  | {
+      status: 'error'
+      data: undefined
+      isPending: false
+      isError: true
+      isSuccess: false
+    }
+  | {
+      status: 'success'
+      data: boolean
+      isPending: false
+      isError: false
+      isSuccess: true
+    }
+
+export const useIsSchemaExposed = (
+  { projectRef, schemaName }: UseIsSchemaExposedParams,
+  { enabled = true }: UseIsSchemaExposedOptions = {}
+): UseIsSchemaExposedReturn => {
+  const shouldQueryConfig = enabled && !!projectRef && !!schemaName
+  const {
+    data: dbSchemaString,
+    isPending: isConfigPending,
+    isError: isConfigError,
+  } = useProjectPostgrestConfigQuery(
+    { projectRef },
+    { enabled: shouldQueryConfig, select: ({ db_schema }) => db_schema }
+  )
+
+  const exposedSchemas = useMemo(() => {
+    if (!dbSchemaString) return []
+    return parseDbSchemaString(dbSchemaString)
+  }, [dbSchemaString])
+
+  if (!shouldQueryConfig || isConfigPending) {
+    return { status: 'pending', data: undefined, isPending: true, isError: false, isSuccess: false }
+  }
+
+  if (isConfigError) {
+    return { status: 'error', data: undefined, isPending: false, isError: true, isSuccess: false }
+  }
+
+  return {
+    status: 'success',
+    data: exposedSchemas.includes(schemaName),
+    isPending: false,
+    isError: false,
+    isSuccess: true,
+  }
+}
diff --git a/apps/studio/lib/data-api-types.ts b/apps/studio/lib/data-api-types.ts
index 5259530b7623d..2b2d082ea41b4 100644
--- a/apps/studio/lib/data-api-types.ts
+++ b/apps/studio/lib/data-api-types.ts
@@ -1,4 +1,5 @@
 import type { TablePrivilegesGrant } from 'data/privileges/table-privileges-grant-mutation'
+import type { DeepReadonly } from './type-helpers'
 
 export const API_ACCESS_ROLES = ['anon', 'authenticated'] as const
 export type ApiAccessRole = (typeof API_ACCESS_ROLES)[number]
@@ -23,3 +24,20 @@ export const isApiPrivilegeType = (value: string): value is ApiPrivilegeType =>
 }
 
 export type ApiPrivilegesByRole = Record<ApiAccessRole, ApiPrivilegeType[]>
+
+export const DEFAULT_DATA_API_PRIVILEGES: DeepReadonly<ApiPrivilegesByRole> = {
+  anon: [...API_PRIVILEGE_TYPES],
+  authenticated: [...API_PRIVILEGE_TYPES],
+}
+
+export const EMPTY_DATA_API_PRIVILEGES: DeepReadonly<ApiPrivilegesByRole> = {
+  anon: [],
+  authenticated: [],
+}
+
+export const checkDataApiPrivilegesNonEmpty = (
+  privileges: DeepReadonly<ApiPrivilegesByRole> | undefined
+): boolean => {
+  if (!privileges) return false
+  return Object.values(privileges).some((privs) => privs.length > 0)
+}
diff --git a/apps/studio/lib/type-helpers.ts b/apps/studio/lib/type-helpers.ts
index 26e2273a496d8..02b486eac2160 100644
--- a/apps/studio/lib/type-helpers.ts
+++ b/apps/studio/lib/type-helpers.ts
@@ -1,3 +1,9 @@
 export type PlainObject<Value = unknown> = Record<string | number | symbol, Value>
 
 export type Prettify<T> = { [K in keyof T]: T[K] } & {}
+
+export type DeepReadonly<T> = T extends (infer R)[]
+  ? ReadonlyArray<DeepReadonly<R>>
+  : T extends Object
+    ? { readonly [K in keyof T]: DeepReadonly<T[K]> }
+    : T
diff --git a/apps/www/.env.local.example b/apps/www/.env.local.example
index f0c941e429d3c..91311125ac91a 100644
--- a/apps/www/.env.local.example
+++ b/apps/www/.env.local.example
@@ -13,4 +13,4 @@ NEXT_PUBLIC_URL="http://localhost:3000"
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY="10000000-ffff-ffff-ffff-000000000001"
 HCAPTCHA_SECRET_KEY="0x0000000000000000000000000000000000000000"
 CMS_API_KEY=secret
-CMS_PREVIEW_SECRET=secret
\ No newline at end of file
+CMS_PREVIEW_SECRET=secret
diff --git a/apps/www/app/api-v2/contribute/threads/route.ts b/apps/www/app/api-v2/contribute/threads/route.ts
new file mode 100644
index 0000000000000..9b7b98457e2e5
--- /dev/null
+++ b/apps/www/app/api-v2/contribute/threads/route.ts
@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getUnansweredThreads } from '~/data/contribute'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+
+  // Validate and parse offset - must be a valid non-negative integer
+  const offsetParam = searchParams.get('offset')
+  let offset = 0
+  if (offsetParam !== null) {
+    const parsed = parseInt(offsetParam, 10)
+    if (!isNaN(parsed) && parsed >= 0) {
+      offset = parsed
+    }
+  }
+
+  const channel = searchParams.get('channel') || undefined
+  const productArea = searchParams.get('product_area') || undefined
+  const stack = searchParams.get('stack') || undefined
+  const search = searchParams.get('search') || undefined
+
+  try {
+    const threads = await getUnansweredThreads(productArea, channel, stack, search, offset, 100)
+    return NextResponse.json(threads)
+  } catch (error) {
+    console.error('Error fetching threads:', error)
+    return NextResponse.json({ error: 'Failed to fetch threads' }, { status: 500 })
+  }
+}
diff --git a/apps/www/app/contribute/ContributeGuard.tsx b/apps/www/app/contribute/ContributeGuard.tsx
new file mode 100644
index 0000000000000..c5ea074d0567b
--- /dev/null
+++ b/apps/www/app/contribute/ContributeGuard.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useFlag } from 'common'
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+/**
+ * TODO: Deprecate this once the contribute page is launched.
+ * This component is temporary to block access to the contribute page until the feature is launched.
+ */
+export function ContributeGuard({ children }: { children: React.ReactNode }) {
+  //const isPageEnabled = useFlag('contributePage')
+  const isPageEnabled = true
+  const router = useRouter()
+
+  useEffect(() => {
+    if (isPageEnabled !== undefined && !isPageEnabled) {
+      router.push('/')
+    }
+  }, [isPageEnabled, router])
+
+  // if (isPageEnabled === false) {
+  //   return null
+  // }
+
+  return <>{children}</>
+}
diff --git a/apps/www/app/contribute/about/page.tsx b/apps/www/app/contribute/about/page.tsx
new file mode 100644
index 0000000000000..a5592bb76f176
--- /dev/null
+++ b/apps/www/app/contribute/about/page.tsx
@@ -0,0 +1,298 @@
+import { Realtime } from 'icons'
+import {
+  ArrowLeft,
+  Award,
+  Bot,
+  Code,
+  DollarSign,
+  FileText,
+  Gift,
+  MessageCircle,
+  Smartphone,
+  Sparkles,
+  Split,
+  TrendingUp,
+  Zap,
+} from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Badge, Button, Separator, cn } from 'ui'
+import { GithubAvatar } from '~/components/Contribute/GithubAvatar'
+import DefaultLayout from '~/components/Layouts/Default'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { Feature, FeaturesSection as FeaturesSectionType } from '~/data/solutions/solutions.utils'
+
+const githubUsers = [
+  'aantti',
+  'carolmonroe',
+  'GaryAustin1',
+  'Hallidayo',
+  'k1ng-arthur',
+  'j4w8n',
+  'kallebysantos',
+  'saltcod',
+  'silentworks',
+  'singh-inder',
+  'tomaspozo',
+  'tristanbob',
+]
+
+const waysToContribute = [
+  {
+    icon: MessageCircle,
+    heading: 'Help others across the community',
+    subheading:
+      'Help unblock others by answering questions in Discord, GitHub Discussions, Reddit, Twitter, and StackOverflow.',
+  },
+  {
+    icon: Code,
+    heading: 'Build and maintain open source projects',
+    subheading:
+      'Contribute to the many open source repositories and community-driven libraries that power Supabase.',
+  },
+  {
+    icon: FileText,
+    heading: 'Write docs and guides',
+    subheading:
+      'Help us make Supabase easier to learn and use by improving clarity, adding examples, or filling in gaps.',
+  },
+  {
+    icon: Sparkles,
+    heading: 'Do the thing you do better than anyone',
+    subheading: 'Put your unique skills, interests, or knowledge to work for the community.',
+  },
+]
+
+const benefits = [
+  {
+    icon: DollarSign,
+    heading: 'Paid contributions',
+    subheading:
+      'Top contributors get paid for their efforts. We pay a stipend that recognizes your time and expertise.',
+  },
+  {
+    icon: Award,
+    heading: 'Community recognition',
+    subheading:
+      'Get a badge on Discord and flair on Reddit showcasing your SupaSquad status in the community.',
+  },
+  {
+    icon: Zap,
+    heading: 'Early access',
+    subheading:
+      'Get first access to new Supabase features and provide feedback directly to our team.',
+  },
+  {
+    icon: MessageCircle,
+    heading: 'Direct team access',
+    subheading:
+      'Direct communication channel with Supabase team members for questions, suggestions, and support.',
+  },
+  {
+    icon: Gift,
+    heading: 'Exclusive swag',
+    subheading:
+      'Special Supabase merch reserved for SupaSquad members. Show your status with pride.',
+  },
+  {
+    icon: TrendingUp,
+    heading: 'Growth opportunities',
+    subheading:
+      'Room to grow from volunteer to paid contributor to paid employee. Your path is up to you.',
+  },
+]
+
+const especially = [
+  {
+    id: 'expo',
+    icon: Smartphone,
+    heading: (
+      <div className="flex items-center gap-x-3">
+        Expo <Badge variant="success">Priority</Badge>
+      </div>
+    ),
+    subheading:
+      'Help the team by writing docs, creating examples, and making sure our guides are up to date.',
+  },
+  {
+    id: 'ai',
+    icon: Bot,
+    heading: (
+      <div className="flex items-center gap-x-3">
+        AI / Vectors <Badge variant="success">Priority</Badge>
+      </div>
+    ),
+    subheading: 'Help the team keep our AI / Vector docs and examples up to date. ',
+  },
+  {
+    id: 'realtime',
+    icon: Realtime,
+    heading: 'Realtime',
+    subheading:
+      'Help the team by writing docs, creating examples, and making sure our guides are up to date. Experience with React is an extra bonus.',
+  },
+  {
+    id: 'branching',
+    icon: Split,
+    heading: 'Branching',
+    subheading:
+      'Help the team by writing docs, creating examples, and making sure our guides are up to date.',
+  },
+]
+
+// eslint-disable-next-line no-restricted-exports
+export default function AboutPage() {
+  return (
+    <DefaultLayout>
+      <main className="min-h-screen flex flex-col items-center">
+        <div className="flex-1 w-full max-w-4xl mx-auto px-4 py-16">
+          <Link
+            href="/contribute"
+            className="inline-flex items-center gap-2 text-foreground-lighter hover:text-foreground transition-colors mb-8"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Contribute
+          </Link>
+
+          <SectionContainer
+            id="mission"
+            className="sm:py-18 md:py-24 lg:px-16 lg:py-24 xl:px-0 grid gap-y-4"
+          >
+            <h1 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-6xl tracking-[-1px] text-foreground">
+              Our mission
+            </h1>
+            <p className="text-xl text-foreground-light mt-4">
+              We’re building a community of helpers and contributors who help developers succeed. We
+              work in the open anywhere our developers are: Discord, GitHub, Reddit, Twitter, Stack
+              Overflow, and more.
+            </p>
+          </SectionContainer>
+
+          <Separator className="my-12 mx-auto border-foreground" />
+
+          <FeaturesSection
+            id="ways-to-contribute"
+            heading="Want to get involved?"
+            subheading="There are many ways to get involved in the Supabase community. Whether you want to write code, polish documentation, or help others build with Supabase, there’s a place for you."
+            features={waysToContribute}
+            columns={2}
+          />
+
+          <Image
+            src="/images/contribute/ask-supabase.jpg"
+            alt="Ask Supabase"
+            width={1000}
+            height={1000}
+            className="rounded-md border"
+          />
+
+          <FeaturesSection
+            id="benefits"
+            columns={2}
+            heading="Benefits for contributors"
+            subheading="Becoming a contributor comes with real benefits. From community recognition to paid opportunities, we value your time and impact."
+            features={benefits}
+          />
+
+          <FeaturesSection
+            id="especially"
+            columns={2}
+            heading="We’re especially looking for..."
+            subheading="These are the areas where we need the most help right now. If you have expertise in any of these domains, we’d love to hear from you."
+            features={especially}
+          />
+
+          <SectionContainer id="who-are-we" className="border-b border-border xl:px-0">
+            <div className="grid md:grid-cols-2 gap-4">
+              <div className="flex gap-4 flex-wrap mt-2">
+                {githubUsers.map((username) => (
+                  <GithubAvatar
+                    key={username}
+                    username={username}
+                    size={80}
+                    className="rounded-full"
+                  />
+                ))}
+                <div className="w-[80px] h-[80px] rounded-full bg-foreground flex items-center justify-center text-background hover:opacity-80 transition-opacity">
+                  <span className="text-sm font-medium">You?</span>
+                </div>
+              </div>
+              <div>
+                <h2 className="h2 text-foreground">Who are we?</h2>
+                <p className="text-lg text-foreground-lighter mt-4">
+                  We are a team of developers who are passionate about building the best developer
+                  platform. We help support the community on Discord, GitHub, Reddit, Twitter, and
+                  anywhere else we can find them.
+                </p>
+              </div>
+            </div>
+          </SectionContainer>
+
+          <SectionContainer id="apply" className="text-center">
+            <h2 className="text-foreground text-2xl lg:text-3xl leading-tight mb-8">
+              Ready to start contributing?
+            </h2>
+
+            <Button asChild type="primary" size="small">
+              <Link
+                href="https://supabase.notion.site/2ce5004b775f80a38acdc3ca5df7b9d3"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Apply to join
+              </Link>
+            </Button>
+          </SectionContainer>
+        </div>
+      </main>
+    </DefaultLayout>
+  )
+}
+
+const FeaturesSection = ({
+  id,
+  label,
+  heading,
+  subheading,
+  features,
+  columns = 3,
+}: FeaturesSectionType & { columns?: 2 | 3 | 4 }) => {
+  return (
+    <SectionContainer id={id} className="flex flex-col gap-4 md:gap-8 xl:px-0">
+      <div className="flex flex-col gap-2 max-w-xl">
+        {label && <span className="label">{label}</span>}
+        <h2 className="h2 text-foreground">{heading}</h2>
+        {subheading && (
+          <p className="text-foreground-lighter text-balance text-lg mb-10">{subheading}</p>
+        )}
+      </div>
+      <ul
+        className={cn(
+          'grid grid-cols-1 gap-4 gap-y-10 md:gap-12 xl:gap-20',
+          columns === 2 && 'md:grid-cols-2',
+          columns === 3 && 'md:grid-cols-3',
+          columns === 4 && 'md:grid-cols-2 xl:grid-cols-4'
+        )}
+      >
+        {features?.map((feature: Feature, index: number) => (
+          <FeatureItem feature={feature} key={index} />
+        ))}
+      </ul>
+    </SectionContainer>
+  )
+}
+
+const FeatureItem = ({ feature }: { feature: Feature }) => {
+  const Icon = feature.icon
+
+  return (
+    <li className="flex flex-col gap-2 text-sm text-foreground-lighter">
+      {Icon && <Icon className="mb-2 text-current w-7 h-7" strokeWidth={1.5} />}
+      <div className="w-full h-px overflow-hidden flex items-start bg-border-muted">
+        <span className="h-full bg-foreground-lighter w-7" />
+      </div>
+      <h4 className="text-foreground text-lg lg:text-xl mt-1 text-balance">{feature.heading}</h4>
+      <p className="text-foreground-lighter leading-relaxed">{feature.subheading}</p>
+    </li>
+  )
+}
diff --git a/apps/www/app/contribute/page.tsx b/apps/www/app/contribute/page.tsx
new file mode 100644
index 0000000000000..d65ea1f5cd622
--- /dev/null
+++ b/apps/www/app/contribute/page.tsx
@@ -0,0 +1,40 @@
+import { Hero } from '~/components/Contribute/Hero'
+import { UnansweredThreads } from '~/components/Contribute/UnansweredThreads'
+import DefaultLayout from '~/components/Layouts/Default'
+import { ContributeGuard } from './ContributeGuard'
+
+// eslint-disable-next-line no-restricted-exports
+export default async function ContributePage({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    product_area?: string | string[]
+    channel?: string
+    stack?: string | string[]
+    search?: string
+  }>
+}) {
+  const { product_area, channel, stack, search } = await searchParams
+
+  return (
+    <ContributeGuard>
+      <DefaultLayout>
+        <main className="min-h-screen flex flex-col items-center">
+          <div className="flex-1 w-full flex flex-col gap-20 items-center">
+            <div className="flex-1 flex flex-col gap-6 w-full">
+              <div className="max-w-5xl mx-auto px-5 w-full">
+                <Hero />
+              </div>
+              <UnansweredThreads
+                product_area={product_area}
+                channel={channel}
+                stack={stack}
+                search={search}
+              />
+            </div>
+          </div>
+        </main>
+      </DefaultLayout>
+    </ContributeGuard>
+  )
+}
diff --git a/apps/www/app/contribute/t/[id]/loading.tsx b/apps/www/app/contribute/t/[id]/loading.tsx
new file mode 100644
index 0000000000000..09e3c8b320064
--- /dev/null
+++ b/apps/www/app/contribute/t/[id]/loading.tsx
@@ -0,0 +1,17 @@
+// eslint-disable-next-line no-restricted-exports
+export default function Loading() {
+  return (
+    <div className="mb-6">
+      <div className="grid gap-4">
+        <div className="border border-border rounded-lg p-4 bg-surface-100 animate-pulse">
+          <div className="h-4 bg-muted rounded w-3/4 mb-3"></div>
+          <div className="h-4 bg-muted rounded w-1/2"></div>
+          <div className="flex items-center gap-2 mt-3">
+            <div className="h-3 bg-muted rounded w-20"></div>
+            <div className="h-3 bg-muted rounded w-24"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/app/contribute/t/[id]/page-loading.tsx b/apps/www/app/contribute/t/[id]/page-loading.tsx
new file mode 100644
index 0000000000000..ed16c5b15400c
--- /dev/null
+++ b/apps/www/app/contribute/t/[id]/page-loading.tsx
@@ -0,0 +1,27 @@
+// eslint-disable-next-line no-restricted-exports
+export default function PageLoading() {
+  return (
+    <div className="border border-border rounded-lg p-8 bg-surface-200">
+      <div className="flex items-start justify-between gap-4 mb-6">
+        <div className="flex-1">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="h-5 w-5 bg-muted rounded animate-pulse"></div>
+            <div className="h-4 bg-muted rounded w-20 animate-pulse"></div>
+            <div className="h-4 bg-muted rounded w-24 animate-pulse"></div>
+          </div>
+          <div className="h-8 bg-muted rounded w-3/4 mb-2 animate-pulse"></div>
+          <div className="h-4 bg-muted rounded w-32 animate-pulse"></div>
+        </div>
+      </div>
+      <div className="grid gap-4 mb-6">
+        <div>
+          <div className="h-4 bg-muted rounded w-24 mb-2 animate-pulse"></div>
+          <div className="flex flex-wrap gap-2">
+            <div className="h-6 bg-muted rounded w-20 animate-pulse"></div>
+            <div className="h-6 bg-muted rounded w-24 animate-pulse"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/app/contribute/t/[id]/page.tsx b/apps/www/app/contribute/t/[id]/page.tsx
new file mode 100644
index 0000000000000..357b49dedbe5f
--- /dev/null
+++ b/apps/www/app/contribute/t/[id]/page.tsx
@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { Suspense } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import DefaultLayout from '~/components/Layouts/Default'
+import { ThreadContent } from '~/components/Contribute/ThreadContent'
+import PageLoading from './page-loading'
+import type { Metadata } from 'next'
+import { ContributeGuard } from '../../ContributeGuard'
+
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: true,
+  },
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default async function ThreadPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+
+  return (
+    <ContributeGuard>
+      <DefaultLayout>
+        <main className="min-h-screen flex flex-col items-center">
+          <div className="flex-1 w-full max-w-4xl mx-auto px-4 py-16">
+            <Link
+              href="/contribute"
+              className="inline-flex items-center gap-2 text-foreground-lighter hover:text-foreground transition-colors mb-8"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to threads
+            </Link>
+
+            <Suspense fallback={<PageLoading />}>
+              <ThreadContent id={id} />
+            </Suspense>
+          </div>
+        </main>
+      </DefaultLayout>
+    </ContributeGuard>
+  )
+}
diff --git a/apps/www/app/contribute/u/[id]/loading.tsx b/apps/www/app/contribute/u/[id]/loading.tsx
new file mode 100644
index 0000000000000..3d95385620de8
--- /dev/null
+++ b/apps/www/app/contribute/u/[id]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="border border-border rounded-lg p-8 text-center text-muted-foreground bg-surface-200">
+      Loading user profile...
+    </div>
+  )
+}
diff --git a/apps/www/app/contribute/u/[id]/not-found.tsx b/apps/www/app/contribute/u/[id]/not-found.tsx
new file mode 100644
index 0000000000000..949d5f01a19cc
--- /dev/null
+++ b/apps/www/app/contribute/u/[id]/not-found.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+
+export default function NotFound() {
+  return (
+    <div className="border border-border rounded-lg p-8 bg-surface-200 text-center">
+      <h2 className="text-xl font-semibold text-foreground mb-2">User Not Found</h2>
+      <p className="text-foreground-light mb-6">
+        This user hasn't created any threads or replies yet, or doesn't exist.
+      </p>
+      <Link
+        href="/contribute"
+        className="inline-flex items-center gap-2 text-brand hover:underline transition-colors"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to threads
+      </Link>
+    </div>
+  )
+}
diff --git a/apps/www/app/contribute/u/[id]/page.tsx b/apps/www/app/contribute/u/[id]/page.tsx
new file mode 100644
index 0000000000000..d311e192d0347
--- /dev/null
+++ b/apps/www/app/contribute/u/[id]/page.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { Suspense } from 'react'
+import { ArrowLeft } from 'lucide-react'
+import DefaultLayout from '~/components/Layouts/Default'
+import { UserProfile } from '~/components/Contribute/UserProfile'
+import type { Metadata } from 'next'
+import { ContributeGuard } from '../../ContributeGuard'
+
+export const metadata: Metadata = {
+  robots: {
+    index: false,
+    follow: true,
+  },
+}
+
+function UserProfileLoading() {
+  return (
+    <div className="border border-border rounded-lg p-8 text-center text-muted-foreground bg-surface-200">
+      Loading user profile...
+    </div>
+  )
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default async function UserProfilePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const username = decodeURIComponent(id)
+
+  return (
+    <ContributeGuard>
+      <DefaultLayout>
+        <main className="min-h-screen flex flex-col items-center">
+          <div className="flex-1 w-full max-w-4xl mx-auto px-4 py-16">
+            <Link
+              href="/contribute"
+              className="inline-flex items-center gap-2 text-foreground-lighter hover:text-foreground transition-colors mb-8"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to threads
+            </Link>
+
+            <Suspense fallback={<UserProfileLoading />}>
+              <UserProfile username={username} />
+            </Suspense>
+          </div>
+        </main>
+      </DefaultLayout>
+    </ContributeGuard>
+  )
+}
diff --git a/apps/www/components/Contribute/ContributorBenefits.tsx b/apps/www/components/Contribute/ContributorBenefits.tsx
new file mode 100644
index 0000000000000..853a6387fae30
--- /dev/null
+++ b/apps/www/components/Contribute/ContributorBenefits.tsx
@@ -0,0 +1,74 @@
+import { Award, Zap, MessageCircle, DollarSign, Gift, TrendingUp, LucideIcon } from 'lucide-react'
+
+interface Benefit {
+  icon: LucideIcon
+  title: string
+  description: string
+}
+
+const benefits: Benefit[] = [
+  {
+    icon: DollarSign,
+    title: 'Paid Contributions',
+    description:
+      'Top contributors get paid for their efforts. We pay a stipend that recognizes your time and expertise.',
+  },
+  {
+    icon: Award,
+    title: 'Community Recognition',
+    description:
+      'Get a Badge on Discord and flair on Reddit showcasing your SupaSquad status in the community.',
+  },
+  {
+    icon: Zap,
+    title: 'Early Access',
+    description:
+      'Get first access to new Supabase features and provide feedback directly to our team.',
+  },
+  {
+    icon: MessageCircle,
+    title: 'Direct Team Access',
+    description:
+      'Direct communication channel with Supabase team members for questions, suggestions and support.',
+  },
+
+  {
+    icon: Gift,
+    title: 'Exclusive SWAG',
+    description:
+      'Special Supabase merch reserved for SupaSquad members. Show your status with pride.',
+  },
+  {
+    icon: TrendingUp,
+    title: 'Growth Opportunities',
+    description:
+      'Room to grow from volunteer to paid contributor to paid employee. Your path is up to you.',
+  },
+]
+
+export function ContributorBenefits() {
+  return (
+    <div className="grid gap-8 mt-16 border-b border-border py-12">
+      <div>
+        <h2 className="text-3xl text-foreground mb-4">Benefits for contributors</h2>
+        <p className="text-lg text-foreground-lighter">
+          Becoming a contributor comes with real benefits. From community recognition to paid
+          opportunities, we value your time and impact.
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-y-8 gap-x-6">
+        {benefits.map((benefit) => {
+          const Icon = benefit.icon
+          return (
+            <div key={benefit.title} className="grid gap-3">
+              <Icon className="h-6 w-6 text-foreground" />
+              <h3 className="text-xl text-foreground">{benefit.title}</h3>
+              <p className="text-foreground-lighter">{benefit.description}</p>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/Conversation.tsx b/apps/www/components/Contribute/Conversation.tsx
new file mode 100644
index 0000000000000..80f55325a1ee1
--- /dev/null
+++ b/apps/www/components/Contribute/Conversation.tsx
@@ -0,0 +1,117 @@
+import Link from 'next/link'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Badge, Card, CardContent } from 'ui'
+import { getThreadRepliesById } from '~/data/contribute'
+import type { ThreadRow } from '~/types/contribute'
+import { HelpOnPlatformButton } from './HelpOnPlatformButton'
+import { DiscordIcon, GitHubIcon, RedditIcon } from './Icons'
+import { markdownComponents } from './markdownComponents'
+import { RepliesList } from './RepliesList'
+
+export async function Conversation({ thread }: { thread: ThreadRow }) {
+  const { question, replies } = await getThreadRepliesById(thread.thread_key)
+
+  if (!question && replies.length === 0) {
+    return null
+  }
+
+  const validReplies = replies.filter((reply: { content: string | null }) => reply.content)
+
+  return (
+    <div className="flex flex-col gap-10">
+      {/* Title, Question, and First Reply Section */}
+      {question && question.content && (
+        <div className="bg-surface-200 p-6 rounded-lg border border-border">
+          {/* Title */}
+          <div className="mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-2">
+                {thread.channel === 'discord' && <DiscordIcon className="h-5 w-5 text-[#5865F2]" />}
+                {thread.channel === 'reddit' && <RedditIcon className="h-5 w-5 text-[#FF4500]" />}
+                {thread.channel === 'github' && <GitHubIcon className="h-5 w-5 text-foreground" />}
+                <span className="text-sm text-foreground-lighter capitalize">{thread.channel}</span>
+                <span className="text-sm text-foreground-lighter">·</span>
+                <span className="text-sm text-foreground-lighter">{thread.posted}</span>
+              </div>
+              <HelpOnPlatformButton
+                channel={thread.channel}
+                externalActivityUrl={thread.external_activity_url}
+              />
+            </div>
+            <h1 className="text-2xl font-medium text-foreground mb-2">{thread.title}</h1>
+            <p className="text-sm text-foreground-lighter">
+              by{' '}
+              <Link
+                href={`/contribute/u/${encodeURIComponent(thread.user)}`}
+                className="hover:text-foreground transition-colors"
+              >
+                {thread.user}
+              </Link>
+            </p>
+          </div>
+
+          {/* Question */}
+          <div className="border border-border rounded-lg p-6 bg-surface-100 min-w-0 shadow-sm">
+            <div className="text-foreground mb-4 min-w-0">
+              <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+                {question.content}
+              </ReactMarkdown>
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              {question.author && (
+                <>
+                  <Badge variant="success">OP</Badge>
+                  <Link
+                    href={`/contribute/u/${encodeURIComponent(question.author)}`}
+                    className="font-medium hover:text-foreground transition-colors"
+                  >
+                    {question.author}
+                  </Link>
+                </>
+              )}
+              {question.author && question.ts && <span>·</span>}
+              {question.ts && question.external_activity_url ? (
+                <a
+                  href={question.external_activity_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  {new Date(question.ts).toLocaleString()}
+                </a>
+              ) : (
+                question.ts && <span>{new Date(question.ts).toLocaleString()}</span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Summary Section */}
+      {thread.summary && (
+        <div className="flex flex-col gap-3">
+          <h3 className="text-sm font-medium text-foreground">How to help</h3>
+          <Card>
+            <CardContent className="px-6 py-8 flex flex-col gap-6">
+              <div className="text-base text-foreground">
+                <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+                  {thread.summary}
+                </ReactMarkdown>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Remaining Replies Section */}
+      {validReplies.length > 0 && (
+        <RepliesList
+          replies={validReplies}
+          questionAuthor={question?.author || null}
+          totalReplyCount={validReplies.length}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/FilterPopover.tsx b/apps/www/components/Contribute/FilterPopover.tsx
new file mode 100644
index 0000000000000..557b9deb3f887
--- /dev/null
+++ b/apps/www/components/Contribute/FilterPopover.tsx
@@ -0,0 +1,147 @@
+'use client'
+
+import { X } from 'lucide-react'
+import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs'
+import { useState } from 'react'
+import {
+  Button,
+  cn,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  ScrollArea,
+} from 'ui'
+
+interface FilterPopoverProps {
+  allProductAreas: string[]
+  allStacks: string[]
+  trigger: React.ReactNode
+}
+
+export function FilterPopover({ allProductAreas, allStacks, trigger }: FilterPopoverProps) {
+  const [open, setOpen] = useState(false)
+  const [productAreas, setProductAreas] = useQueryState(
+    'product_area',
+    parseAsArrayOf(parseAsString).withOptions({
+      shallow: false,
+    })
+  )
+  const [stacks, setStacks] = useQueryState(
+    'stack',
+    parseAsArrayOf(parseAsString).withOptions({
+      shallow: false,
+    })
+  )
+
+  function handleProductAreaClick(area: string) {
+    const current = productAreas || []
+    if (current.includes(area)) {
+      setProductAreas(current.filter((a) => a !== area))
+    } else {
+      setProductAreas([...current, area])
+    }
+  }
+
+  function handleStackClick(tech: string) {
+    const current = stacks || []
+    if (current.includes(tech)) {
+      setStacks(current.filter((t) => t !== tech))
+    } else {
+      setStacks([...current, tech])
+    }
+  }
+
+  function handleClearAll() {
+    setProductAreas(null)
+    setStacks(null)
+  }
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+      <PopoverTrigger_Shadcn_ asChild>{trigger}</PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_
+        className="w-[calc(100vw-2rem)] sm:w-[500px] md:w-[600px] p-0"
+        align="end"
+        sideOffset={8}
+      >
+        <div className="">
+          {/* Header */}
+          <div className="flex flex-row items-center justify-between px-4 py-2 bg-muted dark:bg-foreground-muted/10 border-b rounded-t-md">
+            <h3 className="font-mono uppercase text-xs font-normal text-foreground-lighter">
+              Filter threads
+            </h3>
+            <div
+              className={cn(
+                'flex items-center gap-2',
+                // Set a min-height to avoid layout shift when the button is hidden/shown
+                'min-h-8'
+              )}
+            >
+              {((productAreas && productAreas.length > 0) || (stacks && stacks.length > 0)) && (
+                <Button
+                  type="outline"
+                  onClick={handleClearAll}
+                  iconRight={<X className="h-4 w-4" />}
+                >
+                  <span className="hidden xs:inline">Clear all</span>
+                  <span className="xs:hidden">Clear</span>
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <ScrollArea className="h-[300px] sm:h-[400px] md:h-[430px]">
+            <div className="grid gap-8 p-4">
+              {/* Product Area Section */}
+              <div className="grid gap-3 pb-0">
+                <h3 className="text-sm text-muted-foreground">Product area</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {allProductAreas
+                    .filter((area) => area !== 'Other')
+                    .map((area) => {
+                      const isSelected = productAreas?.includes(area) ?? false
+                      return (
+                        <Button
+                          key={area}
+                          type={isSelected ? 'secondary' : 'dashed'}
+                          size="tiny"
+                          onClick={() => handleProductAreaClick(area)}
+                          className="justify-start w-fit"
+                        >
+                          {area}
+                        </Button>
+                      )
+                    })}
+                </div>
+              </div>
+
+              {/* Tech Stack Section */}
+              <div className="grid gap-3">
+                <h3 className="text-sm text-muted-foreground">Tech stack</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {allStacks
+                    .filter((tech) => tech !== 'Other')
+                    .map((tech) => {
+                      const isSelected = stacks?.includes(tech) ?? false
+                      return (
+                        <Button
+                          key={tech}
+                          // [Danny] We should switch to using Toggle component here, like downgrade plan flow
+                          type={isSelected ? 'secondary' : 'dashed'}
+                          size="tiny"
+                          onClick={() => handleStackClick(tech)}
+                          className="justify-start w-fit"
+                        >
+                          {tech}
+                        </Button>
+                      )
+                    })}
+                </div>
+              </div>
+            </div>
+          </ScrollArea>
+        </div>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/www/components/Contribute/GithubAvatar.tsx b/apps/www/components/Contribute/GithubAvatar.tsx
new file mode 100644
index 0000000000000..799aec460a480
--- /dev/null
+++ b/apps/www/components/Contribute/GithubAvatar.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { useState } from 'react'
+
+interface GithubAvatarProps {
+  username: string
+  size?: number
+  className?: string
+}
+
+// Basic username validation - GitHub usernames must be alphanumeric with hyphens/underscores
+function isValidGithubUsername(username: string): boolean {
+  if (!username || username.trim().length === 0) return false
+  // GitHub username rules: alphanumeric, hyphens, underscores, no consecutive hyphens/underscores, max 39 chars
+  const githubUsernameRegex = /^[a-zA-Z0-9]([a-zA-Z0-9]|-(?!-)|_(?!_))*[a-zA-Z0-9]?$/
+  return username.length <= 39 && githubUsernameRegex.test(username)
+}
+
+export function GithubAvatar({ username, size = 80, className }: GithubAvatarProps) {
+  const [imageError, setImageError] = useState(false)
+  const [imageSrc, setImageSrc] = useState(`https://github.com/${username}.png`)
+
+  // Validate username and use fallback if invalid
+  const isValid = isValidGithubUsername(username)
+  const fallbackSrc = isValid
+    ? `https://github.com/identicons/${username}.png`
+    : '/images/blog/blog-placeholder.png'
+
+  const handleImageError = () => {
+    if (!imageError) {
+      setImageError(true)
+      setImageSrc(fallbackSrc)
+    }
+  }
+
+  return (
+    <Link
+      href={`https://github.com/${username}`}
+      target="_blank"
+      rel="noreferrer"
+      className="group relative"
+    >
+      <Image
+        src={imageSrc}
+        alt={`${username}'s GitHub avatar`}
+        width={size}
+        height={size}
+        className={`${className} transition-all duration-200 group-hover:scale-110 group-hover:ring-2 group-hover:ring-brand-500 group-hover:ring-offset-2 group-hover:ring-offset-background`}
+        onError={handleImageError}
+      />
+    </Link>
+  )
+}
diff --git a/apps/www/components/Contribute/HelpOnPlatformButton.tsx b/apps/www/components/Contribute/HelpOnPlatformButton.tsx
new file mode 100644
index 0000000000000..30c85e51d7579
--- /dev/null
+++ b/apps/www/components/Contribute/HelpOnPlatformButton.tsx
@@ -0,0 +1,25 @@
+import { Button } from 'ui'
+import type { ThreadSource } from '~/types/contribute'
+
+interface HelpOnPlatformButtonProps {
+  channel: ThreadSource
+  externalActivityUrl: string
+  className?: string
+}
+
+export function HelpOnPlatformButton({
+  channel,
+  externalActivityUrl,
+  className = 'w-full sm:w-fit',
+}: HelpOnPlatformButtonProps) {
+  const platformName =
+    channel === 'discord' ? 'Discord' : channel === 'reddit' ? 'Reddit' : 'GitHub'
+
+  return (
+    <Button asChild type="default" className={className}>
+      <a href={externalActivityUrl} target="_blank" rel="noopener noreferrer">
+        Help on {platformName}
+      </a>
+    </Button>
+  )
+}
diff --git a/apps/www/components/Contribute/Hero.tsx b/apps/www/components/Contribute/Hero.tsx
new file mode 100644
index 0000000000000..1f84b3f5957bd
--- /dev/null
+++ b/apps/www/components/Contribute/Hero.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link'
+import { Button } from 'ui'
+
+export function Hero() {
+  return (
+    <header className="container relative mx-auto px-6 pt-12 pb-8 lg:pt-24 lg:px-16 xl:px-20 text-center space-y-4">
+      <h1 className="text-sm text-brand-link md:text-base">
+        <span className="sr-only">Supabase </span>Contribute
+      </h1>
+      <h2 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-6xl lg:mx-auto tracking-[-1px]">
+        Join the Supabase <br />
+        Contributor Community
+      </h2>
+      <p className="text-sm md:text-base text-foreground-lighter max-w-sm sm:max-w-md md:max-w-xl mx-auto">
+        Jump in to these unresolved threads and share your knowledge with fellow builders. Every
+        question answered helps someone build something amazing.
+      </p>
+
+      <Button size="medium" asChild type="outline">
+        <Link href="/contribute/about">Get involved</Link>
+      </Button>
+    </header>
+  )
+}
diff --git a/apps/www/components/Contribute/Icons.tsx b/apps/www/components/Contribute/Icons.tsx
new file mode 100644
index 0000000000000..0e933460ec833
--- /dev/null
+++ b/apps/www/components/Contribute/Icons.tsx
@@ -0,0 +1,67 @@
+import type { SVGProps } from 'react'
+import { cn } from 'ui'
+
+export function RedditIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>Reddit</title>
+      <path
+        fill="currentColor"
+        d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"
+      />
+    </svg>
+  )
+}
+
+export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn('', props.className)}
+    >
+      <title>Discord</title>
+      <path
+        fill="currentColor"
+        d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+      />
+    </svg>
+  )
+}
+
+export function GitHubIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <title>GitHub</title>
+      <path
+        fill="currentColor"
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      />
+    </svg>
+  )
+}
+
+export function AllIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M16 5H3" />
+      <path d="M16 12H3" />
+      <path d="M16 19H3" />
+      <path d="M21 5h.01" />
+      <path d="M21 12h.01" />
+      <path d="M21 19h.01" />
+    </svg>
+  )
+}
diff --git a/apps/www/components/Contribute/Leaderboard.tsx b/apps/www/components/Contribute/Leaderboard.tsx
new file mode 100644
index 0000000000000..c912b867943d4
--- /dev/null
+++ b/apps/www/components/Contribute/Leaderboard.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { parseAsString, useQueryState } from 'nuqs'
+import {
+  Select_Shadcn_ as Select,
+  SelectContent_Shadcn_ as SelectContent,
+  SelectItem_Shadcn_ as SelectItem,
+  SelectTrigger_Shadcn_ as SelectTrigger,
+  SelectValue_Shadcn_ as SelectValue,
+} from 'ui'
+import { LeaderboardContent } from './LeaderboardContent'
+import { LEADERBOARD_PERIODS } from '~/data/contribute'
+import { use } from 'react'
+
+export function LeaderboardClient({
+  initialLeaderboardPromise,
+  initialPeriod,
+}: {
+  initialLeaderboardPromise: Promise<import('~/types/contribute').LeaderboardRow[]>
+  initialPeriod: (typeof LEADERBOARD_PERIODS)[number]
+}) {
+  const [period, setPeriod] = useQueryState(
+    'period',
+    parseAsString.withDefault('all').withOptions({
+      shallow: false,
+    })
+  )
+
+  const validPeriod = LEADERBOARD_PERIODS.includes(period as (typeof LEADERBOARD_PERIODS)[number])
+    ? (period as (typeof LEADERBOARD_PERIODS)[number])
+    : 'all'
+
+  const periodLabels: Record<(typeof LEADERBOARD_PERIODS)[number], string> = {
+    all: 'All time',
+    year: 'This year',
+    quarter: 'This quarter',
+    month: 'This month',
+    week: 'This week',
+    today: 'Today',
+  }
+
+  // Use the initial promise if period hasn't changed, otherwise it will refetch via navigation
+  const leaderboard = use(initialLeaderboardPromise)
+
+  return (
+    <div className="w-full max-w-7xl mx-auto px-4 py-16">
+      {/* Back Link */}
+      <Link
+        href="/contribute"
+        className="inline-flex items-center gap-2 text-foreground-lighter hover:text-foreground transition-colors mb-6"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to Contribute
+      </Link>
+
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-3xl font-semibold text-foreground">Top Community Contributors</h1>
+        <Link
+          href="/contribute/leaderboard/how-it-works"
+          className="text-sm text-foreground-lighter hover:text-foreground transition-colors"
+        >
+          How does this work?
+        </Link>
+      </div>
+
+      {/* Period Selector */}
+      <div className="mb-8">
+        <Select value={validPeriod} onValueChange={setPeriod}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue>{periodLabels[validPeriod]}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            {LEADERBOARD_PERIODS.map((p) => (
+              <SelectItem key={p} value={p}>
+                {periodLabels[p]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Leaderboard Content */}
+      <LeaderboardContent leaderboard={leaderboard} />
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/LeaderboardContent.tsx b/apps/www/components/Contribute/LeaderboardContent.tsx
new file mode 100644
index 0000000000000..36da66cb379e0
--- /dev/null
+++ b/apps/www/components/Contribute/LeaderboardContent.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import { cn } from 'ui'
+import type { LeaderboardRow } from '~/types/contribute'
+
+function getInitials(name: string | null): string {
+  if (!name) return '?'
+  const parts = name.trim().split(/\s+/)
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+  }
+  return name.substring(0, 2).toUpperCase()
+}
+
+function getAvatarColor(name: string | null): string {
+  if (!name) return 'bg-surface-300'
+  const colors = [
+    'bg-blue-500',
+    'bg-purple-500',
+    'bg-pink-500',
+    'bg-red-500',
+    'bg-orange-500',
+    'bg-yellow-500',
+    'bg-green-500',
+    'bg-teal-500',
+    'bg-cyan-500',
+    'bg-indigo-500',
+  ]
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return colors[Math.abs(hash) % colors.length]
+}
+
+function Avatar({ name, size = 'md' }: { name: string | null; size?: 'sm' | 'md' | 'lg' }) {
+  const initials = getInitials(name)
+  const sizeClasses = {
+    sm: 'h-8 w-8 text-xs',
+    md: 'h-12 w-12 text-base',
+    lg: 'h-20 w-20 text-2xl',
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-full flex items-center justify-center text-white font-semibold',
+        getAvatarColor(name),
+        sizeClasses[size]
+      )}
+    >
+      {initials}
+    </div>
+  )
+}
+
+function TopThreeCard({
+  rank,
+  name,
+  score,
+  isFirst,
+}: {
+  rank: number
+  name: string | null
+  score: number
+  isFirst: boolean
+}) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center p-6 rounded-lg border border-border bg-surface-200',
+        isFirst && 'scale-105'
+      )}
+    >
+      <div className="mb-4">
+        <Avatar name={name} size="lg" />
+      </div>
+      <div className="text-center">
+        <h3 className="text-lg font-semibold text-foreground mb-1">{name || 'Anonymous'}</h3>
+        <div className="text-3xl font-bold text-foreground">{score.toLocaleString()}</div>
+        <div className="text-sm text-foreground-lighter mt-1">Replies</div>
+      </div>
+    </div>
+  )
+}
+
+function LeaderboardRowItem({
+  rank,
+  name,
+  score,
+}: {
+  rank: number
+  name: string | null
+  score: number
+}) {
+  return (
+    <div className="flex items-center gap-4 py-4 border-b border-border last:border-0">
+      <div className="text-lg font-semibold text-foreground w-12">{rank}</div>
+      <Avatar name={name} size="sm" />
+      <div className="flex-1">
+        <div className="text-foreground font-medium">{name || 'Anonymous'}</div>
+      </div>
+      <div className="text-right">
+        <div className="text-lg font-semibold text-foreground">{score.toLocaleString()}</div>
+        <div className="text-xs text-foreground-lighter">Replies</div>
+      </div>
+    </div>
+  )
+}
+
+export function LeaderboardContent({ leaderboard }: { leaderboard: LeaderboardRow[] }) {
+  if (!leaderboard || leaderboard.length === 0) {
+    return (
+      <div className="border border-border rounded-lg p-8 text-center text-muted-foreground">
+        No leaderboard data available
+      </div>
+    )
+  }
+
+  const topThree = leaderboard.slice(0, 3)
+  const rest = leaderboard.slice(3)
+
+  return (
+    <div className="w-full">
+      {/* Top 3 Cards */}
+      {topThree.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+          {topThree.length >= 2 && (
+            <TopThreeCard
+              rank={2}
+              name={topThree[1]?.author ?? null}
+              score={topThree[1]?.reply_count ?? 0}
+              isFirst={false}
+            />
+          )}
+          {topThree.length >= 1 && (
+            <TopThreeCard
+              rank={1}
+              name={topThree[0]?.author ?? null}
+              score={topThree[0]?.reply_count ?? 0}
+              isFirst={true}
+            />
+          )}
+          {topThree.length >= 3 && (
+            <TopThreeCard
+              rank={3}
+              name={topThree[2]?.author ?? null}
+              score={topThree[2]?.reply_count ?? 0}
+              isFirst={false}
+            />
+          )}
+        </div>
+      )}
+
+      {/* Rest of the leaderboard */}
+      {rest.length > 0 && (
+        <div className="border border-border rounded-lg bg-surface-200 p-6">
+          {rest.map((entry, index) => (
+            <LeaderboardRowItem
+              key={entry.author || index}
+              rank={index + 4}
+              name={entry.author}
+              score={entry.reply_count}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/PlatformTabs.tsx b/apps/www/components/Contribute/PlatformTabs.tsx
new file mode 100644
index 0000000000000..29435ce83b917
--- /dev/null
+++ b/apps/www/components/Contribute/PlatformTabs.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const tabs = [
+  { href: '/contribute/reddit', label: 'Reddit' },
+  { href: '/contribute/discord', label: 'Discord' },
+  { href: '/contribute/github', label: 'GitHub' },
+]
+
+export function PlatformTabs() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="flex gap-3 border-b pb-2">
+      {tabs.map((tab) => {
+        const isActive = pathname?.startsWith(tab.href) || false
+
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            className={`px-3 py-1 rounded-md text-sm ${
+              isActive ? 'bg-slate-200 font-medium' : 'hover:bg-slate-100'
+            }`}
+          >
+            {tab.label}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/apps/www/components/Contribute/RepliesList.tsx b/apps/www/components/Contribute/RepliesList.tsx
new file mode 100644
index 0000000000000..c10bbf36b79a2
--- /dev/null
+++ b/apps/www/components/Contribute/RepliesList.tsx
@@ -0,0 +1,102 @@
+'use client'
+
+import Link from 'next/link'
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Badge, Button, Card, CardContent, CardFooter } from 'ui'
+import { markdownComponents } from './markdownComponents'
+
+interface Reply {
+  id: string
+  content: string | null
+  author: string | null
+  ts: string | null
+  external_activity_url: string | null
+}
+
+interface RepliesListProps {
+  replies: Reply[]
+  questionAuthor: string | null
+  totalReplyCount?: number
+}
+
+export function RepliesList({ replies, questionAuthor, totalReplyCount }: RepliesListProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const hasMoreThanThree = replies.length > 3
+  const displayedReplies = isExpanded ? replies : replies.slice(0, 3)
+
+  if (replies.length === 0) {
+    return null
+  }
+
+  const displayCount = totalReplyCount || replies.length
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h3 className="text-sm font-medium text-muted-foreground">
+        {displayCount} {displayCount === 1 ? 'reply' : 'replies'}
+      </h3>
+      <Card className="relative">
+        <CardContent className="flex flex-col p-0">
+          {displayedReplies.map((reply, index) => {
+            const timestamp = reply.ts ? new Date(reply.ts).toLocaleString() : null
+            const isOP = reply.author === questionAuthor
+
+            return (
+              <div key={reply.id} className="border-b border-border last:border-b-0">
+                <div className="px-6 py-6">
+                  <div className="text-sm text-foreground mb-3 min-w-0">
+                    <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+                      {reply.content || ''}
+                    </ReactMarkdown>
+                  </div>
+                  <div className="flex items-center gap-x-1 text-xs text-foreground-lighter">
+                    {reply.author && (
+                      <>
+                        {isOP && <Badge variant="success">OP</Badge>}
+                        <Link
+                          href={`/contribute/u/${encodeURIComponent(reply.author)}`}
+                          className="hover:text-foreground transition-colors"
+                        >
+                          {reply.author}
+                        </Link>
+                      </>
+                    )}
+                    {reply.author && timestamp && <span>·</span>}
+                    {timestamp && reply.external_activity_url ? (
+                      <a
+                        href={reply.external_activity_url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="hover:text-foreground transition-colors"
+                      >
+                        {timestamp}
+                      </a>
+                    ) : (
+                      timestamp && <span>{timestamp}</span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </CardContent>
+        {hasMoreThanThree && (
+          <CardFooter className="flex justify-center">
+            <Button
+              type="default"
+              size="tiny"
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="w-min"
+            >
+              {isExpanded
+                ? 'Show fewer replies'
+                : `Show ${replies.length - 3} more ${replies.length - 3 === 1 ? 'reply' : 'replies'}`}
+            </Button>
+          </CardFooter>
+        )}
+      </Card>
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/ThreadContent.tsx b/apps/www/components/Contribute/ThreadContent.tsx
new file mode 100644
index 0000000000000..5222f3f42af17
--- /dev/null
+++ b/apps/www/components/Contribute/ThreadContent.tsx
@@ -0,0 +1,66 @@
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
+import { Badge } from 'ui'
+import { Conversation } from '~/components/Contribute/Conversation'
+import { HelpOnPlatformButton } from '~/components/Contribute/HelpOnPlatformButton'
+import { getThreadById } from '~/data/contribute'
+import Loading from '../../app/contribute/t/[id]/loading'
+
+export async function ThreadContent({ id }: { id: string }) {
+  const thread = await getThreadById(id)
+
+  if (!thread) {
+    notFound()
+  }
+
+  return (
+    <div className="grid gap-6">
+      {/* Conversation Section (includes title, question, and first reply) */}
+      <Suspense fallback={<Loading />}>
+        <Conversation thread={thread} />
+      </Suspense>
+
+      {/* Metadata and Actions Section */}
+      <div className="border border-border rounded-lg p-6 bg-surface-200">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6 pb-6 border-b border-border">
+          {thread.product_areas.filter((area: string) => area !== 'Other').length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-foreground mb-2">Product areas</h3>
+              <div className="flex flex-wrap gap-2">
+                {thread.product_areas
+                  .filter((area: string) => area !== 'Other')
+                  .map((area: string) => (
+                    <Badge key={area} variant="default">
+                      {area}
+                    </Badge>
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {thread.stack.filter((tech: string) => tech !== 'Other').length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-foreground mb-2">Stack</h3>
+              <div className="flex flex-wrap gap-2">
+                {thread.stack
+                  .filter((tech: string) => tech !== 'Other')
+                  .map((tech: string) => (
+                    <Badge key={tech} variant="default">
+                      {tech}
+                    </Badge>
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+        {/* CTA Button */}
+        <div>
+          <HelpOnPlatformButton
+            channel={thread.channel}
+            externalActivityUrl={thread.external_activity_url}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/UnansweredThreads.tsx b/apps/www/components/Contribute/UnansweredThreads.tsx
new file mode 100644
index 0000000000000..dcb2300d49ed3
--- /dev/null
+++ b/apps/www/components/Contribute/UnansweredThreads.tsx
@@ -0,0 +1,48 @@
+import { Admonition } from 'ui-patterns'
+import {
+  getAllProductAreas,
+  getAllStacks,
+  getChannelCounts,
+  getUnansweredThreads,
+} from '~/data/contribute'
+import { UnansweredThreadsTable } from './UnansweredThreadsTable'
+
+export async function UnansweredThreads({
+  product_area,
+  channel,
+  stack,
+  search,
+}: {
+  product_area?: string | string[]
+  channel?: string
+  stack?: string | string[]
+  search?: string
+}) {
+  try {
+    const [threads, channelCounts, allProductAreas, allStacks] = await Promise.all([
+      getUnansweredThreads(product_area, channel, stack, search),
+      getChannelCounts(product_area, stack, search),
+      getAllProductAreas(),
+      getAllStacks(),
+    ])
+
+    return (
+      <UnansweredThreadsTable
+        threads={threads}
+        channelCounts={channelCounts}
+        allProductAreas={allProductAreas}
+        allStacks={allStacks}
+      />
+    )
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error'
+    return (
+      <Admonition
+        type="destructive"
+        title="Error loading threads"
+        description={errorMessage}
+        className="max-w-md mx-auto"
+      />
+    )
+  }
+}
diff --git a/apps/www/components/Contribute/UnansweredThreadsTable.tsx b/apps/www/components/Contribute/UnansweredThreadsTable.tsx
new file mode 100644
index 0000000000000..03bb37a789bb8
--- /dev/null
+++ b/apps/www/components/Contribute/UnansweredThreadsTable.tsx
@@ -0,0 +1,657 @@
+'use client'
+
+import { Filter, MessageSquareReply, Search, X } from 'lucide-react'
+import Link from 'next/link'
+import { parseAsString, useQueryState } from 'nuqs'
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useState, useTransition } from 'react'
+import {
+  Badge,
+  Button,
+  Card,
+  cn,
+  Input_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'ui'
+
+import type { ThreadRow } from '~/types/contribute'
+import { FilterPopover } from './FilterPopover'
+import { DiscordIcon, GitHubIcon, RedditIcon } from './Icons'
+
+interface TabConfig {
+  id: string
+  label: string
+  icon?: React.ComponentType<{ className?: string }>
+  iconColor?: string
+}
+
+function CountSkeleton() {
+  return <span className="inline-block min-w-[24px] h-5 bg-surface-300 animate-pulse rounded" />
+}
+
+function ThreadsTable({
+  threads,
+  productArea,
+  search,
+}: {
+  threads: ThreadRow[]
+  productArea: string | null
+  search: string | null
+}) {
+  return (
+    <Card>
+      <Table className="w-full mt-0">
+        <TableHeader className="sr-only">
+          <TableRow>
+            <TableHead>Thread</TableHead>
+            <TableHead>Stack</TableHead>
+            <TableHead>Replies</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {threads.length === 0 ? (
+            <TableRow className="[&>td]:hover:bg-inherit">
+              <TableCell colSpan={3} className="text-center text-foreground-lighter py-6">
+                No threads found
+              </TableCell>
+            </TableRow>
+          ) : (
+            threads.map((thread) => (
+              <ThreadRow
+                key={thread.id}
+                thread={thread}
+                productArea={productArea}
+                search={search}
+              />
+            ))
+          )}
+        </TableBody>
+        <TableCaption>
+          Showing {threads.length} {threads.length === 1 ? 'thread' : 'threads'}
+        </TableCaption>
+      </Table>
+    </Card>
+  )
+}
+
+export function UnansweredThreadsTable({
+  threads: initialThreads,
+  channelCounts,
+  allProductAreas,
+  allStacks,
+}: {
+  threads: ThreadRow[]
+  channelCounts: { all: number; discord: number; reddit: number; github: number }
+  allProductAreas: string[]
+  allStacks: string[]
+}) {
+  const [threads, setThreads] = useState(initialThreads)
+  const [isLoadingMore, setIsLoadingMore] = useState(false)
+  const [hasMore, setHasMore] = useState(initialThreads.length === 100)
+
+  const [searchInput, setSearchInput] = useState('')
+  const [search, setSearch] = useQueryState(
+    'search',
+    parseAsString.withOptions({
+      shallow: false, // notify server, re-render RSC tree
+    })
+  )
+
+  const [_, startTransition] = useTransition()
+  const [channel, setChannel] = useQueryState(
+    'channel',
+    parseAsString.withDefault('all').withOptions({
+      shallow: false, // notify server, re-render RSC tree
+    })
+  )
+  const [productArea] = useQueryState('product_area', parseAsString)
+  const [stack] = useQueryState('stack', parseAsString)
+
+  const tabs: TabConfig[] = [
+    {
+      id: 'all',
+      label: 'All',
+    },
+    {
+      id: 'discord',
+      label: 'Discord',
+      icon: DiscordIcon,
+      iconColor: 'text-[#5865F2]',
+    },
+    {
+      id: 'reddit',
+      label: 'Reddit',
+      icon: RedditIcon,
+      iconColor: 'text-[#FF4500]',
+    },
+    {
+      id: 'github',
+      label: 'GitHub',
+      icon: GitHubIcon,
+      iconColor: 'text-foreground',
+    },
+  ]
+
+  const validTabs = ['all', 'discord', 'reddit', 'github'] as const
+  const currentTab = (
+    validTabs.includes(channel as (typeof validTabs)[number]) ? channel : 'all'
+  ) as (typeof validTabs)[number]
+
+  // Reset threads when filters change
+  useEffect(() => {
+    setThreads(initialThreads)
+    setHasMore(initialThreads.length === 100)
+  }, [initialThreads])
+
+  async function handleTabChange(value: string) {
+    startTransition(async () => {
+      await setChannel(value)
+    })
+  }
+
+  async function handleLoadMore() {
+    setIsLoadingMore(true)
+    try {
+      const params = new URLSearchParams()
+      params.set('offset', threads.length.toString())
+      if (channel && channel !== 'all') params.set('channel', channel)
+      if (productArea) params.set('product_area', productArea)
+      if (stack) params.set('stack', stack)
+      if (search) params.set('search', search)
+
+      const response = await fetch(`/api-v2/contribute/threads?${params.toString()}`)
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({
+          error: `Failed to load threads: ${response.status} ${response.statusText}`,
+        }))
+        throw new Error(errorData.error || `HTTP error! status: ${response.status}`)
+      }
+
+      const newThreads = await response.json()
+
+      if (!Array.isArray(newThreads)) {
+        throw new Error('Invalid response format: expected an array of threads')
+      }
+
+      if (newThreads.length < 100) {
+        setHasMore(false)
+      }
+
+      setThreads((prev) => [...prev, ...newThreads])
+    } catch (error) {
+      console.error('Error loading more threads:', error)
+      // Optionally show user-facing error message
+      // You could add a toast notification or error state here
+    } finally {
+      setIsLoadingMore(false)
+    }
+  }
+
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (searchInput.trim()) {
+      setSearch(searchInput.trim())
+    } else {
+      setSearch(null)
+    }
+  }
+
+  function handleSearchKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (searchInput.trim()) {
+        setSearch(searchInput.trim())
+      } else {
+        setSearch(null)
+      }
+    }
+  }
+
+  function handleClearSearch() {
+    setSearchInput('')
+    setSearch(null)
+  }
+
+  // Sync local input with URL state
+  useEffect(() => {
+    setSearchInput(search || '')
+  }, [search])
+
+  const filteredThreads = useMemo(() => {
+    if (!search || !search.trim()) {
+      return threads
+    }
+
+    const searchLower = search.toLowerCase()
+    return threads.filter((thread) => {
+      return (
+        thread.title.toLowerCase().includes(searchLower) ||
+        thread.user.toLowerCase().includes(searchLower) ||
+        (thread.summary && thread.summary.toLowerCase().includes(searchLower))
+      )
+    })
+  }, [threads, search])
+
+  const activeFilterCount = [productArea, stack].filter(Boolean).length
+
+  return (
+    <section className="w-full max-w-7xl mx-auto px-4 py-16 relative">
+      {/* Header */}
+      <header className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-8">
+        <div className="flex flex-col gap-1">
+          <h2 className="text-xl text-foreground">Unresolved threads</h2>
+          <p className="text-foreground-lighter">
+            Over the last 30 days, with data refreshed every 10 minutes.
+          </p>
+        </div>
+      </header>
+
+      {/* Channel Filters */}
+      <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-4 mb-4">
+        <div className="flex items-center flex-wrap gap-x-1.5 overflow-x-auto">
+          {tabs.map((tab) => {
+            const isActive = currentTab === tab.id
+            const Icon = tab.icon
+
+            return (
+              <Button
+                key={tab.id}
+                type={isActive ? 'default' : 'dashed'}
+                size="tiny"
+                onClick={() => handleTabChange(tab.id)}
+                icon={
+                  Icon ? (
+                    <Icon
+                      className={cn(
+                        'h-4 w-4',
+                        isActive ? tab.iconColor : 'text-foreground-lighter'
+                      )}
+                    />
+                  ) : undefined
+                }
+                className={cn('w-fit justify-start', isActive && 'bg-surface-300')}
+              >
+                <span className="flex items-center gap-1.5">
+                  {tab.label}
+                  <span className={cn('text-xs pl-1.5 min-w-[24px] text-center tabular-nums')}>
+                    {channelCounts[tab.id as keyof typeof channelCounts]}
+                  </span>
+                </span>
+              </Button>
+            )
+          })}
+        </div>
+
+        <div className="flex items-center gap-x-1.5 flex-1 md:justify-end w-full md:w-auto">
+          {/* Search Input */}
+          <form onSubmit={handleSearchSubmit} className="relative md:max-w-xs w-full flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-foreground-lighter" />
+            <Input_Shadcn_
+              type="text"
+              size="tiny"
+              placeholder="Search threads by title..."
+              value={searchInput}
+              onChange={(e) => setSearchInput(e.target.value)}
+              onKeyDown={handleSearchKeyDown}
+              className={cn('pl-10', searchInput && 'pr-10')}
+            />
+            {searchInput && (
+              <Button
+                type="text"
+                size="tiny"
+                icon={<X className="h-4 w-4" />}
+                onClick={handleClearSearch}
+                className="absolute right-2 px-1 top-1/2 transform -translate-y-1/2"
+                aria-label="Clear search"
+              />
+            )}
+          </form>
+
+          {/* Filter Button */}
+          <FilterPopover
+            allProductAreas={allProductAreas}
+            allStacks={allStacks}
+            trigger={
+              <Button type="default" icon={<Filter size={12} />}>
+                <span className="flex items-center gap-2">
+                  Filters
+                  {activeFilterCount > 0 && (
+                    <div className="flex items-center justify-center text-[10px] font-medium w-4 h-4 rounded-full text-center bg-black dark:bg-white text-contrast">
+                      {activeFilterCount}
+                    </div>
+                  )}
+                </span>
+              </Button>
+            }
+          />
+        </div>
+      </div>
+      <ThreadsTable threads={filteredThreads} productArea={productArea} search={search} />
+      {hasMore && (
+        <div className="flex justify-center mt-4">
+          <Button
+            type="default"
+            size="tiny"
+            onClick={handleLoadMore}
+            loading={isLoadingMore}
+            disabled={isLoadingMore}
+          >
+            Load more
+          </Button>
+        </div>
+      )}
+    </section>
+  )
+}
+
+function ThreadRow({
+  thread,
+  productArea,
+  search,
+}: {
+  thread: ThreadRow
+  productArea: string | null
+  search: string | null
+}) {
+  const [currentProductArea, setProductArea] = useQueryState(
+    'product_area',
+    parseAsString.withOptions({
+      shallow: false,
+    })
+  )
+  const [currentStack, setStack] = useQueryState(
+    'stack',
+    parseAsString.withOptions({
+      shallow: false,
+    })
+  )
+
+  function handleProductAreaClick(area: string) {
+    if (currentProductArea === area) {
+      setProductArea(null)
+    } else {
+      setProductArea(area)
+    }
+  }
+
+  function handleStackClick(tech: string) {
+    if (currentStack === tech) {
+      setStack(null)
+    } else {
+      setStack(tech)
+    }
+  }
+
+  return (
+    <TableRow className="relative group [&.hovering-badge>td]:hover:!bg-transparent">
+      {/* Thread title and product areas */}
+      <TableCell className="min-w-[400px]">
+        <div className="flex items-center gap-3 overflow-hidden">
+          {/* Channel icon */}
+          <div className="flex items-center justify-center bg-surface-200 h-10 w-10 rounded-md">
+            {thread.channel === 'discord' && (
+              <DiscordIcon
+                className={cn(
+                  'h-4 w-4',
+                  thread.channel === 'discord' ? 'text-[#5865F2]' : 'text-foreground-lighter'
+                )}
+              />
+            )}
+            {thread.channel === 'reddit' && (
+              <RedditIcon
+                className={cn(
+                  'h-4 w-4',
+                  thread.channel === 'reddit' ? 'text-[#FF4500]' : 'text-foreground-lighter'
+                )}
+              />
+            )}
+            {thread.channel === 'github' && (
+              <GitHubIcon
+                className={cn(
+                  'h-4 w-4',
+                  thread.channel === 'github' ? 'text-foreground' : 'text-foreground-lighter'
+                )}
+              />
+            )}
+          </div>
+          <div className="min-w-0 flex-1 flex flex-col gap-y-0.5">
+            {/* Thread title */}
+            <h3 className="text-base text-foreground truncate transition-[text-decoration] duration-100 underline-offset-2">
+              {highlightText(thread.title, search)}
+            </h3>
+            {/* Posted time and product areas */}
+            <div className="flex flex-row items-baseline gap-2 overflow-hidden">
+              {/* Posted time */}
+              <p className="text-xs text-foreground-lighter whitespace-nowrap">{thread.posted}</p>
+              {/* Product areas */}
+              {thread.product_areas.length > 0 &&
+                (() => {
+                  const filteredAreas = thread.product_areas.filter(
+                    (area: string) => area !== 'Other'
+                  )
+                  return filteredAreas.length > 0 ? (
+                    <div
+                      onMouseEnter={(e) => {
+                        const row = e.currentTarget.closest('tr')
+                        row?.classList.remove('group')
+                        row?.classList.add('hovering-badge')
+                      }}
+                      onMouseLeave={(e) => {
+                        const row = e.currentTarget.closest('tr')
+                        row?.classList.add('group')
+                        row?.classList.remove('hovering-badge')
+                      }}
+                      className="flex flex-wrap gap-x-1.5 gap-y-1 overflow-hidden"
+                    >
+                      {filteredAreas.map((area: string) => {
+                        const isActive = productArea === area
+                        return (
+                          <button
+                            key={area}
+                            onClick={(e) => {
+                              e.preventDefault()
+                              e.stopPropagation()
+                              handleProductAreaClick(area)
+                            }}
+                            type="button"
+                            className="relative z-10"
+                          >
+                            <Badge
+                              variant={isActive ? 'success' : 'default'}
+                              className="transition-all duration-150 hover:bg-brand-300/30 dark:hover:bg-brand-300/80"
+                            >
+                              {area}
+                            </Badge>
+                          </button>
+                        )
+                      })}
+                    </div>
+                  ) : null
+                })()}
+            </div>
+          </div>
+        </div>
+      </TableCell>
+      {/* Stack */}
+      <TableCell>
+        <div
+          onMouseEnter={(e) => {
+            const row = e.currentTarget.closest('tr')
+            row?.classList.remove('group')
+            row?.classList.add('hovering-badge')
+          }}
+          onMouseLeave={(e) => {
+            const row = e.currentTarget.closest('tr')
+            row?.classList.add('group')
+            row?.classList.remove('hovering-badge')
+          }}
+          className="flex flex-wrap gap-x-1.5 gap-y-0.5 overflow-hidden"
+        >
+          {thread.stack.length > 0 ? (
+            (() => {
+              const filteredStack = thread.stack.filter((tech: string) => tech !== 'Other')
+
+              // Check if active stack is in the overflow section
+              const overflowStacks = filteredStack.slice(5)
+              const hasActiveInOverflow = currentStack && overflowStacks.includes(currentStack)
+
+              return (
+                <>
+                  {filteredStack.slice(0, 5).map((tech: string) => {
+                    const isActive = currentStack === tech
+                    return (
+                      <button
+                        key={tech}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          handleStackClick(tech)
+                        }}
+                        type="button"
+                        className="relative z-10"
+                      >
+                        <Badge
+                          variant={isActive ? 'success' : 'default'}
+                          className="transition-all duration-150 hover:bg-brand-300/30 dark:hover:bg-brand-300/80"
+                        >
+                          {tech}
+                        </Badge>
+                      </button>
+                    )
+                  })}
+                  {filteredStack.length > 5 && (
+                    <Popover_Shadcn_>
+                      <PopoverTrigger_Shadcn_ asChild>
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                          }}
+                          onMouseEnter={(e) => {
+                            const row = e.currentTarget.closest('tr')
+                            row?.classList.remove('group')
+                            row?.classList.add('hovering-badge')
+                          }}
+                          onMouseLeave={(e) => {
+                            const row = e.currentTarget.closest('tr')
+                            row?.classList.add('group')
+                            row?.classList.remove('hovering-badge')
+                          }}
+                          className="relative z-10"
+                        >
+                          <Badge
+                            variant={hasActiveInOverflow ? 'success' : 'default'}
+                            className="transition-all duration-150 hover:bg-brand-200/50 dark:hover:bg-brand-300/80"
+                          >
+                            + {filteredStack.length - 5}
+                          </Badge>
+                        </button>
+                      </PopoverTrigger_Shadcn_>
+                      <PopoverContent_Shadcn_ className="max-w-[300px] p-3">
+                        <div className="flex flex-wrap gap-2">
+                          {overflowStacks.map((tech: string) => {
+                            const isActive = currentStack === tech
+                            return (
+                              <button
+                                key={tech}
+                                onClick={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  handleStackClick(tech)
+                                }}
+                                type="button"
+                              >
+                                <Badge
+                                  variant={isActive ? 'success' : 'default'}
+                                  className="transition-all duration-150 hover:bg-brand-200/50 hover:border-brand-300/50"
+                                >
+                                  {tech}
+                                </Badge>
+                              </button>
+                            )
+                          })}
+                        </div>
+                      </PopoverContent_Shadcn_>
+                    </Popover_Shadcn_>
+                  )}
+                </>
+              )
+            })()
+          ) : (
+            <p className="text-xs text-foreground-lighter">—</p>
+          )}
+        </div>
+      </TableCell>
+
+      {/* Replies */}
+      <TableCell className="text-right">
+        <div className="flex flex-row items-center gap-2">
+          {thread.message_count !== null && thread.message_count !== undefined && (
+            <MessageSquareReply
+              size={18}
+              strokeWidth={1.75}
+              className="text-foreground-muted mt-0.5"
+            />
+          )}
+          <p className="text-sm text-foreground-lighter whitespace-nowrap">
+            {thread.message_count !== null && thread.message_count !== undefined
+              ? Math.max(0, thread.message_count - 1)
+              : '—'}
+          </p>
+        </div>
+        {/* Floating link */}
+        <Link
+          href={`/contribute/t/${thread.id}`}
+          className="absolute inset-0 z-0"
+          aria-label={`View thread: ${thread.title}`}
+          tabIndex={1}
+        />
+      </TableCell>
+    </TableRow>
+  )
+}
+
+function highlightText(text: string, searchTerm: string | null): ReactNode {
+  if (!searchTerm || !searchTerm.trim()) {
+    return text
+  }
+
+  const searchLower = searchTerm.toLowerCase()
+  const textLower = text.toLowerCase()
+  const parts: ReactNode[] = []
+  let lastIndex = 0
+  let index = textLower.indexOf(searchLower, lastIndex)
+
+  while (index !== -1) {
+    // Add text before the match
+    if (index > lastIndex) {
+      parts.push(text.slice(lastIndex, index))
+    }
+    // Add the highlighted match
+    parts.push(
+      <mark key={index} className="bg-brand-200 dark:bg-brand-500 dark:!text-foreground px-0.5">
+        {text.slice(index, index + searchTerm.length)}
+      </mark>
+    )
+    lastIndex = index + searchTerm.length
+    index = textLower.indexOf(searchLower, lastIndex)
+  }
+
+  // Add remaining text after the last match
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex))
+  }
+
+  return parts.length > 0 ? <>{parts}</> : text
+}
diff --git a/apps/www/components/Contribute/UserProfile.tsx b/apps/www/components/Contribute/UserProfile.tsx
new file mode 100644
index 0000000000000..86756c6fdd75f
--- /dev/null
+++ b/apps/www/components/Contribute/UserProfile.tsx
@@ -0,0 +1,150 @@
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import { Badge, Button } from 'ui'
+import { DiscordIcon, GitHubIcon, RedditIcon } from '~/components/Contribute/Icons'
+import { getUserActivity } from '~/data/contribute'
+import type { ThreadRow } from '~/types/contribute'
+
+function ThreadCard({ thread }: { thread: ThreadRow }) {
+  return (
+    <Link
+      href={`/contribute/t/${thread.id}`}
+      className="border border-border rounded-lg p-4 bg-surface-75 hover:bg-surface-100 transition-colors min-w-0"
+    >
+      <div className="grid gap-2">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {thread.channel === 'discord' && <DiscordIcon className="h-4 w-4 text-[#5865F2]" />}
+          {thread.channel === 'reddit' && <RedditIcon className="h-4 w-4 text-[#FF4500]" />}
+          {thread.channel === 'github' && <GitHubIcon className="h-4 w-4 text-foreground" />}
+          <span className="capitalize">{thread.channel}</span>
+          <span>•</span>
+          <span>{thread.posted}</span>
+        </div>
+        <h3 className="text-foreground font-medium">{thread.title}</h3>
+        {thread.summary && (
+          <p className="text-sm text-foreground-light line-clamp-2">{thread.summary}</p>
+        )}
+        {thread.product_areas.filter((area) => area !== 'Other').length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {thread.product_areas
+              .filter((area) => area !== 'Other')
+              .slice(0, 3)
+              .map((area) => (
+                <Badge key={area} variant="default">
+                  {area}
+                </Badge>
+              ))}
+            {thread.product_areas.filter((area) => area !== 'Other').length > 3 && (
+              <Badge variant="default">
+                +{thread.product_areas.filter((area) => area !== 'Other').length - 3}
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+interface Reply {
+  id: string
+  author: string | null
+  content: string | null
+  ts: string | null
+  external_activity_url: string | null
+  thread_key: string | null
+}
+
+function ReplyCard({ reply, thread }: { reply: Reply; thread?: ThreadRow }) {
+  const platformName = thread?.channel
+    ? thread.channel.charAt(0).toUpperCase() + thread.channel.slice(1)
+    : 'platform'
+
+  return (
+    <div className="border border-border rounded-lg p-4 bg-surface-75 min-w-0">
+      <div className="grid gap-2">
+        {thread && (
+          <Link
+            href={`/contribute/t/${thread.id}`}
+            className="text-foreground-light text-sm hover:text-foreground transition-colors"
+          >
+            <span className="font-medium">Reply to:</span> {thread.title}
+          </Link>
+        )}
+        <p className="text-foreground text-sm line-clamp-3">{reply.content}</p>
+        <div className="flex items-center justify-between gap-2">
+          {reply.ts && (
+            <span className="text-xs text-muted-foreground">
+              {new Date(reply.ts).toLocaleString()}
+            </span>
+          )}
+          {reply.external_activity_url && (
+            <Button asChild type="default" size="tiny">
+              <a
+                href={reply.external_activity_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2"
+              >
+                View on {platformName}
+              </a>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export async function UserProfile({ username }: { username: string }) {
+  const { threads, replies, replyThreads, stats } = await getUserActivity(username)
+
+  if (threads.length === 0 && replies.length === 0) {
+    notFound()
+  }
+
+  return (
+    <div className="border border-border rounded-lg p-8 bg-surface-200">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl text-foreground mb-2">{username}</h1>
+        <div className="flex items-center gap-3 text-foreground-light">
+          <div className="flex items-center gap-2">
+            <span>{stats.threadCount}</span>
+            <span>{stats.threadCount === 1 ? 'thread' : 'threads'}</span>
+          </div>
+          <span>/</span>
+          <div className="flex items-center gap-2">
+            <span>{stats.replyCount}</span>
+            <span>{stats.replyCount === 1 ? 'reply' : 'replies'}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Threads Section */}
+      {threads.length > 0 && (
+        <div className="mb-8">
+          <h2 className="text-xl text-foreground mb-4">Threads created</h2>
+          <div className="grid gap-3">
+            {threads.map((thread) => (
+              <ThreadCard key={thread.id} thread={thread} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Replies Section */}
+      {replies.length > 0 && (
+        <div>
+          <h2 className="text-xl text-foreground mb-4">Recent replies</h2>
+          <div className="grid gap-3">
+            {replies.map((reply) => {
+              const thread = replyThreads.find((t) => t.thread_key === reply.thread_key)
+              return <ReplyCard key={reply.id} reply={reply} thread={thread} />
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/www/components/Contribute/markdownComponents.tsx b/apps/www/components/Contribute/markdownComponents.tsx
new file mode 100644
index 0000000000000..b25a316984534
--- /dev/null
+++ b/apps/www/components/Contribute/markdownComponents.tsx
@@ -0,0 +1,30 @@
+import type { Components } from 'react-markdown'
+
+export const markdownComponents: Components = {
+  code: ({ node, inline, ...props }) =>
+    inline ? (
+      <code
+        {...props}
+        className="bg-surface-200 text-foreground px-1.5 py-0.5 rounded text-sm font-mono"
+      />
+    ) : (
+      <code {...props} className="font-mono text-sm whitespace-pre block min-w-0" />
+    ),
+  pre: ({ node, ...props }) => (
+    <pre
+      {...props}
+      className="bg-surface-200 text-foreground p-4 rounded-lg mb-3 w-full min-w-0 overflow-x-auto"
+    />
+  ),
+  a: ({ node, ...props }) => (
+    <a
+      {...props}
+      className="text-brand-link hover:underline break-all"
+      target="_blank"
+      rel="noopener noreferrer"
+    />
+  ),
+  p: ({ node, ...props }) => <p {...props} className="mb-3 last:mb-0" />,
+  ul: ({ node, ordered, ...props }) => <ul {...props} className="list-disc pl-5 space-y-1 mb-3" />,
+  ol: ({ node, ...props }) => <ol {...props} className="list-decimal pl-5 space-y-1 mb-3" />,
+}
diff --git a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
index ac7e74a9991c4..67951fa8c9b2e 100644
--- a/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
+++ b/apps/www/components/Forms/ApplyToSupaSquadForm.tsx
@@ -54,6 +54,8 @@ interface Track {
 
 interface Props {
   className?: string
+  title?: string
+  description?: string
 }
 
 const tracks: Track[] = [
@@ -114,12 +116,6 @@ const languagesSpoken: string[] = [
   'Other',
 ]
 
-const headerContent = {
-  title: 'Apply to join SupaSquad',
-  description:
-    'Join our community of passionate contributors and help shape the future of Supabase. Fill out the form below to apply.',
-}
-
 const FormContent = memo(function FormContent({
   form,
   errors,
@@ -599,7 +595,11 @@ const FormContent = memo(function FormContent({
   )
 })
 
-const ApplyToSupaSquadForm: FC<Props> = ({ className }) => {
+const ApplyToSupaSquadForm: FC<Props> = ({
+  className,
+  title = 'Apply to join SupaSquad',
+  description = 'Join our community of passionate contributors and help shape the future of Supabase. Fill out the form below to apply.',
+}) => {
   const [honeypot, setHoneypot] = useState<string>('') // field to prevent spam
   const [errors, setErrors] = useState<{ [key: string]: string }>({})
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -687,8 +687,8 @@ const ApplyToSupaSquadForm: FC<Props> = ({ className }) => {
     <>
       <div className={className}>
         <div className="mb-6">
-          <h2 className="text-2xl font-semibold mb-2">{headerContent.title}</h2>
-          <p className="text-muted-foreground">{headerContent.description}</p>
+          <h2 className="text-2xl font-semibold mb-2">{title}</h2>
+          <p className="text-muted-foreground">{description}</p>
         </div>
 
         <Separator className="my-6" />
diff --git a/apps/www/data/Developers.tsx b/apps/www/data/Developers.tsx
index d3db471799f5d..4df52e7085ef8 100644
--- a/apps/www/data/Developers.tsx
+++ b/apps/www/data/Developers.tsx
@@ -1,8 +1,7 @@
-import { Calendar, SquarePlus } from 'lucide-react'
+import { Calendar, Pencil } from 'lucide-react'
 import {
   IconBriefcase2,
   IconChangelog,
-  IconDiscussions,
   IconDocumentation,
   IconGitHubSolid,
   IconIntegrations,
@@ -44,7 +43,7 @@ export const data = {
                 height="14.72"
                 rx="1.92"
                 stroke="currentColor"
-                stroke-width="1.28"
+                strokeWidth="1.28"
               />
               <path
                 d="M8.56519 4.69238H9.74564V8.94966C9.74564 9.41632 9.63534 9.82678 9.41473 10.181C9.19625 10.5353 8.88867 10.8121 8.492 11.0115C8.09534 11.2087 7.63185 11.3074 7.10155 11.3074C6.56913 11.3074 6.10458 11.2087 5.70791 11.0115C5.31125 10.8121 5.00367 10.5353 4.78519 10.181C4.5667 9.82678 4.45746 9.41632 4.45746 8.94966V4.69238H5.63791V8.85102C5.63791 9.12253 5.69731 9.36435 5.81609 9.57647C5.937 9.7886 6.1067 9.95511 6.32519 10.076C6.54367 10.1948 6.80246 10.2542 7.10155 10.2542C7.40064 10.2542 7.65943 10.1948 7.87791 10.076C8.09852 9.95511 8.26822 9.7886 8.387 9.57647C8.50579 9.36435 8.56519 9.12253 8.56519 8.85102V4.69238Z"
@@ -78,9 +77,10 @@ export const data = {
           icon: IconGitHubSolid,
         },
         {
-          text: 'GitHub Discussions',
-          url: 'https://github.com/orgs/supabase/discussions',
-          icon: IconDiscussions,
+          text: 'Contribute',
+          description: 'How to contribute to Supabase.',
+          url: '/contribute',
+          icon: () => <Pencil className="w-4 h-4" />,
         },
         {
           text: 'Become a Partner',
diff --git a/apps/www/data/contribute/index.ts b/apps/www/data/contribute/index.ts
new file mode 100644
index 0000000000000..16a9aadaa8301
--- /dev/null
+++ b/apps/www/data/contribute/index.ts
@@ -0,0 +1,339 @@
+import { createClient } from '@supabase/supabase-js'
+import type {
+  LeaderboardPeriod,
+  LeaderboardRow,
+  Thread,
+  ThreadRow,
+  ThreadSource,
+} from '~/types/contribute'
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_CONTRIBUTE_URL as string
+const supabasePublishableKey = process.env.NEXT_PUBLIC_SUPABASE_CONTRIBUTE_PUBLISHABLE_KEY as string
+
+function formatTimeAgo(date: Date): string {
+  const now = new Date()
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (diffInSeconds < 60) return `${diffInSeconds}s ago`
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`
+  return `${Math.floor(diffInSeconds / 86400)}d ago`
+}
+
+function normalizeSource(source: string | null): ThreadSource {
+  if (!source) return 'discord'
+  return source.toLowerCase().trim() as ThreadSource
+}
+
+function mapThreadRowToThread(row: Thread): ThreadRow {
+  const firstMsgTime = row.first_msg_time ? new Date(row.first_msg_time) : null
+  const source = normalizeSource(row.source)
+
+  return {
+    id: row.thread_id,
+    title: row.subject ?? row.title ?? '',
+    user: row.author,
+    channel: source,
+    conversation: row.conversation ?? '',
+    tags: row.product_areas ?? [],
+    product_areas: row.product_areas ?? [],
+    stack: row.stack ?? [],
+    posted:
+      firstMsgTime && !isNaN(firstMsgTime.getTime())
+        ? formatTimeAgo(firstMsgTime)
+        : row.created_at
+          ? formatTimeAgo(new Date(row.created_at))
+          : '',
+    source,
+    external_activity_url: row.external_activity_url ?? '#',
+    category: row.category,
+    sub_category: row.sub_category,
+    summary: row.summary,
+    thread_key: row.thread_key ?? null,
+    message_count: row.message_count ?? null,
+  }
+}
+
+export async function getChannelCounts(
+  product_area?: string | string[],
+  stack?: string | string[],
+  search?: string
+): Promise<{ all: number; discord: number; reddit: number; github: number }> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  const sevenDaysAgo = new Date()
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 30)
+  const since = sevenDaysAgo.toISOString()
+
+  let query = supabase.from('contribute_threads').select('source', { count: 'exact', head: false })
+
+  // When searching, don't apply time/status filters to allow finding any matching threads
+  if (!search || !search.trim()) {
+    query = query.gte('first_msg_time', since).in('status', ['unanswered', 'unresolved'])
+  }
+
+  if (product_area) {
+    const areas = Array.isArray(product_area) ? product_area : [product_area]
+    query = query.overlaps('product_areas', areas)
+  }
+
+  if (stack) {
+    const stacks = Array.isArray(stack) ? stack : [stack]
+    query = query.overlaps('stack', stacks)
+  }
+
+  if (search && search.trim()) {
+    const trimmedSearch = search.trim()
+    const searchTerm = `%${trimmedSearch}%`
+    query = query.ilike('subject', searchTerm)
+  }
+
+  const { data, error } = await query
+
+  if (error) {
+    console.error('Error fetching channel counts:', error)
+    return { all: 0, discord: 0, reddit: 0, github: 0 }
+  }
+
+  const threads = (data ?? []) as Array<{ source: string }>
+  const discord = threads.filter((t) => normalizeSource(t.source) === 'discord').length
+  const reddit = threads.filter((t) => normalizeSource(t.source) === 'reddit').length
+  const github = threads.filter((t) => normalizeSource(t.source) === 'github').length
+
+  return {
+    all: threads.length,
+    discord,
+    reddit,
+    github,
+  }
+}
+
+export async function getUnansweredThreads(
+  product_area?: string | string[],
+  channel?: string,
+  stack?: string | string[],
+  search?: string,
+  offset: number = 0,
+  limit: number = 100
+): Promise<ThreadRow[]> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  const sevenDaysAgo = new Date()
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 30)
+  const since = sevenDaysAgo.toISOString()
+
+  let query = supabase
+    .from('contribute_threads')
+    .select(
+      'thread_id, subject, status, author, external_activity_url, created_at, source, product_areas, stack, category, sub_category, summary, first_msg_time, message_count'
+    )
+
+  // When searching, don't apply time/status filters to allow finding any matching threads
+  if (!search || !search.trim()) {
+    query = query.gte('first_msg_time', since).in('status', ['unanswered', 'unresolved'])
+  }
+  // When searching, skip status filter to find threads regardless of status
+
+  if (product_area) {
+    const areas = Array.isArray(product_area) ? product_area : [product_area]
+    query = query.overlaps('product_areas', areas)
+  }
+
+  if (stack) {
+    const stacks = Array.isArray(stack) ? stack : [stack]
+    query = query.overlaps('stack', stacks)
+  }
+
+  if (channel && channel !== 'all') {
+    console.log('channel', channel)
+    query = query.eq('source', channel.toLowerCase())
+  }
+
+  if (search && search.trim()) {
+    const trimmedSearch = search.trim()
+    const searchTerm = `%${trimmedSearch}%`
+    query = query.ilike('subject', searchTerm)
+  }
+
+  const { data, error } = await query
+    // .gte("created_at", since)
+    .order('first_msg_time', { ascending: false })
+    .range(offset, offset + limit - 1)
+
+  if (error) {
+    console.error('Error fetching threads:', error)
+    console.error('Query details:', { search, product_area, channel, stack })
+    throw error
+  }
+
+  const threads = (data ?? []) as Thread[]
+  return threads.map(mapThreadRowToThread)
+}
+
+export async function getThreadById(id: string): Promise<ThreadRow | null> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  const { data, error } = await supabase
+    .from('contribute_threads')
+    .select(
+      'thread_id, subject, status, author, conversation, external_activity_url, created_at, source, product_areas, stack, category, sub_category, summary, first_msg_time, message_count, thread_key'
+    )
+    .eq('thread_id', id)
+    .single()
+
+  if (error) {
+    console.error('Error fetching thread:', error)
+    return null
+  }
+
+  if (!data) {
+    return null
+  }
+
+  return mapThreadRowToThread(data as Thread)
+}
+
+export async function getThreadRepliesById(thread_key: string | null) {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  if (!thread_key) {
+    return { question: null, replies: [] }
+  }
+
+  const { data, error } = await supabase
+    .from('contribute_posts')
+    .select('id, author, content, ts, external_activity_url, thread_key, kind')
+    .eq('thread_key', thread_key)
+    .in('kind', ['question', 'reply'])
+    .order('ts', { ascending: true })
+
+  if (error) {
+    console.error('Error fetching thread posts:', error)
+    return { question: null, replies: [] }
+  }
+
+  const question = data?.find((post) => post.kind === 'question') || null
+  const replies = data?.filter((post) => post.kind === 'reply') || []
+
+  return { question, replies }
+}
+
+export async function getAllProductAreas(): Promise<string[]> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  const { data, error } = await supabase
+    .from('contribute_threads')
+    .select('product_areas')
+    .in('status', ['unanswered', 'unresolved'])
+
+  if (error) {
+    console.error('Error fetching product areas:', error)
+    return []
+  }
+
+  const areas = new Set<string>()
+  data?.forEach((row: { product_areas: string[] | null }) => {
+    if (row.product_areas && Array.isArray(row.product_areas)) {
+      row.product_areas.forEach((area: string) => areas.add(area))
+    }
+  })
+
+  return Array.from(areas).sort()
+}
+
+export async function getAllStacks(): Promise<string[]> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  const { data, error } = await supabase
+    .from('contribute_threads')
+    .select('stack')
+    .in('status', ['unanswered', 'unresolved'])
+
+  if (error) {
+    console.error('Error fetching stacks:', error)
+    return []
+  }
+
+  const stacks = new Set<string>()
+  data?.forEach((row: { stack: string[] | null }) => {
+    if (row.stack && Array.isArray(row.stack)) {
+      row.stack.forEach((stack: string) => stacks.add(stack))
+    }
+  })
+
+  return Array.from(stacks).sort()
+}
+
+export const LEADERBOARD_PERIODS = ['all', 'year', 'quarter', 'month', 'week', 'today'] as const
+
+export async function getLeaderboard(
+  period: (typeof LEADERBOARD_PERIODS)[number]
+): Promise<LeaderboardRow[]> {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+  const { data, error } = await supabase.rpc('get_leaderboard', {
+    period: period,
+  })
+
+  if (error) throw error
+  return data ?? []
+}
+
+export async function getUserActivity(author: string) {
+  const supabase = createClient(supabaseUrl, supabasePublishableKey)
+
+  // Get user's threads
+  const { data: threads, error: threadsError } = await supabase
+    .from('contribute_threads')
+    .select(
+      'thread_id, subject, status, author, external_activity_url, created_at, source, product_areas, stack, category, sub_category, summary, first_msg_time, message_count, thread_key'
+    )
+    .eq('author', author)
+    .order('first_msg_time', { ascending: false })
+    .limit(50)
+
+  if (threadsError) {
+    console.error('Error fetching user threads:', threadsError)
+  }
+
+  // Get user's replies
+  const { data: replies, error: repliesError } = await supabase
+    .from('contribute_posts')
+    .select('id, author, content, ts, external_activity_url, thread_key, kind')
+    .eq('author', author)
+    .eq('kind', 'reply')
+    .order('ts', { ascending: false })
+    .limit(50)
+
+  if (repliesError) {
+    console.error('Error fetching user replies:', repliesError)
+  }
+
+  // Get thread information for replies
+  const threadKeys = replies?.map((r) => r.thread_key).filter(Boolean) ?? []
+  let replyThreads: Thread[] = []
+
+  if (threadKeys.length > 0) {
+    const { data: replyThreadsData, error: replyThreadsError } = await supabase
+      .from('contribute_threads')
+      .select(
+        'thread_id, subject, status, author, external_activity_url, created_at, source, product_areas, stack, category, sub_category, summary, first_msg_time, message_count, thread_key'
+      )
+      .in('thread_key', threadKeys)
+
+    if (replyThreadsError) {
+      console.error('Error fetching reply threads:', replyThreadsError)
+    } else {
+      replyThreads = (replyThreadsData ?? []) as Thread[]
+    }
+  }
+
+  return {
+    threads: threads ? threads.map((t) => mapThreadRowToThread(t as Thread)) : [],
+    replies: replies ?? [],
+    replyThreads: replyThreads.map((t) => mapThreadRowToThread(t)),
+    stats: {
+      threadCount: threads?.length ?? 0,
+      replyCount: replies?.length ?? 0,
+    },
+  }
+}
diff --git a/apps/www/data/solutions/solutions.utils.tsx b/apps/www/data/solutions/solutions.utils.tsx
index a80b0ba41b6dd..085e1e1ba37b5 100644
--- a/apps/www/data/solutions/solutions.utils.tsx
+++ b/apps/www/data/solutions/solutions.utils.tsx
@@ -66,7 +66,7 @@ export interface Feature {
 export interface FeaturesSection {
   id: string
   label?: string
-  heading: JSX.Element
+  heading: string | JSX.Element
   subheading?: string
   features: Feature[]
   // {
diff --git a/apps/www/lib/contribute.types.ts b/apps/www/lib/contribute.types.ts
new file mode 100644
index 0000000000000..bd01b24e60338
--- /dev/null
+++ b/apps/www/lib/contribute.types.ts
@@ -0,0 +1,318 @@
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]
+
+export type Database = {
+  // Allows to automatically instantiate createClient with right options
+  // instead of createClient<Database, { PostgrestVersion: 'XX' }>(URL, KEY)
+  __InternalSupabase: {
+    PostgrestVersion: '13.0.5'
+  }
+  public: {
+    Tables: {
+      contribute_posts: {
+        Row: {
+          activity_type: string | null
+          author: string | null
+          common_room_activity_url: string | null
+          content: string | null
+          external_activity_url: string | null
+          id: string
+          kind: string | null
+          raw: Json | null
+          service_name: string | null
+          source_id: string | null
+          tags: Json | null
+          thread_key: string | null
+          title: string | null
+          topics: Json | null
+          ts: string | null
+        }
+        Insert: {
+          activity_type?: string | null
+          author?: string | null
+          common_room_activity_url?: string | null
+          content?: string | null
+          external_activity_url?: string | null
+          id: string
+          kind?: string | null
+          raw?: Json | null
+          service_name?: string | null
+          source_id?: string | null
+          tags?: Json | null
+          thread_key?: string | null
+          title?: string | null
+          topics?: Json | null
+          ts?: string | null
+        }
+        Update: {
+          activity_type?: string | null
+          author?: string | null
+          common_room_activity_url?: string | null
+          content?: string | null
+          external_activity_url?: string | null
+          id?: string
+          kind?: string | null
+          raw?: Json | null
+          service_name?: string | null
+          source_id?: string | null
+          tags?: Json | null
+          thread_key?: string | null
+          title?: string | null
+          topics?: Json | null
+          ts?: string | null
+        }
+        Relationships: []
+      }
+      contribute_threads: {
+        Row: {
+          author: string
+          category: string | null
+          conversation: string
+          created_at: string | null
+          entities: string[] | null
+          external_activity_url: string | null
+          first_msg_time: string | null
+          id: string
+          labels: string[] | null
+          last_msg_time: string | null
+          message_count: number | null
+          metadata: Json | null
+          processed_at: string | null
+          product_areas: string[] | null
+          resolved_by: string | null
+          sentiment: string | null
+          source: string | null
+          stack: string[] | null
+          status: string | null
+          sub_category: string | null
+          subject: string | null
+          subject_embedding: string | null
+          summary: string | null
+          thread_id: string
+          thread_key: string | null
+          title: string
+          topic: string | null
+          topic_embedding: string | null
+          topic_id: string | null
+          updated_at: string | null
+        }
+        Insert: {
+          author: string
+          category?: string | null
+          conversation: string
+          created_at?: string | null
+          entities?: string[] | null
+          external_activity_url?: string | null
+          first_msg_time?: string | null
+          id?: string
+          labels?: string[] | null
+          last_msg_time?: string | null
+          message_count?: number | null
+          metadata?: Json | null
+          processed_at?: string | null
+          product_areas?: string[] | null
+          resolved_by?: string | null
+          sentiment?: string | null
+          source?: string | null
+          stack?: string[] | null
+          status?: string | null
+          sub_category?: string | null
+          subject?: string | null
+          subject_embedding?: string | null
+          summary?: string | null
+          thread_id: string
+          thread_key?: string | null
+          title: string
+          topic?: string | null
+          topic_embedding?: string | null
+          topic_id?: string | null
+          updated_at?: string | null
+        }
+        Update: {
+          author?: string
+          category?: string | null
+          conversation?: string
+          created_at?: string | null
+          entities?: string[] | null
+          external_activity_url?: string | null
+          first_msg_time?: string | null
+          id?: string
+          labels?: string[] | null
+          last_msg_time?: string | null
+          message_count?: number | null
+          metadata?: Json | null
+          processed_at?: string | null
+          product_areas?: string[] | null
+          resolved_by?: string | null
+          sentiment?: string | null
+          source?: string | null
+          stack?: string[] | null
+          status?: string | null
+          sub_category?: string | null
+          subject?: string | null
+          subject_embedding?: string | null
+          summary?: string | null
+          thread_id?: string
+          thread_key?: string | null
+          title?: string
+          topic?: string | null
+          topic_embedding?: string | null
+          topic_id?: string | null
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+    }
+    Views: {
+      v_contribute_pending_posts_to_threads: {
+        Row: {
+          activity_type: string | null
+          author: string | null
+          common_room_activity_url: string | null
+          content: string | null
+          external_activity_url: string | null
+          id: string | null
+          kind: string | null
+          raw: Json | null
+          service_name: string | null
+          source_id: string | null
+          tags: Json | null
+          thread_key: string | null
+          title: string | null
+          topics: Json | null
+          ts: string | null
+        }
+        Relationships: []
+      }
+    }
+    Functions: {
+      reprocess_stale_threads: { Args: never; Returns: undefined }
+    }
+    Enums: {
+      [_ in never]: never
+    }
+    CompositeTypes: {
+      [_ in never]: never
+    }
+  }
+}
+
+type DatabaseWithoutInternals = Omit<Database, '__InternalSupabase'>
+
+type DefaultSchema = DatabaseWithoutInternals[Extract<keyof Database, 'public'>]
+
+export type Tables<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof (DefaultSchema['Tables'] & DefaultSchema['Views'])
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
+        DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Views'])
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? (DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables'] &
+      DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R
+    }
+    ? R
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof (DefaultSchema['Tables'] & DefaultSchema['Views'])
+    ? (DefaultSchema['Tables'] & DefaultSchema['Views'])[DefaultSchemaTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
+    : never
+
+export type TablesInsert<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema['Tables']
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables']
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I
+    }
+    ? I
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
+    ? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
+    : never
+
+export type TablesUpdate<
+  DefaultSchemaTableNameOrOptions extends
+    | keyof DefaultSchema['Tables']
+    | { schema: keyof DatabaseWithoutInternals },
+  TableName extends DefaultSchemaTableNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables']
+    : never = never,
+> = DefaultSchemaTableNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U
+    }
+    ? U
+    : never
+  : DefaultSchemaTableNameOrOptions extends keyof DefaultSchema['Tables']
+    ? DefaultSchema['Tables'][DefaultSchemaTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
+    : never
+
+export type Enums<
+  DefaultSchemaEnumNameOrOptions extends
+    | keyof DefaultSchema['Enums']
+    | { schema: keyof DatabaseWithoutInternals },
+  EnumName extends DefaultSchemaEnumNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions['schema']]['Enums']
+    : never = never,
+> = DefaultSchemaEnumNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[DefaultSchemaEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : DefaultSchemaEnumNameOrOptions extends keyof DefaultSchema['Enums']
+    ? DefaultSchema['Enums'][DefaultSchemaEnumNameOrOptions]
+    : never
+
+export type CompositeTypes<
+  PublicCompositeTypeNameOrOptions extends
+    | keyof DefaultSchema['CompositeTypes']
+    | { schema: keyof DatabaseWithoutInternals },
+  CompositeTypeName extends PublicCompositeTypeNameOrOptions extends {
+    schema: keyof DatabaseWithoutInternals
+  }
+    ? keyof DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes']
+    : never = never,
+> = PublicCompositeTypeNameOrOptions extends {
+  schema: keyof DatabaseWithoutInternals
+}
+  ? DatabaseWithoutInternals[PublicCompositeTypeNameOrOptions['schema']]['CompositeTypes'][CompositeTypeName]
+  : PublicCompositeTypeNameOrOptions extends keyof DefaultSchema['CompositeTypes']
+    ? DefaultSchema['CompositeTypes'][PublicCompositeTypeNameOrOptions]
+    : never
+
+export const Constants = {
+  public: {
+    Enums: {},
+  },
+} as const
diff --git a/apps/www/public/images/contribute/ask-supabase.jpg b/apps/www/public/images/contribute/ask-supabase.jpg
new file mode 100644
index 0000000000000..b8e01fea95140
Binary files /dev/null and b/apps/www/public/images/contribute/ask-supabase.jpg differ
diff --git a/apps/www/types/contribute.ts b/apps/www/types/contribute.ts
new file mode 100644
index 0000000000000..576ced0f3a301
--- /dev/null
+++ b/apps/www/types/contribute.ts
@@ -0,0 +1,31 @@
+import { Tables } from '~/lib/contribute.types'
+
+export type Thread = Tables<'contribute_threads'>
+
+export type ThreadSource = 'discord' | 'reddit' | 'github'
+
+export interface ThreadRow {
+  id: string
+  title: string
+  conversation: string
+  user: string
+  channel: ThreadSource
+  tags: string[]
+  product_areas: string[]
+  stack: string[]
+  posted: string
+  source: ThreadSource
+  external_activity_url: string
+  category: string | null
+  sub_category: string | null
+  summary: string | null
+  thread_key: string | null
+  message_count: number | null
+}
+
+export type LeaderboardPeriod = 'all' | 'year' | 'quarter' | 'month' | 'week' | 'today'
+
+export type LeaderboardRow = {
+  author: string | null // sometimes author can be null
+  reply_count: number // bigint comes back as number via supabase-js
+}
diff --git a/packages/common/telemetry.tsx b/packages/common/telemetry.tsx
index 6205f41132dbb..07bf296cfbab4 100644
--- a/packages/common/telemetry.tsx
+++ b/packages/common/telemetry.tsx
@@ -280,7 +280,6 @@ export const PageTelemetry = ({
     if (
       (router?.isReady ?? true) &&
       hasAcceptedConsent &&
-      featureFlags.hasLoaded &&
       !hasSentInitialPageTelemetryRef.current
     ) {
       const cookies = document.cookie.split(';')
@@ -316,7 +315,7 @@ export const PageTelemetry = ({
 
       hasSentInitialPageTelemetryRef.current = true
     }
-  }, [router?.isReady, hasAcceptedConsent, featureFlags.hasLoaded, slug, ref])
+  }, [router?.isReady, hasAcceptedConsent, slug, ref])
 
   useEffect(() => {
     // For pages router