diff --git a/api/routes/web.py b/api/routes/web.py
index 3ee75dad5..817174510 100644
--- a/api/routes/web.py
+++ b/api/routes/web.py
@@ -11,7 +11,6 @@
 
 from fastapi import APIRouter
 from fastapi.responses import StreamingResponse
-from pydantic import BaseModel
 
 from api.utils.db import (
     Connection,
@@ -26,6 +25,7 @@
 from db.python.tables.participant import ParticipantFilter
 from db.python.tables.project import ProjectPermissionsTable
 from db.python.utils import GenericFilter, GenericMetaFilter
+from models.base import SMBase
 from models.enums.web import SeqrDatasetType
 from models.models.participant import NestedParticipant
 from models.models.project import ProjectId
@@ -35,7 +35,7 @@
 from models.utils.sequencing_group_id_format import sequencing_group_id_transform_to_raw
 
 
-class SearchResponseModel(BaseModel):
+class SearchResponseModel(SMBase):
     """Parent model class, allows flexibility later on"""
 
     responses: list[SearchResponse]
@@ -60,10 +60,10 @@ async def get_project_summary(
     return summary.to_external()
 
 
-class ProjectParticipantGridFilter(BaseModel):
+class ProjectParticipantGridFilter(SMBase):
     """filters for participant grid"""
 
-    class ParticipantGridParticipantFilter(BaseModel):
+    class ParticipantGridParticipantFilter(SMBase):
         """participant filter option for participant grid"""
 
         id: GenericFilter[int] | None = None
@@ -73,14 +73,14 @@ class ParticipantGridParticipantFilter(BaseModel):
         reported_gender: GenericFilter[str] | None = None
         karyotype: GenericFilter[str] | None = None
 
-    class ParticipantGridFamilyFilter(BaseModel):
+    class ParticipantGridFamilyFilter(SMBase):
         """family filter option for participant grid"""
 
         id: GenericFilter[int] | None = None
         external_id: GenericFilter[str] | None = None
         meta: GenericMetaFilter | None = None
 
-    class ParticipantGridSampleFilter(BaseModel):
+    class ParticipantGridSampleFilter(SMBase):
         """sample filter option for participant grid"""
 
         id: GenericFilter[str] | None = None
@@ -88,7 +88,7 @@ class ParticipantGridSampleFilter(BaseModel):
         external_id: GenericFilter[str] | None = None
         meta: GenericMetaFilter | None = None
 
-    class ParticipantGridSequencingGroupFilter(BaseModel):
+    class ParticipantGridSequencingGroupFilter(SMBase):
         """sequencing group filter option for participant grid"""
 
         id: GenericFilter[str] | None = None
@@ -98,7 +98,7 @@ class ParticipantGridSequencingGroupFilter(BaseModel):
         technology: GenericFilter[str] | None = None
         platform: GenericFilter[str] | None = None
 
-    class ParticipantGridAssayFilter(BaseModel):
+    class ParticipantGridAssayFilter(SMBase):
         """assay filter option for participant grid"""
 
         id: GenericFilter[int] | None = None
@@ -211,7 +211,7 @@ async def get_project_summary_with_limit(
     )
 
 
-class ExportProjectParticipantFields(BaseModel):
+class ExportProjectParticipantFields(SMBase):
     """fields for exporting project participants"""
 
     family_keys: list[str]
diff --git a/web/src/index.css b/web/src/index.css
index 892558bc9..e30475a83 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -12,9 +12,11 @@
     --color-bg-card: #fff;
     --color-bg-disabled-card: #eeeeee;
     --color-table-header: #eaeaea;
+    --color-text-red: #ff0000;
 
     --color-border-color: #c8c9ca;
     --color-border-default: #d0d7de;
+    --color-border-red: #f04848;
 
     --color-divider: rgba(0, 0, 0, 0.3);
 
@@ -43,11 +45,13 @@ html[data-theme='dark-mode'] {
 
     --color-border-color: #3a3a3a;
     --color-border-default: #292a2b;
+    --color-border-red: #921111;
     --color-divider: rgba(255, 255, 255, 0.2);
 
     --color-text-primary: rgba(255, 255, 255, 0.87);
     --color-text-medium: rgba(255, 255, 255, 0.6);
     --color-text-disabled: rgba(255, 255, 255, 0.38);
+    --color-text-red: #fb6f6f;
 
     --color-check-green: #659251;
     --color-table-header: rgba(0, 0, 0, 0.15);
@@ -150,6 +154,23 @@ blockquote {
     width: 100% !important;
 }
 
+.ui.accordion .title:not(.ui) {
+    color: var(--color-text-primary);
+}
+
+.ui .card {
+    background: var(--color-bg-card);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-default);
+}
+
+textarea {
+    background: var(--color-bg);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-default);
+
+}
+
 /* https://alexandergottlieb.com/2018/02/22/overflow-scroll-and-the-right-padding-problem-a-css-only-solution/ */
 .projectSummaryGrid::after {
     content: '';
diff --git a/web/src/pages/project/ExportProjectButton.tsx b/web/src/pages/project/ExportProjectButton.tsx
index ff14094d8..e2876a39b 100644
--- a/web/src/pages/project/ExportProjectButton.tsx
+++ b/web/src/pages/project/ExportProjectButton.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Button, Message } from 'semantic-ui-react'
+import { Button, ButtonGroup, Dropdown, Message } from 'semantic-ui-react'
 
 import _ from 'lodash'
 import {
@@ -10,6 +10,19 @@ import {
 } from '../../sm-api/api'
 import { MetaSearchEntityPrefix, ProjectGridHeaderGroup } from './ProjectColumnOptions'
 
+const extensionFromExportType = (exportType: ExportType) => {
+    switch (exportType) {
+        case ExportType.Csv:
+            return 'csv'
+        case ExportType.Tsv:
+            return 'tsv'
+        case ExportType.Json:
+            return 'json'
+        default:
+            return 'txt'
+    }
+}
+
 export const ProjectExportButton: React.FunctionComponent<{
     participants_in_query: number
     projectName: string
@@ -17,11 +30,13 @@ export const ProjectExportButton: React.FunctionComponent<{
     filterValues: ProjectParticipantGridFilter
     headerGroups: ProjectGridHeaderGroup[]
 }> = ({ filterValues, projectName, headerGroups, participants_in_query }) => {
+    const [exportType, setExportType] = React.useState<ExportType>(ExportType.Csv)
     const [isDownloading, setIsDownloading] = React.useState(false)
     const [downloadError, setDownloadError] = React.useState<string | undefined>(undefined)
     // const keys = Object.keys(headerGroups).reduce((prev, k) => ({...prev, k}), {})
 
-    const download = () => {
+    const download = (_exportType: ExportType) => {
+        if (!_exportType) return
         setIsDownloading(true)
         setDownloadError(undefined)
 
@@ -45,16 +60,21 @@ export const ProjectExportButton: React.FunctionComponent<{
                 .map((f) => f.name),
         }
         new WebApi()
-            .exportProjectParticipants(ExportType.Csv, projectName, {
+            .exportProjectParticipants(_exportType, projectName, {
                 query: filterValues,
                 fields: fields,
             })
             .then((resp) => {
                 setIsDownloading(false)
-                const url = window.URL.createObjectURL(new Blob([resp.data]))
+                let data = resp.data
+                if (_exportType == ExportType.Json) {
+                    data = JSON.stringify(data)
+                }
+                const url = window.URL.createObjectURL(new Blob([data]))
                 const link = document.createElement('a')
                 link.href = url
-                const defaultFilename = `project-export-${projectName}.csv`
+                const ext = extensionFromExportType(_exportType)
+                const defaultFilename = `project-export-${projectName}.${ext}`
                 link.setAttribute(
                     'download',
                     resp.headers['content-disposition']?.split('=')?.[1] || defaultFilename
@@ -64,11 +84,45 @@ export const ProjectExportButton: React.FunctionComponent<{
             })
             .catch((er) => setDownloadError(er.message))
     }
+
+    // onClick={() => download(ExportType.Csv)
+    const exportOptions = [
+        {
+            key: 'csv',
+            text: 'CSV',
+            value: ExportType.Csv,
+        },
+        {
+            key: 'tsv',
+            text: 'TSV',
+            value: ExportType.Tsv,
+        },
+        {
+            key: 'json',
+            text: 'JSON (all columns)',
+            value: ExportType.Json,
+        },
+    ]
+
     return (
         <>
-            <Button loading={isDownloading} onClick={download}>
-                Export {participants_in_query} participants: CSV
-            </Button>
+            <ButtonGroup>
+                <Button loading={isDownloading} onClick={() => download(exportType)}>
+                    Export {participants_in_query} participants
+                </Button>
+                <Dropdown
+                    className="button icon"
+                    icon="caret down"
+                    floating
+                    value={exportType}
+                    onChange={(e, data) => {
+                        debugger
+                        setExportType(data.value as ExportType)
+                        download(data.value as ExportType)
+                    }}
+                    options={exportOptions}
+                />
+            </ButtonGroup>
             {downloadError && (
                 <Message error>
                     <br />
diff --git a/web/src/pages/project/JsonEditor.tsx b/web/src/pages/project/JsonEditor.tsx
new file mode 100644
index 000000000..0b127b593
--- /dev/null
+++ b/web/src/pages/project/JsonEditor.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react'
+import { Button } from 'semantic-ui-react'
+
+interface JsonEditorProps {
+    jsonStr?: string
+    jsonObj?: any
+    onChange: (json: object) => void
+}
+
+export const JsonEditor: React.FunctionComponent<JsonEditorProps> = ({
+    jsonStr,
+    jsonObj,
+    onChange,
+}) => {
+    const [innerJsonValue, setInnerJsonValue] = React.useState<string>(
+        jsonObj ? JSON.stringify(jsonObj, null, 2) : jsonStr || ''
+    )
+    const [error, setError] = React.useState<string | undefined>(undefined)
+
+    React.useEffect(() => {
+        if (jsonObj) {
+            setInnerJsonValue(JSON.stringify(jsonObj, null, 2))
+            return
+        }
+        if (jsonStr) {
+            setInnerJsonValue(jsonStr)
+        }
+    }, [jsonStr, jsonObj])
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const value = e.target.value
+        setInnerJsonValue(value)
+        try {
+            const newJson = JSON.parse(value)
+            setError(undefined)
+        } catch (e: any) {
+            setError(e.message)
+        }
+    }
+
+    const submit = () => {
+        try {
+            const newJson = JSON.parse(innerJsonValue)
+            onChange(newJson)
+        } catch (e: any) {
+            setError(e.message)
+        }
+    }
+
+    return (
+        <div>
+            <textarea
+                value={innerJsonValue}
+                onChange={handleChange}
+                style={{
+                    width: '100%',
+                    height: '400px',
+                    border: !!error ? '3px solid var(--color-border-red)' : '1px solid #ccc',
+                    padding: '10px',
+                    fontFamily:
+                        'Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace',
+                }}
+            />
+            {error && (
+                <p>
+                    <em style={{ color: 'var(--color-text-red)' }}>{error}</em>
+                </p>
+            )}
+            <p>
+                <Button onClick={submit} disabled={!!error}>
+                    Apply
+                </Button>
+            </p>
+        </div>
+    )
+}
diff --git a/web/src/pages/project/ProjectColumnOptions.tsx b/web/src/pages/project/ProjectColumnOptions.tsx
index 3d092e0d7..91e33b05e 100644
--- a/web/src/pages/project/ProjectColumnOptions.tsx
+++ b/web/src/pages/project/ProjectColumnOptions.tsx
@@ -11,7 +11,7 @@ import {
     Segment,
 } from 'semantic-ui-react'
 import { ProjectParticipantGridFilter, ProjectParticipantGridResponse } from '../../sm-api'
-import { ValueFilter } from './ValueFilter'
+import { JsonEditor } from './JsonEditor'
 
 export enum MetaSearchEntityPrefix {
     F = 'family',
@@ -130,7 +130,13 @@ export const ProjectColumnOptions: React.FC<ProjectColumnOptionsProps> = ({
     }
 
     return (
-        <Card style={{ width: screen.width, padding: '20px' }}>
+        <Card
+            style={{
+                width: screen.width,
+                padding: '20px',
+                backgroundColor: 'var(--color-bg-card)',
+            }}
+        >
             <Accordion>
                 <AccordionTitle active={isOpen} onClick={() => setIsOpen(!isOpen)}>
                     <h3>Filter + display options</h3>
@@ -143,10 +149,15 @@ export const ProjectColumnOptions: React.FC<ProjectColumnOptionsProps> = ({
                             appear to freeze
                         </Message>
                     )}
-                    <Grid container columns={3} divided>
+                    <JsonEditor jsonObj={filterValues} onChange={updateFilters} />
+                    <br />
+                    <Grid container divided>
                         {headerGroups.map(({ category, fields }) => {
                             return (
-                                <Segment key={`project-col-option-${category}`}>
+                                <Segment
+                                    key={`project-col-option-${category}`}
+                                    style={{ marginLeft: '10px' }}
+                                >
                                     <h3>{_.startCase(category.replaceAll('_', ' '))}</h3>
                                     <table
                                         style={{
@@ -173,7 +184,7 @@ export const ProjectColumnOptions: React.FC<ProjectColumnOptionsProps> = ({
                                                                 }
                                                             />
                                                         </td>
-                                                        <td style={{ paddingLeft: '10px' }}>
+                                                        {/* <td style={{ paddingLeft: '10px' }}>
                                                             <ValueFilter
                                                                 category={category}
                                                                 filterKey={field.name}
@@ -181,7 +192,7 @@ export const ProjectColumnOptions: React.FC<ProjectColumnOptionsProps> = ({
                                                                 updateFilterValues={updateFilters}
                                                                 size="small"
                                                             />
-                                                        </td>
+                                                        </td> */}
                                                     </tr>
                                                 )
                                             })}
diff --git a/web/src/pages/project/ProjectGrid.tsx b/web/src/pages/project/ProjectGrid.tsx
index 82bf1d744..66b6122f2 100644
--- a/web/src/pages/project/ProjectGrid.tsx
+++ b/web/src/pages/project/ProjectGrid.tsx
@@ -14,9 +14,7 @@ import {
 } from '../../sm-api/api'
 import { ProjectExportButton } from './ExportProjectButton'
 import {
-    defaultHeaderGroupsFromResponse,
     MetaSearchEntityPrefix,
-    ProjectColumnOptions,
     ProjectGridField,
     ProjectGridHeaderGroup,
 } from './ProjectColumnOptions'
@@ -25,6 +23,8 @@ import { ValueFilterPopup } from './ValueFilter'
 interface ProjectGridProps {
     participantResponse?: ProjectParticipantGridResponse
     projectName: string
+
+    headerGroups: ProjectGridHeaderGroup[]
     filterValues: ProjectParticipantGridFilter
     updateFilters: (e: Partial<ProjectParticipantGridFilter>) => void
 }
@@ -32,6 +32,7 @@ interface ProjectGridProps {
 const ProjectGrid: React.FunctionComponent<ProjectGridProps> = ({
     participantResponse: summary,
     projectName,
+    headerGroups,
     filterValues,
     updateFilters,
 }) => {
@@ -43,10 +44,6 @@ const ProjectGrid: React.FunctionComponent<ProjectGridProps> = ({
         )
     }
 
-    const [headerGroups, setHeaderGroups] = React.useState<ProjectGridHeaderGroup[]>(
-        defaultHeaderGroupsFromResponse(summary)
-    )
-
     const headerGroupByCategory = _.keyBy(headerGroups, 'category')
 
     return (
@@ -57,13 +54,6 @@ const ProjectGrid: React.FunctionComponent<ProjectGridProps> = ({
                 filterValues={filterValues}
                 headerGroups={headerGroups}
             />
-            <ProjectColumnOptions
-                headerGroups={headerGroups}
-                setHeaderGroups={setHeaderGroups}
-                filterValues={filterValues}
-                updateFilters={updateFilters}
-                participantCount={summary.participants.length}
-            />
 
             <Table
                 className="projectSummaryGrid"
@@ -88,15 +78,21 @@ const ProjectGrid: React.FunctionComponent<ProjectGridProps> = ({
                         <ProjectGridParticipantRows
                             key={`participant-row-${p.id}`}
                             participant={p}
-                            familyFields={headerGroupByCategory[MetaSearchEntityPrefix.F].fields}
+                            familyFields={
+                                headerGroupByCategory[MetaSearchEntityPrefix.F]?.fields ?? []
+                            }
                             participantFields={
-                                headerGroupByCategory[MetaSearchEntityPrefix.P].fields
+                                headerGroupByCategory[MetaSearchEntityPrefix.P]?.fields ?? []
+                            }
+                            sampleFields={
+                                headerGroupByCategory[MetaSearchEntityPrefix.S]?.fields ?? []
                             }
-                            sampleFields={headerGroupByCategory[MetaSearchEntityPrefix.S].fields}
                             sequencingGroupFields={
-                                headerGroupByCategory[MetaSearchEntityPrefix.Sg].fields
+                                headerGroupByCategory[MetaSearchEntityPrefix.Sg]?.fields ?? []
+                            }
+                            assayFields={
+                                headerGroupByCategory[MetaSearchEntityPrefix.A]?.fields ?? []
                             }
-                            assayFields={headerGroupByCategory[MetaSearchEntityPrefix.A].fields}
                             projectName={projectName}
                             backgroundColor={
                                 pidx % 2 === 1 ? 'var(--color-bg)' : 'var(--color-bg-disabled)'
@@ -295,14 +291,12 @@ const ProjectGridParticipantRows: React.FC<IProjectGridParticipantRowProps> = ({
                                 }}
                                 rowSpan={participantRowSpan}
                             >
-                                {
-                                    <FamilyLink
-                                        id={participant.families.map((f) => f.id).join(', ')}
-                                        projectName={projectName}
-                                    >
-                                        {participant.families.map((f) => f.external_id).join(', ')}
-                                    </FamilyLink>
-                                }
+                                <FamilyLink
+                                    id={participant.families.map((f) => f.id).join(', ')}
+                                    projectName={projectName}
+                                >
+                                    {participant.families.map((f) => f.external_id).join(', ')}
+                                </FamilyLink>
                             </td>
                         )}
                         {isFirstOfGroup &&
diff --git a/web/src/pages/project/ProjectGridContainer.tsx b/web/src/pages/project/ProjectGridContainer.tsx
index e1ff100af..a307828ce 100644
--- a/web/src/pages/project/ProjectGridContainer.tsx
+++ b/web/src/pages/project/ProjectGridContainer.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash'
 import * as React from 'react'
 
+import { AxiosError } from 'axios'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { Button, Dropdown, Message } from 'semantic-ui-react'
 import LoadingDucks from '../../shared/components/LoadingDucks/LoadingDucks'
@@ -8,6 +9,11 @@ import MuckError from '../../shared/components/MuckError'
 import ErrorBoundary from '../../shared/utilities/errorBoundary'
 import { ProjectParticipantGridFilter, ProjectParticipantGridResponse, WebApi } from '../../sm-api'
 import PageOptions from './PageOptions'
+import {
+    defaultHeaderGroupsFromResponse,
+    ProjectColumnOptions,
+    ProjectGridHeaderGroup,
+} from './ProjectColumnOptions'
 import ProjectGrid from './ProjectGrid'
 
 interface IProjectGridContainerProps {
@@ -28,7 +34,8 @@ export const ProjectGridContainer: React.FunctionComponent<IProjectGridContainer
     const [searchParams] = useSearchParams()
 
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
-    let [error, setError] = React.useState<string | undefined>()
+    let [error, setError] = React.useState<React.ReactElement | undefined>()
+    const [headerGroups, setHeaderGroups] = React.useState<ProjectGridHeaderGroup[]>([])
 
     // fetched data
     const [participants, setParticipants] = React.useState<
@@ -84,9 +91,12 @@ export const ProjectGridContainer: React.FunctionComponent<IProjectGridContainer
         }
     }
 
-    const setFilterValues = (values: Partial<ProjectParticipantGridFilter>) => {
+    const setFilterValues = (
+        values: Partial<ProjectParticipantGridFilter>,
+        complete: boolean = false
+    ) => {
         setPageOptions({
-            filter: _.merge({}, filterOptions, values),
+            filter: complete ? values : _.merge({}, filterOptions, values),
             pageNumber: 1,
         })
     }
@@ -108,9 +118,16 @@ export const ProjectGridContainer: React.FunctionComponent<IProjectGridContainer
             .then((resp) => {
                 setParticipants(resp.data)
                 setIsLoading(false)
+                setHeaderGroups(defaultHeaderGroupsFromResponse(resp.data))
             })
-            .catch((er: Error) => {
-                setError(er.message)
+            .catch((er: AxiosError) => {
+                setError(
+                    <>
+                        An error occurred when fetching participants: {er.message}
+                        <br />
+                        <pre>{JSON.stringify(er.response?.data, null, 2)}</pre>
+                    </>
+                )
                 setIsLoading(false)
             })
     }
@@ -123,14 +140,25 @@ export const ProjectGridContainer: React.FunctionComponent<IProjectGridContainer
 
     const totalPageNumbers = Math.ceil((participants?.total_results || 0) / pageSize)
 
+    const projectColOptions = (
+        <ProjectColumnOptions
+            headerGroups={headerGroups}
+            setHeaderGroups={setHeaderGroups}
+            filterValues={filterOptions}
+            updateFilters={(values) => setFilterValues(values, true)}
+            participantCount={participants?.participants?.length ?? 0}
+        />
+    )
+
     if (isLoading) {
         return <LoadingDucks />
     }
     if (error) {
         return (
-            <MuckError
-                message={`Ah Muck, An error occurred when fetching project participants: ${error}`}
-            />
+            <>
+                {projectColOptions}
+                <MuckError>{error}</MuckError>
+            </>
         )
     }
 
@@ -192,9 +220,11 @@ export const ProjectGridContainer: React.FunctionComponent<IProjectGridContainer
                     title="participants"
                 />
             </div>
+            {projectColOptions}
             <ProjectGrid
                 participantResponse={participants}
                 projectName={projectName}
+                headerGroups={headerGroups}
                 updateFilters={setFilterValues}
                 filterValues={filterOptions}
             />
diff --git a/web/src/pages/project/ValueFilter.tsx b/web/src/pages/project/ValueFilter.tsx
index f5c26fa25..480e5dd9d 100644
--- a/web/src/pages/project/ValueFilter.tsx
+++ b/web/src/pages/project/ValueFilter.tsx
@@ -55,7 +55,7 @@ export const ValueFilter: React.FC<IValueFilter> = ({
         const f: GenericFilterAny = { icontains: value }
 
         const update: ProjectParticipantGridFilter = {
-            [category]: !isMeta ? { name: f } : { meta: { [name]: f } },
+            [category]: !isMeta ? { [name]: f } : { meta: { [name]: f } },
         }
 
         updateFilterValues(update)
diff --git a/web/src/shared/components/MuckError.tsx b/web/src/shared/components/MuckError.tsx
index 4894f031d..495d6ef36 100644
--- a/web/src/shared/components/MuckError.tsx
+++ b/web/src/shared/components/MuckError.tsx
@@ -1,13 +1,16 @@
 import * as React from 'react'
 
+import { Message } from 'semantic-ui-react'
 import MuckTheDuck from './MuckTheDuck'
 
 const MuckError: React.FunctionComponent<{
-    message: string
-}> = ({ message }) => (
-    <p>
-        <em>{message}</em> <MuckTheDuck height={28} style={{ transform: 'scaleY(-1)' }} />
-    </p>
+    message?: string
+}> = ({ message, children }) => (
+    <Message negative>
+        <MuckTheDuck height={28} style={{ transform: 'scaleY(-1)' }} />
+        <em>{message}</em>
+        {children}
+    </Message>
 )
 
 export default MuckError