diff --git a/package.json b/package.json
index e735c1e6..67f3ce2a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "@entur/table": "^4.9.12",
     "@graphiql/plugin-explorer": "5.0.0",
     "@graphiql/react": "0.35.4",
-    "@graphiql/toolkit": "0.11.3",
+    "@graphiql/toolkit": "^0.11.3",
     "@mapbox/polyline": "1.2.1",
     "@turf/bbox": "7.2.0",
     "@turf/helpers": "7.2.0",
@@ -20,8 +20,7 @@
     "crypto-browserify": "3.12.1",
     "dotenv": "16.4.7",
     "global": "4.4.0",
-    "graphiql": "1.11.5",
-    "graphiql-explorer": "0.9.0",
+    "graphiql": "^3.0.0",
     "graphql": "16.11.0",
     "graphql-ws": "5.16.2",
     "history": "5.3.0",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 473bb394..2c204d0f 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -4,17 +4,14 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
-import GraphiQL from 'graphiql';
-import { Explorer as GraphiQLExplorer } from 'graphiql-explorer';
+import { GraphiQL } from 'graphiql';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
 import {
   buildClientSchema,
   getIntrospectionQuery,
   GraphQLSchema,
-  parse,
-  print,
   stripIgnoredCharacters,
 } from 'graphql';
 import queryString from 'query-string';
@@ -22,10 +19,10 @@ import graphQLFetcher from '../../utils/graphQLFetcher';
 import getPreferredTheme from '../../utils/getPreferredTheme';
 import history from '../../utils/history';
 const GeocoderModal = lazy(() => import('../GeocoderModal'));
+import MapPortal from './MapPortal';
 import './custom.css';
 import findServiceName from '../../utils/findServiceName';
 
-import explorerDarkColors from './DarkmodeExplorerColors';
 import 'graphiql/graphiql.css';
 
 import MapView from '../MapView';
@@ -40,6 +37,8 @@ import {
   useConfig,
   useFetchConfig,
 } from '../../config/ConfigContext';
+import { createRoot } from 'react-dom/client';
+import CustomDropdown from './CustomDropdown';
 
 const BASE_PATH = process.env.PUBLIC_URL || '';
 const DEFAULT_SERVICE_ID = 'journey-planner-v3';
