diff --git a/client/.prettierignore b/client/.prettierignore
index a96d61e932a..ba27ff090d8 100644
--- a/client/.prettierignore
+++ b/client/.prettierignore
@@ -1,3 +1,4 @@
 node_modules/
 output/
 src/gql/
+src/static/query/tripQuery.tsx
diff --git a/client/codegen-preprocess.ts b/client/codegen-preprocess.ts
new file mode 100644
index 00000000000..ec1b1dfce0d
--- /dev/null
+++ b/client/codegen-preprocess.ts
@@ -0,0 +1,16 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+import * as path from 'node:path';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: '../application/src/main/resources/org/opentripplanner/apis/transmodel/schema.graphql',
+  documents: 'src/**/*.{ts,tsx}',
+  generates: {
+    'src/static/query/tripQuery.tsx': {
+      plugins: [path.resolve(__dirname, './src/util/generate-queries.cjs')],
+    },
+  },
+};
+
+export default config;
diff --git a/client/package-lock.json b/client/package-lock.json
index 8db9604c3ef..71c57f7262a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -17,7 +17,8 @@
         "react": "19.0.0",
         "react-bootstrap": "2.10.7",
         "react-dom": "19.0.0",
-        "react-map-gl": "7.1.8"
+        "react-map-gl": "7.1.8",
+        "react-select": "5.9.0"
       },
       "devDependencies": {
         "@eslint/compat": "1.2.5",
@@ -235,7 +236,6 @@
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
       "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
         "js-tokens": "^4.0.0",
@@ -288,7 +288,6 @@
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
       "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.26.3",
         "@babel/types": "^7.26.3",
@@ -366,7 +365,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
       "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
-      "dev": true,
       "dependencies": {
         "@babel/traverse": "^7.25.9",
         "@babel/types": "^7.25.9"
@@ -447,7 +445,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
       "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -456,7 +453,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -487,7 +483,6 @@
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
       "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.26.3"
       },
@@ -975,7 +970,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
       "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.25.9",
         "@babel/parser": "^7.25.9",
@@ -989,7 +983,6 @@
       "version": "7.26.4",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
       "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
         "@babel/generator": "^7.26.3",
@@ -1007,7 +1000,6 @@
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -1016,7 +1008,6 @@
       "version": "7.26.3",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
       "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
         "@babel/helper-validator-identifier": "^7.25.9"
@@ -1150,6 +1141,114 @@
         "node": ">=18"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
+    },
     "node_modules/@envelop/core": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@envelop/core/-/core-5.0.2.tgz",
@@ -1727,6 +1826,28 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@googlemaps/polyline-codec": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/@googlemaps/polyline-codec/-/polyline-codec-1.0.28.tgz",
@@ -2892,7 +3013,6 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2906,7 +3026,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2915,7 +3034,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -2923,14 +3041,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -3873,6 +3989,11 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/pbf": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
@@ -4724,6 +4845,43 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -4999,7 +5157,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5476,7 +5633,6 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -5736,7 +5892,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -5961,7 +6116,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6528,6 +6682,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6638,7 +6797,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7096,7 +7254,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -7114,6 +7271,19 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -7211,7 +7381,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -7227,7 +7396,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7368,8 +7536,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
@@ -7433,7 +7600,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -8003,7 +8169,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -8020,8 +8185,7 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -8136,8 +8300,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/listr2": {
       "version": "4.0.5",
@@ -8426,6 +8589,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -8527,8 +8695,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/murmurhash-js": {
       "version": "1.0.0",
@@ -8936,7 +9103,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -8962,7 +9128,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -9038,8 +9203,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-root": {
       "version": "0.1.1",
@@ -9088,7 +9252,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9124,8 +9287,7 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -9432,6 +9594,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.9.0.tgz",
+      "integrity": "sha512-nwRKGanVHGjdccsnzhFte/PULziueZxGD8LL2WojON78Mvnq7LdAMEtu2frrwld1fr3geixg3iiMBIc/LLAZpw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -9557,7 +9739,6 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
@@ -10077,6 +10258,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -10359,6 +10548,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/supercluster": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
@@ -10383,7 +10577,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -10949,6 +11142,19 @@
       "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
       "dev": true
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz",
+      "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/client/package.json b/client/package.json
index b896e29447b..2322dcf60af 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,8 @@
     "preview": "vite preview",
     "prebuild": "npm run codegen && npm run lint && npm run check-format",
     "predev": "npm run codegen",
+    "codegen-preprocess": "graphql-codegen --config codegen-preprocess.ts",
+    "precodegen": "npm run codegen-preprocess",
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
@@ -26,7 +28,8 @@
     "react": "19.0.0",
     "react-bootstrap": "2.10.7",
     "react-dom": "19.0.0",
