diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 6d0d79be4..f74595a38 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -14,7 +14,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          submodules: true
+          submodules: 'recursive'
+          lfs: true
       - uses: actions/setup-node@v4
         with:
           node-version: 18
diff --git a/backend/cases/views_api.py b/backend/cases/views_api.py
index c84d84bfb..5b5c388bb 100644
--- a/backend/cases/views_api.py
+++ b/backend/cases/views_api.py
@@ -4,6 +4,7 @@
 from django.conf import settings
 from django.db import transaction
 from django.middleware.csrf import get_token
+from drf_spectacular.utils import OpenApiParameter, extend_schema, extend_schema_view
 from modelcluster.queryset import FakeQuerySet
 from projectroles.app_settings import AppSettingAPI
 from projectroles.views_api import (
@@ -60,6 +61,15 @@ class CasePagination(PageNumberPagination):
     max_page_size = 1000
 
 
+@extend_schema_view(
+    get=extend_schema(
+        parameters=[
+            OpenApiParameter(name="order_by", type=str),
+            OpenApiParameter(name="order_dir", type=str),
+            OpenApiParameter(name="q", type=str),
+        ]
+    )
+)
 class CaseListApiView(SODARAPIBaseProjectMixin, ListAPIView):
     """
     List all cases in the current project.
diff --git a/backend/varfish/tests/drf_openapi_schema/varfish_api_schema.yaml b/backend/varfish/tests/drf_openapi_schema/varfish_api_schema.yaml
index a997ce07d..46cd6d13d 100644
--- a/backend/varfish/tests/drf_openapi_schema/varfish_api_schema.yaml
+++ b/backend/varfish/tests/drf_openapi_schema/varfish_api_schema.yaml
@@ -856,6 +856,14 @@ paths:
 
         **Returns:** List of project details (see :py:class:`CaseRetrieveApiView`)
       parameters:
+      - in: query
+        name: order_by
+        schema:
+          type: string
+      - in: query
+        name: order_dir
+        schema:
+          type: string
       - name: page
         required: false
         in: query
@@ -874,6 +882,10 @@ paths:
           type: string
           pattern: ^[0-9a-f-]+$
         required: true
+      - in: query
+        name: q
+        schema:
+          type: string
       tags:
       - cases
       security:
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8fe425b2e..7123b4700 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,4 +1,5 @@
 /components.d.ts
+/test-results
 
 !/src
 !/ext/varfish-api/src/lib
diff --git a/frontend/end-to-end-tests/seqvar-filtration.spec.ts b/frontend/end-to-end-tests/seqvar-filtration.spec.ts
index 18453e7f3..18c102ecd 100644
--- a/frontend/end-to-end-tests/seqvar-filtration.spec.ts
+++ b/frontend/end-to-end-tests/seqvar-filtration.spec.ts
@@ -122,7 +122,7 @@ test.describe('genotype', () => {
 test.describe('genotype (recessive)', () => {
   test.beforeEach(async ({ page }) => {
     await page
-      .locator('button[aria-label="Create query based on recessive"]')
+      .locator('button[title="Create query based on recessive"]')
       .click()
   })
 
diff --git a/frontend/ext/varfish-api/src/lib/types.gen.ts b/frontend/ext/varfish-api/src/lib/types.gen.ts
index bc736802d..cd29f861e 100644
--- a/frontend/ext/varfish-api/src/lib/types.gen.ts
+++ b/frontend/ext/varfish-api/src/lib/types.gen.ts
@@ -3545,6 +3545,8 @@ export type CasesApiCaseListListData = {
         project: string;
     };
     query?: {
+        order_by?: string;
+        order_dir?: string;
         /**
          * A page number within the paginated result set.
          */
@@ -3553,6 +3555,7 @@ export type CasesApiCaseListListData = {
          * Number of results to return per page.
          */
         page_size?: number;
+        q?: string;
     };
 };
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 1cda0dd81..36c55e1dd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,11 +17,11 @@
         "@vueform/multiselect": "^2.6.7",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "@wdns/vuetify-resize-drawer": "^3.1.6",
         "bootstrap": "^4.6.2",
         "camelcase": "^8.0.0",
         "core-js": "^3.37.0",
         "fast-deep-equal": "^3.1.3",
-        "iconify-icon": "^2.1.0",
         "igv": "^2.15.11",
         "javascript-time-ago": "^2.5.10",
         "jquery": "^3.7.1",
@@ -2890,7 +2890,8 @@
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
-      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
     },
     "node_modules/@iconify/utils": {
       "version": "2.1.23",
@@ -8031,6 +8032,26 @@
         }
       }
     },
+    "node_modules/@wdns/vuetify-resize-drawer": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@wdns/vuetify-resize-drawer/-/vuetify-resize-drawer-3.1.6.tgz",
+      "integrity": "sha512-mye9lsiQVAlrELjBXit22PmXOEVDWUGR5k5tdFeKm82pk+nxBB7EVMCc+i+aFSmJMk8CAgk4uO5P8y+gaegWHA==",
+      "funding": [
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/webdevnerdstuff"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/WebDevNerdStuff"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.4.20",
+        "vuetify": "^3.5.6"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -14215,18 +14236,6 @@
         "ms": "^2.0.0"
       }
     },
-    "node_modules/iconify-icon": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-2.1.0.tgz",
-      "integrity": "sha512-lto4XU3bwTQnb+D/CsJ4dWAo0aDe+uPMxEtxyOodw9l7R9QnJUUab3GCehlw2M8mDHdeUu/ufx8PvRQiJphhXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@iconify/types": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/cyberalien"
-      }
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 196fc7fa2..e071c276d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,7 @@
     "build": "vite build --emptyOutDir",
     "test:unit": "vitest run",
     "test:unit:nocov": "vitest run",
+    "test:e2e": "playwright test",
     "lint": "eslint . --fix --max-warnings 0",
     "type-check": "vue-tsc --noEmit --composite false",
     "prettier-check": "npx prettier --check src/*/** tests/*/**",
@@ -24,11 +25,11 @@
     "@vueform/multiselect": "^2.6.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@wdns/vuetify-resize-drawer": "^3.1.6",
     "bootstrap": "^4.6.2",
     "camelcase": "^8.0.0",
     "core-js": "^3.37.0",
     "fast-deep-equal": "^3.1.3",
-    "iconify-icon": "^2.1.0",
     "igv": "^2.15.11",
     "javascript-time-ago": "^2.5.10",
     "jquery": "^3.7.1",
diff --git a/frontend/src/cases/components/CaseDetail/CardCase.vue b/frontend/src/cases/components/CaseDetail/CardCase.vue
index 4390a5923..5d5999ecb 100644
--- a/frontend/src/cases/components/CaseDetail/CardCase.vue
+++ b/frontend/src/cases/components/CaseDetail/CardCase.vue
@@ -96,6 +96,8 @@ const badgeStatusColor = computed(() => {
             Reference Genome
           </span>
           <span class="col-3"> {{ caseObj.release }} </span>
+          <span class="col-3 text-nowrap font-weight-bold"> Case Version </span>
+          <span class="col-3"> {{ caseObj.case_version }} </span>
         </div>
       </li>
       <li class="list-group-item pl-2">
diff --git a/frontend/src/cases/components/CaseDetail/Content.vue b/frontend/src/cases/components/CaseDetail/Content.vue
index edd2f35dc..da472c8d0 100644
--- a/frontend/src/cases/components/CaseDetail/Content.vue
+++ b/frontend/src/cases/components/CaseDetail/Content.vue
@@ -42,7 +42,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.overview"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <PaneCase
@@ -61,7 +61,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.qc && caseDetailsStore.caseObj"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <LegacyPaneQc v-if="caseDetailsStore.caseObj?.case_version !== 2" />
@@ -70,7 +70,7 @@ const caseQcStore = useCaseQcStore()
   <div
     v-if="props.currentTab === Tabs.annotation"
     id="case-list"
-    class="border border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
+    class="border-top-0 tab-pane fade show active flex-grow-1 d-flex flex-column"
     role="tabpanel"
   >
     <Suspense>
diff --git a/frontend/src/cases/components/CaseListTable/CaseListTable.vue b/frontend/src/cases/components/CaseListTable/CaseListTable.vue
index 07472443c..bc53d0e2f 100644
--- a/frontend/src/cases/components/CaseListTable/CaseListTable.vue
+++ b/frontend/src/cases/components/CaseListTable/CaseListTable.vue
@@ -1,27 +1,33 @@
 <script setup lang="ts">
-import { CaseListClient } from '@/cases/api/caseListClient'
+import { client } from '@hey-api/client-fetch'
+import { CasesService } from '@varfish-org/varfish-api/lib'
 import { useCaseListStore } from '@/cases/stores/caseList'
-import { useCtxStore } from '@/varfish/stores/ctx'
 import debounce from 'lodash.debounce'
 import { onMounted, ref } from 'vue'
 import { formatLargeInt, formatTimeAgo } from '@/varfish/helpers'
 import { Case, SortBy } from './types'
 import { getIndividuals } from './lib'
+import { SnackbarMessage } from '@/seqvars/views/PresetSets/lib'
 
+/** Props used in this component. */
 const props = defineProps<{
   projectUuid?: string
 }>()
 
-const ctxStore = useCtxStore()
-const caseListStore = useCaseListStore()
+/** This component's events. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emit = defineEmits<{
+  message: [message: SnackbarMessage]
+}>()
 
-const caseListClient = new CaseListClient(ctxStore.csrfToken)
+const caseListStore = useCaseListStore()
 
 const headers = [
   { title: '#', key: 'index', width: 50, sortable: false },
   { title: 'Case Name', key: 'name', width: 100, sortable: true },
   { title: 'Status', key: 'status', width: 100, sortable: true },
   { title: 'Individuals', key: 'individuals' },
+  { title: 'Case Version', key: 'case_version', sortable: true, width: 100 },
   { title: 'Small Vars', key: 'num_small_vars', sortable: true, width: 100 },
   { title: 'SVs', key: 'num_svs', sortable: true, width: 100 },
   { title: 'Creation', key: 'date_created', width: 150 },
@@ -64,14 +70,27 @@ const loadItems = async ({
     sortBy.length > 0 ? (sortBy[0].order === 'desc' ? 'desc' : 'asc') : 'asc'
 
   loading.value = true
-  const response = await caseListClient.listCase(props.projectUuid, {
-    pageNo: page - 1,
-    pageSize: itemsPerPage,
-    orderBy,
-    orderDir,
-    queryString: search.value,
+  const response = await CasesService.casesApiCaseListList({
+    client,
+    path: { project: props.projectUuid },
+    query: {
+      page,
+      pageSize: itemsPerPage,
+      order_by: orderBy,
+      order_dir: orderDir,
+      q: search.value,
+    },
   })
-  tableRows.value = response.results.map(transmogrify)
+  // Bail out and notify parent if there was an error.
+  if (!response.data) {
+    emit('message', {
+      text: 'Failed to load cases',
+      color: 'error',
+    })
+    return
+  }
+
+  tableRows.value = (response.data.results ?? []).map(transmogrify)
   loading.value = false
 }
 
diff --git a/frontend/src/cases/components/TheAppBar/TheAppBar.vue b/frontend/src/cases/components/TheAppBar/TheAppBar.vue
index c7a7bd30d..d33c0e2e2 100644
--- a/frontend/src/cases/components/TheAppBar/TheAppBar.vue
+++ b/frontend/src/cases/components/TheAppBar/TheAppBar.vue
@@ -1,8 +1,29 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import VarFishLogo from '@/varfish/components/VarFishLogo.vue'
-import 'iconify-icon'
 
-const navbarHidden = defineModel('navbarHidden', {
+/** The props used in this component. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(
+  defineProps<{
+    /** Whether to show the left panel button. */
+    showLeftPanelButton?: boolean
+    /** Whether to show the right panel button. */
+    showRightPanelButton?: boolean
+    /** The string to display as the title. */
+    title?: string
+  }>(),
+  { title: 'VarFish' },
+)
+
+/** Whether to show the left panel button. */
+const showLeftPanel = defineModel('showLeftPanel', {
+  type: Boolean,
+  default: true,
+})
+
+/** Whether to show the right panel button. */
+const showRightPanel = defineModel('showRightPanel', {
   type: Boolean,
   default: true,
 })
@@ -10,25 +31,42 @@ const navbarHidden = defineModel('navbarHidden', {
 
 <template>
   <v-app-bar color="primary" density="compact">
-    <template #prepend>
+    <template v-if="showLeftPanelButton" #prepend>
       <v-btn
         rounded="xl"
-        icon=""
-        :title="`${navbarHidden ? 'Show' : 'Hide'} the left sidebar.`"
-        @click="navbarHidden = !navbarHidden"
+        icon
+        :title="`${showLeftPanel ? 'Hide' : 'Show'} the left panel.`"
+        @click="showLeftPanel = !showLeftPanel"
       >
-        <iconify-icon
-          :icon="`material-symbols:left-panel-${navbarHidden ? 'open' : 'close'}`"
+        <Icon
+          :icon="`material-symbols:left-panel-${showLeftPanel ? 'close' : 'open'}`"
           style="font-size: 24px"
-        ></iconify-icon>
+        ></Icon>
       </v-btn>
     </template>
 
     <v-app-bar-title>
-      <div class="d-flex">
-        <VarFishLogo />
-        <div class="pl-2">VarFish</div>
-      </div>
+      <slot name="title">
+        <div class="d-flex">
+          <VarFishLogo />
+          <div class="pl-2">{{ title }}</div>
+        </div>
+      </slot>
     </v-app-bar-title>
+
+    <template v-if="showRightPanelButton" #append>
+      <slot name="append"> </slot>
+      <v-btn
+        rounded="xl"
+        icon
+        :title="`${showRightPanel ? 'Hide' : 'Show'} the right panel.`"
+        @click="showRightPanel = !showRightPanel"
+      >
+        <Icon
+          :icon="`material-symbols:right-panel-${showRightPanel ? 'close' : 'open'}`"
+          style="font-size: 24px"
+        ></Icon>
+      </v-btn>
+    </template>
   </v-app-bar>
 </template>
diff --git a/frontend/src/cases/components/TheNavBar/TheNavBar.vue b/frontend/src/cases/components/TheNavBar/TheNavBar.vue
index 5a50cec40..4b0ca51a3 100644
--- a/frontend/src/cases/components/TheNavBar/TheNavBar.vue
+++ b/frontend/src/cases/components/TheNavBar/TheNavBar.vue
@@ -3,10 +3,10 @@
 const props = withDefaults(
   defineProps<{
     /** Whether the navigation bar is hidden. */
-    navbarHidden: boolean
+    navbarShown: boolean
   }>(),
   {
-    navbarHidden: false,
+    navbarShown: true,
   },
 )
 </script>
@@ -16,7 +16,7 @@ const props = withDefaults(
     floating
     permanent
     color="grey-lighten-3"
-    :rail="navbarHidden"
+    :rail="!navbarShown"
   >
     <v-list density="compact">
       <slot></slot>
diff --git a/frontend/src/cases/router/index.ts b/frontend/src/cases/router/index.ts
index 81cbd3b1f..b581f16b2 100644
--- a/frontend/src/cases/router/index.ts
+++ b/frontend/src/cases/router/index.ts
@@ -2,6 +2,7 @@ import StrucvarDetails from '@/svs/views/StrucvarDetails/StrucvarDetails.vue'
 import StrucvarFilterLegacy from '@/svs/views/StrucvarFilterLegacy/StrucvarFilterLegacy.vue'
 import { useHistoryStore } from '@/varfish/stores/history'
 import SeqvarFilterLegacy from '@/variants/views/SeqvarFilterLegacy/SeqvarFilterLegacy.vue'
+import SeqvarsQuery from '@/seqvars/views/SeqvarsQuery/SeqvarsQuery.vue'
 import SeqvarDetails from '@/variants/views/SeqvarDetails/SeqvarDetails.vue'
 import {
   RouteLocationNormalized,
@@ -108,6 +109,15 @@ const routes: RouteRecordRaw[] = [
       currentTab: 'browser',
     }),
   },
+  {
+    name: 'seqvars-query',
+    path: '/-/cases/:project/seqvars/queries/:case',
+    component: SeqvarsQuery,
+    props: (route: RouteLocationNormalized) => ({
+      projectUuid: route.params.project,
+      caseUuid: route.params.case,
+    }),
+  },
   {
     name: 'variants-filter',
     path: '/-/cases/:project/variants/filter/:case',
diff --git a/frontend/src/cases/views/CaseDetail/CaseDetail.vue b/frontend/src/cases/views/CaseDetail/CaseDetail.vue
index a763cb039..8156dddb1 100644
--- a/frontend/src/cases/views/CaseDetail/CaseDetail.vue
+++ b/frontend/src/cases/views/CaseDetail/CaseDetail.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { useCaseDetailsStore } from '@/cases/stores/caseDetails'
 import { useCaseListStore } from '@/cases/stores/caseList'
 import TheAppBar from '@/cases/components/TheAppBar/TheAppBar.vue'
 import TheNavBar from '@/cases/components/TheNavBar/TheNavBar.vue'
 import CaseDetailPane from './CaseDetailPane.vue'
-import { ref } from 'vue'
+import { onBeforeMount, ref, watch } from 'vue'
 
 const paneRef = ref<typeof CaseDetailPane | undefined>(undefined)
 
@@ -16,19 +17,42 @@ const props = defineProps<{
   currentTab: string
 }>()
 
+const caseDetailsStore = useCaseDetailsStore()
 const caseListStore = useCaseListStore()
 
-// Whether to hide the navigation bar; component state.
-const navbarHidden = ref<boolean>(false)
+/** Whether to hide the navigation bar; component state. */
+const navbarShown = ref<boolean>(true)
 
+/** Returns whether the user has the given permissions. */
 const userHasPerms = (perm: string) =>
   caseListStore.userPerms && caseListStore.userPerms.includes(perm)
+
+/** Refresh the stores. */
+const refreshStores = async () => {
+  if (!props.caseUuid) {
+    return
+  }
+  await caseDetailsStore.initialize(props.projectUuid, props.caseUuid)
+}
+
+// Initialize (=refresh) stores when mounted.
+onBeforeMount(async () => refreshStores())
+
+// Refresh stores when the case UUID changes.
+watch(
+  () => props.caseUuid,
+  async () => refreshStores(),
+)
 </script>
 
 <template>
   <v-app id="case-detail">
-    <TheAppBar v-model:navbar-hidden="navbarHidden" />
-    <TheNavBar :navbar-hidden="navbarHidden">
+    <TheAppBar
+      v-model:show-left-panel="navbarShown"
+      :show-left-panel-button="true"
+      :show-right-panel-button="false"
+    />
+    <TheNavBar :navbar-shown="navbarShown">
       <v-list-item
         prepend-icon="mdi-arrow-left"
         :to="{
@@ -36,20 +60,20 @@ const userHasPerms = (perm: string) =>
           params: { project: props.projectUuid },
         }"
       >
-        <template v-if="!navbarHidden"> Back to Case List </template>
+        <template v-if="navbarShown"> Back to Case List </template>
       </v-list-item>
-      <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
+      <v-list-subheader v-if="navbarShown" class="text-uppercase">
         Case Overview
       </v-list-subheader>
       <v-list-item
-        :class="{ 'mt-3': navbarHidden }"
+        :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
         prepend-icon="mdi-account"
         :to="{
           name: 'case-detail-overview',
           params: { project: projectUuid, case: caseUuid },
         }"
       >
-        <template v-if="!navbarHidden"> Overview </template>
+        <template v-if="navbarShown"> Overview </template>
       </v-list-item>
       <v-list-item
         prepend-icon="mdi-chart-multiple"
@@ -58,7 +82,7 @@ const userHasPerms = (perm: string) =>
           params: { project: projectUuid, case: caseUuid },
         }"
       >
-        <template v-if="!navbarHidden"> Quality Control </template>
+        <template v-if="navbarShown"> Quality Control </template>
       </v-list-item>
       <v-list-item
         prepend-icon="mdi-bookmark-multiple"
@@ -67,75 +91,114 @@ const userHasPerms = (perm: string) =>
           params: { project: projectUuid, case: caseUuid },
         }"
       >
-        <template v-if="!navbarHidden"> Variant Annotation </template>
+        <template v-if="navbarShown"> Variant Annotation </template>
       </v-list-item>
 
-      <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
-        Variant Analysis
-      </v-list-subheader>
+      <template v-if="!caseDetailsStore.caseObj">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
+          Variant Analysis
+        </v-list-subheader>
+        <v-skeleton-loader
+          loading
+          type="list-item, list-item"
+          class="bg-background"
+        />
+      </template>
+      <template v-else-if="caseDetailsStore.caseObj.case_version == 1">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
+          Variant Analysis
+        </v-list-subheader>
 
-      <v-list-item
-        :class="{ 'mt-3': navbarHidden }"
-        prepend-icon="mdi-filter"
-        append-icon="mdi-arrow-right"
-        :to="{
-          name: 'variants-filter',
-          params: { case: caseUuid },
-        }"
-      >
-        <template v-if="!navbarHidden"> Filter Variants </template>
-      </v-list-item>
-      <v-list-item
-        prepend-icon="mdi-filter-variant"
-        append-icon="mdi-arrow-right"
-        :to="{
-          name: 'svs-filter',
-          params: { case: caseUuid },
-        }"
-      >
-        <template v-if="!navbarHidden"> Filter SVs </template>
-      </v-list-item>
+        <v-list-item
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
+          prepend-icon="mdi-filter"
+          append-icon="mdi-arrow-right"
+          :to="{
+            name: 'variants-filter',
+            params: { case: caseUuid },
+          }"
+        >
+          <template v-if="navbarShown"> Filter Variants </template>
+        </v-list-item>
+        <v-list-item
+          prepend-icon="mdi-filter-variant"
+          append-icon="mdi-arrow-right"
+          :to="{
+            name: 'svs-filter',
+            params: { case: caseUuid },
+          }"
+        >
+          <template v-if="navbarShown"> Filter SVs </template>
+        </v-list-item>
+      </template>
+      <template v-else>
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
+          Variant Analysis (V2)
+        </v-list-subheader>
+
+        <v-list-item
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
+          prepend-icon="mdi-filter"
+          append-icon="mdi-arrow-right"
+          :to="{
+            name: 'seqvars-query',
+            params: { projectUuid, caseUuid },
+          }"
+        >
+          <template v-if="navbarShown"> Filter Variants </template>
+        </v-list-item>
+        <v-list-item
+          prepend-icon="mdi-filter-variant"
+          append-icon="mdi-arrow-right"
+          :data-x-to="{
+            name: 'strucvars-filter',
+            params: { project: projectUuid, case: caseUuid },
+          }"
+        >
+          <template v-if="navbarShown"> Filter SVs </template>
+        </v-list-item>
+      </template>
 
       <template v-if="userHasPerms('cases.update_case')">
-        <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
           Case Operations
         </v-list-subheader>
 
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-filter-settings"
           link
           @click="paneRef!.handleEditQueryPresetsClicked()"
         >
-          <template v-if="!navbarHidden"> Edit Query Presets </template>
+          <template v-if="navbarShown"> Edit Query Presets </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-comment-plus"
           link
           @click="paneRef!.handleAddCaseCommentClicked()"
         >
-          <template v-if="!navbarHidden"> Add Comment </template>
+          <template v-if="navbarShown"> Add Comment </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-square-edit-outline"
           link
           @click="paneRef!.handleEditCaseStatusClicked()"
         >
-          <template v-if="!navbarHidden"> Edit Status </template>
+          <template v-if="navbarShown"> Edit Status </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-playlist-edit"
           link
           @click="paneRef!.handleEditCaseNotesClicked()"
         >
-          <template v-if="!navbarHidden"> Edit Notes </template>
+          <template v-if="navbarShown"> Edit Notes </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-file-document-edit"
           link
           @click="paneRef!.handleEditPedigreeClicked()"
         >
-          <template v-if="!navbarHidden"> Edit Pedigree </template>
+          <template v-if="navbarShown"> Edit Pedigree </template>
         </v-list-item>
         <v-list-item
           v-if="userHasPerms('cases.delete_case')"
@@ -145,7 +208,7 @@ const userHasPerms = (perm: string) =>
           class="dropdown-item text-danger"
           @click="paneRef!.handleDestroyCaseClicked()"
         >
-          <template v-if="!navbarHidden"> Delete Case </template>
+          <template v-if="navbarShown"> Delete Case </template>
         </v-list-item>
       </template>
     </TheNavBar>
diff --git a/frontend/src/cases/views/CaseList/CaseList.vue b/frontend/src/cases/views/CaseList/CaseList.vue
index 18b9e0eb5..fe4098e98 100644
--- a/frontend/src/cases/views/CaseList/CaseList.vue
+++ b/frontend/src/cases/views/CaseList/CaseList.vue
@@ -7,6 +7,7 @@ import { Tab } from './types'
 import QueryPresets from '@/variants/components/QueryPresets.vue'
 import TheAppBar from '@/cases/components/TheAppBar/TheAppBar.vue'
 import TheNavBar from '@/cases/components/TheNavBar/TheNavBar.vue'
+import { SnackbarMessage } from '@/seqvars/views/PresetSets/lib'
 
 import { useCaseListStore } from '@/cases/stores/caseList'
 import { useProjectStore } from '@/cases/stores/project/store'
@@ -24,7 +25,14 @@ const caseListStore = useCaseListStore()
 const projectStore = useProjectStore()
 
 // Whether to hide the navigation bar; component state.
-const navbarHidden = ref<boolean>(false)
+const navbarShown = ref<boolean>(true)
+/** Messages to display in VSnackbarQueue; component state. */
+const messages = ref<SnackbarMessage[]>([])
+
+/** Event handler for queueing message in VSnackbarQueue. */
+const queueMessage = (message: SnackbarMessage) => {
+  messages.value.push(message)
+}
 
 // Initialize case list store on mount.
 onMounted(() => {
@@ -44,26 +52,30 @@ watch(
 <template>
   <v-app id="case-list">
     <v-main>
-      <TheAppBar v-model:navbar-hidden="navbarHidden" />
-      <TheNavBar :navbar-hidden="navbarHidden">
+      <TheAppBar
+        v-model:show-left-panel="navbarShown"
+        :show-left-panel-button="true"
+        :show-right-panel-button="false"
+      />
+      <TheNavBar :navbar-shown="navbarShown">
         <v-list-item
           prepend-icon="mdi-arrow-left"
           :href="`/project/${projectStore.projectUuid}`"
         >
-          <template v-if="!navbarHidden"> Back to Project </template>
+          <template v-if="navbarShown"> Back to Project </template>
         </v-list-item>
-        <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
           Project Overview
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-format-list-bulleted-square"
           :to="{
             name: 'case-list',
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Case List </template>
+          <template v-if="navbarShown"> Case List </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-chart-multiple"
@@ -72,7 +84,7 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Quality Control </template>
+          <template v-if="navbarShown"> Quality Control </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-filter-settings"
@@ -81,7 +93,7 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Query Presets </template>
+          <template v-if="navbarShown"> Query Presets </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-numeric-2-box-multiple-outline"
@@ -90,12 +102,12 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Query Presets (V2) </template>
+          <template v-if="navbarShown"> Query Presets (V2) </template>
         </v-list-item>
       </TheNavBar>
       <div class="pa-3">
         <div v-if="props.currentTab === Tab.CASE_LIST">
-          <CaseListTable :project-uuid="projectUuid" />
+          <CaseListTable :project-uuid="projectUuid" @message="queueMessage" />
         </div>
         <div v-else-if="props.currentTab === Tab.QUALITY_CONTROL">
           <CaseListQc />
@@ -108,5 +120,10 @@ watch(
         </div>
       </div>
     </v-main>
+    <v-snackbar-queue
+      v-model="messages"
+      timer="5000"
+      close-on-content-click
+    ></v-snackbar-queue>
   </v-app>
 </template>
diff --git a/frontend/src/seqvars/App.vue b/frontend/src/seqvars/App.vue
index c9bdf7b12..4a2fafd91 100644
--- a/frontend/src/seqvars/App.vue
+++ b/frontend/src/seqvars/App.vue
@@ -55,11 +55,11 @@ watch(
   () => refreshStores(),
 )
 
-const presetDetails = computed(() =>
+const presetsDetails = computed(() =>
   [...seqvarsPresetsStore.presetSetVersions.values()].at(0),
 )
 </script>
 
 <template>
-  <SeqvarsFiltration v-if="presetDetails" :preset-details="presetDetails" />
+  <SeqvarsFiltration v-if="presetsDetails" :presets-details="presetsDetails" />
 </template>
diff --git a/frontend/src/seqvars/components/GeneDataTable/GeneDataTable.vue b/frontend/src/seqvars/components/GeneDataTable/GeneDataTable.vue
index 3abdc1d0c..7ddaab223 100644
--- a/frontend/src/seqvars/components/GeneDataTable/GeneDataTable.vue
+++ b/frontend/src/seqvars/components/GeneDataTable/GeneDataTable.vue
@@ -30,7 +30,7 @@ type GeneItem = {
 
 const props = defineProps<{
   selectedQueryIndex: number
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails
+  presetsDetails: SeqvarsQueryPresetsSetVersionDetails
   queries: Query[]
 }>()
 
diff --git a/frontend/src/seqvars/components/PredefinedQueryList.vue b/frontend/src/seqvars/components/PredefinedQueryList.vue
index bffa2914a..b0d94fbe2 100644
--- a/frontend/src/seqvars/components/PredefinedQueryList.vue
+++ b/frontend/src/seqvars/components/PredefinedQueryList.vue
@@ -11,20 +11,37 @@ import CollapsibleGroup from './ui/CollapsibleGroup.vue'
 import Item from './ui/Item.vue'
 import ItemButton from './ui/ItemButton.vue'
 
-const { presets, query } = defineProps<{
-  presets: SeqvarsQueryPresetsSetVersionDetails
-  query: Query | null
-}>()
+/** This component's props. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(
+  defineProps<{
+    /** The presets version to use. */
+    presets: SeqvarsQueryPresetsSetVersionDetails
+    /** The query that is being modified. */
+    query: Query | null
+    /** Whether hints are enabled. */
+    hintsEnabled?: boolean
+  }>(),
+  { hintsEnabled: false },
+)
+
+/** Currently selected predefined query, if any. */
 const selectedId = defineModel<string | undefined>('selectedId', {
   required: true,
 })
 
-defineEmits<{ addQuery: [preset: SeqvarsPredefinedQuery] }>()
+/** This component's events. */
+defineEmits<{
+  /** Create a query based on the predefined query. */
+  addQuery: [preset: SeqvarsPredefinedQuery]
+}>()
 </script>
 
 <template>
   <CollapsibleGroup
-    title="Presets"
+    title="Predefined Queries"
+    :hints-enabled="hintsEnabled"
+    hint="Create a new query using the buttons on the right. Selected predefined query settings for custom query."
     :summary="
       presets.seqvarspredefinedquery_set.find(
         (pq) => pq.sodar_uuid === selectedId,
@@ -41,12 +58,14 @@ defineEmits<{ addQuery: [preset: SeqvarsPredefinedQuery] }>()
         @revert="selectedId = pq.sodar_uuid"
       >
         <template #default>{{ pq.label }}</template>
-        <template #extra
-          ><ItemButton
-            :aria-label="`Create query based on ${pq.label}`"
+        <template #extra>
+          <ItemButton
+            :title="`Create query based on ${pq.label}`"
             @click="$emit('addQuery', pq)"
-            ><i-bi-filter style="font-size: 0.9em" /></ItemButton
-        ></template>
+          >
+            <v-icon icon="mdi-filter-variant-plus" size="xs" />
+          </ItemButton>
+        </template>
       </Item>
     </div>
   </CollapsibleGroup>
diff --git a/frontend/src/seqvars/components/QueryEditor/QueryEditor.stories.ts b/frontend/src/seqvars/components/QueryEditor/QueryEditor.stories.ts
new file mode 100644
index 000000000..b75d10395
--- /dev/null
+++ b/frontend/src/seqvars/components/QueryEditor/QueryEditor.stories.ts
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { delay, http, HttpResponse } from 'msw'
+
+import fixture from './fixture.QueryEditor.json'
+import QueryEditor from './QueryEditor.vue'
+
+const meta: Meta<typeof QueryEditor> = {
+  title: 'Seqvars / Query Editor',
+  component: QueryEditor,
+}
+
+export default meta
+
+type Story = StoryObj<typeof QueryEditor>
+
+export const Example: Story = {
+  render: () => ({
+    components: { QueryEditor },
+    setup() {
+      return { fixture }
+    },
+    template: '<QueryEditor :presetsDetails="fixture"  />',
+  }),
+  parameters: {
+    msw: {
+      handlers: [
+        http.get('/proxy/varfish/viguno/hpo/terms', async () => {
+          await delay(1000)
+          return HttpResponse.json({
+            version: { hpo: '2023-06-06', viguno: '0.2.0' },
+            query: {
+              term_id: null,
+              name: 'foobar',
+              max_results: 100,
+              genes: false,
+            },
+            result: [],
+          })
+        }),
+        http.get('/proxy/varfish/viguno/hpo/omims', async () => {
+          await delay(1000)
+          return HttpResponse.json({
+            version: { hpo: '2023-06-06', viguno: '0.2.0' },
+            query: {
+              omim_id: null,
+              name: 'early',
+              match_: 'contains',
+              max_results: 100,
+              hpo_terms: false,
+            },
+            result: [
+              {
+                omim_id: 'OMIM:165800',
+                name: 'Short stature and advanced bone age, with or without early-onset osteoarthritis and/or osteochondritis dissecans',
+              },
+              {
+                omim_id: 'OMIM:167320',
+                name: 'Inclusion body myopathy with early-onset paget disease with or without frontotemporal dementia 1',
+              },
+              {
+                omim_id: 'OMIM:208920',
+                name: 'Ataxia, early-onset, with oculomotor apraxia and hypoalbuminemia',
+              },
+            ],
+          })
+        }),
+      ],
+    },
+  },
+}
diff --git a/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue b/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue
new file mode 100644
index 000000000..3486a4879
--- /dev/null
+++ b/frontend/src/seqvars/components/QueryEditor/QueryEditor.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import {
+  SeqvarsGenotypePresetChoice,
+  SeqvarsPredefinedQuery,
+  SeqvarsQueryPresetsQuality,
+  SeqvarsQueryPresetsSetVersionDetails,
+} from '@varfish-org/varfish-api/lib'
+import { copy } from '@/varfish/helpers'
+
+import { GENOTYPE_PRESETS } from '@/seqvars/components/genotype/constants'
+import GenotypeControls from '@/seqvars/components/genotype/GenotypeControls.vue'
+import {
+  createGenotypeFromPreset,
+  createQualityFromPreset,
+  FilterGroup,
+  GROUPS,
+  matchesGenotypePreset,
+  matchesQualityPreset,
+} from '@/seqvars/components/groups'
+import PredefinedQueryList from '@/seqvars/components/PredefinedQueryList.vue'
+import QueryList from '@/seqvars/components/QueryList.vue'
+import CollapsibleGroup from '@/seqvars/components/ui/CollapsibleGroup.vue'
+import Hr from '@/seqvars/components/ui/Hr.vue'
+import Item from '@/seqvars/components/ui/Item.vue'
+import { Query } from '@/seqvars/types'
+import { SnackbarMessage } from '@/seqvars/views/PresetSets/lib'
+import { getQueryLabel } from '@/seqvars/utils'
+
+/** This component's props. */
+const props = withDefaults(
+  defineProps<{
+    /** Whether the containing VNavigationDrawer has been collapsed. */
+    collapsed: boolean
+    /** The presets version to use. */
+    presetsDetails: SeqvarsQueryPresetsSetVersionDetails
+    /** Where to teleport the queries to when collapsed. */
+    teleportToWhenCollapsed?: string
+    /** Whether to show labels in teleported queries. */
+    teleportedQueriesLabels?: boolean
+    /** Whether showing hints is enabled. */
+    hintsEnabled?: boolean
+  }>(),
+  {
+    collapsed: false,
+    teleportedQueriesLabels: false,
+    hintsEnabled: false,
+  },
+)
+
+/** This component's events. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emit = defineEmits<{
+  /** Emitted to display a message in the VSnakbarQueue (e.g., on errors). */
+  message: [message: SnackbarMessage]
+}>()
+
+const queries = ref<Query[]>([])
+const selectedQueryIndex = ref<number | null>(null)
+const selectedQuery = computed({
+  get() {
+    return selectedQueryIndex.value == null
+      ? null
+      : queries.value.at(selectedQueryIndex.value) ?? null
+  },
+  set(newValue) {
+    if (selectedQueryIndex.value == null || newValue == null) {
+      return
+    }
+    queries.value[selectedQueryIndex.value] = newValue
+  },
+})
+
+const selectedPredefinedQuery = computed(() =>
+  props.presetsDetails.seqvarspredefinedquery_set.find(
+    (pq) => pq.sodar_uuid === selectedQuery.value?.predefinedquery,
+  ),
+)
+
+const getGenotypeLabel = (key: SeqvarsGenotypePresetChoice) =>
+  key == 'any' ? 'any mode' : key.toLowerCase().split('_').join(' ')
+
+const createQuery = (pq: SeqvarsPredefinedQuery): Query => {
+  const presetFields = Object.fromEntries(
+    GROUPS.flatMap((group) => {
+      const preset = props.presetsDetails[group.presetSetKey].find(
+        (p) => p.sodar_uuid === pq[group.id],
+      )
+      return [
+        [group.queryPresetKey, pq[group.id]],
+        [
+          group.id,
+          group.id == 'quality'
+            ? createQualityFromPreset(preset as SeqvarsQueryPresetsQuality)
+            : preset,
+        ],
+      ]
+    }),
+  ) as Pick<Query, (typeof GROUPS)[number]['id']> & Partial<Query>
+  const choice = pq.genotype?.choice
+  return copy({
+    ...presetFields,
+    predefinedquery: pq.sodar_uuid,
+    genotype: createGenotypeFromPreset(choice),
+    genotypepresets: { choice },
+  })
+}
+
+const setToPreset = <G extends (typeof GROUPS)[number]>(
+  group: G,
+  preset: G extends FilterGroup<any, any, infer Preset> ? Preset : never,
+) => {
+  if (!selectedQuery.value) {
+    return
+  }
+  selectedQuery.value[`${group.id}presets`] = preset.sodar_uuid
+  const value =
+    group.id == 'quality'
+      ? createQualityFromPreset(preset as SeqvarsQueryPresetsQuality)
+      : preset
+  selectedQuery.value[group.id] = copy(value)
+}
+
+const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
+  if (!selectedQuery.value) {
+    return
+  }
+  selectedQuery.value.genotype = copy(createGenotypeFromPreset(choice))
+  selectedQuery.value.genotypepresets = { choice }
+}
+</script>
+
+<template>
+  <div style="height: 100%; overflow-y: auto; overflow-x: hidden">
+    <QueryList
+      v-if="queries.length > 0"
+      :selected-index="selectedQueryIndex"
+      :presets-details="presetsDetails"
+      :queries="queries"
+      :hints-enabled="hintsEnabled"
+      @update:selected-index="(index) => (selectedQueryIndex = index)"
+      @remove="(index) => queries.splice(index, 1)"
+      @revert="
+        () => {
+          const pq = presetsDetails.seqvarspredefinedquery_set.find(
+            (p) => p.sodar_uuid === selectedQuery?.predefinedquery,
+          )!
+          selectedQuery = createQuery(pq)
+        }
+      "
+    />
+
+    <!-- Teleport out the query list when hidden. -->
+    <Teleport
+      v-if="collapsed && teleportToWhenCollapsed && queries.length > 0"
+      :to="teleportToWhenCollapsed"
+    >
+      <v-list-subheader v-if="teleportedQueriesLabels" class="text-uppercase">
+        Queries
+      </v-list-subheader>
+      <v-divider v-else class="mt-1 mb-1"></v-divider>
+
+      <v-list-item
+        v-for="(query, index) in queries"
+        :key="index"
+        :variant="selectedQueryIndex === index ? 'tonal' : undefined"
+        :title="getQueryLabel({ presetsDetails, queries, index })"
+        :prepend-icon="'mdi-numeric-' + (index + 1) + '-box-outline'"
+        @click="selectedQueryIndex = index"
+      />
+    </Teleport>
+
+    <PredefinedQueryList
+      :hints-enabled="hintsEnabled"
+      :presets="presetsDetails"
+      :selected-id="selectedQuery?.predefinedquery"
+      :query="selectedQuery"
+      @update:selected-id="
+        (id) => {
+          const pq = presetsDetails.seqvarspredefinedquery_set.find(
+            (p) => p.sodar_uuid === id,
+          )!
+          selectedQuery = createQuery(pq)
+        }
+      "
+      @add-query="
+        (pq) => {
+          const query = createQuery(pq)
+          queries.push(query)
+          selectedQueryIndex = queries.length - 1
+        }
+      "
+    />
+
+    <template v-if="selectedQuery">
+      <CollapsibleGroup
+        title="Genotype"
+        :summary="
+          selectedQuery.genotypepresets?.choice
+            ? getGenotypeLabel(selectedQuery.genotypepresets?.choice)
+            : ''
+        "
+      >
+        <div
+          role="listbox"
+          style="width: 100%; display: flex; flex-direction: column"
+        >
+          <Item
+            v-for="key in Object.keys(
+              GENOTYPE_PRESETS,
+            ) as SeqvarsGenotypePresetChoice[]"
+            :key="key"
+            :selected="selectedQuery.genotypepresets?.choice == key"
+            :modified="
+              selectedPredefinedQuery &&
+              !matchesGenotypePreset(
+                selectedQuery.genotypepresets?.choice,
+                selectedQuery,
+              )
+            "
+            @click="() => setGenotypeToPreset(key)"
+            @revert="() => setGenotypeToPreset(key)"
+          >
+            {{ getGenotypeLabel(key) }}
+          </Item>
+        </div>
+        <Hr />
+        <GenotypeControls v-model="selectedQuery" />
+      </CollapsibleGroup>
+
+      <CollapsibleGroup
+        v-for="group in GROUPS"
+        :key="group.id"
+        :title="group.title"
+        :summary="
+          presetsDetails[group.presetSetKey].find(
+            (p) => p.sodar_uuid === selectedQuery?.[group.queryPresetKey],
+          )?.label
+        "
+      >
+        <div
+          role="listbox"
+          style="width: 100%; display: flex; flex-direction: column"
+        >
+          <Item
+            v-for="preset in presetsDetails[group.presetSetKey]"
+            :key="preset.sodar_uuid"
+            :selected="preset.sodar_uuid == selectedQuery[group.queryPresetKey]"
+            :modified="
+              !(
+                selectedPredefinedQuery &&
+                (group.id == 'quality'
+                  ? matchesQualityPreset(presetsDetails, selectedQuery)
+                  : group.matchesPreset(presetsDetails, selectedQuery))
+              )
+            "
+            @click="() => setToPreset(group, preset)"
+            @revert="() => setToPreset(group, preset)"
+          >
+            {{ preset.label }}
+          </Item>
+        </div>
+        <Hr />
+        <component :is="group.Component" v-model="selectedQuery" />
+      </CollapsibleGroup>
+    </template>
+  </div>
+</template>
diff --git a/frontend/src/seqvars/components/QueryEditor/fixture.QueryEditor.json b/frontend/src/seqvars/components/QueryEditor/fixture.QueryEditor.json
new file mode 100644
index 000000000..4ded58781
--- /dev/null
+++ b/frontend/src/seqvars/components/QueryEditor/fixture.QueryEditor.json
@@ -0,0 +1,1145 @@
+{
+  "sodar_uuid": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+  "date_created": "2024-07-01T00:00:00Z",
+  "date_modified": "2024-07-01T00:00:00Z",
+  "presetsset": {
+    "sodar_uuid": "b39cfd4b-8abe-4d78-8520-10116895cea8",
+    "date_created": "2024-07-01T00:00:00Z",
+    "date_modified": "2024-07-01T00:00:00Z",
+    "rank": 2,
+    "label": "short-read exome sequencing (modern)",
+    "description": "Settings for short-read exome sequencing with strict quality presets.  These settings are aimed at 'modern' WES sequencing where a target coverage of >=20x can be achieved for >=99% of the exome."
+  },
+  "version_major": 1,
+  "version_minor": 0,
+  "status": "active",
+  "signed_off_by": null,
+  "seqvarsquerypresetsquality_set": [
+    {
+      "sodar_uuid": "39850d17-0772-4aea-8a21-229039a40dfe",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "super strict",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "filter_active": true,
+      "min_dp_het": 10,
+      "min_dp_hom": 5,
+      "min_ab_het": 0.3,
+      "min_gq": 30,
+      "min_ad": 3,
+      "max_ad": null
+    },
+    {
+      "sodar_uuid": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "strict",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "filter_active": true,
+      "min_dp_het": 10,
+      "min_dp_hom": 5,
+      "min_ab_het": 0.2,
+      "min_gq": 10,
+      "min_ad": 3,
+      "max_ad": null
+    },
+    {
+      "sodar_uuid": "b0567812-8382-456e-8642-35eb281cdb93",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "relaxed",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "filter_active": true,
+      "min_dp_het": 8,
+      "min_dp_hom": 4,
+      "min_ab_het": 0.1,
+      "min_gq": 10,
+      "min_ad": 2,
+      "max_ad": null
+    },
+    {
+      "sodar_uuid": "a24eb80d-b189-4370-8d90-437bfd4f6854",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "any",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "filter_active": false,
+      "min_dp_het": null,
+      "min_dp_hom": null,
+      "min_ab_het": null,
+      "min_gq": null,
+      "min_ad": null,
+      "max_ad": null
+    }
+  ],
+  "seqvarsquerypresetsfrequency_set": [
+    {
+      "gnomad_exomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 1,
+        "hemizygous": null,
+        "frequency": 0.002
+      },
+      "gnomad_genomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 1,
+        "hemizygous": null,
+        "frequency": 0.002
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": true,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": 20
+      },
+      "sodar_uuid": "bd15349c-09af-4530-b5b9-80156fb59ea3",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "dominant super strict",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "gnomad_exomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 1,
+        "hemizygous": null,
+        "frequency": 0.002
+      },
+      "gnomad_genomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 1,
+        "hemizygous": null,
+        "frequency": 0.002
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": true,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": 20
+      },
+      "sodar_uuid": "d82e3ed6-bcaf-4c20-b1d8-fbc7b6ad2d73",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "dominant strict",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "gnomad_exomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 50,
+        "hemizygous": null,
+        "frequency": 0.01
+      },
+      "gnomad_genomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 20,
+        "hemizygous": null,
+        "frequency": 0.01
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": true,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": 20
+      },
+      "sodar_uuid": "5e9879ff-5422-47bb-8fbe-5628a7483d73",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "dominant relaxed",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "gnomad_exomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 120,
+        "hemizygous": null,
+        "frequency": 0.001
+      },
+      "gnomad_genomes": {
+        "enabled": true,
+        "homozygous": 0,
+        "heterozygous": 15,
+        "hemizygous": null,
+        "frequency": 0.001
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": true,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": 20
+      },
+      "sodar_uuid": "74211244-a16c-4327-b88b-78bdd49a72b4",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "recessive strict",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "gnomad_exomes": {
+        "enabled": true,
+        "homozygous": 20,
+        "heterozygous": 0,
+        "hemizygous": null,
+        "frequency": 0.01
+      },
+      "gnomad_genomes": {
+        "enabled": true,
+        "homozygous": 4,
+        "heterozygous": 150,
+        "hemizygous": null,
+        "frequency": 0.01
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": true,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": 20
+      },
+      "sodar_uuid": "268cdc62-8a60-4252-8d4d-6762970882be",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 5,
+      "label": "recessive relaxed",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "gnomad_exomes": {
+        "enabled": false,
+        "homozygous": null,
+        "heterozygous": null,
+        "hemizygous": null,
+        "frequency": null
+      },
+      "gnomad_genomes": {
+        "enabled": false,
+        "homozygous": null,
+        "heterozygous": null,
+        "hemizygous": null,
+        "frequency": null
+      },
+      "gnomad_mitochondrial": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "helixmtdb": {
+        "enabled": false,
+        "heteroplasmic": null,
+        "homoplasmic": null,
+        "frequency": null
+      },
+      "inhouse": {
+        "enabled": false,
+        "heterozygous": null,
+        "homozygous": null,
+        "hemizygous": null,
+        "carriers": null
+      },
+      "sodar_uuid": "fe56b1e5-74a0-4625-bbc3-6d973bb70669",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 6,
+      "label": "any",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetsconsequence_set": [
+    {
+      "variant_types": ["snv", "indel", "mnv", "complex_substitution"],
+      "transcript_types": ["coding", "non_coding"],
+      "variant_consequences": [
+        "frameshift_variant",
+        "rare_amino_acid_variant",
+        "splice_acceptor_variant",
+        "splice_donor_variant",
+        "start_lost",
+        "stop_gained",
+        "stop_lost",
+        "3_prime_UTR_truncation",
+        "5_prime_UTR_truncation",
+        "conservative_inframe_deletion",
+        "conservative_inframe_insertion",
+        "disruptive_inframe_deletion",
+        "disruptive_inframe_insertion",
+        "missense_variant",
+        "splice_region_variant",
+        "initiator_codon_variant",
+        "start_retained",
+        "stop_retained_variant",
+        "synonymous_variant",
+        "downstream_gene_variant",
+        "intron_variant",
+        "non_coding_transcript_exon_variant",
+        "non_coding_transcript_intron_variant",
+        "5_prime_UTR_variant",
+        "coding_sequence_variant",
+        "upstream_gene_variant",
+        "3_prime_UTR_variant-exon_variant",
+        "5_prime_UTR_variant-exon_variant",
+        "3_prime_UTR_variant-intron_variant",
+        "5_prime_UTR_variant-intron_variant"
+      ],
+      "max_distance_to_exon": null,
+      "sodar_uuid": "c41edca6-67b1-4551-974b-975360e09044",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "any",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_types": ["snv", "indel", "mnv", "complex_substitution"],
+      "transcript_types": ["coding"],
+      "variant_consequences": [
+        "frameshift_variant",
+        "rare_amino_acid_variant",
+        "splice_acceptor_variant",
+        "splice_donor_variant",
+        "start_lost",
+        "stop_gained",
+        "stop_lost"
+      ],
+      "max_distance_to_exon": null,
+      "sodar_uuid": "5bb88633-537c-4792-ab87-55c5b0f9aafc",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "null variant",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_types": ["snv", "indel", "mnv", "complex_substitution"],
+      "transcript_types": ["coding"],
+      "variant_consequences": [
+        "frameshift_variant",
+        "rare_amino_acid_variant",
+        "splice_acceptor_variant",
+        "splice_donor_variant",
+        "start_lost",
+        "stop_gained",
+        "stop_lost",
+        "conservative_inframe_deletion",
+        "conservative_inframe_insertion",
+        "disruptive_inframe_deletion",
+        "disruptive_inframe_insertion",
+        "missense_variant",
+        "splice_region_variant"
+      ],
+      "max_distance_to_exon": null,
+      "sodar_uuid": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "AA change + splicing",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_types": ["snv", "indel", "mnv", "complex_substitution"],
+      "transcript_types": ["coding", "non_coding"],
+      "variant_consequences": [
+        "frameshift_variant",
+        "rare_amino_acid_variant",
+        "splice_acceptor_variant",
+        "splice_donor_variant",
+        "start_lost",
+        "stop_gained",
+        "stop_lost",
+        "conservative_inframe_deletion",
+        "conservative_inframe_insertion",
+        "disruptive_inframe_deletion",
+        "disruptive_inframe_insertion",
+        "missense_variant",
+        "splice_region_variant",
+        "initiator_codon_variant",
+        "start_retained",
+        "stop_retained_variant",
+        "synonymous_variant",
+        "intron_variant",
+        "coding_sequence_variant"
+      ],
+      "max_distance_to_exon": null,
+      "sodar_uuid": "82d1d170-1cac-4d0b-a8b7-65989e022098",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "all coding + deep intronic",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_types": ["snv", "indel", "mnv", "complex_substitution"],
+      "transcript_types": ["coding", "non_coding"],
+      "variant_consequences": [
+        "frameshift_variant",
+        "rare_amino_acid_variant",
+        "splice_acceptor_variant",
+        "splice_donor_variant",
+        "start_lost",
+        "stop_gained",
+        "stop_lost",
+        "3_prime_UTR_truncation",
+        "5_prime_UTR_truncation",
+        "conservative_inframe_deletion",
+        "conservative_inframe_insertion",
+        "disruptive_inframe_deletion",
+        "disruptive_inframe_insertion",
+        "missense_variant",
+        "splice_region_variant",
+        "initiator_codon_variant",
+        "start_retained",
+        "stop_retained_variant",
+        "synonymous_variant",
+        "intron_variant",
+        "non_coding_transcript_exon_variant",
+        "non_coding_transcript_intron_variant",
+        "5_prime_UTR_variant",
+        "coding_sequence_variant",
+        "3_prime_UTR_variant-exon_variant",
+        "5_prime_UTR_variant-exon_variant",
+        "3_prime_UTR_variant-intron_variant",
+        "5_prime_UTR_variant-intron_variant"
+      ],
+      "max_distance_to_exon": null,
+      "sodar_uuid": "451ed237-1839-42d2-96af-b86411efe3fd",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 5,
+      "label": "whole transcript",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetslocus_set": [
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [],
+      "sodar_uuid": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "whole genome",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "1",
+          "range": null
+        },
+        {
+          "chromosome": "2",
+          "range": null
+        },
+        {
+          "chromosome": "3",
+          "range": null
+        },
+        {
+          "chromosome": "4",
+          "range": null
+        },
+        {
+          "chromosome": "5",
+          "range": null
+        },
+        {
+          "chromosome": "6",
+          "range": null
+        },
+        {
+          "chromosome": "7",
+          "range": null
+        },
+        {
+          "chromosome": "8",
+          "range": null
+        },
+        {
+          "chromosome": "9",
+          "range": null
+        },
+        {
+          "chromosome": "10",
+          "range": null
+        },
+        {
+          "chromosome": "11",
+          "range": null
+        },
+        {
+          "chromosome": "12",
+          "range": null
+        },
+        {
+          "chromosome": "13",
+          "range": null
+        },
+        {
+          "chromosome": "14",
+          "range": null
+        },
+        {
+          "chromosome": "15",
+          "range": null
+        },
+        {
+          "chromosome": "16",
+          "range": null
+        },
+        {
+          "chromosome": "17",
+          "range": null
+        },
+        {
+          "chromosome": "18",
+          "range": null
+        },
+        {
+          "chromosome": "19",
+          "range": null
+        },
+        {
+          "chromosome": "20",
+          "range": null
+        },
+        {
+          "chromosome": "21",
+          "range": null
+        },
+        {
+          "chromosome": "22",
+          "range": null
+        },
+        {
+          "chromosome": "X",
+          "range": null
+        },
+        {
+          "chromosome": "Y",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "4a2a3e41-f835-4314-9263-3d6da014c5d4",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "nuclear chromosomes",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "1",
+          "range": null
+        },
+        {
+          "chromosome": "2",
+          "range": null
+        },
+        {
+          "chromosome": "3",
+          "range": null
+        },
+        {
+          "chromosome": "4",
+          "range": null
+        },
+        {
+          "chromosome": "5",
+          "range": null
+        },
+        {
+          "chromosome": "6",
+          "range": null
+        },
+        {
+          "chromosome": "7",
+          "range": null
+        },
+        {
+          "chromosome": "8",
+          "range": null
+        },
+        {
+          "chromosome": "9",
+          "range": null
+        },
+        {
+          "chromosome": "10",
+          "range": null
+        },
+        {
+          "chromosome": "11",
+          "range": null
+        },
+        {
+          "chromosome": "12",
+          "range": null
+        },
+        {
+          "chromosome": "13",
+          "range": null
+        },
+        {
+          "chromosome": "14",
+          "range": null
+        },
+        {
+          "chromosome": "15",
+          "range": null
+        },
+        {
+          "chromosome": "16",
+          "range": null
+        },
+        {
+          "chromosome": "17",
+          "range": null
+        },
+        {
+          "chromosome": "18",
+          "range": null
+        },
+        {
+          "chromosome": "19",
+          "range": null
+        },
+        {
+          "chromosome": "20",
+          "range": null
+        },
+        {
+          "chromosome": "21",
+          "range": null
+        },
+        {
+          "chromosome": "22",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "18873255-62c8-44c1-9834-7f9608f5fa74",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "autosomes",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "X",
+          "range": null
+        },
+        {
+          "chromosome": "Y",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "30c9e507-eab9-4480-b9e2-1d297a2f15f0",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "gonosomes",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "X",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "bf4302b2-4223-453b-a14a-79023047a452",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 5,
+      "label": "X chromosome",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "Y",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "0b1f331b-0c98-4e86-86cc-ac693f7a9c53",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 6,
+      "label": "Y chromosome",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "genes": [],
+      "gene_panels": [],
+      "genome_regions": [
+        {
+          "chromosome": "MT",
+          "range": null
+        }
+      ],
+      "sodar_uuid": "ae0b60fd-d113-4b9a-b5e8-04cfac78b489",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 7,
+      "label": "MT genome",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetsphenotypeprio_set": [
+    {
+      "phenotype_prio_enabled": false,
+      "phenotype_prio_algorithm": "exomiser.hiphive_human",
+      "terms": [],
+      "sodar_uuid": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "disabled",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetsvariantprio_set": [
+    {
+      "variant_prio_enabled": false,
+      "services": [],
+      "sodar_uuid": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "disabled",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_prio_enabled": false,
+      "services": [
+        {
+          "name": "cadd",
+          "version": "1.6"
+        }
+      ],
+      "sodar_uuid": "47290348-0b2a-43a0-bcd4-48ced6e3facf",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "CADD",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "variant_prio_enabled": false,
+      "services": [
+        {
+          "name": "mutationtaster",
+          "version": "2021"
+        }
+      ],
+      "sodar_uuid": "e2164371-3920-4108-8260-d2cc2842cc58",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "MutationTaster",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetsclinvar_set": [
+    {
+      "clinvar_presence_required": false,
+      "clinvar_germline_aggregate_description": [],
+      "allow_conflicting_interpretations": false,
+      "sodar_uuid": "9a949347-c0e2-4124-947d-605303bc1158",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "disabled",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "clinvar_presence_required": true,
+      "clinvar_germline_aggregate_description": [
+        "pathogenic",
+        "likely_pathogenic"
+      ],
+      "allow_conflicting_interpretations": false,
+      "sodar_uuid": "481ffa49-8b0f-441e-8e55-e385a5940e13",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "Clinvar P/LP",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "clinvar_presence_required": true,
+      "clinvar_germline_aggregate_description": [
+        "pathogenic",
+        "likely_pathogenic"
+      ],
+      "allow_conflicting_interpretations": true,
+      "sodar_uuid": "90401dcc-5b4f-4f2c-b1c4-1106fea2658c",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "Clinvar P/LP +conflicting",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    },
+    {
+      "clinvar_presence_required": true,
+      "clinvar_germline_aggregate_description": [
+        "pathogenic",
+        "likely_pathogenic",
+        "uncertain_significance"
+      ],
+      "allow_conflicting_interpretations": true,
+      "sodar_uuid": "5c66c458-1c8c-457b-a78f-5a8532f4bdb0",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "ClinVar P/LP/VUS +conflicting",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarsquerypresetscolumns_set": [
+    {
+      "column_settings": [],
+      "sodar_uuid": "394aa1da-d68a-4f2d-9cc2-5c505712caa6",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "defaults",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f"
+    }
+  ],
+  "seqvarspredefinedquery_set": [
+    {
+      "sodar_uuid": "ffb91fd8-0f2c-4bfc-b779-e1eb9b527636",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 1,
+      "label": "defaults",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "any"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "d82e3ed6-bcaf-4c20-b1d8-fbc7b6ad2d73",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "ad05a008-0c48-4695-82be-277b6ee870af",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 2,
+      "label": "de novo",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "de_novo"
+      },
+      "quality": "39850d17-0772-4aea-8a21-229039a40dfe",
+      "frequency": "d82e3ed6-bcaf-4c20-b1d8-fbc7b6ad2d73",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "2486d632-1f5b-4a1a-b954-7b1e9f82af07",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 3,
+      "label": "dominant",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "dominant"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "d82e3ed6-bcaf-4c20-b1d8-fbc7b6ad2d73",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "bc333ff0-a477-41d4-aeb9-07252defcb3a",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 4,
+      "label": "homozygous recessive",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "homozygous_recessive"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "74211244-a16c-4327-b88b-78bdd49a72b4",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "a64108e7-9ea0-4917-8161-afd8d5e6ece5",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 5,
+      "label": "compound heterozygous",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "compound_heterozygous_recessive"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "74211244-a16c-4327-b88b-78bdd49a72b4",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "1024b6d5-a533-4e83-abc9-d0834b2fd3fb",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 6,
+      "label": "recessive",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "recessive"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "74211244-a16c-4327-b88b-78bdd49a72b4",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "6f6c866b-01b9-49d2-930e-16c145a5027c",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 7,
+      "label": "X recessive",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "x_recessive"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "74211244-a16c-4327-b88b-78bdd49a72b4",
+      "consequence": "4860f7d0-d76e-4b6f-96bc-f77c12d465da",
+      "locus": "bf4302b2-4223-453b-a14a-79023047a452",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "86113d33-b030-491d-adab-5aaf461f1f40",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 8,
+      "label": "ClinVar pathogenic",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "affected_carriers"
+      },
+      "quality": "a24eb80d-b189-4370-8d90-437bfd4f6854",
+      "frequency": "fe56b1e5-74a0-4625-bbc3-6d973bb70669",
+      "consequence": "c41edca6-67b1-4551-974b-975360e09044",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "90401dcc-5b4f-4f2c-b1c4-1106fea2658c",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "dba947cb-3150-4e85-ada0-9b93a060af85",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 9,
+      "label": "mitochondrial",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "affected_carriers"
+      },
+      "quality": "19a56746-0241-45e4-9195-9d9d1ddccf2d",
+      "frequency": "d82e3ed6-bcaf-4c20-b1d8-fbc7b6ad2d73",
+      "consequence": "c41edca6-67b1-4551-974b-975360e09044",
+      "locus": "ae0b60fd-d113-4b9a-b5e8-04cfac78b489",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    },
+    {
+      "sodar_uuid": "0f8f7bdb-d4a7-463b-baa2-ac82d733291e",
+      "date_created": "2024-07-01T00:00:00Z",
+      "date_modified": "2024-07-01T00:00:00Z",
+      "rank": 10,
+      "label": "whole genome",
+      "description": null,
+      "presetssetversion": "612b6cd5-2d39-45ab-9ddd-2106dcae6e9f",
+      "included_in_sop": false,
+      "genotype": {
+        "choice": "any"
+      },
+      "quality": "a24eb80d-b189-4370-8d90-437bfd4f6854",
+      "frequency": "fe56b1e5-74a0-4625-bbc3-6d973bb70669",
+      "consequence": "c41edca6-67b1-4551-974b-975360e09044",
+      "locus": "f1702cde-1b93-4513-90bf-eb96f57bfe7b",
+      "phenotypeprio": "feb9a31c-af0a-46c8-bc93-5110cb477e85",
+      "variantprio": "f92d470b-d1d2-484c-9dc2-b5d1588d6282",
+      "clinvar": "9a949347-c0e2-4124-947d-605303bc1158",
+      "columns": "394aa1da-d68a-4f2d-9cc2-5c505712caa6"
+    }
+  ]
+}
diff --git a/frontend/src/seqvars/components/QueryEditorDrawer/QueryEditorDrawer.vue b/frontend/src/seqvars/components/QueryEditorDrawer/QueryEditorDrawer.vue
new file mode 100644
index 000000000..8b4ba67bc
--- /dev/null
+++ b/frontend/src/seqvars/components/QueryEditorDrawer/QueryEditorDrawer.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import VResizeDrawer from '@wdns/vuetify-resize-drawer'
+
+/** Whether to show the drawer on the left side. */
+const drawerShown = defineModel<boolean>('drawerShown', {
+  default: true,
+})
+</script>
+
+<template>
+  <v-resize-drawer
+    v-model="drawerShown"
+    location="left"
+    resizable
+    save-width
+    touchless
+    min-width="200px"
+    max-width="50%"
+    width-snapback
+    handle-icon="mdi-drag"
+    handle-position="bottom"
+    storage-name="seqvars-query-editor-drawer"
+  >
+    <slot></slot>
+  </v-resize-drawer>
+</template>
diff --git a/frontend/src/seqvars/components/QueryList.vue b/frontend/src/seqvars/components/QueryList.vue
index 396b82896..444bd8bd9 100644
--- a/frontend/src/seqvars/components/QueryList.vue
+++ b/frontend/src/seqvars/components/QueryList.vue
@@ -12,19 +12,36 @@ import ItemButton from './ui/ItemButton.vue'
 const selectedIndex = defineModel<number | null>('selectedIndex', {
   required: true,
 })
-const { presetDetails, queries } = defineProps<{
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails
-  queries: Query[]
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(
+  defineProps<{
+    presetsDetails: SeqvarsQueryPresetsSetVersionDetails
+    queries: Query[]
+    hintsEnabled?: boolean
+  }>(),
+  {
+    hintsEnabled: false,
+  },
+)
+
+/** This component's events. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const emit = defineEmits<{
+  /** Remove the given query. */
+  remove: [index: number]
+  /** Revert modifications. */
+  revert: []
 }>()
-defineEmits<{ remove: [index: number]; revert: [] }>()
 </script>
 
 <template>
   <CollapsibleGroup
     title="Results"
+    :hints-enabled="hintsEnabled"
+    hinte="XXX"
     :summary="
       selectedIndex
-        ? `#${selectedIndex + 1} ${getQueryLabel({ presetDetails, queries, index: selectedIndex })}`
+        ? `#${selectedIndex + 1} ${getQueryLabel({ presetsDetails, queries, index: selectedIndex })}`
         : undefined
     "
   >
@@ -36,8 +53,8 @@ defineEmits<{ remove: [index: number]; revert: [] }>()
         :modified="
           !!query &&
           !matchesPredefinedQuery(
-            presetDetails,
-            presetDetails.seqvarspredefinedquery_set.find(
+            presetsDetails,
+            presetsDetails.seqvarspredefinedquery_set.find(
               (pq) => pq.sodar_uuid === query.predefinedquery,
             )!,
             query,
@@ -47,13 +64,13 @@ defineEmits<{ remove: [index: number]; revert: [] }>()
         @revert="$emit('revert')"
       >
         <template #default>
-          #{{ index + 1 }}
-          {{ getQueryLabel({ presetDetails, queries, index }) }}
+          <v-icon :icon="`mdi-numeric-${index + 1}-box-outline`" size="small" />
+          {{ getQueryLabel({ presetsDetails, queries, index }) }}
         </template>
         <template #extra>
-          <ItemButton @click="$emit('remove', index)"
-            ><i-mdi-close-box-outline
-          /></ItemButton>
+          <ItemButton title="Delete query" @click="$emit('remove', index)">
+            <v-icon icon="mdi-delete" size="xs" />
+          </ItemButton>
         </template>
       </Item>
     </div>
diff --git a/frontend/src/seqvars/components/SeqvarDetails/SeqvarDetails.vue b/frontend/src/seqvars/components/SeqvarDetails/SeqvarDetails.vue
new file mode 100644
index 000000000..bec2af378
--- /dev/null
+++ b/frontend/src/seqvars/components/SeqvarDetails/SeqvarDetails.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import VResizeDrawer from '@wdns/vuetify-resize-drawer'
+import { ref } from 'vue'
+
+/** Model with boolean that defines visibility. */
+const showSheet = defineModel('showSheet', {
+  type: Boolean,
+  default: false,
+})
+
+/** Whether the drawer is pinned (otherwise, will close when outside is clicked); component state. */
+const pinned = ref<boolean>(false)
+</script>
+
+<template>
+  <v-resize-drawer
+    v-model="showSheet"
+    location="right"
+    temporary
+    :scrim="!pinned"
+    resizable
+    save-width
+    touchless
+    min-width="200px"
+    max-width="80%"
+    width-snapback
+    handle-icon="mdi-drag"
+    handle-position="bottom"
+    storage-name="seqvars-details-drawer"
+  >
+    <template #prepend>
+      <div class="text-right">
+        <v-btn icon="" size="small" @click="pinned = !pinned">
+          <v-icon
+            :icon="pinned ? 'mdi-pin' : 'mdi-pin-outline'"
+            :class="{ 'pin-icon-rotate': !pinned }"
+          />
+        </v-btn>
+        <v-btn icon="" size="small" @click="showSheet = false">
+          <v-icon icon="mdi-close" />
+        </v-btn>
+      </div>
+    </template>
+
+    <v-divider></v-divider>
+  </v-resize-drawer>
+</template>
+
+<style scoped>
+.pin-icon-rotate {
+  transform: rotate(45deg);
+}
+</style>
diff --git a/frontend/src/seqvars/components/groups.ts b/frontend/src/seqvars/components/groups.ts
index 71e313c8c..05eed133c 100644
--- a/frontend/src/seqvars/components/groups.ts
+++ b/frontend/src/seqvars/components/groups.ts
@@ -62,9 +62,9 @@ export class FilterGroup<
     return `seqvarsquerypresets${this.id}_set` as const
   }
 
-  matchesPreset(presetDetails: PresetDetails, query: Query): boolean {
-    if (!isKeyOfObject(this.presetSetKey, presetDetails)) return false
-    const preset = presetDetails[this.presetSetKey].find(
+  matchesPreset(presetsDetails: PresetDetails, query: Query): boolean {
+    if (!isKeyOfObject(this.presetSetKey, presetsDetails)) return false
+    const preset = presetsDetails[this.presetSetKey].find(
       (p) =>
         isKeyOfObject(this.queryPresetKey, query) &&
         p.sodar_uuid === query[this.queryPresetKey],
@@ -197,23 +197,23 @@ export const createQualityFromPreset = (
 })
 
 export const matchesQualityPreset = (
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails,
+  presetsDetails: SeqvarsQueryPresetsSetVersionDetails,
   query: Query,
 ) => {
-  const preset = presetDetails.seqvarsquerypresetsquality_set.find(
+  const preset = presetsDetails.seqvarsquerypresetsquality_set.find(
     (p) => p.sodar_uuid === query.qualitypresets,
   )
   return !!preset && isEqual(query.quality, createQualityFromPreset(preset))
 }
 
 export const matchesPredefinedQuery = (
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails,
+  presetsDetails: SeqvarsQueryPresetsSetVersionDetails,
   pq: SeqvarsPredefinedQuery,
   query: Query,
 ) =>
   matchesGenotypePreset(pq.genotype?.choice, query) &&
   GROUPS.every((group) =>
     group.id == 'quality'
-      ? matchesQualityPreset(presetDetails, query)
-      : group.matchesPreset(presetDetails, query),
+      ? matchesQualityPreset(presetsDetails, query)
+      : group.matchesPreset(presetsDetails, query),
   )
diff --git a/frontend/src/seqvars/components/ui/CollapsibleGroup.vue b/frontend/src/seqvars/components/ui/CollapsibleGroup.vue
index d5e73f43e..8c3a2008e 100644
--- a/frontend/src/seqvars/components/ui/CollapsibleGroup.vue
+++ b/frontend/src/seqvars/components/ui/CollapsibleGroup.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const props = defineProps<{ title: string; summary?: string }>()
+import HintButton from './HintButton.vue'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    summary?: string
+    hintsEnabled?: boolean
+    hint?: string
+  }>(),
+  { hintsEnabled: false },
+)
 const isOpen = ref(true)
 </script>
 
@@ -23,6 +33,9 @@ const isOpen = ref(true)
       <div style="display: flex; flex-direction: column">
         <div class="group-title" style="margin-top: 1px">
           {{ props.title }}
+          <span v-if="hintsEnabled && hint" class="ml-auto">
+            <HintButton :text="hint" size="x-small" />
+          </span>
         </div>
         <div v-if="!isOpen">{{ summary }}</div>
       </div>
diff --git a/frontend/src/seqvars/components/ui/HintButton.vue b/frontend/src/seqvars/components/ui/HintButton.vue
new file mode 100644
index 000000000..7ec5c2bbf
--- /dev/null
+++ b/frontend/src/seqvars/components/ui/HintButton.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { VBtn } from 'vuetify/lib/components/index.mjs'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  text?: string
+  size?: string | number
+}>()
+
+const showTooltip = ref<boolean>(false)
+
+const closeTooltip = () => {
+  if (showTooltip.value) {
+    showTooltip.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeTooltip)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeTooltip)
+})
+</script>
+
+<template>
+  <v-tooltip
+    v-model="showTooltip"
+    :text="text"
+    :open-on-hover="false"
+    max-width="300px"
+  >
+    <template #activator="{ props: innerProps }">
+      <v-btn
+        icon="mdi-information-box"
+        variant="plain"
+        density="compact"
+        v-bind="innerProps"
+        :size="size"
+        @click.stop="showTooltip = !showTooltip"
+      />
+    </template>
+  </v-tooltip>
+</template>
diff --git a/frontend/src/seqvars/components/ui/Item.vue b/frontend/src/seqvars/components/ui/Item.vue
index 87801c3ef..ea8b44812 100644
--- a/frontend/src/seqvars/components/ui/Item.vue
+++ b/frontend/src/seqvars/components/ui/Item.vue
@@ -1,12 +1,23 @@
 <script setup lang="ts">
 import ItemButton from './ItemButton.vue'
-import ModifiedIcon from './ModifiedIcon.vue'
+import { Icon } from '@iconify/vue'
 
+/** This component's props. */
 const props = withDefaults(
-  defineProps<{ selected?: boolean; modified?: boolean }>(),
+  defineProps<{
+    /** Whether the item is selected. */
+    selected?: boolean
+    /** Whether the item has been modified. */
+    modified?: boolean
+  }>(),
   { selected: false, modified: false },
 )
-const emit = defineEmits<{ revert: [] }>()
+
+/** This component's events. */
+const emit = defineEmits<{
+  /** Revert modifications for this item. */
+  revert: []
+}>()
 </script>
 
 <template>
@@ -15,15 +26,20 @@ const emit = defineEmits<{ revert: [] }>()
       <slot />
     </button>
     <div style="display: flex; align-items: center">
-      <ModifiedIcon
+      <Icon
         v-if="props.selected && props.modified"
+        icon="mdi:alpha-m-box-outline"
+        color="#DC9E00"
         :data-test-modified="props.modified && props.selected ? '' : undefined"
+        title="There are modifications that you could revert."
       />
       <ItemButton
         v-if="props.selected && props.modified"
+        title="Revert modifications"
         @click="() => emit('revert')"
-        ><i-fluent-arrow-undo-20-regular style="font-size: 0.9em"
-      /></ItemButton>
+      >
+        <v-icon icon="mdi-undo-variant" size="xs" />
+      </ItemButton>
       <slot name="extra"></slot>
     </div>
   </div>
diff --git a/frontend/src/seqvars/utils.ts b/frontend/src/seqvars/utils.ts
index 534cf1645..d4e6d7599 100644
--- a/frontend/src/seqvars/utils.ts
+++ b/frontend/src/seqvars/utils.ts
@@ -3,16 +3,16 @@ import { SeqvarsQueryPresetsSetVersionDetails } from '@varfish-org/varfish-api/l
 import { Query } from '@/seqvars/types'
 
 export function getQueryLabel({
-  presetDetails,
+  presetsDetails,
   queries,
   index,
 }: {
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails
+  presetsDetails: SeqvarsQueryPresetsSetVersionDetails
   queries: Query[]
   index: number
 }) {
   const query = queries.at(index)
-  const presetLabel = presetDetails.seqvarspredefinedquery_set.find(
+  const presetLabel = presetsDetails.seqvarspredefinedquery_set.find(
     (pq) => pq.sodar_uuid === query?.predefinedquery,
   )?.label
   const othersCount = queries
diff --git a/frontend/src/seqvars/views/PresetSets/PresetSets.vue b/frontend/src/seqvars/views/PresetSets/PresetSets.vue
index 2d8b7ca5d..4593c0c66 100644
--- a/frontend/src/seqvars/views/PresetSets/PresetSets.vue
+++ b/frontend/src/seqvars/views/PresetSets/PresetSets.vue
@@ -22,7 +22,7 @@ const projectStore = useProjectStore()
 const seqvarsPresetsStore = useSeqvarsPresetsStore()
 
 /** Whether to hide the navigation bar; component state. */
-const navbarHidden = ref<boolean>(false)
+const navbarShown = ref<boolean>(true)
 /** Messages to display in VSnackbarQueue; component state. */
 const messages = ref<SnackbarMessage[]>([])
 
@@ -55,26 +55,30 @@ watch(
 <template>
   <v-app id="seqvars-presets-sets">
     <v-main>
-      <TheAppBar v-model:navbar-hidden="navbarHidden" />
-      <TheNavBar :navbar-hidden="navbarHidden">
+      <TheAppBar
+        v-model:show-left-panel="navbarShown"
+        :show-left-panel-button="true"
+        :show-right-panel-button="false"
+      />
+      <TheNavBar :navbar-shown="navbarShown">
         <v-list-item
           prepend-icon="mdi-arrow-left"
           :href="`/project/${projectStore.projectUuid}`"
         >
-          <template v-if="!navbarHidden"> Back to Project </template>
+          <template v-if="navbarShown"> Back to Project </template>
         </v-list-item>
-        <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
           Project Overview
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-format-list-bulleted-square"
           :to="{
             name: 'case-list',
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Case List </template>
+          <template v-if="navbarShown"> Case List </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-chart-multiple"
@@ -83,7 +87,7 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Quality Control </template>
+          <template v-if="navbarShown"> Quality Control </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-filter-settings"
@@ -92,7 +96,7 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Query Presets </template>
+          <template v-if="navbarShown"> Query Presets </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-numeric-2-box-multiple-outline"
@@ -101,7 +105,7 @@ watch(
             params: { project: projectStore.projectUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Query Presets (V2) </template>
+          <template v-if="navbarShown"> Query Presets (V2) </template>
         </v-list-item>
       </TheNavBar>
       <v-container class="py-2 px-6" fluid>
diff --git a/frontend/src/seqvars/views/SeqvarsFiltration.stories.ts b/frontend/src/seqvars/views/SeqvarsFiltration.stories.ts
index 948749cde..f56b88cbb 100644
--- a/frontend/src/seqvars/views/SeqvarsFiltration.stories.ts
+++ b/frontend/src/seqvars/views/SeqvarsFiltration.stories.ts
@@ -19,7 +19,7 @@ export const Example: Story = {
     setup() {
       return { fixture }
     },
-    template: '<SeqvarsFiltration :presetDetails="fixture"  />',
+    template: '<SeqvarsFiltration :presetsDetails="fixture"  />',
   }),
   parameters: {
     msw: {
diff --git a/frontend/src/seqvars/views/SeqvarsFiltration.vue b/frontend/src/seqvars/views/SeqvarsFiltration.vue
index 3726d49f7..8ebb700ea 100644
--- a/frontend/src/seqvars/views/SeqvarsFiltration.vue
+++ b/frontend/src/seqvars/views/SeqvarsFiltration.vue
@@ -29,8 +29,8 @@ import SidebarCollapseIcon from '@/seqvars/components/ui/SidebarCollapseIcon.vue
 import SidebarExpandIcon from '@/seqvars/components/ui/SidebarExpandIcon.vue'
 import { Query } from '@/seqvars/types'
 
-const { presetDetails } = defineProps<{
-  presetDetails: SeqvarsQueryPresetsSetVersionDetails
+const { presetsDetails } = defineProps<{
+  presetsDetails: SeqvarsQueryPresetsSetVersionDetails
 }>()
 
 const queries = ref<Query[]>([])
@@ -53,7 +53,7 @@ const selectedQuery = computed({
 })
 
 const selectedPredefinedQuery = computed(() =>
-  presetDetails.seqvarspredefinedquery_set.find(
+  presetsDetails.seqvarspredefinedquery_set.find(
     (pq) => pq.sodar_uuid === selectedQuery.value?.predefinedquery,
   ),
 )
@@ -64,7 +64,7 @@ const getGenotypeLabel = (key: SeqvarsGenotypePresetChoice) =>
 const createQuery = (pq: SeqvarsPredefinedQuery): Query => {
   const presetFields = Object.fromEntries(
     GROUPS.flatMap((group) => {
-      const preset = presetDetails[group.presetSetKey].find(
+      const preset = presetsDetails[group.presetSetKey].find(
         (p) => p.sodar_uuid === pq[group.id],
       )
       return [
@@ -151,13 +151,13 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
         <QueryList
           v-if="queries.length > 0"
           :selected-index="selectedQueryIndex"
-          :preset-details="presetDetails"
+          :presets-details="presetsDetails"
           :queries="queries"
           @update:selected-index="(index) => (selectedQueryIndex = index)"
           @remove="(index) => queries.splice(index, 1)"
           @revert="
             () => {
-              const pq = presetDetails.seqvarspredefinedquery_set.find(
+              const pq = presetsDetails.seqvarspredefinedquery_set.find(
                 (p) => p.sodar_uuid === selectedQuery?.predefinedquery,
               )!
               selectedQuery = createQuery(pq)
@@ -165,12 +165,12 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
           "
         />
         <PredefinedQueryList
-          :presets="presetDetails"
+          :presets="presetsDetails"
           :selected-id="selectedQuery?.predefinedquery"
           :query="selectedQuery"
           @update:selected-id="
             (id) => {
-              const pq = presetDetails.seqvarspredefinedquery_set.find(
+              const pq = presetsDetails.seqvarspredefinedquery_set.find(
                 (p) => p.sodar_uuid === id,
               )!
               selectedQuery = createQuery(pq)
@@ -227,7 +227,7 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
             :key="group.id"
             :title="group.title"
             :summary="
-              presetDetails[group.presetSetKey].find(
+              presetsDetails[group.presetSetKey].find(
                 (p) => p.sodar_uuid === selectedQuery?.[group.queryPresetKey],
               )?.label
             "
@@ -238,7 +238,7 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
               style="width: 100%; display: flex; flex-direction: column"
             >
               <Item
-                v-for="preset in presetDetails[group.presetSetKey]"
+                v-for="preset in presetsDetails[group.presetSetKey]"
                 :key="preset.sodar_uuid"
                 :selected="
                   preset.sodar_uuid == selectedQuery[group.queryPresetKey]
@@ -247,8 +247,8 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
                   !(
                     selectedPredefinedQuery &&
                     (group.id == 'quality'
-                      ? matchesQualityPreset(presetDetails, selectedQuery)
-                      : group.matchesPreset(presetDetails, selectedQuery))
+                      ? matchesQualityPreset(presetsDetails, selectedQuery)
+                      : group.matchesPreset(presetsDetails, selectedQuery))
                   )
                 "
                 @click="() => setToPreset(group, preset)"
@@ -278,7 +278,7 @@ const setGenotypeToPreset = (choice: SeqvarsGenotypePresetChoice) => {
       <GeneDataTable
         v-if="selectedQueryIndex != null"
         :selected-query-index="selectedQueryIndex"
-        :preset-details="presetDetails"
+        :presets-details="presetsDetails"
         :queries="queries"
         @show-details="(item) => (selectedGene = item)"
       />
diff --git a/frontend/src/seqvars/views/SeqvarsQuery/SeqvarsQuery.vue b/frontend/src/seqvars/views/SeqvarsQuery/SeqvarsQuery.vue
new file mode 100644
index 000000000..4e932cb5e
--- /dev/null
+++ b/frontend/src/seqvars/views/SeqvarsQuery/SeqvarsQuery.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { SnackbarMessage } from '@/seqvars/views/PresetSets/lib'
+
+import TheAppBar from '@/cases/components/TheAppBar/TheAppBar.vue'
+import TheNavBar from '@/cases/components/TheNavBar/TheNavBar.vue'
+import QueryEditor from '@/seqvars/components/QueryEditor/QueryEditor.vue'
+import QueryEditorDrawer from '@/seqvars/components/QueryEditorDrawer/QueryEditorDrawer.vue'
+import SeqvarDetails from '@/seqvars/components/SeqvarDetails/SeqvarDetails.vue'
+import HintButton from '@/seqvars/components/ui/HintButton.vue'
+import { useProjectStore } from '@/cases/stores/project'
+import { useSeqvarsPresetsStore } from '@/seqvars/stores/presets'
+import { SeqvarsQueryPresetsSetVersionDetails } from '@varfish-org/varfish-api/lib'
+import { useCaseDetailsStore } from '@/cases/stores/caseDetails'
+
+/** This component's props. */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  /** The project UUID. */
+  projectUuid?: string
+  /** The case UUID. */
+  caseUuid?: string
+}>()
+
+/** Whether to hide the navigation bar; component state. */
+const navbarShown = ref<boolean>(true)
+/** Whether to show the query editor. */
+const queryEditorShown = ref<boolean>(true)
+/** Whether to enable hints. */
+const hintsEnabled = ref<boolean>(true)
+/** Whether to hide the variant details pane; component state. */
+const detailsShown = ref<boolean>(false)
+// Messages to display in VSnackbarQueue; component state. */
+const messages = ref<SnackbarMessage[]>([])
+
+const caseDetailsStore = useCaseDetailsStore()
+const projectStore = useProjectStore()
+const seqvarsPresetsStore = useSeqvarsPresetsStore()
+
+/** (Re-)initialize the stores. */
+const initializeStores = async () => {
+  await Promise.all([
+    (async () => {
+      if (props.projectUuid && props.caseUuid) {
+        await caseDetailsStore.initialize(props.projectUuid, props.caseUuid)
+      }
+    })(),
+    projectStore.initialize(props.projectUuid),
+    seqvarsPresetsStore.initialize(props.projectUuid),
+  ])
+}
+
+/** The currently selected preset set for the case. */
+const selectedPresetSetVersion = computed<
+  SeqvarsQueryPresetsSetVersionDetails | undefined
+>(() => {
+  return seqvarsPresetsStore.presetSetVersions.values().next()?.value
+})
+
+/** Event handler for queueing message in VSnackbarQueue. */
+const queueMessage = (message: SnackbarMessage) => {
+  messages.value.push(message)
+}
+
+// Initialize case list store on mount.
+onMounted(async () => {
+  await initializeStores()
+})
+// Re-initialize case list store when the project changes.
+watch(
+  () => [props.projectUuid, props.caseUuid],
+  async () => {
+    await initializeStores()
+  },
+)
+</script>
+
+<template>
+  <v-app id="seqvars-query">
+    <TheAppBar
+      v-model:show-left-panel="navbarShown"
+      v-model:show-right-panel="detailsShown"
+      :show-left-panel-button="true"
+      :show-right-panel-button="true"
+      :title="
+        caseDetailsStore.caseObj?.name
+          ? `VarFish - ${caseDetailsStore.caseObj?.name}`
+          : undefined
+      "
+    />
+
+    <TheNavBar :navbar-shown="navbarShown">
+      <v-list-item
+        prepend-icon="mdi-arrow-left"
+        :to="{
+          name: 'case-detail-overview',
+          params: { project: projectUuid, case: caseUuid },
+        }"
+      >
+        <template v-if="navbarShown"> Back to Case </template>
+      </v-list-item>
+
+      <v-list-subheader v-if="navbarShown" class="text-uppercase">
+        Variant Analysis (V2)
+      </v-list-subheader>
+      <v-divider v-else class="mt-1 mb-1"></v-divider>
+      <v-list-item
+        prepend-icon="mdi-filter-variant"
+        :data-x-to="{
+          name: 'strucvars-query',
+          params: { case: caseUuid },
+        }"
+      >
+        <template v-if="navbarShown"> Go To SV Filtration </template>
+      </v-list-item>
+
+      <v-list-subheader v-if="navbarShown" class="text-uppercase">
+        Analysis Information
+      </v-list-subheader>
+      <v-divider v-else class="mt-1 mb-1"></v-divider>
+
+      <v-list-item
+        prepend-icon="mdi-tune"
+        @click="queryEditorShown = !queryEditorShown"
+      >
+        <template v-if="navbarShown"> Query Editor </template>
+        <template #append>
+          <v-btn icon variant="plain" density="compact" readonly>
+            <Icon
+              :icon="`material-symbols:left-panel-${queryEditorShown ? 'close' : 'open'}-outline`"
+              style="font-size: 24px"
+            ></Icon>
+          </v-btn>
+        </template>
+      </v-list-item>
+
+      <v-list-item
+        :prepend-icon="hintsEnabled ? 'mdi-lightbulb-on' : 'mdi-lightbulb-off'"
+        @click="hintsEnabled = !hintsEnabled"
+      >
+        <template v-if="navbarShown"> Hints </template>
+        <template #append>
+          <HintButton
+            v-if="hintsEnabled"
+            text="When hints are enabled, you can
+          access them through the [i] icons."
+          />
+        </template>
+      </v-list-item>
+
+      <div id="seqvar-queries-teleport-pad">
+        <!-- This is where QueryEditor renders its queries when hidden. -->
+      </div>
+    </TheNavBar>
+
+    <QueryEditorDrawer :drawer-shown="queryEditorShown">
+      <v-skeleton-loader
+        v-if="!selectedPresetSetVersion"
+        type="list-item, list-item, list-item"
+        class="bg-background"
+      ></v-skeleton-loader>
+      <template v-else>
+        <QueryEditor
+          :collapsed="!queryEditorShown"
+          :presets-details="selectedPresetSetVersion"
+          :hints-enabled="hintsEnabled"
+          teleport-to-when-collapsed="#seqvar-queries-teleport-pad"
+          :teleported-queries-labels="navbarShown"
+          @message="queueMessage"
+        />
+      </template>
+    </QueryEditorDrawer>
+    <v-main>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec
+        purus nec nunc tincidunt ultricies. Nullam nec purus nec nunc tincidunt
+        ultricies. Nullam nec purus nec nunc tincidunt ultricies. Nullam nec
+        purus nec nunc tincidunt ultricies. Nullam nec purus nec nunc tincidunt
+        ultricies. Nullam nec purus nec nunc tincidunt ultricies. Nullam nec
+        purus nec nunc tincidunt ultricies. Nullam nec purus nec nunc tincidunt
+        ultricies. Nullam nec purus nec nunc
+      </div>
+    </v-main>
+    <SeqvarDetails v-model:show-sheet="detailsShown" />
+
+    <v-snackbar-queue
+      v-model="messages"
+      timer="5000"
+      close-on-content-click
+    ></v-snackbar-queue>
+  </v-app>
+</template>
diff --git a/frontend/src/svs/views/StrucvarFilterLegacy/StrucvarFilterLegacy.vue b/frontend/src/svs/views/StrucvarFilterLegacy/StrucvarFilterLegacy.vue
index a0a9d0e40..a1da293d5 100644
--- a/frontend/src/svs/views/StrucvarFilterLegacy/StrucvarFilterLegacy.vue
+++ b/frontend/src/svs/views/StrucvarFilterLegacy/StrucvarFilterLegacy.vue
@@ -51,7 +51,7 @@ const toggleFiltrationComplexityMode = () => {
 }
 
 // Whether to hide the navigation bar; component state.
-const navbarHidden = ref<boolean>(false)
+const navbarShown = ref<boolean>(true)
 
 const filterFormVisible = ref<boolean>(true)
 const logsVisible = ref<boolean>(false)
@@ -60,8 +60,12 @@ const logsVisible = ref<boolean>(false)
 <template>
   <v-app id="strucvar-filter-legacy">
     <v-main>
-      <TheAppBar v-model:navbar-hidden="navbarHidden" />
-      <TheNavBar :navbar-hidden="navbarHidden">
+      <TheAppBar
+        :show-left-panel-button="true"
+        :show-right-panel-button="false"
+        v-model:show-left-panel="navbarShown"
+      />
+      <TheNavBar :navbar-shown="navbarShown">
         <v-list-item
           prepend-icon="mdi-arrow-left"
           :to="{
@@ -69,42 +73,42 @@ const logsVisible = ref<boolean>(false)
             params: { project: projectUuid, case: caseUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Back to Case </template>
+          <template v-if="navbarShown"> Back to Case </template>
         </v-list-item>
-        <v-list-subheader class="text-uppercase" v-if="!navbarHidden">
+        <v-list-subheader class="text-uppercase" v-if="navbarShown">
           SV Analysis
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-filter"
           :to="{
             name: 'variants-filter',
             params: { case: caseUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Go To Variant Filtration </template>
+          <template v-if="navbarShown"> Go To Variant Filtration </template>
         </v-list-item>
-        <v-list-subheader class="text-uppercase" v-if="!navbarHidden">
+        <v-list-subheader class="text-uppercase" v-if="navbarShown">
           Analysis Info
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-button-cursor"
           @click="filterFormVisible = !filterFormVisible"
         >
-          <template v-if="!navbarHidden"> Toggle Form </template>
+          <template v-if="navbarShown"> Toggle Form </template>
         </v-list-item>
         <v-list-item
           :prepend-icon="`mdi-numeric-${filtrationComplexityMode}-box-multiple`"
           @click="toggleFiltrationComplexityMode()"
         >
-          <template v-if="!navbarHidden"> Toggle Complexity </template>
+          <template v-if="navbarShown"> Toggle Complexity </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-card-text-outline"
           @click="logsVisible = !logsVisible"
         >
-          <template v-if="!navbarHidden"> Toggle Logs </template>
+          <template v-if="navbarShown"> Toggle Logs </template>
         </v-list-item>
       </TheNavBar>
       <SvFilterApp
diff --git a/frontend/src/variants/views/SeqvarFilterLegacy/SeqvarFilterLegacy.vue b/frontend/src/variants/views/SeqvarFilterLegacy/SeqvarFilterLegacy.vue
index a49f93e39..c3b01b6df 100644
--- a/frontend/src/variants/views/SeqvarFilterLegacy/SeqvarFilterLegacy.vue
+++ b/frontend/src/variants/views/SeqvarFilterLegacy/SeqvarFilterLegacy.vue
@@ -23,7 +23,7 @@ const caseListStore = useCaseListStore()
 const projectStore = useProjectStore()
 
 // Whether to hide the navigation bar; component state.
-const navbarHidden = ref<boolean>(false)
+const navbarShown = ref<boolean>(true)
 
 const filterFormVisible = ref<boolean>(true)
 const logsVisible = ref<boolean>(false)
@@ -136,8 +136,12 @@ onMounted(() => {
 <template>
   <v-app id="seqvar-filter-legacy">
     <v-main>
-      <TheAppBar v-model:navbar-hidden="navbarHidden" />
-      <TheNavBar :navbar-hidden="navbarHidden">
+      <TheAppBar
+        v-model:show-left-panel="navbarShown"
+        :show-left-panel-button="true"
+        :show-right-panel-button="false"
+      />
+      <TheNavBar :navbar-shown="navbarShown">
         <v-list-item
           prepend-icon="mdi-arrow-left"
           :to="{
@@ -145,45 +149,45 @@ onMounted(() => {
             params: { project: projectUuid, case: caseUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Back to Case </template>
+          <template v-if="navbarShown"> Back to Case </template>
         </v-list-item>
-        <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
           Variant Analysis
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-filter-variant"
           :to="{
             name: 'svs-filter',
             params: { case: caseUuid },
           }"
         >
-          <template v-if="!navbarHidden"> Go To SV Filtration </template>
+          <template v-if="navbarShown"> Go To SV Filtration </template>
         </v-list-item>
-        <v-list-subheader v-if="!navbarHidden" class="text-uppercase">
-          <template v-if="!navbarHidden"> Analysis Info </template>
+        <v-list-subheader v-if="navbarShown" class="text-uppercase">
+          <template v-if="navbarShown"> Analysis Info </template>
         </v-list-subheader>
         <v-list-item
-          :class="{ 'mt-3': navbarHidden }"
+          :class="{ 'pt-3 mt-1 border-t-thin': !navbarShown }"
           prepend-icon="mdi-button-cursor"
           @click="filterFormVisible = !filterFormVisible"
         >
-          <template v-if="!navbarHidden"> Toggle Form </template>
+          <template v-if="navbarShown"> Toggle Form </template>
         </v-list-item>
         <v-list-item
           :prepend-icon="`mdi-numeric-${filtrationComplexityMode}-box-multiple`"
           @click="toggleFiltrationComplexityMode()"
         >
-          <template v-if="!navbarHidden"> Toggle Complexity </template>
+          <template v-if="navbarShown"> Toggle Complexity </template>
         </v-list-item>
         <v-list-item
           prepend-icon="mdi-card-text-outline"
           @click="logsVisible = !logsVisible"
         >
-          <template v-if="!navbarHidden"> Toggle Logs </template>
+          <template v-if="navbarShown"> Toggle Logs </template>
         </v-list-item>
         <v-list-item v-if="!presetSetUuid" prepend-icon="mdi-factory" link>
-          <template v-if="!navbarHidden"> Filter: Defaults </template>
+          <template v-if="navbarShown"> Filter: Defaults </template>
         </v-list-item>
         <v-list-item
           v-else