@@ -62,12 +61,9 @@ export const App: React.FC<AppProps> = ({
   const { services, enturClientName } = useConfig();
   const [showGeocoderModal, setShowGeocoderModal] = useState<boolean>(false);
   const [schema, setSchema] = useState<GraphQLSchema | undefined>();
-  const [showExplorer, setShowExplorer] = useState<boolean>(false);
   const [showMap, setShowMap] = useState<boolean>(false);
   const [response, setResponse] = useState<any>();
 
-  let graphiql = useRef<any>(null);
-
   const serviceName = findServiceName(pathname, BASE_PATH);
 
   // Load dark theme CSS dynamically when dark theme is selected
@@ -75,10 +71,8 @@ export const App: React.FC<AppProps> = ({
     const isDarkTheme = getPreferredTheme() === 'dark';
 
     if (isDarkTheme) {
-      // Import the dark theme CSS
       import('../../darktheme.css');
     } else {
-      // Remove dark theme CSS if it was previously loaded
       const existingLink = document.querySelector('link[href*="darktheme"]');
       if (existingLink) {
         existingLink.remove();
@@ -95,8 +89,6 @@ export const App: React.FC<AppProps> = ({
     const hasNoService = !serviceName || serviceName === '';
 
     if (isAtRoot || hasNoService) {
-      // Use window.location instead of history.replace for initial redirect
-      // This avoids the SecurityError with malformed URLs
       const basePath = import.meta.env.BASE_URL || '/';
       const newPath =
         basePath === '/'
@@ -126,23 +118,15 @@ export const App: React.FC<AppProps> = ({
   );
 
   useEffect(() => {
-    fetcher &&
+    if (fetcher) {
       fetcher({
         query: getIntrospectionQuery(),
       }).then((result) => {
         setSchema(buildClientSchema(result.data));
       });
+    }
   }, [fetcher]);
 
-  const handleServiceChange = (id: string) => {
-    // For development with Vite, use simple relative paths
-    // For production, handle base path correctly
-    const basePath = import.meta.env.BASE_URL || '/';
-
-    // Use window.location for proper navigation instead of custom history
-    window.location.href = basePath === '/' ? `/${id}` : `${basePath}${id}`;
-  };
-
   const editParameter = (key: string, value: any) => {
     setParameters((prevParameters: Record<string, any>) => {
       const newParameters = {
@@ -150,7 +134,6 @@ export const App: React.FC<AppProps> = ({
         [key]: value,
       };
 
-      // Use the new parameters for the URL update to avoid stale closure
       history.replace({
         search: queryString.stringify(newParameters),
       });
@@ -159,6 +142,53 @@ export const App: React.FC<AppProps> = ({
     });
   };
 
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    const setInitialQuery = async () => {
+      const urlQuery = parameters.query;
+      if (urlQuery) {
+        setQuery(urlQuery);
+      } else if (currentService) {
+        try {
+          const modules = await import.meta.glob('../../queries/**/*.ts');
+          const path = `../../queries/${currentService.queries}/${currentService.defaultQuery}.ts`;
+          let module = await modules[path]();
+          setQuery(module.default.query);
+        } catch (error) {
+          console.warn(
+            `Failed to load default query for ${currentService.id}:`,
+            error
+          );
+          setQuery('');
+        }
+      }
+    };
+    setInitialQuery();
+  }, [parameters.query, currentService]);
+
+  const { variables, operationName } = parameters;
+
+  const customFetcher = useCallback(
+    async (params: any) => {
+      const res = await fetcher(params);
+      // Only set response for non-introspection queries that might have map data
+      if (!params.query?.includes('__schema') && !params.query?.includes('IntrospectionQuery')) {
+        setResponse(res);
+      }
+      return res;
+    },
+    [fetcher]
+  );
+
+  // Configure the explorer plugin
+  const explorer = useMemo(() => explorerPlugin(), []);
+
+  const handleServiceChange = (id: string) => {
+    const basePath = import.meta.env.BASE_URL || '/';
+    window.location.href = basePath === '/' ? `/${id}` : `${basePath}${id}`;
+  };
+
   const handleEnvironmentChange = (env: string) => {
     if (window.location.host.includes('localhost')) {
       console.log('Running on localhost, not redirecting');
@@ -178,183 +208,167 @@ export const App: React.FC<AppProps> = ({
     window.location.href = `${window.location.protocol}//${host}${window.location.pathname}${window.location.search}`;
   };
 
-  const handleThemeChange = (theme: string) => {
-    window.localStorage.setItem('theme', theme);
-    window.location.reload();
-  };
-
-  const handleClickPrettifyButton = () => {
-    if (!graphiql || !graphiql.current) return;
-
+  const handleClickMinifyButton = () => {
     try {
-      const queryEditor = graphiql.current.getQueryEditor();
-      const variablesEditor = graphiql.current.getVariableEditor();
-
-      if (queryEditor) {
-        const currentQueryText = queryEditor.getValue();
-        if (currentQueryText) {
-          const prettyQueryText = print(parse(currentQueryText));
-          queryEditor.setValue(prettyQueryText);
-        }
+      const currentQueryText = query;
+      if (currentQueryText) {
+        const uglyQueryText = stripIgnoredCharacters(currentQueryText);
+        editParameter('query', uglyQueryText);
       }
 
-      if (variablesEditor) {
-        const currentVariablesText = variablesEditor.getValue();
-        if (currentVariablesText && currentVariablesText.trim() !== '') {
-          const prettyVariablesText = JSON.stringify(
-            JSON.parse(currentVariablesText),
-            null,
-            2
-          );
-          variablesEditor.setValue(prettyVariablesText);
-        }
+      if (variables && variables.trim() !== '') {
+        const uglyVariablesText = JSON.stringify(JSON.parse(variables));
+        editParameter('variables', uglyVariablesText);
       }
     } catch (error) {
-      console.warn('Prettify failed:', error);
+      console.warn('Minify failed:', error);
     }
   };
 
-  const handleClickMinifyButton = () => {
-    if (!graphiql) return;
-
-    const queryEditor = graphiql.current.getQueryEditor();
-    const currentQueryText = queryEditor.getValue();
-    const uglyQueryText = stripIgnoredCharacters(currentQueryText);
-    queryEditor.setValue(uglyQueryText);
-
-    const variablesEditor = graphiql.current.getVariableEditor();
-    const currentVariablesText = variablesEditor.getValue();
-    const uglyVariablesText = JSON.stringify(JSON.parse(currentVariablesText));
-    variablesEditor.setValue(uglyVariablesText);
-  };
-
-  const handleHistoryButton = () => {
-    if (!graphiql) return;
-    graphiql.current.setState({
-      historyPaneOpen: !graphiql.current.state.historyPaneOpen,
-    });
-  };
-
-  const toggleExplorer = () => {
-    setShowExplorer((prevShowExplorer) => !prevShowExplorer);
-  };
-
   const toggleMap = () => {
     setShowMap((prev) => !prev);
   };
 
-  const [exampleQueries, setExampleQueries] = useState({});
-
-  // Load example queries dynamically when service changes
-  useEffect(() => {
-    const loadExampleQueries = async () => {
-      if (!currentService?.queries) return;
-
-      try {
-        let module;
-        const modules = await import.meta.glob('../../queries/**/index.ts');
-        const path = `../../queries/${currentService.queries}/index.ts`;
-        module = await modules[path]();
-        setExampleQueries(module);
-      } catch (error) {
-        console.warn(
-          `Failed to load example queries for ${currentService.queries}:`,
-          error
-        );
-        setExampleQueries({});
-      }
-    };
-
-    loadExampleQueries();
-  }, [currentService]);
-
-  const renderExamplesMenu = () => {
-    if (!exampleQueries || Object.keys(exampleQueries).length === 0) {
-      return null;
-    }
-
-    return (
-      <GraphiQL.Menu label="Examples" title="Examples">
-        {Object.entries(
-          exampleQueries as Record<string, { query: string; variables?: any }>
-        ).map(([key, { query, variables }]) => (
-          <GraphiQL.MenuItem
-            key={key}
-            label={key}
-            title={key}
-            onSelect={() => {
-              editParameter('query', query);
-              if (variables) {
-                editParameter('variables', JSON.stringify(variables, null, 2));
-              }
-            }}
-          />
-        ))}
-      </GraphiQL.Menu>
-    );
-  };
-
   const searchForId = () => {
     setShowGeocoderModal(!showGeocoderModal);
   };
 
-  const [query, setQuery] = useState('');
-
+  // Use useEffect to hide unwanted UI elements and inject custom buttons
   useEffect(() => {
-    const setInitialQuery = async () => {
-      const urlQuery = parameters.query;
-      if (urlQuery) {
-        setQuery(urlQuery);
-      } else if (currentService) {
+    const addCustomTopbarButtons = async () => {
+      // Load example queries dynamically when service changes
+      let loadedExampleQueries = {};
+      if (currentService?.queries) {
         try {
-          let module;
-          const modules = await import.meta.glob('../../queries/**/*.ts');
-          const path = `../../queries/${currentService.queries}/${currentService.defaultQuery}.ts`;
-          module = await modules[path]();
-          setQuery(module.default.query);
+          const modules = await import.meta.glob('../../queries/**/index.ts');
+          const path = `../../queries/${currentService.queries}/index.ts`;
+          loadedExampleQueries = await modules[path]();
         } catch (error) {
           console.warn(
-            `Failed to load default query for ${currentService.id}:`,
+            `Failed to load example queries for ${currentService.queries}:`,
             error
           );
-          setQuery('');
         }
       }
-    };
-    setInitialQuery();
-  }, [parameters.query, currentService]);
 
-  const { variables, operationName } = parameters;
+      const topbar = document.querySelector('.graphiql-session-header-right');
+
+      if (topbar && !topbar.querySelector('.custom-buttons-injected')) {
+        // Remove any previously injected container
+        const prev = topbar.querySelector('.custom-buttons-injected');
+        if (prev) prev.remove();
+
+        const customButtonsContainer = document.createElement('div');
+        customButtonsContainer.className = 'custom-buttons-injected';
+
+        // Create buttons with proper styling
+        const buttons = [
+          {
+            text: 'Minify',
+            onClick: handleClickMinifyButton,
+            title: 'Minify Query',
+          },
+          {
+            text: 'Map',
+            onClick: toggleMap,
+            title: 'Show Map',
+          },
+          {
+            text: 'Search for ID',
+            onClick: searchForId,
+            title: 'Search for ID',
+          },
+        ];
+
+        buttons.forEach(({ text, onClick, title }) => {
+          const button = document.createElement('button');
+          button.className = 'custom-topbar-button';
+          button.textContent = text;
+          button.title = title;
+          button.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onClick();
+          });
+          customButtonsContainer.appendChild(button);
+        });
+
+        // Replace the Service dropdown with the custom ServiceDropdown component
+        const serviceOptions = services.map((s) => ({ value: s.id, label: s.name }));
+        const serviceDropdown = document.createElement('div');
+        serviceDropdown.className = 'custom-service-dropdown-wrapper';
+        customButtonsContainer.appendChild(serviceDropdown);
+        createRoot(serviceDropdown).render(
+          <CustomDropdown
+            options={serviceOptions}
+            selected={serviceName || currentService?.id || ''}
+            onChange={handleServiceChange}
+            label="Service"
+          />,
+        );
 
-  const customFetcher = useCallback(
-    async (...args: any[]) => {
-      const res = await fetcher(...args);
-      setResponse(res);
-      return res;
-    },
-    [fetcher]
-  );
+        // Replace the Environment dropdown with the custom CustomDropdown component
+        const environmentOptions = [
+          { value: 'prod', label: 'Prod' },
+          { value: 'staging', label: 'Staging' },
+          { value: 'dev', label: 'Dev' },
+        ];
+        const environmentDropdown = document.createElement('div');
+        environmentDropdown.className = 'custom-environment-dropdown-wrapper';
+        customButtonsContainer.appendChild(environmentDropdown);
+        createRoot(environmentDropdown).render(
+          <CustomDropdown
+            options={environmentOptions}
+            selected={''}
+            onChange={handleEnvironmentChange}
+            label="Environment"
+          />,
+        );
+
+        // Add Examples dropdown if available
+        if (Object.keys(loadedExampleQueries).length > 0) {
+          const examplesDropdown = document.createElement('div');
+          examplesDropdown.className = 'custom-examples-dropdown-wrapper';
+          customButtonsContainer.appendChild(examplesDropdown);
+          createRoot(examplesDropdown).render(
+            <CustomDropdown
+              options={Object.keys(loadedExampleQueries).map((key) => ({ value: key, label: key }))}
+              selected={''}
+              onChange={(value: string) => {
+                if (value && loadedExampleQueries[value]) {
+                  const { query: exampleQuery, variables: exampleVars } = loadedExampleQueries[value];
+                  editParameter('query', exampleQuery);
+                  if (exampleVars) {
+                    editParameter('variables', JSON.stringify(exampleVars, null, 2));
+                  }
+                }
+              }}
+              label="Examples"
+            />
+          );
+        }
+
+        topbar.appendChild(customButtonsContainer);
+      }
+    };
+
+    addCustomTopbarButtons();
+    return () => {};
+  }, [
+    currentService,
+    services,
+    serviceName
+  ]);
 
   if (currentService == null) {
     return <NotFound />;
   }
 
   return (
-    <div className="App graphiql-container">
-      <GraphiQLExplorer
-        schema={schema}
-        query={query}
-        onEdit={(value) => editParameter('query', value)}
-        onRunOperation={(operationName) =>
-          graphiql.current.handleRunQuery(operationName)
-        }
-        explorerIsOpen={showExplorer}
-        onToggleExplorer={toggleExplorer}
-        colors={getPreferredTheme() === 'dark' ? explorerDarkColors : undefined}
-      />
-      <div style={{ flex: 1 }}>
+    <div className="App">
+      <div className="graphiql-wrapper">
         <GraphiQL
-          ref={graphiql}
+          disableTabs={true}
           fetcher={customFetcher}
           query={query}
           variables={variables}
@@ -362,112 +376,30 @@ export const App: React.FC<AppProps> = ({
           onEditQuery={(value) => editParameter('query', value)}
           onEditVariables={(value) => editParameter('variables', value)}
           onEditOperationName={(value) => editParameter('operationName', value)}
+          plugins={[explorer]}
+          schema={schema}
         >
           <GraphiQL.Logo>
             <img
-              alt="logo"
+              alt="EnTur logo"
               src={getPreferredTheme() === 'dark' ? whiteLogo : normalLogo}
               className="logo"
             />
           </GraphiQL.Logo>
-          <GraphiQL.Toolbar>
-            <GraphiQL.Button
-              onClick={handleClickPrettifyButton}
-              label="Prettify"
-              title="Prettify Query (Shift-Ctrl-P)"
-            />
-            <GraphiQL.Button
-              onClick={handleClickMinifyButton}
-              label="Minify"
-              title="Minify Query"
-            />
-
-            <GraphiQL.Button
-              onClick={handleHistoryButton}
-              label="History"
-              title="Show History"
-            />
-
-            <GraphiQL.Button
-              onClick={toggleExplorer}
-              label="Explorer"
-              title="Show Explorer"
-            />
-
-            <GraphiQL.Button onClick={toggleMap} label="Map" title="Show Map" />
-
-            <GraphiQL.Menu label="Service" title="Service">
-              {services.map((service) => (
-                <GraphiQL.MenuItem
-                  key={service.id}
-                  label={service.name}
-                  title={service.name}
-                  onSelect={() => handleServiceChange(service.id)}
-                />
-              ))}
-            </GraphiQL.Menu>
-
-            <GraphiQL.Menu label="Environment" title="Environment">
-              <GraphiQL.MenuItem
-                label="Prod"
-                title="Prod"
-                onSelect={() => handleEnvironmentChange('prod')}
-              />
-              <GraphiQL.MenuItem
-                label="Staging"
-                title="Staging"
-                onSelect={() => handleEnvironmentChange('staging')}
-              />
-              <GraphiQL.MenuItem
-                label="Dev"
-                title="Dev"
-                onSelect={() => handleEnvironmentChange('dev')}
-              />
-            </GraphiQL.Menu>
-
-            {renderExamplesMenu()}
-
-            <GraphiQL.Menu label="Theme" title="Theme">
-              <GraphiQL.MenuItem
-                label="Light"
-                title="Light"
-                onSelect={() => handleThemeChange('light')}
-              />
-              <GraphiQL.MenuItem
-                label="Dark"
-                title="Dark"
-                onSelect={() => handleThemeChange('dark')}
-              />
-            </GraphiQL.Menu>
-
-            <GraphiQL.Button
-              onClick={() => {
-                searchForId();
-              }}
-              label="Search for ID"
-              title="Search for ID"
-            />
-          </GraphiQL.Toolbar>
-          <GraphiQL.Footer>
-            <div className="label">
-              {currentService.name}:{' '}
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={currentService.url}
-              >
-                {currentService.url}
-              </a>
-            </div>
-          </GraphiQL.Footer>
         </GraphiQL>
-        {showGeocoderModal ? (
-          <Suspense fallback={<div>Loading...</div>}>
-            <GeocoderModal onDismiss={() => setShowGeocoderModal(false)} />
-          </Suspense>
-        ) : null}
       </div>
-      {showMap ? <MapView response={response} /> : null}
+      {showGeocoderModal ? (
+        <Suspense fallback={<div>Loading...</div>}>
+          <GeocoderModal onDismiss={() => setShowGeocoderModal(false)} />
+        </Suspense>
+      ) : null}
+      <MapPortal show={showMap} onClose={() => setShowMap(false)} response={response}>
+        {response ? (
+          <MapView response={response} />
+        ) : (
+          <p>No map data available. Please run a GraphQL query that returns geographic data (like journeys, stops, or routes) to see the map visualization.</p>
+        )}
+      </MapPortal>
     </div>
   );
 };
diff --git a/src/components/App/CustomDropdown.module.css b/src/components/App/CustomDropdown.module.css
new file mode 100644
index 00000000..6fdc694a
--- /dev/null
+++ b/src/components/App/CustomDropdown.module.css
@@ -0,0 +1,48 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.button {
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  min-width: 110px;
+  background-color: #f8f8f8;
+  max-width: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.menu {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  min-width: 120px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-top: 2px;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  padding: 4px 0;
+  list-style: none; /* Hide default list dot */
+}
+.option {
+  padding: 6px 16px 6px 28px;
+  cursor: pointer;
+  font-size: 14px;
+  white-space: nowrap;
+  position: relative;
+}
+.option:hover {
+  background: #f0f0f0;
+}
+.check {
+  position: absolute;
+  left: 8px;
+  color: #007bff;
+  font-size: 14px;
+}
diff --git a/src/components/App/CustomDropdown.tsx b/src/components/App/CustomDropdown.tsx
new file mode 100644
index 00000000..a7fe0710
--- /dev/null
+++ b/src/components/App/CustomDropdown.tsx
@@ -0,0 +1,69 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styles from './CustomDropdown.module.css';
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+}
+
+interface CustomDropdownProps {
+  options: DropdownOption[];
+  selected: string;
+  onChange: (value: string) => void;
+  label: string;
+}
+
+const CustomDropdown: React.FC<CustomDropdownProps> = ({ options, selected, onChange, label }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className={styles.dropdown} ref={ref}>
+      <button
+        className={styles.button}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        type="button"
+      >
+        {label}
+        <svg width="14" height="8"><path fill="#666" d="M 5 1.5 L 14 1.5 L 9.5 7 z"></path></svg>
+      </button>
+      {open && (
+        <ul className={styles.menu} role="listbox">
+          {options.map((option) => (
+            <li
+              key={option.value}
+              className={styles.option + (option.value === selected ? ' ' + styles.selected : '')}
+              role="option"
+              aria-selected={option.value === selected}
+              onClick={() => {
+                onChange(option.value);
+                setOpen(false);
+              }}
+            >
+              {option.value === selected && <span className={styles.check}>✓</span>}
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CustomDropdown;
diff --git a/src/components/App/MapPortal.module.css b/src/components/App/MapPortal.module.css
new file mode 100644
index 00000000..b017e020
--- /dev/null
+++ b/src/components/App/MapPortal.module.css
@@ -0,0 +1,39 @@
+.map-portal-container {
+  width: 400px;
+  border-left: 1px solid #ccc;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  height: 100%;
+  min-width: 0;
+  z-index: 1;
+  position: relative;
+  pointer-events: auto;
+}
+
+.map-portal-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(255,255,255,0.97);
+  border: none;
+  font-size: 22px;
+  cursor: pointer;
+  z-index: 9999;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  pointer-events: auto;
+}
+
+.map-portal-content {
+  flex: 1;
+  padding: 16px;
+  min-width: 0;
+  position: relative;
+  pointer-events: auto;
+}
+
diff --git a/src/components/App/MapPortal.tsx b/src/components/App/MapPortal.tsx
new file mode 100644
index 00000000..3964855b
--- /dev/null
+++ b/src/components/App/MapPortal.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import styles from './MapPortal.module.css';
+
+interface MapPortalProps {
+  show: boolean;
+  onClose: () => void;
+  response: any;
+  children: React.ReactNode;
+}
+
+const MapPortal: React.FC<MapPortalProps> = ({ show, onClose, response, children }) => {
+  if (typeof window === 'undefined') return null;
+  const graphiqlSession = document.querySelector('#graphiql-session');
+  if (!show || !graphiqlSession) return null;
+  return ReactDOM.createPortal(
+    <div className={styles['map-portal-container']}>
+      <button
+        onClick={onClose}
+        className={styles['map-portal-close']}
+        aria-label="Close map"
+        title="Close map"
+      >
+        ×
+      </button>
+      <div className={styles['map-portal-content']}>
+        {children}
+      </div>
+    </div>,
+    graphiqlSession
+  );
+};
+
+export default MapPortal;
+
diff --git a/src/components/App/custom.css b/src/components/App/custom.css
index 004f7683..a95dbbd2 100644
--- a/src/components/App/custom.css
+++ b/src/components/App/custom.css
@@ -23,7 +23,7 @@ body {
   float: right;
   margin: 10px;
   color: #2e6c8b;
-  font-weight: 600;
+  font-weight: 200;
 }
 
 .logo {
@@ -35,12 +35,128 @@ body {
   height: 48px;
 }
 div.toolbar > .toolbar-button {
-  font-weight: 400;
+  font-weight: 200;
   padding: 2px 11px 2px 11px;
 }
 .toolbar-menu-items > li {
   margin: -2px;
 }
-.CodeMirror-code pre.CodeMirror-line {
-  line-height: 1.1rem;
+.CodeMirror-code{
+  line-height: 0.9rem;
+    font-size: 0.8rem;
 }
+
+/* Simple custom toolbar styles */
+.custom-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: #f7f7f7;
+  border-bottom: 1px solid #e0e0e0;
+  flex-wrap: wrap;
+  font-family: 'Fira Code', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace;
+}
+
+.custom-toolbar button {
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.custom-toolbar button:hover {
+  background-color: #f0f0f0;
+}
+
+.custom-toolbar select {
+  padding: 6px 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.custom-toolbar select:hover {
+  background-color: #f0f0f0;
+}
+
+.custom-buttons-injected {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.custom-topbar-button, .custom-dropdown-wrapper button {
+  padding: 6px 12px;
+  margin-right: 8px;
+  border: 1px solid #ccc;
+  background-color: #f8f8f8;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.custom-topbar-button:last-child {
+  margin-right: 0;
+}
+
+/* Layout styles */
+.App {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.graphiql-wrapper {
+  flex: 1;
+  height: calc(100vh - 48px); /* Subtract toolbar height */
+}
+
+.graphiql-wrapper .graphiql-container {
+  height: 100%;
+}
+
+/* Dark theme styles */
+.graphiql-container[data-theme="dark"] .graphiql-toolbar {
+  background-color: #1a1a1a;
+  border-bottom-color: #333;
+}
+
+.graphiql-container[data-theme="dark"] .graphiql-toolbar-button {
+  background-color: #2a2a2a;
+  border-color: #555;
+  color: #e0e0e0;
+}
+
+.graphiql-container[data-theme="dark"] .graphiql-toolbar-button:hover {
+  background-color: #3a3a3a;
+}
+
+.graphiql-container[data-theme="dark"] .graphiql-toolbar-select label {
+  color: #e0e0e0;
+}
+
+.graphiql-container[data-theme="dark"] .graphiql-toolbar-select select {
+  background-color: #2a2a2a;
+  border-color: #555;
+  color: #e0e0e0;
+}
+
+/* Ensure GraphiQL container takes remaining space */
+.App.graphiql-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.App.graphiql-container > .graphiql-container {
+  flex: 1;
+}
+
+.graphiql-session-header-right div {
+  font-weight: 100;
+}
\ No newline at end of file
diff --git a/src/components/MapView/index.tsx b/src/components/MapView/index.tsx
index 134499a9..40f9de37 100644
--- a/src/components/MapView/index.tsx
+++ b/src/components/MapView/index.tsx
@@ -100,12 +100,10 @@ function getVehiclePositions(responseData) {
     return [];
   }
 
-  const vehiclePositions = vehicles
+  return vehicles
     .map((vehicle) => vehicle?.location)
     .filter(Boolean)
     .map((location) => point([location.longitude, location.latitude]));
-
-  return vehiclePositions;
 }
 
 function MapContent({ mapData }) {
@@ -153,6 +151,56 @@ function MapContent({ mapData }) {
   );
 }
 
+function ZoomControls() {
+  const map = useMap();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 16,
+        left: 16,
+        zIndex: 1000,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+      }}
+    >
+      <button
+        aria-label="Zoom in"
+        style={{
+          width: 36,
+          height: 36,
+          fontSize: 22,
+          borderRadius: '50%',
+          border: '1px solid #ccc',
+          background: 'white',
+          cursor: 'pointer',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
+        }}
+        onClick={() => map.setZoom(map.getZoom() + 1)}
+      >
+        +
+      </button>
+      <button
+        aria-label="Zoom out"
+        style={{
+          width: 36,
+          height: 36,
+          fontSize: 22,
+          borderRadius: '50%',
+          border: '1px solid #ccc',
+          background: 'white',
+          cursor: 'pointer',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.18)',
+        }}
+        onClick={() => map.setZoom(map.getZoom() - 1)}
+      >
+        –
+      </button>
+    </div>
+  );
+}
+
 export default function MapView({ response }) {
   const [mapData, setMapData] = useState(getMapData(response));
 
@@ -166,9 +214,9 @@ export default function MapView({ response }) {
       zoom={10}
       style={{
         width: '100%',
+        height: '100%',
       }}
       zoomControl={false}
-      useFlyTo
       boundsOptions={{
         animate: true,
         duration: 2,
@@ -182,6 +230,7 @@ export default function MapView({ response }) {
         }
         url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
       />
+      <ZoomControls />
       <MapContent mapData={mapData} />
     </MapContainer>
   );
diff --git a/yarn.lock b/yarn.lock
index f2b2d963..4830b82a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -371,6 +371,18 @@
   resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz#333fedabc3fd1a8e5d0100013731cf19e6a8c5d3"
   integrity sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@entur/a11y@^0.2.99":
   version "0.2.99"
   resolved "https://registry.yarnpkg.com/@entur/a11y/-/a11y-0.2.99.tgz#fff462a831fd3dd860c731c812a2a230a99ea3ea"
@@ -767,21 +779,30 @@
     set-value "^4.1.0"
     zustand "^5"
 
-"@graphiql/react@^0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@graphiql/react/-/react-0.10.0.tgz#8d888949dc6c9ddebe0817aeba3e2c164bfbb1bb"
-  integrity sha512-8Xo1O6SQps6R+mOozN7Ht85/07RwyXgJcKNeR2dWPkJz/1Lww8wVHIKM/AUpo0Aaoh6Ps3UK9ep8DDRfBT4XrQ==
-  dependencies:
-    "@graphiql/toolkit" "^0.6.1"
+"@graphiql/react@^0.29.0":
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/@graphiql/react/-/react-0.29.0.tgz#0ac1b8655ef0d0e0bd5a3cc580dd51e06beeb6e6"
+  integrity sha512-4Zd57+DeK5t1KYiqy9hnuaQhR8fnZ1CkKUkmZqINpAe0OlpbszOE661zwNGuW5NjbXgepfI89ICnh1ZVinSJvg==
+  dependencies:
+    "@graphiql/toolkit" "^0.11.2"
+    "@headlessui/react" "^1.7.15"
+    "@radix-ui/react-dialog" "^1.0.4"
+    "@radix-ui/react-dropdown-menu" "^2.0.5"
+    "@radix-ui/react-tooltip" "^1.0.6"
+    "@radix-ui/react-visually-hidden" "^1.0.3"
+    "@types/codemirror" "^5.60.8"
+    clsx "^1.2.1"
     codemirror "^5.65.3"
-    codemirror-graphql "^1.3.2"
+    codemirror-graphql "^2.2.1"
     copy-to-clipboard "^3.2.0"
-    escape-html "^1.0.3"
-    graphql-language-service "^5.0.6"
-    markdown-it "^12.2.0"
+    framer-motion "^6.5.1"
+    get-value "^3.0.1"
+    graphql-language-service "^5.3.1"
+    markdown-it "^14.1.0"
+    react-compiler-runtime "19.1.0-rc.1"
     set-value "^4.1.0"
 
-"@graphiql/toolkit@0.11.3", "@graphiql/toolkit@^0.11.3":
+"@graphiql/toolkit@^0.11.2", "@graphiql/toolkit@^0.11.3":
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/@graphiql/toolkit/-/toolkit-0.11.3.tgz#7f08352779b316fc6436820e11329ac3e6af9f9c"
   integrity sha512-Glf0fK1cdHLNq52UWPzfSrYIJuNxy8h4451Pw1ZVpJ7dtU+tm7GVVC64UjEDQ/v2j3fnG4cX8jvR75IvfL6nzQ==
@@ -789,19 +810,19 @@
     "@n1ru4l/push-pull-async-iterable-iterator" "^3.1.0"
     meros "^1.1.4"
 
-"@graphiql/toolkit@^0.6.1":
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/@graphiql/toolkit/-/toolkit-0.6.1.tgz#ab2ae0a401ef5a6334a5573397608c2c5867c79d"
-  integrity sha512-rRjbHko6aSg1RWGr3yOJQqEV1tKe8yw9mDSr/18B+eDhVLQ30yyKk2NznFUT9NmIDzWFGR2pH/0lbBhHKmUCqw==
-  dependencies:
-    "@n1ru4l/push-pull-async-iterable-iterator" "^3.1.0"
-    meros "^1.1.4"
-
 "@graphql-typed-document-node/core@^3.1.1":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@headlessui/react@^1.7.15":
+  version "1.7.19"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
+  integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
@@ -881,6 +902,59 @@
   dependencies:
     meow "^9.0.0"
 
+"@motionone/animation@^10.12.0":
+  version "10.18.0"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.18.0.tgz#868d00b447191816d5d5cf24b1cafa144017922b"
+  integrity sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==
+  dependencies:
+    "@motionone/easing" "^10.18.0"
+    "@motionone/types" "^10.17.1"
+    "@motionone/utils" "^10.18.0"
+    tslib "^2.3.1"
+
+"@motionone/dom@10.12.0":
+  version "10.12.0"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
+  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
+  dependencies:
+    "@motionone/animation" "^10.12.0"
+    "@motionone/generators" "^10.12.0"
+    "@motionone/types" "^10.12.0"
+    "@motionone/utils" "^10.12.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.18.0":
+  version "10.18.0"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.18.0.tgz#7b82f6010dfee3a1bb0ee83abfbaff6edae0c708"
+  integrity sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==
+  dependencies:
+    "@motionone/utils" "^10.18.0"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.12.0":
+  version "10.18.0"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.18.0.tgz#fe09ab5cfa0fb9a8884097feb7eb60abeb600762"
+  integrity sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==
+  dependencies:
+    "@motionone/types" "^10.17.1"
+    "@motionone/utils" "^10.18.0"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.12.0", "@motionone/types@^10.17.1":
+  version "10.17.1"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.17.1.tgz#cf487badbbdc9da0c2cb86ffc1e5d11147c6e6fb"
+  integrity sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==
+
+"@motionone/utils@^10.12.0", "@motionone/utils@^10.18.0":
+  version "10.18.0"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.18.0.tgz#a59ff8932ed9009624bca07c56b28ef2bb2f885e"
+  integrity sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==
+  dependencies:
+    "@motionone/types" "^10.17.1"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@n1ru4l/push-pull-async-iterable-iterator@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@n1ru4l/push-pull-async-iterable-iterator/-/push-pull-async-iterable-iterator-3.2.0.tgz#c15791112db68dd9315d329d652b7e797f737655"
@@ -1028,7 +1102,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.2.tgz#61628ef269a433382c364f6f1e3788a6dc213a36"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
-"@radix-ui/react-dialog@^1.1":
+"@radix-ui/react-dialog@^1.0.4", "@radix-ui/react-dialog@^1.1":
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz#4c69c80c258bc6561398cfce055202ea11075107"
   integrity sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==
@@ -1064,7 +1138,7 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-escape-keydown" "1.1.1"
 
-"@radix-ui/react-dropdown-menu@^2.1":
+"@radix-ui/react-dropdown-menu@^2.0.5", "@radix-ui/react-dropdown-menu@^2.1":
   version "2.1.15"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz#f507320de8e11bc1e671a6ec0c27a7a89e725131"
   integrity sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==
@@ -1183,7 +1257,7 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
-"@radix-ui/react-tooltip@^1.2":
+"@radix-ui/react-tooltip@^1.0.6", "@radix-ui/react-tooltip@^1.2":
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz#23612ac7a5e8e1f6829e46d0e0ad94afe3976c72"
   integrity sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==
@@ -1247,7 +1321,7 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
-"@radix-ui/react-visually-hidden@1.2.3", "@radix-ui/react-visually-hidden@^1.2":
+"@radix-ui/react-visually-hidden@1.2.3", "@radix-ui/react-visually-hidden@^1.0.3", "@radix-ui/react-visually-hidden@^1.2":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz#a8c38c8607735dc9f05c32f87ab0f9c2b109efbf"
   integrity sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==
@@ -1374,6 +1448,18 @@
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.13.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz#d372dc2783739cc04ec1a728ca8203937687a819"
+  integrity sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==
+  dependencies:
+    "@tanstack/virtual-core" "3.13.12"
+
+"@tanstack/virtual-core@3.13.12":
+  version "3.13.12"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
+  integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
+
 "@testing-library/dom@10.4.0":
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
@@ -1549,12 +1635,26 @@
   dependencies:
     "@types/deep-eql" "*"
 
+"@types/codemirror@^0.0.90":
+  version "0.0.90"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.90.tgz#9c5edafce2a780b4f8bc5e3b699fe1f4727c8f17"
+  integrity sha512-8Z9+tSg27NPRGubbUPUCrt5DDG/OWzLph5BvcDykwR5D7RyZh5mhHG0uS1ePKV1YFCA+/cwc4Ey2AJAEFfV3IA==
+  dependencies:
+    "@types/tern" "*"
+
+"@types/codemirror@^5.60.8":
+  version "5.60.16"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.16.tgz#1f462f9771113bd8e1c6130c666b17db8e1087c2"
+  integrity sha512-V/yHdamffSS075jit+fDxaOAmdP2liok8NSNJnAZfDJErzOheuygHZEhAJrfmk5TEyM32MhkZjwo/idX791yxw==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/deep-eql@*":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/deep-eql/-/deep-eql-4.0.2.tgz#334311971d3a07121e7eb91b684a605e7eea9cbd"
   integrity sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==
 
-"@types/estree@1.0.8", "@types/estree@^1.0.0":
+"@types/estree@*", "@types/estree@1.0.8", "@types/estree@^1.0.0":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
@@ -1635,10 +1735,22 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.7.0.tgz#64c441bdae033b378b6eef7d0c3d77c329b9378e"
   integrity sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==
 
+"@types/tern@*":
+  version "0.23.9"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.9.tgz#6f6093a4a9af3e6bb8dde528e024924d196b367c"
+  integrity sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==
+  dependencies:
+    "@types/estree" "*"
+
 "@typescript-eslint/eslint-plugin@8.36.0":
   version "8.36.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.36.0.tgz#880ce277f8a30ccf539ec027acac157088f131ae"
   integrity sha512-lZNihHUVB6ZZiPBNgOQGSxUASI7UJWhT8nHyUGCnaQ28XFCw98IfrMCG3rUl1uwUWoAvodJQby2KTs79UTcrAg==
+
+"@typescript-eslint/eslint-plugin@8.35.1":
+  version "8.35.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz#06b1129fe26d6532abd58fb2b3fe9810bd016935"
+  integrity sha512-9XNTlo7P7RJxbVeICaIIIEipqxLKguyh+3UbXuT2XQuFp6d8VOeDEGuz5IiX0dgZo8CiI6aOFLg4e8cF71SFVg==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
     "@typescript-eslint/scope-manager" "8.36.0"
@@ -2555,17 +2667,23 @@ cli-truncate@^4.0.0:
     slice-ansi "^5.0.0"
     string-width "^7.0.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-codemirror-graphql@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-1.3.2.tgz#e9d1d18b4a160f0016a28465805284636ee42d2a"
-  integrity sha512-glwFsEVlH5TvxjSKGymZ1sNy37f3Mes58CB4fXOd0zy9+JzDL08Wti1b5ycy4vFZYghMDK1/Or/zRSjMAGtC2w==
+codemirror-graphql@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-2.2.3.tgz#ee3b3ee6c8ca7e3ba0e402f4db7f58b34ecc49b2"
+  integrity sha512-tblvRpDlys/Q87TIOXOBpHwGmc1m9r4lGr+F0+Px5G60ZBtyWcMQFyGCxJvri4KlpQldVujhTmjO5HGeR4s4BQ==
   dependencies:
-    graphql-language-service "^5.0.6"
+    "@types/codemirror" "^0.0.90"
+    graphql-language-service "5.4.0"
 
 codemirror@^5.65.3:
   version "5.65.16"
@@ -2985,11 +3103,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
 entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
@@ -3000,11 +3113,6 @@ entities@^6.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-6.0.1.tgz#c28c34a43379ca7f61d074130b2f5f7020a30694"
   integrity sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==
 
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
 environment@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/environment/-/environment-1.1.0.tgz#8e86c66b180f363c7ab311787e0259665f45a9f1"
@@ -3383,11 +3491,6 @@ escalade@^3.2.0:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
-escape-html@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
-
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -3812,6 +3915,27 @@ framer-motion@^12.12:
     motion-utils "^12.19.0"
     tslib "^2.4.0"
 
+framer-motion@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
+  integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
+  dependencies:
+    "@motionone/dom" "10.12.0"
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -4040,23 +4164,20 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-graphiql-explorer@0.9.0, graphiql-explorer@^0.9.0:
+graphiql-explorer@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.9.0.tgz#25f6b990bfc3e04e88c0cf419e28d12abe2c4fbe"
   integrity sha512-fZC/wsuatqiQDO2otchxriFO0LaWIo/ovF/CQJ1yOudmY0P7pzDiP+l9CEHUiWbizk3e99x6DQG4XG1VxA+d6A==
 
-graphiql@1.11.5:
-  version "1.11.5"
-  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-1.11.5.tgz#daf0de27b704f17c9d87ce56eea0fdcd7a370269"
-  integrity sha512-NI92XdSVwXTsqzJc6ykaAkKVMeC8IRRp3XzkxVQwtqDsZlVKtR2ZnssXNYt05TMGbi1ehoipn9tFywVohOlHjg==
+graphiql@^3.0.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-3.9.0.tgz#2cc1a3f783e2d27a08cfeba0a937816b2f366e90"
+  integrity sha512-rJYFlHdBbug9+YbFSwRVvgfPjCayC7wHecZkx/qB4XLuQPFQZw/yB9pmHFtOJV6RiNBBHro3u1GdocKa3YcGRA==
   dependencies:
-    "@graphiql/react" "^0.10.0"
-    "@graphiql/toolkit" "^0.6.1"
-    entities "^2.0.0"
-    graphql-language-service "^5.0.6"
-    markdown-it "^12.2.0"
+    "@graphiql/react" "^0.29.0"
+    react-compiler-runtime "19.1.0-rc.1"
 
-graphql-language-service@^5.0.6, graphql-language-service@^5.3.1, graphql-language-service@^5.4.0:
+graphql-language-service@5.4.0, graphql-language-service@^5.3.1, graphql-language-service@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/graphql-language-service/-/graphql-language-service-5.4.0.tgz#c1f896a53875705b892849c560b0f75f005c9000"
   integrity sha512-g4N5PKh4Dxow9zuHrzX6PHuWWL/aQPYgzZvZst1KkWYFW1H1rmOA/p0/eEJ2WVuoCCfy1tyAR91iG92MAKCILA==
@@ -4182,6 +4303,11 @@ hex-rgb@^4.3.0:
   resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.3.0.tgz#af5e974e83bb2fefe44d55182b004ec818c07776"
   integrity sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 history@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
@@ -4861,13 +4987,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-linkify-it@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
-  integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
-  dependencies:
-    uc.micro "^1.0.1"
-
 linkify-it@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
@@ -5016,17 +5135,6 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
-markdown-it@^12.2.0:
-  version "12.3.2"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
-  integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
 markdown-it@^14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
@@ -5053,11 +5161,6 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
-
 mdurl@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
@@ -5604,6 +5707,16 @@ pidtree@^0.6.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
   integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -6561,6 +6674,14 @@ strip-literal@^3.0.0:
   dependencies:
     js-tokens "^9.0.1"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 subscriptions-transport-ws@0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz#baf88f050cba51d52afe781de5e81b3c31f89883"
@@ -6743,7 +6864,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.4.0, tslib@^2.8.1:
+tslib@^2.0.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -6881,11 +7002,6 @@ typescript@5.8.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.8.3.tgz#92f8a3e5e3cf497356f4178c34cd65a7f5e8440e"
   integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
 
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"