-    "react-map-gl": "7.1.8"
+    "react-map-gl": "7.1.8",
+    "react-select": "5.9.0"
   },
   "devDependencies": {
     "@eslint/compat": "1.2.5",
diff --git a/client/src/components/ItineraryList/ItineraryListContainer.tsx b/client/src/components/ItineraryList/ItineraryListContainer.tsx
index b474d2eb5ec..affff253388 100644
--- a/client/src/components/ItineraryList/ItineraryListContainer.tsx
+++ b/client/src/components/ItineraryList/ItineraryListContainer.tsx
@@ -26,39 +26,46 @@ export function ItineraryListContainer({
   const timeZone = useContext(TimeZoneContext);
 
   return (
-    <section className="itinerary-list-container below-content" ref={containerRef}>
-      <ItineraryPaginationControl
-        onPagination={pageResults}
-        previousPageCursor={tripQueryResult?.trip.previousPageCursor}
-        nextPageCursor={tripQueryResult?.trip.nextPageCursor}
-        loading={loading}
-      />
-      <Accordion
-        activeKey={`${selectedTripPatternIndex}`}
-        onSelect={(eventKey) => setSelectedTripPatternIndex(parseInt(eventKey as string))}
-      >
-        {tripQueryResult &&
-          tripQueryResult.trip.tripPatterns.map((tripPattern, itineraryIndex) => (
-            <Accordion.Item
-              eventKey={`${itineraryIndex}`}
-              key={`${itineraryIndex}`}
-              bsPrefix={tripPattern.systemNotices.length === 0 ? '' : 'accordion-item-filtered'}
-            >
-              <Accordion.Header>
-                <ItineraryHeaderContent
-                  containerWidth={containerWidth}
-                  tripPattern={tripPattern}
-                  itineraryIndex={itineraryIndex}
-                  earliestStartTime={earliestStartTime}
-                  latestEndTime={latestEndTime}
-                />
-              </Accordion.Header>
-              <Accordion.Body>
-                <ItineraryDetails tripPattern={tripPattern} />
-              </Accordion.Body>
-            </Accordion.Item>
-          ))}
-      </Accordion>
+    <section className="left-pane-container below-content" ref={containerRef}>
+      <>
+        <div className="panel-header">Itinerary results</div>
+        <div className="pagination-controls">
+          <ItineraryPaginationControl
+            onPagination={pageResults}
+            previousPageCursor={tripQueryResult?.trip.previousPageCursor}
+            nextPageCursor={tripQueryResult?.trip.nextPageCursor}
+            loading={loading}
+          />
+        </div>
+        <Accordion
+          activeKey={`${selectedTripPatternIndex}`}
+          onSelect={(eventKey) => setSelectedTripPatternIndex(parseInt(eventKey as string))}
+        >
+          {tripQueryResult &&
+            tripQueryResult.trip.tripPatterns.map((tripPattern, itineraryIndex) => (
+              <Accordion.Item
+                eventKey={`${itineraryIndex}`}
+                key={`${itineraryIndex}`}
+                bsPrefix={tripPattern.systemNotices.length === 0 ? '' : 'accordion-item-filtered'}
+              >
+                <Accordion.Header>
+                  <ItineraryHeaderContent
+                    containerWidth={containerWidth}
+                    tripPattern={tripPattern}
+                    itineraryIndex={itineraryIndex}
+                    earliestStartTime={earliestStartTime}
+                    latestEndTime={latestEndTime}
+                  />
+                </Accordion.Header>
+                <Accordion.Body>
+                  <ItineraryDetails tripPattern={tripPattern} />
+                </Accordion.Body>
+              </Accordion.Item>
+            ))}
+        </Accordion>
+      </>
+
+      {/* Time Zone Info */}
       <div className="time-zone-info">
         All times in <code>{timeZone}</code>
       </div>
diff --git a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx b/client/src/components/ItineraryList/ItineraryPaginationControl.tsx
index dc197a2451e..2e3e335cee0 100644
--- a/client/src/components/ItineraryList/ItineraryPaginationControl.tsx
+++ b/client/src/components/ItineraryList/ItineraryPaginationControl.tsx
@@ -12,7 +12,7 @@ export function ItineraryPaginationControl({
   loading: boolean;
 }) {
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: '1rem 0 ' }}>
+    <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
       <Button
         variant="outline-primary"
         size="sm"
diff --git a/client/src/components/MapView/LayerControl.tsx b/client/src/components/MapView/LayerControl.tsx
index 43b0258662d..8c20cc74b12 100644
--- a/client/src/components/MapView/LayerControl.tsx
+++ b/client/src/components/MapView/LayerControl.tsx
@@ -1,200 +1,200 @@
-import type { ControlPosition } from 'react-map-gl';
-import { useControl } from 'react-map-gl';
-import { IControl, Map, TypedStyleLayer } from 'maplibre-gl';
+import React, { useEffect, useState, useCallback } from 'react';
+import type { AnyLayer, ControlPosition } from 'react-map-gl';
+import type { MapRef } from 'react-map-gl/maplibre';
 
-type LayerControlProps = {
-  position: ControlPosition;
+interface Layer {
+  id: string;
+  name: string;
+}
+
+interface LayerControlProps {
+  mapRef: MapRef | null;
+  position: ControlPosition; // not used in inline styling, but you might use it if you want
   setInteractiveLayerIds: (interactiveLayerIds: string[]) => void;
-};
+}
 
 /**
- * A maplibre control that allows you to switch vector tile layers on and off.
- *
- * It appears that you cannot use React elements but have to drop down to raw DOM. Please correct
- * me if I'm wrong.
+ * A React component to control:
+ *   1. Background (raster) layers (select exactly one to show).
+ *   2. Debug layers (vector-like layers) with groupings, toggle on/off individually.
  */
-class LayerControl implements IControl {
-  private readonly container: HTMLDivElement = document.createElement('div');
-
-  private readonly setInteractiveLayerIds: (interactiveLayerIds: string[]) => void;
-
-  constructor(setInteractiveLayerIds: (interactiveLayerIds: string[]) => void) {
-    this.setInteractiveLayerIds = setInteractiveLayerIds;
-  }
-
-  onAdd(map: Map) {
-    this.container.className = 'maplibregl-ctrl maplibregl-ctrl-group layer-select';
-
-    map.on('load', () => {
-      // clean on rerender
-      while (this.container.firstChild) {
-        this.container.removeChild(this.container.firstChild);
-      }
-
-      this.buildBackgroundLayers(map);
-      this.buildDebugLayers(map);
-    });
-
-    return this.container;
-  }
-
-  private buildBackgroundLayers(map: Map) {
-    const title = document.createElement('h4');
-    title.textContent = 'Background';
-    this.container.appendChild(title);
-
-    const select = document.createElement('select');
-    this.container.appendChild(select);
-
-    const rasterLayers = map
-      .getLayersOrder()
-      .map((l) => map.getLayer(l))
-      .filter((layer) => !!layer)
-      .filter((layer) => layer?.type == 'raster');
-
-    rasterLayers.forEach((layer) => {
-      if (layer) {
-        const option = document.createElement('option');
-        const meta = layer.metadata as { name: string };
-        option.textContent = meta.name;
-        option.id = layer.id;
-        option.value = layer.id;
-
-        select.appendChild(option);
-      }
-    });
-    select.onchange = () => {
-      const layerId = select.value;
-      const layer = map.getLayer(layerId);
-      if (layer) {
-        rasterLayers.forEach((l) => {
-          map.setLayoutProperty(l?.id, 'visibility', 'none');
+const LayerControl: React.FC<LayerControlProps> = ({ mapRef, setInteractiveLayerIds }) => {
+  const [rasterLayers, setRasterLayers] = useState<Layer[]>([]);
+  const [layerGroups, setLayerGroups] = useState<Record<string, Layer[]>>({});
+
+  /**
+   * Load background + debug layers from the style once the map is ready.
+   */
+  useEffect(() => {
+    if (!mapRef) return;
+    const mapInstance = mapRef.getMap();
+
+    const loadLayers = () => {
+      const style = mapInstance.getStyle();
+      if (!style || !style.layers) return;
+
+      // 1. Gather all raster layers (for the background selector).
+      const rasters = style.layers
+        .filter((layer) => layer.type === 'raster')
+        .map((layer) => {
+          // Try to pick up a pretty name from metadata if available.
+          let name = layer.id;
+          if ((layer as AnyLayer).metadata?.name) {
+            name = (layer as AnyLayer).metadata.name;
+          }
+          return { id: layer.id, name };
+        });
+      setRasterLayers(rasters);
+
+      // 2. Gather all "debug" layers (i.e. not raster, not "jsx").
+      //    Group them by metadata.group (falling back to "Misc").
+      const groups: Record<string, Layer[]> = {};
+      style.layers
+        .filter((layer) => layer.type !== 'raster' && !layer.id.startsWith('jsx'))
+        .reverse() // so that the topmost layers appear first
+        .forEach((layer) => {
+          const groupName = (layer as AnyLayer).metadata?.group || 'Misc';
+          if (!groups[groupName]) {
+            groups[groupName] = [];
+          }
+          groups[groupName].push({ id: layer.id, name: layer.id });
         });
 
-        map.setLayoutProperty(layer.id, 'visibility', 'visible');
-      }
+      setLayerGroups(groups);
     };
-  }
-
-  private buildDebugLayers(map: Map) {
-    const title = document.createElement('h4');
-    title.textContent = 'Debug layers';
-    this.container.appendChild(title);
-
-    const groups: Record<string, HTMLDivElement> = {};
-    map
-      .getLayersOrder()
-      .map((l) => map.getLayer(l))
-      .filter((layer) => !!layer)
-      .filter((layer) => this.layerInteractive(layer))
-      .reverse()
-      .forEach((layer) => {
-        if (layer) {
-          const meta: { group: string } = layer.metadata as { group: string };
-
-          let groupName: string = 'Misc';
-          if (meta.group) {
-            groupName = meta.group;
-          }
 
-          const layerDiv = this.buildLayerDiv(layer as TypedStyleLayer, map);
+    if (mapInstance.isStyleLoaded()) {
+      loadLayers();
+    } else {
+      mapInstance.on('styledata', loadLayers);
+    }
 
-          if (groups[groupName]) {
-            groups[groupName]?.appendChild(layerDiv);
-          } else {
-            const groupDiv = this.buildGroupDiv(groupName, layerDiv);
-            groups[groupName] = groupDiv;
-            this.container.appendChild(groupDiv);
-          }
-        }
-      });
-    // initialize clickable layers (initially stops)
-    this.updateInteractiveLayerIds(map);
-  }
-
-  private updateInteractiveLayerIds(map: Map) {
-    const visibleInteractiveLayerIds = map
-      .getLayersOrder()
-      .map((l) => map.getLayer(l))
-      .filter((layer) => !!layer)
-      .filter((layer) => this.layerVisible(map, layer) && this.layerInteractive(layer))
-      .map((layer) => layer.id);
-
-    this.setInteractiveLayerIds(visibleInteractiveLayerIds);
-  }
-
-  private buildLayerDiv(layer: TypedStyleLayer, map: Map) {
-    const layerDiv = document.createElement('div');
-    layerDiv.className = 'layer';
-    const input = document.createElement('input');
-    input.type = 'checkbox';
-    input.value = layer.id;
-    input.id = layer.id;
-    input.onchange = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (input.checked) {
-        map.setLayoutProperty(layer.id, 'visibility', 'visible');
-      } else {
-        map.setLayoutProperty(layer.id, 'visibility', 'none');
-      }
-      this.updateInteractiveLayerIds(map);
+    return () => {
+      mapInstance.off('styledata', loadLayers);
     };
-    input.checked = this.layerVisible(map, layer);
-    input.className = 'layer';
-    const label = document.createElement('label');
-    label.textContent = layer.id;
-    label.htmlFor = layer.id;
-    layerDiv.appendChild(input);
-    layerDiv.appendChild(label);
-    return layerDiv;
-  }
-
-  private buildGroupDiv(groupName: string, layerDiv: HTMLDivElement) {
-    const groupDiv = document.createElement('div');
-    groupDiv.className = 'group';
-
-    const groupInput = document.createElement('input');
-    groupInput.onchange = () => {
-      groupDiv.querySelectorAll<HTMLInputElement>('input.layer').forEach((input) => {
-        input.checked = groupInput.checked;
-        const event = new Event('change');
-        input.dispatchEvent(event);
+  }, [mapRef]);
+
+  /**
+   * Toggle the visibility of an individual debug layer.
+   */
+  const toggleLayerVisibility = useCallback(
+    (layerId: string, isVisible: boolean) => {
+      if (!mapRef) return;
+      const mapInstance = mapRef.getMap();
+      mapInstance.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
+
+      // After toggling, recalculate which interactive layers are visible.
+      const style = mapInstance.getStyle();
+      if (!style || !style.layers) return;
+
+      const visibleInteractive = style.layers
+        .filter((l) => l.type !== 'raster' && !l.id.startsWith('jsx'))
+        .filter((l) => mapInstance.getLayoutProperty(l.id, 'visibility') !== 'none')
+        .map((l) => l.id);
+
+      setInteractiveLayerIds(visibleInteractive);
+    },
+    [mapRef, setInteractiveLayerIds],
+  );
+
+  /**
+   * Show exactly one background (raster) layer at a time.
+   */
+  const setBackgroundLayer = useCallback(
+    (layerId: string) => {
+      if (!mapRef) return;
+      const mapInstance = mapRef.getMap();
+      rasterLayers.forEach((r) => {
+        mapInstance.setLayoutProperty(r.id, 'visibility', r.id === layerId ? 'visible' : 'none');
       });
-    };
-    groupInput.type = 'checkbox';
-    groupInput.id = groupName;
-
-    const groupLabel = document.createElement('label');
-    groupLabel.textContent = groupName;
-    groupLabel.htmlFor = groupName;
-    groupLabel.className = 'group-label';
-
-    groupDiv.appendChild(groupInput);
-    groupDiv.appendChild(groupLabel);
-    groupDiv.appendChild(layerDiv);
-    return groupDiv;
-  }
-
-  private layerVisible(map: Map, layer: { id: string }) {
-    return map.getLayoutProperty(layer.id, 'visibility') !== 'none';
-  }
-
-  private layerInteractive(layer: { id: string; type: string }) {
-    // the polylines of the routing result are put in map layers called jsx-1, jsx-2...
-    // we don't want them to show up in the debug layer selector
-    return layer?.type !== 'raster' && !layer?.id.startsWith('jsx');
-  }
-
-  onRemove() {
-    this.container.parentNode?.removeChild(this.container);
-  }
-}
-
-export default function DebugLayerControl(props: LayerControlProps) {
-  useControl(() => new LayerControl(props.setInteractiveLayerIds), {
-    position: props.position,
-  });
+    },
+    [mapRef, rasterLayers],
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '10px',
+        width: '250px',
+        borderRadius: '4px',
+        overflowY: 'auto',
+      }}
+    >
+      {/* BACKGROUND (RASTER) LAYERS */}
+      <h4 style={{ marginTop: 0 }}>Background</h4>
+      <select onChange={(e) => setBackgroundLayer(e.target.value)}>
+        {rasterLayers.map((layer) => (
+          <option key={layer.id} value={layer.id}>
+            {layer.name}
+          </option>
+        ))}
+      </select>
+
+      {/* DEBUG (VECTOR) LAYERS */}
+      <h4 style={{ marginTop: '1rem' }}>Debug Layers</h4>
+      {Object.entries(layerGroups).map(([groupName, layers]) => {
+        // Determine if *all* layers in this group are currently visible.
+        const allVisible = layers.every(
+          (layer) => mapRef?.getMap().getLayoutProperty(layer.id, 'visibility') !== 'none',
+        );
+
+        // Define a helper to toggle all layers in the group at once.
+        const toggleGroupVisibility = (checked: boolean) => {
+          layers.forEach((layer) => {
+            toggleLayerVisibility(layer.id, checked);
+          });
+        };
+
+        return (
+          <div key={groupName} style={{ marginBottom: '10px' }}>
+            <h6 style={{ margin: '0 0 5px' }}>
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  cursor: 'pointer',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={allVisible}
+                  onChange={(e) => toggleGroupVisibility(e.target.checked)}
+                  style={{ marginRight: '5px' }}
+                />
+                {groupName}
+              </label>
+            </h6>
+
+            {layers.map((layer) => {
+              // Figure out if the layer is visible or not:
+              const isVisible = mapRef?.getMap().getLayoutProperty(layer.id, 'visibility') !== 'none';
+
+              return (
+                <label
+                  key={layer.id}
+                  style={{
+                    display: 'block',
+                    cursor: 'pointer',
+                    marginBottom: '5px',
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={isVisible}
+                    onChange={(e) => toggleLayerVisibility(layer.id, e.target.checked)}
+                    style={{ marginLeft: '20px', marginRight: '5px' }}
+                  />
+                  {layer.name}
+                </label>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
 
-  return null;
-}
+export default LayerControl;
diff --git a/client/src/components/MapView/MapView.tsx b/client/src/components/MapView/MapView.tsx
index 8eb66f8c446..21fad3140a6 100644
--- a/client/src/components/MapView/MapView.tsx
+++ b/client/src/components/MapView/MapView.tsx
@@ -6,16 +6,18 @@ import {
   MapMouseEvent,
   NavigationControl,
   VectorTileSource,
+  MapRef,
 } from 'react-map-gl/maplibre';
+import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { TripPattern, TripQuery, TripQueryVariables } from '../../gql/graphql.ts';
 import { NavigationMarkers } from './NavigationMarkers.tsx';
 import { LegLines } from './LegLines.tsx';
 import { useMapDoubleClick } from './useMapDoubleClick.ts';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { ContextMenuPopup } from './ContextMenuPopup.tsx';
 import { GeometryPropertyPopup } from './GeometryPropertyPopup.tsx';
-import DebugLayerControl from './LayerControl.tsx';
+import RightMenu from './RightMenu.tsx';
 
 const styleUrl = import.meta.env.VITE_DEBUG_STYLE_URL;
 
@@ -66,9 +68,24 @@ export function MapView({
     }
   };
 
+  const onLoad = (e: MapEvent) => {
+    const map = e.target;
+    map.addControl(new maplibregl.AttributionControl(), 'bottom-left');
+  };
+
+  function handleMapLoad(e: MapEvent) {
+    // 1) Call your existing function
+    panToWorldEnvelopeIfRequired(e);
+
+    // 2) Add the native MapLibre attribution control
+    onLoad(e);
+  }
+
+  const mapRef = useRef<MapRef>(null); // Create a ref for MapRef
   return (
     <div className="map-container below-content">
       <Map
+        attributionControl={false}
         // @ts-ignore
         mapLib={import('maplibre-gl')}
         // @ts-ignore
@@ -87,7 +104,8 @@ export function MapView({
         // disable pitching and rotating the map
         touchPitch={false}
         dragRotate={false}
-        onLoad={panToWorldEnvelopeIfRequired}
+        onLoad={handleMapLoad}
+        ref={mapRef}
       >
         <NavigationControl position="top-left" />
         <NavigationMarkers
@@ -96,7 +114,8 @@ export function MapView({
           setTripQueryVariables={setTripQueryVariables}
           loading={loading}
         />
-        <DebugLayerControl position="top-right" setInteractiveLayerIds={setInteractiveLayerIds} />
+
+        <RightMenu position="top-right" setInteractiveLayerIds={setInteractiveLayerIds} mapRef={mapRef?.current} />
         {tripQueryResult?.trip.tripPatterns.length && (
           <LegLines tripPattern={tripQueryResult.trip.tripPatterns[selectedTripPatternIndex] as TripPattern} />
         )}
diff --git a/client/src/components/MapView/RightMenu.tsx b/client/src/components/MapView/RightMenu.tsx
new file mode 100644
index 00000000000..27e91c8fb35
--- /dev/null
+++ b/client/src/components/MapView/RightMenu.tsx
@@ -0,0 +1,79 @@
+import { Component } from 'react';
+import DebugLayerControl from './LayerControl';
+import { ControlPosition } from 'react-map-gl';
+import debugLayerIcon from '../../static/img/graph.svg';
+import { MapRef } from 'react-map-gl/maplibre';
+
+interface RightMenuProps {
+  setInteractiveLayerIds: (interactiveLayerIds: string[]) => void;
+  position: ControlPosition;
+  mapRef: MapRef | null;
+}
+
+interface RightMenuState {
+  isSidebarOpen: boolean;
+  activeContent: 'debugLayer' | 'tripFilters' | null; // Track the active content
+}
+
+class RightMenu extends Component<RightMenuProps, RightMenuState> {
+  constructor(props: RightMenuProps) {
+    super(props);
+    this.state = {
+      isSidebarOpen: false,
+      activeContent: null,
+    };
+  }
+
+  // Method to toggle the sidebar and set the active content
+  toggleSidebar = (content: RightMenuState['activeContent']) => {
+    this.setState((prevState) => ({
+      isSidebarOpen: prevState.activeContent !== content || !prevState.isSidebarOpen,
+      activeContent: prevState.activeContent === content ? null : content, // Toggle content
+    }));
+  };
+
+  render() {
+    const { isSidebarOpen, activeContent } = this.state;
+    const { position, setInteractiveLayerIds, mapRef } = this.props;
+
+    return (
+      <div>
+        {/* Buttons to control sidebar */}
+        <button
+          onClick={() => this.toggleSidebar('debugLayer')}
+          className={`sidebar-button right ${activeContent === 'debugLayer' ? 'active' : ''} ${
+            isSidebarOpen ? 'open' : ''
+          }`}
+          style={{
+            top: '20px',
+          }}
+        >
+          <img src={debugLayerIcon} alt="Debug layer" title="Debug layer" style={{ width: '25px', height: '25px' }} />
+        </button>
+
+        {/* Sidebar */}
+        <div
+          className="right-menu-container"
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            width: isSidebarOpen ? '270px' : '0',
+            height: '100%',
+            backgroundColor: '#f4f4f4',
+            overflowX: 'hidden',
+            transition: '0.3s',
+            paddingTop: '20px',
+            boxShadow: isSidebarOpen ? '-2px 0 5px rgba(0, 0, 0, 0.2)' : 'none',
+          }}
+        >
+          {isSidebarOpen && activeContent === 'debugLayer' && (
+            <DebugLayerControl position={position} setInteractiveLayerIds={setInteractiveLayerIds} mapRef={mapRef} />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RightMenu;
diff --git a/client/src/components/SearchBar/DepartureArrivalSelect.tsx b/client/src/components/SearchBar/DepartureArrivalSelect.tsx
index b6a92cdd495..a94516dfc3b 100644
--- a/client/src/components/SearchBar/DepartureArrivalSelect.tsx
+++ b/client/src/components/SearchBar/DepartureArrivalSelect.tsx
@@ -24,6 +24,7 @@ export function DepartureArrivalSelect({
         size="sm"
         onChange={(e) => (e.target.value === 'arrival' ? onChange(true) : onChange(false))}
         value={tripQueryVariables.arriveBy ? 'arrival' : 'departure'}
+        style={{ verticalAlign: 'bottom' }}
       >
         <option value="arrival">Arrive before</option>
         <option value="departure">Depart after</option>
diff --git a/client/src/components/SearchBar/InputFieldsSection.tsx b/client/src/components/SearchBar/InputFieldsSection.tsx
new file mode 100644
index 00000000000..234626d0c76
--- /dev/null
+++ b/client/src/components/SearchBar/InputFieldsSection.tsx
@@ -0,0 +1,82 @@
+import { Button, ButtonGroup, Spinner } from 'react-bootstrap';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { LocationInputField } from './LocationInputField.tsx';
+import { SwapLocationsButton } from './SwapLocationsButton.tsx';
+import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx';
+import { DateTimeInputField } from './DateTimeInputField.tsx';
+import { SearchWindowInput } from './SearchWindowInput.tsx';
+import { AccessSelect } from './AccessSelect.tsx';
+import { EgressSelect } from './EgressSelect.tsx';
+import { DirectModeSelect } from './DirectModeSelect.tsx';
+import { TransitModeSelect } from './TransitModeSelect.tsx';
+import { NumTripPatternsInput } from './NumTripPatternsInput.tsx';
+import { ItineraryFilterDebugSelect } from './ItineraryFilterDebugSelect.tsx';
+import GraphiQLRouteButton from './GraphiQLRouteButton.tsx';
+
+type InputFieldsSectionProps = {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+  onRoute: () => void;
+  loading: boolean;
+};
+
+export function InputFieldsSection({
+  tripQueryVariables,
+  setTripQueryVariables,
+  onRoute,
+  loading,
+}: InputFieldsSectionProps) {
+  return (
+    <div className="box input-group search-bar">
+      <div className="input-family">
+        <LocationInputField
+          label="From"
+          id="fromInputField"
+          locationFieldKey="from"
+          tripQueryVariables={tripQueryVariables}
+          setTripQueryVariables={setTripQueryVariables}
+        />
+        <SwapLocationsButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <LocationInputField
+          label="To"
+          id="toInputField"
+          locationFieldKey="to"
+          tripQueryVariables={tripQueryVariables}
+          setTripQueryVariables={setTripQueryVariables}
+        />
+      </div>
+      <div className="input-family">
+        <DepartureArrivalSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <DateTimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      </div>
+      <div className="input-family">
+        <NumTripPatternsInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <SearchWindowInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      </div>
+      <div className="input-family">
+        <AccessSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <TransitModeSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <EgressSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <DirectModeSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      </div>
+      <ItineraryFilterDebugSelect
+        tripQueryVariables={tripQueryVariables}
+        setTripQueryVariables={setTripQueryVariables}
+      />
+
+      <div className="search-bar-route-button-wrapper">
+        <ButtonGroup>
+          <Button variant="primary" onClick={() => onRoute()} disabled={loading}>
+            {loading && (
+              <>
+                <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" />{' '}
+              </>
+            )}
+            Route
+          </Button>
+          <GraphiQLRouteButton tripQueryVariables={tripQueryVariables} />
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx b/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx
index 6f479290947..5c781d93e7d 100644
--- a/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx
+++ b/client/src/components/SearchBar/ItineraryFilterDebugSelect.tsx
@@ -20,10 +20,10 @@ export function ItineraryFilterDebugSelect({
         onChange={(e) => {
           setTripQueryVariables({
             ...tripQueryVariables,
-            itineraryFiltersDebug: e.target.value as ItineraryFilterDebugProfile,
+            itineraryFilters: { debug: e.target.value as ItineraryFilterDebugProfile },
           });
         }}
-        value={tripQueryVariables.itineraryFiltersDebug || 'not_selected'}
+        value={tripQueryVariables.itineraryFilters?.debug || 'not_selected'}
       >
         <option value="not_selected">Not selected</option>
         {Object.values(ItineraryFilterDebugProfile).map((debugProfile) => (
diff --git a/client/src/components/SearchBar/LogoSection.tsx b/client/src/components/SearchBar/LogoSection.tsx
new file mode 100644
index 00000000000..087263e8167
--- /dev/null
+++ b/client/src/components/SearchBar/LogoSection.tsx
@@ -0,0 +1,30 @@
+import { useState, useRef } from 'react';
+import Navbar from 'react-bootstrap/Navbar';
+import { ServerInfo } from '../../gql/graphql.ts';
+import { ServerInfoTooltip } from './ServerInfoTooltip.tsx';
+import logo from '../../static/img/otp-logo.svg';
+
+type LogoSectionProps = {
+  serverInfo?: ServerInfo;
+};
+
+export function LogoSection({ serverInfo }: LogoSectionProps) {
+  const [showServerInfo, setShowServerInfo] = useState(false);
+  const target = useRef(null);
+
+  return (
+    <div className="logo-container box" style={{ display: 'flex' }}>
+      <Navbar.Brand onClick={() => setShowServerInfo((v) => !v)}>
+        <div ref={target}>
+          <img alt="" src={logo} width="50" height="50" className="logo-image" />
+          OTP Debug
+          {showServerInfo && <ServerInfoTooltip serverInfo={serverInfo} target={target} />}
+        </div>
+      </Navbar.Brand>
+      <div className="details">
+        <div>Version: {serverInfo?.version}</div>
+        <div>Time zone: {serverInfo?.internalTransitModelTimeZone}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/SearchBar/NumTripPatternsInput.tsx b/client/src/components/SearchBar/NumTripPatternsInput.tsx
index 360ce1c2c73..ae33e2f4e19 100644
--- a/client/src/components/SearchBar/NumTripPatternsInput.tsx
+++ b/client/src/components/SearchBar/NumTripPatternsInput.tsx
@@ -11,7 +11,7 @@ export function NumTripPatternsInput({
   return (
     <Form.Group>
       <Form.Label column="sm" htmlFor="numTripPatternsInput">
-        Num. results
+        #
       </Form.Label>
       <Form.Control
         type="number"
@@ -19,7 +19,7 @@ export function NumTripPatternsInput({
         size="sm"
         placeholder="12"
         min={1}
-        className="input-small"
+        className="input-tiny"
         value={tripQueryVariables.numTripPatterns || ''}
         onChange={(event) =>
           setTripQueryVariables({
diff --git a/client/src/components/SearchInput/ArgumentTooltip.tsx b/client/src/components/SearchInput/ArgumentTooltip.tsx
new file mode 100644
index 00000000000..efb7a11dc19
--- /dev/null
+++ b/client/src/components/SearchInput/ArgumentTooltip.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import infoIcon from '../../static/img/help-info-solid.svg';
+import inputIcon from '../../static/img/input.svg';
+import durationIcon from '../../static/img/lap-timer.svg';
+import { ResolvedType } from './useTripArgs.ts';
+
+interface ArgumentTooltipProps {
+  defaultValue?: string | number | boolean | object | null | undefined;
+  type?: ResolvedType;
+}
+
+const ArgumentTooltip: React.FC<ArgumentTooltipProps> = ({ defaultValue, type }) => {
+  return (
+    <span>
+      {defaultValue !== undefined && defaultValue !== null && (
+        <span title={`Default: ${defaultValue ?? 'None'}`}>
+          <img alt={'Info'} src={infoIcon} className="default-tooltip-icon"></img>
+        </span>
+      )}
+      {type !== undefined && type !== null && type.subtype === 'DoubleFunction' && (
+        <span title={`Type: ${type.subtype ?? 'None'}\n Format: \`a + b t\`. Example: \`30m + 2.0 t\``}>
+          <img alt={'Info'} src={inputIcon} className="default-tooltip-icon"></img>
+        </span>
+      )}
+      {type !== undefined && type !== null && type.subtype === 'Duration' && (
+        <span
+          className="default-tooltip-icon"
+          title={`Type: ${type.subtype ?? 'None'}\n Duration in a lenient ISO-8601 duration format.\nExample P2DT2H12M40S, 2d2h12m40s or 1h`}
+        >
+          <img alt={'Info'} src={durationIcon} className="default-tooltip-icon"></img>
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default ArgumentTooltip;
diff --git a/client/src/components/SearchInput/ResetButton.tsx b/client/src/components/SearchInput/ResetButton.tsx
new file mode 100644
index 00000000000..42e9d9e3d6b
--- /dev/null
+++ b/client/src/components/SearchInput/ResetButton.tsx
@@ -0,0 +1,34 @@
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { excludedArguments } from './excluded-arguments.ts';
+import { getNestedValue, setNestedValue } from './nestedUtils.tsx';
+import React from 'react';
+
+interface ResetButtonProps {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}
+
+const ResetButton: React.FC<ResetButtonProps> = ({ tripQueryVariables, setTripQueryVariables }) => {
+  function handleReset(): void {
+    // Start with an empty object (or partially typed)
+    let newVars: TripQueryVariables = {} as TripQueryVariables;
+
+    // For each path in our excluded set, copy over that value (if any)
+    excludedArguments.forEach((excludedPath) => {
+      const value = getNestedValue(tripQueryVariables, excludedPath);
+      if (value !== undefined) {
+        newVars = setNestedValue(newVars, excludedPath, value) as TripQueryVariables;
+      }
+    });
+
+    setTripQueryVariables(newVars);
+  }
+
+  return (
+    <button className="reset-button" onClick={handleReset}>
+      Reset
+    </button>
+  );
+};
+
+export default ResetButton;
diff --git a/client/src/components/SearchInput/Sidebar.tsx b/client/src/components/SearchInput/Sidebar.tsx
new file mode 100644
index 00000000000..b362ad4720c
--- /dev/null
+++ b/client/src/components/SearchInput/Sidebar.tsx
@@ -0,0 +1,53 @@
+import React, { useState, ReactNode } from 'react';
+import tripIcon from '../../static/img/route.svg';
+import filterIcon from '../../static/img/filter.svg';
+import jsonIcon from '../../static/img/json.svg';
+
+interface SidebarProps {
+  children: ReactNode | ReactNode[];
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ children }) => {
+  const [activeIndex, setActiveIndex] = useState<number>(0);
+
+  // Function to return the appropriate image based on the index
+  const getIconForIndex = (index: number) => {
+    switch (index) {
+      case 0:
+        return <img src={tripIcon} alt="Itineray list" title="Itineray" />;
+      case 1:
+        return <img src={filterIcon} alt="Filters" title="Filters" />;
+      case 2:
+        return <img width="25" height="25" src={jsonIcon} alt="Filters" title="Filters" />;
+      default:
+        return null;
+    }
+  };
+
+  // Ensure children is always an array and filter out invalid children (null, undefined)
+  const childArray = React.Children.toArray(children).filter((child) => React.isValidElement(child));
+
+  return (
+    <div className="sidebar-container">
+      {/* Sidebar Navigation Buttons */}
+      <div className="sidebar">
+        {childArray.map((_, index) => (
+          <div
+            key={index}
+            className={`sidebar-button ${index === activeIndex ? 'active' : ''}`}
+            onClick={() => setActiveIndex(index)}
+          >
+            {getIconForIndex(index)}
+          </div>
+        ))}
+      </div>
+
+      {/* Content Area */}
+      <div className="sidebar-content">
+        {childArray.map((child, index) => (index === activeIndex ? <div key={index}>{child}</div> : null))}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;
diff --git a/client/src/components/SearchInput/TripArguments.ts b/client/src/components/SearchInput/TripArguments.ts
new file mode 100644
index 00000000000..fbf31b5cbf8
--- /dev/null
+++ b/client/src/components/SearchInput/TripArguments.ts
@@ -0,0 +1,20 @@
+export interface TripArguments {
+  trip: {
+    arguments: {
+      [key: string]: Argument;
+    };
+  };
+}
+
+export interface Argument {
+  type: TypeDescriptor;
+  defaultValue?: string;
+}
+
+export type TypeDescriptor = ScalarType | NestedObject;
+
+export type ScalarType = 'ID' | 'String' | 'Int' | 'Float' | 'Boolean' | 'DateTime' | 'Duration';
+
+export interface NestedObject {
+  [key: string]: Argument | string[]; // Allows for nested objects or enum arrays
+}
diff --git a/client/src/components/SearchInput/TripQueryArguments.tsx b/client/src/components/SearchInput/TripQueryArguments.tsx
new file mode 100644
index 00000000000..3abcc19edc2
--- /dev/null
+++ b/client/src/components/SearchInput/TripQueryArguments.tsx
@@ -0,0 +1,409 @@
+import React, { JSX, useEffect, useState } from 'react';
+import { useTripSchema } from './useTripSchema.ts';
+import { TripQueryVariables } from '../../gql/graphql';
+import { getNestedValue, setNestedValue } from './nestedUtils';
+import ArgumentTooltip from './ArgumentTooltip.tsx';
+import { excludedArguments } from './excluded-arguments.ts';
+import { ResolvedType } from './useTripArgs.ts';
+import ResetButton from './ResetButton.tsx';
+import { DefaultValue, extractAllArgs, formatArgumentName, ProcessedArgument } from './extractArgs.ts';
+
+interface TripQueryArgumentsProps {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}
+
+const TripQueryArguments: React.FC<TripQueryArgumentsProps> = ({ tripQueryVariables, setTripQueryVariables }) => {
+  const [argumentsList, setArgumentsList] = useState<ProcessedArgument[]>([]);
+  const [expandedArguments, setExpandedArguments] = useState<Record<string, boolean>>({});
+  const [searchText] = useState('');
+
+  const { tripArgs, loading, error } = useTripSchema();
+
+  useEffect(() => {
+    if (!tripArgs) return; // Don't run if the data isn't loaded yet
+    if (loading || error) return; // Optionally handle error/loading
+
+    const extractedArgs = extractAllArgs(tripArgs.trip.arguments);
+    setArgumentsList(extractedArgs);
+  }, [tripArgs, loading, error]);
+
+  function normalizePathForList(path: string): string {
+    // Replace numeric segments with `*`
+    return path.replace(/\.\d+/g, '.*');
+  }
+
+  function handleInputChange(path: string, value: DefaultValue | undefined): void {
+    const normalizedPath = normalizePathForList(path);
+    const argumentConfig = argumentsList.find((arg) => arg.path === normalizedPath);
+
+    if (!argumentConfig) {
+      console.error(`No matching argumentConfig found for path: ${path}`);
+      return;
+    }
+
+    // Handle comma-separated input for string arrays
+    if (
+      argumentConfig.type.subtype != null &&
+      ['String', 'DoubleFunction', 'ID', 'Duration'].includes(argumentConfig.type.subtype) &&
+      argumentConfig.isList
+    ) {
+      if (typeof value === 'string') {
+        // Convert comma-separated string into an array
+        const idsArray = value.split(',').map((id) => id.trim());
+
+        let updatedTripQueryVariables = setNestedValue(tripQueryVariables, path, idsArray) as TripQueryVariables;
+        updatedTripQueryVariables = cleanUpParentIfEmpty(updatedTripQueryVariables, path);
+        setTripQueryVariables(updatedTripQueryVariables);
+        return;
+      }
+    }
+
+    // Default handling for other cases
+    let updatedTripQueryVariables = setNestedValue(tripQueryVariables, path, value) as TripQueryVariables;
+    updatedTripQueryVariables = cleanUpParentIfEmpty(updatedTripQueryVariables, path);
+    setTripQueryVariables(updatedTripQueryVariables);
+  }
+
+  function isPlainObject(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  /**
+   * Recursively removes empty arrays/objects from `variables` based on a path.
+   * Returns the updated variables.
+   */
+  function cleanUpParentIfEmpty(variables: TripQueryVariables, path: string): TripQueryVariables {
+    if (!path.includes('.')) {
+      const topValue = getNestedValue(variables, path);
+
+      if (Array.isArray(topValue) && topValue.length === 0) {
+        // Create a shallow copy as a flexible object:
+        const copy = { ...variables } as Record<string, unknown>;
+        // Remove the property:
+        delete copy[path];
+        return copy as TripQueryVariables;
+      }
+
+      // If it's a plain object and all keys are undefined/null or empty, remove it
+      if (isPlainObject(topValue)) {
+        const allKeysEmpty = Object.keys(topValue).every((key) => {
+          const childVal = (topValue as Record<string, unknown>)[key];
+          return childVal === undefined || childVal === null || (Array.isArray(childVal) && childVal.length === 0);
+        });
+
+        if (allKeysEmpty) {
+          const copy = { ...variables } as Record<string, unknown>;
+          delete copy[path];
+          return copy as TripQueryVariables;
+        }
+      }
+
+      return variables; // Otherwise leave it as is
+    }
+
+    // For nested paths
+    const pathParts = path.split('.');
+    for (let i = pathParts.length - 1; i > 0; i--) {
+      const parentPath = pathParts.slice(0, i).join('.');
+      const parentValue = getNestedValue(variables, parentPath);
+
+      if (parentValue == null) {
+        // Already null or undefined, nothing to do
+        continue;
+      }
+
+      if (Array.isArray(parentValue)) {
+        // If the parent array is now empty, remove it
+        if (parentValue.length === 0) {
+          variables = setNestedValue(variables, parentPath, undefined) as TripQueryVariables;
+        }
+      } else if (isPlainObject(parentValue)) {
+        // If all child values are null/undefined or empty, remove the parent
+        const allKeysEmpty = Object.keys(parentValue).every((key) => {
+          const childPath = `${parentPath}.${key}`;
+          const childValue = getNestedValue(variables, childPath);
+          return (
+            childValue === undefined || childValue === null || (Array.isArray(childValue) && childValue.length === 0)
+          );
+        });
+
+        if (allKeysEmpty) {
+          variables = setNestedValue(variables, parentPath, undefined) as TripQueryVariables;
+        }
+      }
+    }
+
+    return variables;
+  }
+
+  function toggleExpand(path: string): void {
+    setExpandedArguments((prev) => ({
+      ...prev,
+      [path]: !prev[path],
+    }));
+  }
+
+  const filteredArgumentsList = argumentsList
+    .filter(({ path }) => formatArgumentName(path).toLowerCase().includes(searchText.toLowerCase()))
+    .filter(({ path }) => !excludedArguments.has(path));
+
+  /**
+   * Renders multiple InputObjects within an array. Each item in the array
+   * is shown with an expand/collapse toggle and a remove button.
+   */
+  function renderListOfInputObjects(
+    listPath: string,
+    allArgs: ProcessedArgument[],
+    level: number,
+    type: ResolvedType,
+  ): React.JSX.Element {
+    // We assume getNestedValue returns unknown; cast to an array if needed
+    const arrayVal = (getNestedValue(tripQueryVariables, listPath) ?? []) as unknown[];
+
+    // You can customize this if you have a better naming scheme
+    const typeName = type.name;
+
+    return (
+      <div>
+        {arrayVal.map((_, index) => {
+          const itemPath = `${listPath}.${index}`;
+
+          // Replace the `.*` placeholder with the actual index
+          const itemNestedArgs = allArgs
+            .filter((arg) => arg.path.startsWith(`${listPath}.*.`) && arg.path !== `${listPath}.*`)
+            .map((arg) => ({
+              ...arg,
+              path: arg.path.replace(`${listPath}.*`, itemPath),
+            }));
+
+          const immediateNestedArgs = itemNestedArgs.filter(
+            (arg) => arg.path.split('.').length === itemPath.split('.').length + 1,
+          );
+
+          const isExpandedItem = expandedArguments[itemPath];
+
+          return (
+            <div key={itemPath} style={{ marginLeft: 15 }}>
+              <span style={{ cursor: 'pointer' }} onClick={() => toggleExpand(itemPath)}>
+                {isExpandedItem ? '▼ ' : '▶ '} [#{index + 1}]
+              </span>
+              <button style={{ marginLeft: 10 }} onClick={() => handleRemoveItem(listPath, index)}>
+                Remove
+              </button>
+
+              {isExpandedItem && (
+                <div style={{ marginLeft: 20 }}>
+                  {renderArgumentInputs(immediateNestedArgs, level + 1, itemNestedArgs)}
+                </div>
+              )}
+            </div>
+          );
+        })}
+        <button onClick={() => handleAddItem(listPath)}>+ Add {typeName}</button>
+      </div>
+    );
+  }
+
+  function handleAddItem(listPath: string): void {
+    const currentValue = (getNestedValue(tripQueryVariables, listPath) ?? []) as unknown[];
+    const newValue = [...currentValue, {}];
+    const updatedTripQueryVariables = setNestedValue(tripQueryVariables, listPath, newValue) as TripQueryVariables;
+    setTripQueryVariables(updatedTripQueryVariables);
+  }
+
+  function handleRemoveItem(listPath: string, index: number): void {
+    const currentValue = (getNestedValue(tripQueryVariables, listPath) ?? []) as unknown[];
+    const newValue = currentValue.filter((_, i) => i !== index);
+    let updatedTripQueryVariables = setNestedValue(tripQueryVariables, listPath, newValue) as TripQueryVariables;
+    updatedTripQueryVariables = cleanUpParentIfEmpty(updatedTripQueryVariables, listPath);
+    setTripQueryVariables(updatedTripQueryVariables);
+  }
+
+  function handleRemoveArgument(path: string): void {
+    let updatedTripQueryVariables = setNestedValue(tripQueryVariables, path, undefined) as TripQueryVariables;
+    updatedTripQueryVariables = cleanUpParentIfEmpty(updatedTripQueryVariables, path);
+    setTripQueryVariables(updatedTripQueryVariables);
+  }
+
+  function renderArgumentInputs(args: ProcessedArgument[], level: number, allArgs: ProcessedArgument[]): JSX.Element[] {
+    return args.map(({ path, type, defaultValue, enumValues, isComplex, isList }) => {
+      const isExpanded = expandedArguments[path];
+      const currentDepth = path.split('.').length;
+      const nestedArgs = allArgs.filter((arg) => {
+        const argDepth = arg.path.split('.').length;
+        return arg.path.startsWith(`${path}.`) && arg.path !== path && argDepth === currentDepth + 1;
+      });
+
+      const nestedLevel = level + 1;
+
+      // Various input renderings depending on subtype
+      return (
+        <div key={path} style={{ marginLeft: `${level * 15}px`, marginBottom: '10px' }}>
+          {isComplex ? (
+            <div>
+              <span style={{ cursor: 'pointer' }} onClick={() => toggleExpand(path)}>
+                {isExpanded ? '▼ ' : '▶ '} {formatArgumentName(path)}
+              </span>
+              {isExpanded && isList ? (
+                <div style={{ marginLeft: 20 }}>{renderListOfInputObjects(path, allArgs, nestedLevel, type)}</div>
+              ) : isExpanded ? (
+                renderArgumentInputs(nestedArgs, nestedLevel, allArgs)
+              ) : null}
+            </div>
+          ) : (
+            <div>
+              <label className="argument-label" htmlFor={path}>
+                {formatArgumentName(path)} <ArgumentTooltip defaultValue={defaultValue} type={type} />
+              </label>
+              {type.subtype === 'Boolean' &&
+                (() => {
+                  const currentValue = getNestedValue(tripQueryVariables, path) as boolean | undefined;
+                  const isInUse = currentValue !== undefined;
+                  return (
+                    <span>
+                      <input
+                        type="checkbox"
+                        id={path}
+                        checked={currentValue ?? false}
+                        onChange={(e) => handleInputChange(path, e.target.checked)}
+                      />
+                      {isInUse && (
+                        <a onClick={() => handleRemoveArgument(path)} className="remove-argument">
+                          x
+                        </a>
+                      )}
+                    </span>
+                  );
+                })()}
+
+              {type.subtype != null &&
+                ['String', 'DoubleFunction', 'ID', 'Duration'].includes(type.subtype) &&
+                isList && (
+                  <input
+                    className="comma-separated-input"
+                    type="text"
+                    id={path}
+                    value={(() => {
+                      const currentValue = getNestedValue(tripQueryVariables, path);
+                      return Array.isArray(currentValue) ? currentValue.join(', ') : '';
+                    })()}
+                    onChange={(e) => handleInputChange(path, e.target.value)}
+                    placeholder="Comma-separated list"
+                  />
+                )}
+
+              {type.subtype != null &&
+                ['String', 'DoubleFunction', 'ID', 'Duration'].includes(type.subtype) &&
+                !isList && (
+                  <input
+                    type="text"
+                    id={path}
+                    value={(getNestedValue(tripQueryVariables, path) as string) ?? ''}
+                    onChange={(e) => handleInputChange(path, e.target.value || undefined)}
+                  />
+                )}
+
+              {type.subtype === 'Int' && (
+                <input
+                  type="number"
+                  id={path}
+                  value={(getNestedValue(tripQueryVariables, path) as number) ?? ''}
+                  onChange={(e) => {
+                    const val = parseInt(e.target.value, 10);
+                    handleInputChange(path, Number.isNaN(val) ? undefined : val);
+                  }}
+                />
+              )}
+
+              {type.subtype === 'Float' && (
+                <input
+                  type="number"
+                  id={path}
+                  step="any"
+                  value={(getNestedValue(tripQueryVariables, path) as number) ?? ''}
+                  onChange={(e) => {
+                    const val = parseFloat(e.target.value);
+                    handleInputChange(path, Number.isNaN(val) ? undefined : val);
+                  }}
+                />
+              )}
+
+              {type.subtype === 'DateTime' && (
+                <input
+                  type="datetime-local"
+                  id={path}
+                  value={((getNestedValue(tripQueryVariables, path) as string) ?? '').slice(0, 16)}
+                  onChange={(e) => {
+                    const newValue = e.target.value ? new Date(e.target.value).toISOString() : undefined;
+                    handleInputChange(path, newValue);
+                  }}
+                />
+              )}
+
+              {type.type === 'Enum' && enumValues && isList && (
+                <select
+                  id={path}
+                  multiple
+                  value={(() => {
+                    const currentValue = getNestedValue(tripQueryVariables, path);
+                    return Array.isArray(currentValue) ? currentValue : [];
+                  })()}
+                  onChange={(e) => {
+                    const selectedOptions = Array.from(e.target.selectedOptions, (option) => option.value);
+                    handleInputChange(path, selectedOptions);
+                  }}
+                >
+                  {enumValues.map((enumValue) => (
+                    <option key={enumValue} value={enumValue}>
+                      {enumValue}
+                    </option>
+                  ))}
+                </select>
+              )}
+
+              {type.type === 'Enum' && enumValues && !isList && (
+                <select
+                  id={path}
+                  value={(getNestedValue(tripQueryVariables, path) as string) ?? 'Not selected'}
+                  onChange={(e) => {
+                    handleInputChange(path, e.target.value || undefined);
+                  }}
+                >
+                  {enumValues.map((enumValue) => (
+                    <option key={enumValue} value={enumValue}>
+                      {enumValue}
+                    </option>
+                  ))}
+                </select>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    });
+  }
+
+  return (
+    <div className="left-pane-container below-content">
+      <div className="panel-header">
+        Filters
+        <ResetButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      </div>
+      {filteredArgumentsList.length === 0 ? (
+        <p>No arguments found.</p>
+      ) : (
+        <div className="argument-list">
+          {renderArgumentInputs(
+            // Top-level arguments have a path depth of 1
+            filteredArgumentsList.filter((arg) => arg.path.split('.').length === 1),
+            0,
+            filteredArgumentsList,
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TripQueryArguments;
diff --git a/client/src/components/SearchInput/TripSchemaContext.tsx b/client/src/components/SearchInput/TripSchemaContext.tsx
new file mode 100644
index 00000000000..f769b33855d
--- /dev/null
+++ b/client/src/components/SearchInput/TripSchemaContext.tsx
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+import type { TripArgsRepresentation } from './useTripArgs';
+
+export interface TripSchemaContextValue {
+  tripArgs: TripArgsRepresentation | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export const TripSchemaContext = createContext<TripSchemaContextValue | undefined>(undefined);
diff --git a/client/src/components/SearchInput/TripSchemaProvider.tsx b/client/src/components/SearchInput/TripSchemaProvider.tsx
new file mode 100644
index 00000000000..a8a3f9b30a8
--- /dev/null
+++ b/client/src/components/SearchInput/TripSchemaProvider.tsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { TripSchemaContext, TripSchemaContextValue } from './TripSchemaContext';
+import { fetchTripArgs, TripArgsRepresentation } from './useTripArgs';
+
+interface TripSchemaProviderProps {
+  endpoint: string;
+  children: React.ReactNode;
+}
+
+export function TripSchemaProvider({ endpoint, children }: TripSchemaProviderProps) {
+  const [tripArgs, setTripArgs] = useState<TripArgsRepresentation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadSchema() {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await fetchTripArgs(endpoint);
+        if (isMounted) {
+          setTripArgs(result);
+        }
+      } catch (err) {
+        console.error('Error loading trip arguments:', err);
+        if (isMounted) {
+          setError('Failed to load trip schema');
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    }
+
+    loadSchema();
+    return () => {
+      isMounted = false;
+    };
+  }, [endpoint]);
+
+  const value: TripSchemaContextValue = { tripArgs, loading, error };
+
+  return <TripSchemaContext.Provider value={value}>{children}</TripSchemaContext.Provider>;
+}
diff --git a/client/src/components/SearchInput/ViewArgumentsRaw.tsx b/client/src/components/SearchInput/ViewArgumentsRaw.tsx
new file mode 100644
index 00000000000..c08fd833a65
--- /dev/null
+++ b/client/src/components/SearchInput/ViewArgumentsRaw.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import ResetButton from './ResetButton.tsx';
+
+interface ViewArgumentsRawProps {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}
+
+const ViewArgumentsRaw: React.FC<ViewArgumentsRawProps> = ({ tripQueryVariables, setTripQueryVariables }) => {
+  return (
+    <div className={'left-pane-container below-content'} style={{ fontSize: '14px' }}>
+      <div className="panel-header">
+        Arguments raw
+        <ResetButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      </div>
+
+      <pre>{JSON.stringify(tripQueryVariables, null, 2)}</pre>
+    </div>
+  );
+};
+
+export default ViewArgumentsRaw;
diff --git a/client/src/components/SearchInput/excluded-arguments.ts b/client/src/components/SearchInput/excluded-arguments.ts
new file mode 100644
index 00000000000..bef4f1f6075
--- /dev/null
+++ b/client/src/components/SearchInput/excluded-arguments.ts
@@ -0,0 +1,12 @@
+export const excludedArguments = new Set<string>([
+  'numTripPatterns',
+  'arriveBy',
+  'from',
+  'to',
+  'dateTime',
+  'searchWindow',
+  'modes.accessMode',
+  'modes.directMode',
+  'modes.egressMode',
+  // Add every full path you want to exclude - top level paths will remove all children!
+]);
diff --git a/client/src/components/SearchInput/extractArgs.ts b/client/src/components/SearchInput/extractArgs.ts
new file mode 100644
index 00000000000..9bb9b6812b0
--- /dev/null
+++ b/client/src/components/SearchInput/extractArgs.ts
@@ -0,0 +1,123 @@
+import { ResolvedType } from './useTripArgs.ts';
+
+export type DefaultValue = string | number | boolean | object | null;
+
+interface ArgData {
+  type: ResolvedType;
+  name?: string;
+  defaultValue?: DefaultValue;
+  enumValues?: string[];
+  isComplex?: boolean;
+  isList?: boolean;
+  args?: Record<string, ArgData>; // Recursive for nested arguments
+}
+
+export interface ProcessedArgument {
+  path: string;
+  type: ResolvedType;
+  name?: string;
+  defaultValue?: DefaultValue;
+  enumValues?: string[];
+  isComplex?: boolean;
+  isList?: boolean;
+}
+/**
+ * Returns a human-readable name from a path like "someNestedArg.subArg".
+ */
+export function formatArgumentName(input: string): string {
+  if (!input) {
+    return ' ';
+  }
+  const parts = input.split('.');
+  const formatted = parts[parts.length - 1].replace(/([A-Z])/g, ' $1').trim();
+  return formatted.replace(/\b\w/g, (char) => char.toUpperCase()) + ' ';
+}
+/**
+ * Recursively extracts a flat list of arguments (ProcessedArgument[]).
+ */
+export function extractAllArgs(
+  args: Record<string, ArgData> | undefined,
+  parentPath: string[] = [],
+): ProcessedArgument[] {
+  let allArgs: ProcessedArgument[] = [];
+  if (!args) return [];
+
+  Object.entries(args).forEach(([argName, argData]) => {
+    const currentPath = [...parentPath, argName].join('.');
+    allArgs = allArgs.concat(processArgument(argName, argData, currentPath, parentPath));
+  });
+
+  return allArgs;
+}
+
+/**
+ * Converts a single ArgData into one or more ProcessedArgument entries.
+ * If the argData is an InputObject with nested fields, we recurse.
+ */
+function processArgument(
+  argName: string,
+  argData: ArgData,
+  currentPath: string,
+  parentPath: string[],
+): ProcessedArgument[] {
+  let allArgs: ProcessedArgument[] = [];
+
+  if (typeof argData === 'object' && argData.type) {
+    if (argData.type.type === 'Enum') {
+      const enumValues = ['Not selected', ...(argData.type.values || [])];
+      const defaultValue = argData.defaultValue !== undefined ? argData.defaultValue : 'Not selected';
+
+      allArgs.push({
+        path: currentPath,
+        type: { type: 'Enum' },
+        defaultValue,
+        enumValues,
+        isList: argData.isList,
+      });
+    } else if (argData.type.type === 'InputObject' && argData.isList) {
+      // This is a list of InputObjects
+      allArgs.push({
+        path: currentPath,
+        type: { type: 'Group', name: argData.type.name }, // We'll still call this 'Group'
+        defaultValue: argData.defaultValue,
+        isComplex: true,
+        isList: true,
+      });
+
+      allArgs = allArgs.concat(extractAllArgs(argData.type.fields, [...parentPath, `${argName}.*`]));
+    } else if (argData.type.type === 'InputObject') {
+      // Single InputObject
+      allArgs.push({
+        path: currentPath,
+        type: { type: 'Group', name: argData.type.name },
+        isComplex: true,
+        isList: false,
+      });
+      allArgs = allArgs.concat(extractAllArgs(argData.type.fields, [...parentPath, argName]));
+    } else if (argData.type.type === 'Scalar') {
+      allArgs.push({
+        path: currentPath,
+        type: { type: argData.type.type, subtype: argData.type.subtype },
+        defaultValue: argData.defaultValue,
+        isList: argData.isList,
+      });
+    }
+  } else if (typeof argData === 'object' && argData.type?.fields) {
+    // Possibly a nested object with fields
+    allArgs.push({
+      path: currentPath,
+      type: { type: 'Group' },
+      isComplex: true,
+    });
+    allArgs = allArgs.concat(extractAllArgs(argData.type.fields, [...parentPath, argName]));
+  } else {
+    // Fallback case
+    allArgs.push({
+      path: currentPath,
+      type: argData.type ?? (typeof argData as unknown), // <— If argData.type is missing, fallback
+      defaultValue: argData.defaultValue,
+    });
+  }
+
+  return allArgs;
+}
diff --git a/client/src/components/SearchInput/nestedUtils.tsx b/client/src/components/SearchInput/nestedUtils.tsx
new file mode 100644
index 00000000000..cfcfcfc232d
--- /dev/null
+++ b/client/src/components/SearchInput/nestedUtils.tsx
@@ -0,0 +1,129 @@
+/**
+ * Retrieves a nested value from an object or array based on a dot-separated path.
+ * @param obj  - The object/array to traverse (can be anything).
+ * @param path - The dot-separated path string (e.g. "myList.0.fieldName").
+ * @returns The value at the specified path or undefined if not found.
+ */
+export function getNestedValue(obj: unknown, path: string): unknown {
+  return path.split('.').reduce<unknown>((acc, key) => {
+    if (acc == null) {
+      return undefined;
+    }
+
+    if (Array.isArray(acc)) {
+      // If the current accumulator is an array, parse key as a numeric index
+      const idx = Number(key);
+      if (Number.isNaN(idx)) return undefined; // mismatch (path wanted array index but got non-numeric)
+      return acc[idx];
+    } else if (typeof acc === 'object') {
+      // treat it like a dictionary
+      const record = acc as Record<string, unknown>;
+      return record[key];
+    }
+    // If acc is neither object nor array, we can't go deeper
+    return undefined;
+  }, obj);
+}
+
+/**
+ * Sets a nested value in an object (or array) based on a dot-separated path,
+ * returning a new top-level object/array to ensure immutability.
+ *
+ * This version detects numeric path segments (like "0", "1") and uses arrays
+ * at those levels. Non-numeric segments use objects. If there's a mismatch,
+ * it will convert that level to the correct type.
+ *
+ * @param obj   - The original object/array (could be anything).
+ * @param path  - The dot-separated path (e.g. "myList.0.fieldName").
+ * @param value - The value to set at that path.
+ * @returns A new object or array with the updated value.
+ */
+export function setNestedValue(obj: unknown, path: string, value: unknown): unknown {
+  const keys = path.split('.');
+
+  /**
+   * Recursively traverse `current` based on the path segments.
+   * At each level, create a shallow clone of the array/object
+   * and update the correct child.
+   */
+  function cloneAndSet(current: unknown, index: number): unknown {
+    const key = keys[index];
+    const isNumeric = !isNaN(Number(key));
+
+    // Base case: if we're at the final segment, just return `value`.
+    if (index === keys.length - 1) {
+      // If current is an array and key is numeric, place `value` at that index
+      if (Array.isArray(current) && isNumeric) {
+        const newArray = [...current];
+        newArray[Number(key)] = value;
+        return newArray;
+      }
+      // If current is an object (Record) and key is non-numeric, place `value` in that object
+      if (isObject(current) && !isNumeric) {
+        return { ...current, [key]: value };
+      }
+      // Otherwise there's a type mismatch, so we convert:
+      if (isNumeric) {
+        // We expected an array
+        const arr = Array.isArray(current) ? [...current] : [];
+        arr[Number(key)] = value;
+        return arr;
+      } else {
+        // We expected an object
+        const base = isObject(current) ? current : {};
+        return {
+          ...base,
+          [key]: value,
+        };
+      }
+    }
+
+    // Not at the final segment => recurse deeper
+    const nextIndex = index + 1;
+    const nextKey = keys[nextIndex];
+    const nextIsNumeric = !isNaN(Number(nextKey));
+
+    if (Array.isArray(current) && isNumeric) {
+      // current is an array, and we have a numeric key
+      const newArray = [...current];
+      const childVal = current[Number(key)];
+      newArray[Number(key)] = cloneAndSet(childVal !== undefined ? childVal : nextIsNumeric ? [] : {}, nextIndex);
+      return newArray;
+    } else if (isObject(current) && !isNumeric) {
+      // current is an object (Record), and we have a string key
+      const newObj = { ...current };
+      const childVal = (current as Record<string, unknown>)[key];
+      newObj[key] = cloneAndSet(childVal !== undefined ? childVal : nextIsNumeric ? [] : {}, nextIndex);
+      return newObj;
+    } else {
+      // There's a mismatch at this level
+      // e.g. current is an object but key is numeric => we want an array, or vice versa.
+      if (isNumeric) {
+        // create a new array at this level
+        const arr: unknown[] = [];
+        arr[Number(key)] = cloneAndSet(nextIsNumeric ? [] : {}, nextIndex);
+        return arr;
+      } else {
+        // create a new object at this level
+        return {
+          [key]: cloneAndSet(nextIsNumeric ? [] : {}, nextIndex),
+        };
+      }
+    }
+  }
+
+  // If the root `obj` is undefined or null, base it on the first key
+  if (obj == null) {
+    const firstKeyIsNumeric = !isNaN(Number(keys[0]));
+    obj = firstKeyIsNumeric ? [] : {};
+  }
+
+  return cloneAndSet(obj, 0);
+}
+
+/**
+ * A small helper type-guard to check if `value` is a non-null object (but not an array).
+ */
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
diff --git a/client/src/components/SearchInput/useTripArgs.ts b/client/src/components/SearchInput/useTripArgs.ts
new file mode 100644
index 00000000000..8f41f9f78d8
--- /dev/null
+++ b/client/src/components/SearchInput/useTripArgs.ts
@@ -0,0 +1,174 @@
+import {
+  buildClientSchema,
+  getIntrospectionQuery,
+  GraphQLSchema,
+  GraphQLType,
+  GraphQLNamedType,
+  isNonNullType,
+  isListType,
+  isScalarType,
+  isEnumType,
+  isInputObjectType,
+} from 'graphql';
+
+//
+// Types
+//
+export interface ResolvedType {
+  type: 'Scalar' | 'Enum' | 'InputObject' | 'Group';
+  // For scalars or fallback, e.g. "String", "Int", etc.
+  subtype?: string;
+  // For input objects
+  name?: string;
+  fields?: {
+    [fieldName: string]: {
+      type: ResolvedType;
+      defaultValue?: string | number | boolean | object | null; // Updated type
+      isList: boolean;
+    };
+  };
+  // For enums
+  values?: string[];
+}
+
+export interface ArgumentRepresentation {
+  [argName: string]: {
+    type: ResolvedType;
+    defaultValue?: string | number | boolean | object | null; // Updated type
+    isList: boolean;
+  };
+}
+
+export interface TripArgsRepresentation {
+  trip: {
+    arguments: ArgumentRepresentation;
+  };
+}
+
+/**
+ * Repeatedly unwraps NonNull and List wrappers until we get a named type.
+ */
+function getNamedType(type: GraphQLType): GraphQLNamedType {
+  let current: GraphQLType = type;
+
+  while (true) {
+    if (isNonNullType(current)) {
+      current = current.ofType;
+    } else if (isListType(current)) {
+      current = current.ofType;
+    } else {
+      break;
+    }
+  }
+
+  // At this point, current should be a GraphQLNamedType
+  return current as GraphQLNamedType;
+}
+
+function resolveType(type: GraphQLType): ResolvedType {
+  const namedType = getNamedType(type);
+
+  if (isScalarType(namedType)) {
+    return { type: 'Scalar', subtype: namedType.name };
+  }
+
+  if (isEnumType(namedType)) {
+    return {
+      type: 'Enum',
+      values: namedType.getValues().map((val) => val.name),
+    };
+  }
+
+  if (isInputObjectType(namedType)) {
+    const fields = namedType.getFields();
+    const fieldTypes: Record<
+      string,
+      { type: ResolvedType; defaultValue?: string | number | boolean | object | null; isList: boolean } // Updated type
+    > = {};
+
+    for (const fieldName of Object.keys(fields)) {
+      const field = fields[fieldName];
+
+      // Exclude deprecated fields
+      if (field.deprecationReason) {
+        continue;
+      }
+
+      const isList = isListType(field.type);
+      const defaultValue = field.defaultValue !== undefined ? field.defaultValue : null;
+
+      fieldTypes[fieldName] = {
+        type: resolveType(field.type),
+        defaultValue: defaultValue,
+        isList,
+      };
+    }
+
+    return {
+      type: 'InputObject',
+      name: namedType.name,
+      fields: fieldTypes,
+    };
+  }
+
+  return { type: 'Scalar', subtype: 'String' };
+}
+
+function generateTripArgs(schema: GraphQLSchema): TripArgsRepresentation {
+  const queryType = schema.getQueryType();
+  if (!queryType) {
+    throw new Error('No Query type found in the schema.');
+  }
+
+  const tripField = queryType.getFields()['trip'];
+  if (!tripField) {
+    throw new Error('No trip query found in the schema.');
+  }
+
+  const argsJson: ArgumentRepresentation = {};
+
+  tripField.args.forEach((arg) => {
+    if (arg.deprecationReason) {
+      // Skip deprecated arguments
+      return;
+    }
+
+    const argName = arg.name;
+    const argType = resolveType(arg.type);
+    const argDefaultValue = arg.defaultValue !== null ? arg.defaultValue : null;
+    const isList = isListType(arg.type);
+
+    argsJson[argName] = {
+      type: argType,
+      ...(argDefaultValue !== null && { defaultValue: argDefaultValue }),
+      isList,
+    };
+  });
+
+  return {
+    trip: {
+      arguments: argsJson,
+    },
+  };
+}
+
+//Fetch the remote GraphQL schema via introspection
+export async function fetchTripArgs(graphqlEndpointUrl: string): Promise<TripArgsRepresentation> {
+  const introspectionQuery = getIntrospectionQuery();
+
+  const response = await fetch(graphqlEndpointUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query: introspectionQuery }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch schema. HTTP error: ${response.status}`);
+  }
+
+  const { data } = await response.json();
+
+  const schema = buildClientSchema(data);
+
+  return generateTripArgs(schema);
+}
diff --git a/client/src/components/SearchInput/useTripSchema.ts b/client/src/components/SearchInput/useTripSchema.ts
new file mode 100644
index 00000000000..b7cc210026a
--- /dev/null
+++ b/client/src/components/SearchInput/useTripSchema.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { TripSchemaContext } from './TripSchemaContext';
+
+export function useTripSchema() {
+  const context = useContext(TripSchemaContext);
+  if (!context) {
+    throw new Error('useTripSchema must be used within a TripSchemaProvider');
+  }
+  return context;
+}
diff --git a/client/src/screens/App.tsx b/client/src/screens/App.tsx
index 1b6b86b7a81..38cac431fb0 100644
--- a/client/src/screens/App.tsx
+++ b/client/src/screens/App.tsx
@@ -1,12 +1,17 @@
-import { Stack } from 'react-bootstrap';
 import { MapView } from '../components/MapView/MapView.tsx';
-import { SearchBar } from '../components/SearchBar/SearchBar.tsx';
 import { ItineraryListContainer } from '../components/ItineraryList/ItineraryListContainer.tsx';
 import { useState } from 'react';
 import { useTripQuery } from '../hooks/useTripQuery.ts';
 import { useServerInfo } from '../hooks/useServerInfo.ts';
 import { useTripQueryVariables } from '../hooks/useTripQueryVariables.ts';
 import { TimeZoneContext } from '../hooks/TimeZoneContext.ts';
+import { LogoSection } from '../components/SearchBar/LogoSection.tsx';
+import { InputFieldsSection } from '../components/SearchBar/InputFieldsSection.tsx';
+import TripQueryArguments from '../components/SearchInput/TripQueryArguments.tsx';
+import Sidebar from '../components/SearchInput/Sidebar.tsx';
+import ViewArgumentsRaw from '../components/SearchInput/ViewArgumentsRaw.tsx';
+import { TripSchemaProvider } from '../components/SearchInput/TripSchemaProvider.tsx';
+import { getApiUrl } from '../util/getApiUrl.ts';
 
 export function App() {
   const serverInfo = useServerInfo();
@@ -18,30 +23,49 @@ export function App() {
   return (
     <div className="app">
       <TimeZoneContext.Provider value={timeZone}>
-        <SearchBar
-          onRoute={callback}
-          tripQueryVariables={tripQueryVariables}
-          setTripQueryVariables={setTripQueryVariables}
-          serverInfo={serverInfo}
-          loading={loading}
-        />
-
-        <Stack direction="horizontal" gap={0}>
-          <ItineraryListContainer
-            tripQueryResult={tripQueryResult}
-            selectedTripPatternIndex={selectedTripPatternIndex}
-            setSelectedTripPatternIndex={setSelectedTripPatternIndex}
-            pageResults={callback}
-            loading={loading}
-          />
-          <MapView
-            tripQueryResult={tripQueryResult}
-            tripQueryVariables={tripQueryVariables}
-            setTripQueryVariables={setTripQueryVariables}
-            selectedTripPatternIndex={selectedTripPatternIndex}
-            loading={loading}
-          />
-        </Stack>
+        <div className="layout">
+          <div className="box logo-section">
+            <LogoSection serverInfo={serverInfo}></LogoSection>
+          </div>
+          <div className="box input-section">
+            <InputFieldsSection
+              onRoute={callback}
+              tripQueryVariables={tripQueryVariables}
+              setTripQueryVariables={setTripQueryVariables}
+              loading={loading}
+            ></InputFieldsSection>
+          </div>
+          <div className="box trip-section">
+            <Sidebar>
+              <ItineraryListContainer
+                tripQueryResult={tripQueryResult}
+                selectedTripPatternIndex={selectedTripPatternIndex}
+                setSelectedTripPatternIndex={setSelectedTripPatternIndex}
+                pageResults={callback}
+                loading={loading}
+              ></ItineraryListContainer>
+              <TripSchemaProvider endpoint={getApiUrl()}>
+                <TripQueryArguments
+                  tripQueryVariables={tripQueryVariables}
+                  setTripQueryVariables={setTripQueryVariables}
+                ></TripQueryArguments>
+              </TripSchemaProvider>
+              <ViewArgumentsRaw
+                tripQueryVariables={tripQueryVariables}
+                setTripQueryVariables={setTripQueryVariables}
+              ></ViewArgumentsRaw>
+            </Sidebar>
+          </div>
+          <div className="box map-section">
+            <MapView
+              tripQueryResult={tripQueryResult}
+              tripQueryVariables={tripQueryVariables}
+              setTripQueryVariables={setTripQueryVariables}
+              selectedTripPatternIndex={selectedTripPatternIndex}
+              loading={loading}
+            />
+          </div>
+        </div>
       </TimeZoneContext.Provider>
     </div>
   );
diff --git a/client/src/static/img/code.svg b/client/src/static/img/code.svg
new file mode 100644
index 00000000000..d303b8d18b5
--- /dev/null
+++ b/client/src/static/img/code.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><path d="m71.68213 97.21875-36.9375 30.78125 36.9375 30.78125a12 12 0 0 1 -15.36426 18.4375l-48-40a12.00005 12.00005 0 0 1 0-18.4375l48-40a12 12 0 1 1 15.36426 18.4375zm176 21.5625-48-40a12 12 0 1 0 -15.36426 18.4375l36.9375 30.78125-36.9375 30.78125a12 12 0 0 0 15.36426 18.4375l48-40a12.00005 12.00005 0 0 0 0-18.4375zm-83.58106-90.05859a12.0021 12.0021 0 0 0 -15.37841 7.17675l-64 176a11.99972 11.99972 0 1 0 22.55468 8.20118l64-176a11.99923 11.99923 0 0 0 -7.17627-15.37793z"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/data-visualization.svg b/client/src/static/img/data-visualization.svg
new file mode 100644
index 00000000000..043b9ee35a4
--- /dev/null
+++ b/client/src/static/img/data-visualization.svg
@@ -0,0 +1 @@
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="m26 22a3.9553 3.9553 0 0 0 -2.0193.5667l-3.8137-3.8138a4.9654 4.9654 0 0 0 0-5.5058l2.547-2.5471a3.0284 3.0284 0 1 0 -1.414-1.414l-2.547 2.547a4.9654 4.9654 0 0 0 -5.5058 0l-3.814-3.8139a3.9553 3.9553 0 0 0 .5668-2.0191 4 4 0 1 0 -4 4 3.9553 3.9553 0 0 0 2.0191-.5668l3.8139 3.8139a4.9654 4.9654 0 0 0 0 5.5058l-3.8138 3.8139a3.9556 3.9556 0 0 0 -2.0192-.5668 4 4 0 1 0 4 4 3.9553 3.9553 0 0 0 -.5667-2.0192l3.8138-3.8138a4.9686 4.9686 0 0 0 1.7529.7319v3.2848a3 3 0 1 0 2 0v-3.2848a4.9686 4.9686 0 0 0 1.7529-.7319l3.8138 3.8137a3.9553 3.9553 0 0 0 -.5667 2.0193 4 4 0 1 0 4-4zm-10-9a3 3 0 1 1 -3 3 3.0033 3.0033 0 0 1 3-3zm-12-7a2 2 0 1 1 2 2 2.002 2.002 0 0 1 -2-2zm2 22a2 2 0 1 1 2-2 2.0023 2.0023 0 0 1 -2 2zm20 0a2 2 0 1 1 2-2 2.0027 2.0027 0 0 1 -2 2z"/><path d="m0 0h32v32h-32z" fill="none"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/debug-layer.svg b/client/src/static/img/debug-layer.svg
new file mode 100644
index 00000000000..ac614e639dc
--- /dev/null
+++ b/client/src/static/img/debug-layer.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m10.957031 3.0019531c-.3411 0-.663744.1278882-.902343.3300781-.2386015.2021703-.4023374.4613513-.5292974.7382813-.25394.55385-.3772294 1.2053481-.5058594 1.8300781-.1286297.62473-.2617797 1.2222288-.4375 1.6054688-.0878999.19162-.1816648.3233912-.265625.3945312-.0839999.0712-.1489797.0996094-.28125.0996094-.1290198 0-.1925237-.0276425-.2773437-.1015625-.0849-.0739-.1826244-.2117463-.2714844-.4101563-.17775-.39683-.3103631-1.0116543-.4394531-1.6464843-.1291-.63483-.2517225-1.2872707-.5078125-1.8378907-.12804-.2753099-.2954687-.5345856-.5429687-.7285156-.24748-.19394-.5804451-.2995541-.921875-.2714844-.65328.0537003-1.1205413.54499-1.4257813 1.09375-.30526.5487501-.4980319 1.2062494-.6386719 1.8496094-.004.0188-.0057656.0359875-.0097656.0546875h1.0019531c.12581-.52971.2900475-1.0467662.4921875-1.4101562.22349-.40177.43795-.5719038.65625-.5898438.13042-.0107.1816294.0101594.2558594.0683594.0742.0582.1674164.1773113.2539062.3632813.1729901.3719299.3046538.9792512.4335938 1.6132812.12893.63403.2549625 1.294865.5078125 1.859375.12642.28225.2873506.5465963.5253906.7539062.23803.2073202.5619.3398438.90625.3398438.3411 0 .6637438-.125945.9023438-.328125s.4023369-.4633144.5292969-.7402344c.25394-.55385.3772193-1.2014319.5058593-1.8261718.1286299-.62473.2617899-1.226135.4374999-1.609375.0879-.1916301.183608-.3214382.267578-.3925782.084-.0712.14898-.1015625.28125-.1015625s.195254.0294094.277344.0996094c.082.0702.175749.2012581.261719.3925781.17193.38263.298448.983755.423828 1.609375.12537.62561.249812 1.2740179.507812 1.8300782.12899.2780297.295883.5408075.539063.7421874.24319.2013801.567079.3242188.912109.3242188s.671783-.1238319.914063-.3261719c.24228-.20235.406593-.4638375.533203-.7421875.25319-.55671.370417-1.2053481.492187-1.8300781.12178-.62475.246912-1.2250787.419922-1.6054687.0865-.1902001.182598-.3196451.267578-.390625.085-.0710002.154815-.1035157.296875-.1035157.28415 0 .482182.1545425.707032.5390625.21185.36226.37834.9037675.49414 1.4609375h.996094c-.006-.0334-.009425-.0641562-.015625-.0976562-.12789-.65615-.313589-1.3243732-.636719-1.8769531-.32313-.5525801-.854872-1.0253907-1.544922-1.0253907-.34503 0-.671782.125765-.914062.328125-.24229.20235-.406593.4638375-.533203.7421875-.25319.55671-.370408 1.2073013-.492188 1.8320313-.12177.62473-.246902 1.2231156-.419922 1.6035156-.0865.1902-.182598.319645-.267578.390625-.0849.071-.154805.1015625-.296875.1015625s-.213911-.0315356-.300781-.1035156c-.0869-.072-.183084-.2020482-.271484-.3925782-.17679-.3810299-.306611-.9777124-.431641-1.6015624-.12502-.6238501-.245011-1.2736651-.494141-1.828125-.12457-.2772301-.283804-.5370744-.521484-.7402344-.23768-.20317-.561244-.3320313-.902344-.3320313zm-2.957031 7.9980469c-1.16667 0-2.4428362.537834-3.4726562 1.052734-.7531001.37656-1.2502738.681832-1.5273438.857422v1.191406l.2773438-.185546s.7251224-.48365 1.6953124-.96875c.9701801-.48509 2.1940138-.947266 3.0273438-.947266.33333 0 .7418885.182391 1.1992188.525391.4573298.343.9472652.828125 1.4472652 1.328125s1.010065 1.014875 1.552735 1.421875 1.134111.724609 1.800781.724609c1.16667 0 2.442836-.537824 3.472656-1.052734.75263-.37632 1.250024-.681692 1.527344-.857422v-1.191406l-.277344.185546s-.725122.48366-1.695312.96875c-.97018.4851-2.194014.947266-3.027344.947266-.33333 0-.741889-.180436-1.199219-.523438-.45733-.342997-.947265-.830078-1.447265-1.330078s-1.010065-1.01292-1.5527348-1.419922c-.5426697-.407-1.1341112-.726562-1.8007812-.726562zm-5 7v1h16v-1z" fill="#4d4d4d"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/filter.svg b/client/src/static/img/filter.svg
new file mode 100644
index 00000000000..cbda5f955d5
--- /dev/null
+++ b/client/src/static/img/filter.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5A3.502 3.502 0 0 0 18.355 8H21a1 1 0 1 0 0-2h-2.645a3.502 3.502 0 0 0-6.71 0H3a1 1 0 0 0 0 2h8.645A3.502 3.502 0 0 0 15 10.5zM3 16a1 1 0 1 0 0 2h2.145a3.502 3.502 0 0 0 6.71 0H21a1 1 0 1 0 0-2h-9.145a3.502 3.502 0 0 0-6.71 0H3z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/graph.svg b/client/src/static/img/graph.svg
new file mode 100644
index 00000000000..6eef9e5100a
--- /dev/null
+++ b/client/src/static/img/graph.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="var(--ci-primary-color, currentColor)" d="M432,32a63.973,63.973,0,0,0-34.344,117.963L355.894,296.13c-1.289-.078-2.585-.13-3.894-.13a63.659,63.659,0,0,0-38.193,12.678l-77.154-64.295A64,64,0,1,0,131.259,269.7L85.967,360.288C84,360.105,82.013,360,80,360a64.082,64.082,0,1,0,36.243,11.29l42.8-85.589a63.845,63.845,0,0,0,59.982-14.356l74.7,62.252a64,64,0,1,0,92.621-27.56L428.106,159.87c1.289.078,2.585.13,3.894.13a64,64,0,0,0,0-128ZM80,456a32,32,0,1,1,32-32A32.036,32.036,0,0,1,80,456Zm96-200a32,32,0,1,1,32-32A32.036,32.036,0,0,1,176,256ZM352,392a32,32,0,1,1,32-32A32.036,32.036,0,0,1,352,392Zm80-264a32,32,0,1,1,32-32A32.036,32.036,0,0,1,432,128Z" class="ci-primary"/>
+</svg>
diff --git a/client/src/static/img/graphic.svg b/client/src/static/img/graphic.svg
new file mode 100644
index 00000000000..344e8f9d5d5
--- /dev/null
+++ b/client/src/static/img/graphic.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 50 50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="m42.549 16.701c-1.593 0-2.888 1.296-2.888 2.888 0 .387.079.756.218 1.094l-8.549 7.957c-.458-.306-1.007-.486-1.598-.486-.3 0-.59.049-.868.137l-2.732-3.442c.204-.401.324-.841.324-1.304 0-1.592-1.295-2.888-2.888-2.888s-2.888 1.296-2.888 2.888c0 .146.027.286.048.428l-6.895 5.407c-.447-.283-.972-.454-1.54-.454-1.593 0-2.888 1.296-2.888 2.888 0 1.593 1.295 2.889 2.888 2.889s2.888-1.296 2.888-2.889c0-.294-.057-.573-.139-.84l6.667-5.228c.018.015.031.035.049.049.511.412 1.154.639 1.811.639.382 0 .753-.075 1.096-.216l2.627 3.31c-.28.45-.448.965-.448 1.514 0 1.593 1.295 2.889 2.888 2.889 1.592 0 2.888-1.296 2.888-2.889 0-.266-.048-.518-.115-.762l8.736-8.13c.395.203.835.328 1.309.328 1.592 0 2.888-1.296 2.888-2.888s-1.296-2.889-2.889-2.889zm-30.256 16c-.49 0-.888-.398-.888-.889 0-.489.398-.888.888-.888s.888.398.888.888c.001.491-.398.889-.888.889zm10.72-8.464c-.211-.171-.333-.423-.333-.693 0-.489.398-.888.888-.888s.888.398.888.888c0 .237-.092.46-.259.627v.001s0 0-.001 0c-.352.35-.971.235-1.183.065zm6.719 7.693c-.49 0-.888-.398-.888-.889 0-.278.126-.533.348-.704.004-.003.01-.004.014-.008 0 0 .001-.001.001-.001.109-.081.284-.175.526-.175.489 0 .888.398.888.888-.001.49-.399.889-.889.889zm12.817-11.453c-.49 0-.888-.398-.888-.888s.398-.888.888-.888c.489 0 .888.398.888.888s-.398.888-.888.888z"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/help-info-solid.svg b/client/src/static/img/help-info-solid.svg
new file mode 100644
index 00000000000..bd87cd69731
--- /dev/null
+++ b/client/src/static/img/help-info-solid.svg
@@ -0,0 +1 @@
+<svg height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg"><circle cx="20.75" cy="6" r="4"/><path d="m24.84 26.23a1 1 0 0 0 -1.4.29 16.6 16.6 0 0 1 -3.51 3.77c-.33.25-1.56 1.2-2.08 1-.36-.11-.15-.82-.08-1.12l.53-1.57c.22-.64 4.05-12 4.47-13.3.62-1.9.35-3.77-2.48-3.32-.77.08-8.58 1.09-8.72 1.1a1 1 0 0 0 .13 2s3-.39 3.33-.42a.88.88 0 0 1 .85.44 2.47 2.47 0 0 1 -.07 1.71c-.26 1-4.37 12.58-4.5 13.25a2.78 2.78 0 0 0 1.18 3 5 5 0 0 0 3.08.83 8.53 8.53 0 0 0 3.09-.62c2.49-1 5.09-3.66 6.46-5.75a1 1 0 0 0 -.28-1.29z"/><path d="m0 0h36v36h-36z" fill="none"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/info-circle.svg b/client/src/static/img/info-circle.svg
new file mode 100644
index 00000000000..0689c0044ec
--- /dev/null
+++ b/client/src/static/img/info-circle.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#292d32"><path d="m12 22.75c-5.93 0-10.75-4.82-10.75-10.75s4.82-10.75 10.75-10.75 10.75 4.82 10.75 10.75-4.82 10.75-10.75 10.75zm0-20c-5.1 0-9.25 4.15-9.25 9.25s4.15 9.25 9.25 9.25 9.25-4.15 9.25-9.25-4.15-9.25-9.25-9.25z"/><path d="m12 13.75c-.41 0-.75-.34-.75-.75v-5c0-.41.34-.75.75-.75s.75.34.75.75v5c0 .41-.34.75-.75.75z"/><path d="m12 16.9999c-.13 0-.26-.03-.38-.08s-.23-.12-.33-.21c-.09-.1-.16-.2-.21-.33-.05-.12-.08-.25-.08-.38s.03-.26.08-.38.12-.23.21-.33c.1-.09.21-.16.33-.21.24-.1.52-.1.76 0 .12.05.23.12.33.21.09.1.16.21.21.33s.08.25.08.38-.03.26-.08.38c-.05.13-.12.23-.21.33-.1.09-.21.16-.33.21s-.25.08-.38.08z"/></g></svg>
\ No newline at end of file
diff --git a/client/src/static/img/input.svg b/client/src/static/img/input.svg
new file mode 100644
index 00000000000..4ed4605b2c6
--- /dev/null
+++ b/client/src/static/img/input.svg
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.5 1C6.22386 1 6 1.22386 6 1.5C6 1.77614 6.22386 2 6.5 2C7.12671 2 7.45718 2.20028 7.65563 2.47812C7.8781 2.78957 8 3.28837 8 4V11C8 11.7116 7.8781 12.2104 7.65563 12.5219C7.45718 12.7997 7.12671 13 6.5 13C6.22386 13 6 13.2239 6 13.5C6 13.7761 6.22386 14 6.5 14C7.37329 14 8.04282 13.7003 8.46937 13.1031C8.47976 13.0886 8.48997 13.0739 8.5 13.0591C8.51003 13.0739 8.52024 13.0886 8.53063 13.1031C8.95718 13.7003 9.62671 14 10.5 14C10.7761 14 11 13.7761 11 13.5C11 13.2239 10.7761 13 10.5 13C9.87329 13 9.54282 12.7997 9.34437 12.5219C9.1219 12.2104 9 11.7116 9 11V4C9 3.28837 9.1219 2.78957 9.34437 2.47812C9.54282 2.20028 9.87329 2 10.5 2C10.7761 2 11 1.77614 11 1.5C11 1.22386 10.7761 1 10.5 1C9.62671 1 8.95718 1.29972 8.53063 1.89688C8.52024 1.91143 8.51003 1.92611 8.5 1.9409C8.48997 1.92611 8.47976 1.91143 8.46937 1.89688C8.04282 1.29972 7.37329 1 6.5 1ZM14 5H11V4H14C14.5523 4 15 4.44772 15 5V10C15 10.5523 14.5523 11 14 11H11V10H14V5ZM6 4V5H1L1 10H6V11H1C0.447715 11 0 10.5523 0 10V5C0 4.44772 0.447715 4 1 4H6Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/client/src/static/img/json.svg b/client/src/static/img/json.svg
new file mode 100644
index 00000000000..a92f3eec55b
--- /dev/null
+++ b/client/src/static/img/json.svg
@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m1 2h4v2h-2v2l-1 2 1 2v2h2v2h-4v-4l-1-2 1-2zm4 5c.55228475 0 1 .44771525 1 1s-.44771525 1-1 1-1-.44771525-1-1 .44771525-1 1-1zm3 0c.55228475 0 1 .44771525 1 1s-.44771525 1-1 1-1-.44771525-1-1 .44771525-1 1-1zm3 0c.5522847 0 1 .44771525 1 1s-.4477153 1-1 1-1-.44771525-1-1 .4477153-1 1-1zm0-3v-2h4v4l1 2-1 2v4h-4v-2h2v-2l1-2-1-2v-2z" fill="#293040"/></svg>
\ No newline at end of file
diff --git a/client/src/static/img/lap-timer.svg b/client/src/static/img/lap-timer.svg
new file mode 100644
index 00000000000..1de0b3be6ce
--- /dev/null
+++ b/client/src/static/img/lap-timer.svg
@@ -0,0 +1,8 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.49998 0.5C5.49998 0.223858 5.72383 0 5.99998 0H7.49998H8.99998C9.27612 0 9.49998 0.223858 9.49998 0.5C9.49998 0.776142 9.27612 1 8.99998 1H7.99998V2.11922C9.09832 2.20409 10.119 2.56622 10.992 3.13572C11.0116 3.10851 11.0336 3.08252 11.058 3.05806L12.058 2.05806C12.3021 1.81398 12.6978 1.81398 12.9419 2.05806C13.186 2.30214 13.186 2.69786 12.9419 2.94194L11.967 3.91682C13.1595 5.07925 13.9 6.70314 13.9 8.49998C13.9 12.0346 11.0346 14.9 7.49998 14.9C3.96535 14.9 1.09998 12.0346 1.09998 8.49998C1.09998 5.13361 3.69904 2.3743 6.99998 2.11922V1H5.99998C5.72383 1 5.49998 0.776142 5.49998 0.5ZM2.09998 8.49998C2.09998 5.51764 4.51764 3.09998 7.49998 3.09998C10.4823 3.09998 12.9 5.51764 12.9 8.49998C12.9 11.4823 10.4823 13.9 7.49998 13.9C4.51764 13.9 2.09998 11.4823 2.09998 8.49998ZM7.49998 8.49998V4.09998C5.06992 4.09998 3.09998 6.06992 3.09998 8.49998C3.09998 10.93 5.06992 12.9 7.49998 12.9C8.715 12.9 9.815 12.4075 10.6112 11.6112L7.49998 8.49998Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/client/src/static/img/route.svg b/client/src/static/img/route.svg
new file mode 100644
index 00000000000..6699f08361b
--- /dev/null
+++ b/client/src/static/img/route.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-route" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="6" cy="19" r="2" />
+  <circle cx="18" cy="5" r="2" />
+  <path d="M12 19h4.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h3.5" />
+</svg>
+
+
diff --git a/client/src/static/query/selector.fragment.graphql b/client/src/static/query/selector.fragment.graphql
new file mode 100644
index 00000000000..6f3bc847ee7
--- /dev/null
+++ b/client/src/static/query/selector.fragment.graphql
@@ -0,0 +1,63 @@
+{
+    previousPageCursor
+    nextPageCursor
+    tripPatterns {
+        aimedStartTime
+        aimedEndTime
+        expectedEndTime
+        expectedStartTime
+        duration
+        distance
+        legs {
+            id
+            mode
+            aimedStartTime
+            aimedEndTime
+            expectedEndTime
+            expectedStartTime
+            realtime
+            distance
+            duration
+            fromPlace {
+                name
+                quay {
+                    id
+                }
+            }
+            toPlace {
+                name
+                quay {
+                    id
+                }
+            }
+            toEstimatedCall {
+                destinationDisplay {
+                    frontText
+                }
+            }
+            line {
+                publicCode
+                name
+                id
+                presentation {
+                    colour
+                }
+            }
+            authority {
+                name
+                id
+            }
+            pointsOnLink {
+                points
+            }
+            interchangeTo {
+                staySeated
+            }
+            interchangeFrom {
+                staySeated
+            }
+        }
+        systemNotices {
+            tag
+        }
+    }
\ No newline at end of file
diff --git a/client/src/static/query/tripQuery.tsx b/client/src/static/query/tripQuery.tsx
index f435c56e4d6..14c5ed2ec26 100644
--- a/client/src/static/query/tripQuery.tsx
+++ b/client/src/static/query/tripQuery.tsx
@@ -1,97 +1,155 @@
 import { graphql } from '../../gql';
 import { print } from 'graphql/index';
 
+// Generated trip query based on schema.graphql
+
 export const query = graphql(`
-  query trip(
-    $from: Location!
-    $to: Location!
-    $arriveBy: Boolean
-    $dateTime: DateTime
-    $numTripPatterns: Int
-    $searchWindow: Int
-    $modes: Modes
-    $itineraryFiltersDebug: ItineraryFilterDebugProfile
-    $wheelchairAccessible: Boolean
-    $pageCursor: String
-  ) {
-    trip(
-      from: $from
-      to: $to
-      arriveBy: $arriveBy
-      dateTime: $dateTime
-      numTripPatterns: $numTripPatterns
-      searchWindow: $searchWindow
-      modes: $modes
-      itineraryFilters: { debug: $itineraryFiltersDebug }
-      wheelchairAccessible: $wheelchairAccessible
-      pageCursor: $pageCursor
-    ) {
-      previousPageCursor
-      nextPageCursor
-      tripPatterns {
+query trip(
+  $accessEgressPenalty: [PenaltyForStreetMode!]
+  $alightSlackDefault: Int
+  $alightSlackList: [TransportModeSlack]
+  $arriveBy: Boolean
+  $banned: InputBanned
+  $bicycleOptimisationMethod: BicycleOptimisationMethod
+  $bikeSpeed: Float
+  $boardSlackDefault: Int
+  $boardSlackList: [TransportModeSlack]
+  $bookingTime: DateTime
+  $dateTime: DateTime
+  $filters: [TripFilterInput!]
+  $from: Location!
+  $ignoreRealtimeUpdates: Boolean
+  $includePlannedCancellations: Boolean
+  $includeRealtimeCancellations: Boolean
+  $itineraryFilters: ItineraryFilters
+  $locale: Locale
+  $maxAccessEgressDurationForMode: [StreetModeDurationInput!]
+  $maxDirectDurationForMode: [StreetModeDurationInput!]
+  $maximumAdditionalTransfers: Int
+  $maximumTransfers: Int
+  $modes: Modes
+  $numTripPatterns: Int
+  $pageCursor: String
+  $relaxTransitGroupPriority: RelaxCostInput
+  $searchWindow: Int
+  $timetableView: Boolean
+  $to: Location!
+  $transferPenalty: Int
+  $transferSlack: Int
+  $triangleFactors: TriangleFactors
+  $useBikeRentalAvailabilityInformation: Boolean
+  $via: [TripViaLocationInput!]
+  $waitReluctance: Float
+  $walkReluctance: Float
+  $walkSpeed: Float
+  $wheelchairAccessible: Boolean
+  $whiteListed: InputWhiteListed
+) {
+  trip(
+    accessEgressPenalty: $accessEgressPenalty
+    alightSlackDefault: $alightSlackDefault
+    alightSlackList: $alightSlackList
+    arriveBy: $arriveBy
+    banned: $banned
+    bicycleOptimisationMethod: $bicycleOptimisationMethod
+    bikeSpeed: $bikeSpeed
+    boardSlackDefault: $boardSlackDefault
+    boardSlackList: $boardSlackList
+    bookingTime: $bookingTime
+    dateTime: $dateTime
+    filters: $filters
+    from: $from
+    ignoreRealtimeUpdates: $ignoreRealtimeUpdates
+    includePlannedCancellations: $includePlannedCancellations
+    includeRealtimeCancellations: $includeRealtimeCancellations
+    itineraryFilters: $itineraryFilters
+    locale: $locale
+    maxAccessEgressDurationForMode: $maxAccessEgressDurationForMode
+    maxDirectDurationForMode: $maxDirectDurationForMode
+    maximumAdditionalTransfers: $maximumAdditionalTransfers
+    maximumTransfers: $maximumTransfers
+    modes: $modes
+    numTripPatterns: $numTripPatterns
+    pageCursor: $pageCursor
+    relaxTransitGroupPriority: $relaxTransitGroupPriority
+    searchWindow: $searchWindow
+    timetableView: $timetableView
+    to: $to
+    transferPenalty: $transferPenalty
+    transferSlack: $transferSlack
+    triangleFactors: $triangleFactors
+    useBikeRentalAvailabilityInformation: $useBikeRentalAvailabilityInformation
+    via: $via
+    waitReluctance: $waitReluctance
+    walkReluctance: $walkReluctance
+    walkSpeed: $walkSpeed
+    wheelchairAccessible: $wheelchairAccessible
+    whiteListed: $whiteListed
+  ) 
+    {
+    previousPageCursor
+    nextPageCursor
+    tripPatterns {
         aimedStartTime
         aimedEndTime
         expectedEndTime
         expectedStartTime
         duration
         distance
-        generalizedCost
         legs {
-          id
-          mode
-          aimedStartTime
-          aimedEndTime
-          expectedEndTime
-          expectedStartTime
-          realtime
-          distance
-          duration
-          generalizedCost
-          fromPlace {
-            name
-            quay {
-              id
+            id
+            mode
+            aimedStartTime
+            aimedEndTime
+            expectedEndTime
+            expectedStartTime
+            realtime
+            distance
+            duration
+            fromPlace {
+                name
+                quay {
+                    id
+                }
             }
-          }
-          toPlace {
-            name
-            quay {
-              id
+            toPlace {
+                name
+                quay {
+                    id
+                }
             }
-          }
-          toEstimatedCall {
-            destinationDisplay {
-              frontText
+            toEstimatedCall {
+                destinationDisplay {
+                    frontText
+                }
             }
-          }
-          line {
-            publicCode
-            name
-            id
-            presentation {
-              colour
+            line {
+                publicCode
+                name
+                id
+                presentation {
+                    colour
+                }
+            }
+            authority {
+                name
+                id
+            }
+            pointsOnLink {
+                points
+            }
+            interchangeTo {
+                staySeated
+            }
+            interchangeFrom {
+                staySeated
             }
-          }
-          authority {
-            name
-            id
-          }
-          pointsOnLink {
-            points
-          }
-          interchangeTo {
-            staySeated
-          }
-          interchangeFrom {
-            staySeated
-          }
         }
         systemNotices {
-          tag
+            tag
         }
-      }
     }
   }
-`);
+}`);
 
-export const queryAsString = print(query);
+export const queryAsString = print(query);
\ No newline at end of file
diff --git a/client/src/style.css b/client/src/style.css
index eb5cbadf93b..a3f8946b3ec 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -1,39 +1,43 @@
-.app {
-  min-width: 810px;
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: 1fr 2fr;
+  height: 100vh;
+  gap: 0;
 }
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .navbar-brand {
   color: #4078bc;
-  margin-top: 20px;
-  margin-right: 14px;
+  font-size: 2rem;
 }
 
 @media (min-width: 1895px) {
-  .top-content {
-    height: 75px;
-  }
-
   .below-content {
-    height: calc(100vh - 75px);
+    height: calc(100vh - 175px);
   }
 }
 
 @media (max-width: 1896px) {
-  .top-content {
-    height: 150px;
-  }
-
   .below-content {
-    height: calc(100vh - 150px);
+    height: calc(100vh - 175px);
   }
 }
 
-@media (max-width: 1120px) {
-  .top-content {
-    height: 200px;
+@media (max-width: 1250px) {
+  .below-content {
+    height: calc(100vh - 250px);
   }
+}
 
+@media (max-width: 900px) {
   .below-content {
-    height: calc(100vh - 200px);
+    height: calc(100vh - 325px);
   }
 }
 
@@ -50,6 +54,10 @@
   margin-right: 1rem;
 }
 
+.search-bar input.input-tiny {
+  max-width: 50px;
+}
+
 .search-bar input.input-small {
   max-width: 100px;
 }
@@ -73,16 +81,40 @@
   margin: 30px 0 auto 0;
 }
 
-.search-bar .swap-from-to img {
+.input-family {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.swap-from-to img {
   width: 15px;
 }
 
-.itinerary-list-container {
-  width: 36rem;
+.logo-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.logo-container .details {
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 4px;
+  text-align: left;
+}
+
+.logo-image {
+  margin-right: 2px;
+}
+
+.left-pane-container {
+  font-size: 12px;
+  width: 100%;
   overflow-y: auto;
+  min-width: 300px;
 }
 
-.itinerary-list-container .time-zone-info {
+.left-pane-container .time-zone-info {
   margin: 10px 20px;
   font-size: 12px;
   text-align: right;
@@ -207,3 +239,208 @@
 .maplibregl-ctrl-group.layer-select div.layer {
   margin-left: 17px;
 }
+
+.right-menu-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 100%;
+  background-color: #f4f4f4;
+  overflow-x: hidden;
+  transition: 0.3s;
+  padding-top: 60px;
+  box-shadow: none;
+}
+
+.right-menu-container.open {
+  width: 250px;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar-button.right {
+  position: absolute;
+  right: 0; /* Default position when sidebar is closed */
+  background: #fff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 10px;
+  cursor: pointer;
+  transition:
+    right 0.3s,
+    background-color 0.2s; /* Smooth transitions */
+}
+
+.sidebar-button.right.open {
+  right: 270px; /* Shifted position when sidebar is open */
+}
+
+.sidebar-button.active {
+  background: #fff;
+}
+
+.sidebar-button:hover {
+  background: #4078bc; /* Slightly darker when hovered */
+}
+
+.sidebar-button.active:hover {
+  background: #fff;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* For Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+.default-tooltip-container {
+  position: relative;
+  cursor: pointer;
+}
+
+.pagination-controls {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.default-tooltip-icon {
+  width: 10px;
+  height: 10px;
+}
+.argument-label {
+  padding-right: 2px;
+}
+
+/* Sidebar Container */
+.sidebar-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-top: black 1px solid;
+}
+
+/* Sidebar Navigation */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40px;
+  background-color: #f7f7f7;
+  border-right: 1px solid #ccc;
+}
+
+/* Sidebar Buttons */
+.sidebar-button {
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  border-radius: 8px;
+  margin: 5px 0;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
+}
+
+.sidebar-button:hover {
+  background-color: #e0e0e0;
+}
+
+.sidebar-button.active {
+  background-color: #ddd;
+  font-weight: bold;
+}
+
+/* Content Area */
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  margin: 5px;
+}
+
+.panel-header {
+  font-size: 24px;
+  text-align: center;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.argument-list {
+  font-size: 12px;
+  line-height: 1;
+}
+
+.argument-list button {
+  font-size: 13px;
+  padding: 5px 10px;
+  margin: 5px 0;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.argument-list button:hover {
+  background-color: #0056b3; /* Darker on hover */
+}
+
+.argument-list input[type='text'],
+.argument-list input[type='number'],
+.argument-list input[type='datetime-local'],
+select {
+  font-size: 12px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid #ccc; /* Bottom border only */
+  background: none;
+  box-sizing: border-box;
+}
+
+.argument-list input[type='text'],
+.argument-list input[type='number'] {
+  width: 50px;
+}
+.argument-list input[type='datetime-local'] {
+  width: 140px;
+}
+
+input.comma-separated-input[type='text'],
+input.comma-separated-input[type='number'] {
+  width: 140px;
+}
+
+.remove-argument {
+  margin-left: 2px;
+  color: red;
+  cursor: pointer;
+}
+
+.reset-button {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  /* The transform ensures the button is vertically centered
+     if your header has a fixed height or if text is multiline. */
+}
+
+.panel-header button {
+  font-size: 13px;
+  padding: 5px 10px;
+  margin: 5px 0;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.panel-header button:hover {
+  background-color: #0056b3; /* Darker on hover */
+}
diff --git a/client/src/util/generate-arguments.cjs b/client/src/util/generate-arguments.cjs
new file mode 100644
index 00000000000..d2ff4b639b7
--- /dev/null
+++ b/client/src/util/generate-arguments.cjs
@@ -0,0 +1,130 @@
+const {
+  isScalarType,
+  isInputObjectType,
+  isNonNullType,
+  isListType,
+  isEnumType,
+} = require('graphql');
+
+/**
+ * Utility function to resolve the named type (unwrapping NonNull and List types)
+ */
+function getNamedType(type) {
+  let namedType = type;
+  while (isNonNullType(namedType) || isListType(namedType)) {
+    namedType = namedType.ofType;
+  }
+  return namedType;
+}
+
+/**
+ * Recursively breaks down a GraphQL type into its primitive fields with default values
+ */
+function resolveType(type, schema = new Set()) {
+  const namedType = getNamedType(type);
+
+
+  if (isScalarType(namedType)) {
+    return { type: 'Scalar', subtype: namedType.name };
+  }
+
+  if (isEnumType(namedType)) {
+    return { type: 'Enum', values: namedType.getValues().map((val) => val.name) };
+  }
+
+  if (isInputObjectType(namedType)) {
+    const fields = namedType.getFields();
+    const fieldTypes = {};
+
+        Object.keys(fields).forEach((fieldName) => {
+      const field = fields[fieldName];
+
+      // Exclude deprecated fields within input objects
+      if (field.deprecationReason) {
+        return; // Skip deprecated fields
+      }
+
+      const fieldType = field.type;
+      const isList = isListType(fieldType); // Detect if the field is a list
+      const fieldDefaultValue = field.defaultValue !== undefined ? field.defaultValue : null;
+
+      // Include defaultValue consistently, setting it to null if not defined
+      fieldTypes[fieldName] = {
+        type: resolveType(fieldType, schema),
+        defaultValue: fieldDefaultValue,
+        isList, // Explicitly indicate if it's a list
+      };
+    });
+    return { type: 'InputObject', name: namedType.name, fields: fieldTypes };
+  }
+
+  // Handle interfaces and unions if necessary
+  // For simplicity, treating them as strings
+  return { type: 'Scalar', subtype: 'String' };
+}
+
+/**
+ * Plugin to generate a JSON file with all arguments from a specified query,
+ * excluding deprecated arguments based on deprecationReason,
+ * and including their types, default values,
+ * and whether they support multiple selection.
+ */
+const generateTripArgsJsonPlugin = async (schema) => {
+  try {
+    const queryType = schema.getQueryType();
+    if (!queryType) {
+      console.error('No Query type found in the schema.');
+      return JSON.stringify({ error: 'No Query type found in the schema' }, null, 2);
+    }
+
+    const tripField = queryType.getFields()['trip'];
+    if (!tripField) {
+      console.error('No trip query found in the schema.');
+      return JSON.stringify({ error: 'No trip query found in the schema' }, null, 2);
+    }
+
+    const args = tripField.args;
+    const argsJson = {};
+
+    args.forEach((arg) => {
+      if (arg.deprecationReason) {
+        return; // Skip deprecated arguments
+      }
+
+            const argName = arg.name;
+      const argType = resolveType(arg.type, schema);
+      const argDefaultValue = arg.defaultValue !== undefined ? arg.defaultValue : null;
+      const isList = isListType(arg.type); // Detect if the argument is a list
+
+      // Consistent representation for enum types
+      if (argDefaultValue !== null) {
+        argsJson[argName] = {
+          type: argType,
+          defaultValue: argDefaultValue,
+          isList, // Explicitly indicate if it's a list
+        };
+      } else {
+        argsJson[argName] = {
+          type: argType,
+          isList, // Explicitly indicate if it's a list
+        };
+      }
+    });
+
+    const output = {
+      trip: {
+        arguments: argsJson,
+      },
+    };
+
+    // Stringify the JSON with indentation for readability
+    return JSON.stringify(output, null, 2);
+  } catch (error) {
+    console.error('Error generating tripArguments.json:', error);
+    return JSON.stringify({ error: 'Failed to generate trip arguments JSON' }, null, 2);
+  }
+};
+
+module.exports = {
+  plugin: generateTripArgsJsonPlugin,
+};
diff --git a/client/src/util/generate-queries.cjs b/client/src/util/generate-queries.cjs
new file mode 100644
index 00000000000..00366bc6a11
--- /dev/null
+++ b/client/src/util/generate-queries.cjs
@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Plugin to generate GraphQL queries dynamically from schema
+ */
+const generateQueriesPlugin = async (schema) => {
+  const queryType = schema.getQueryType();
+  if (!queryType) {
+    return '// No Query type found in the schema';
+  }
+
+  // Read the content from the input file to replace "replacementContent"
+  const inputFilePath = path.join(__dirname, '../static/query/selector.fragment.graphql');
+  let replacementContent = '';
+
+  try {
+    replacementContent = fs.readFileSync(inputFilePath, 'utf-8').trim();
+  } catch (error) {
+    console.error(`Failed to read the input file at ${inputFilePath}`, error);
+    return '// Error: Failed to read the input file';
+  }
+
+  const queryFields = queryType.getFields();
+  const queries = [];
+
+  Object.keys(queryFields).forEach((fieldName) => {
+    if (fieldName === 'trip') {
+      // Only interested in the trip query
+      const field = queryFields[fieldName];
+
+      // Filter out deprecated arguments using deprecationReason - isDeprecated does not work
+      const validArgs = field.args.filter((arg) => !arg.deprecationReason);
+
+      // Generate the arguments for the query with filtered arguments
+      const args = validArgs.map((arg) => `  $${arg.name}: ${arg.type}`).join('\n');
+
+      // Generate the arguments for the query variables with filtered arguments
+      const argsForQuery = validArgs.map((arg) => `    ${arg.name}: $${arg.name}`).join('\n');
+
+      const query = `import { graphql } from '../../gql';
+import { print } from 'graphql/index';
+
+// Generated trip query based on schema.graphql
+
+export const query = graphql(\`
+query ${fieldName}(
+${args}
+) {
+  ${fieldName}(
+${argsForQuery}
+  ) 
+    ${replacementContent}
+  }
+}\`);
+
+export const queryAsString = print(query);`;
+      queries.push(query.trim()); // Trim unnecessary whitespace
+    }
+  });
+
+  return queries.join('\n\n'); // Separate queries with a blank line
+};
+
+module.exports = {
+  plugin: generateQueriesPlugin,
+};